/* ==========================================================================
   pricewise.ai 1.2 — finish layer, loaded after site.css.
   Spacing, depth, text wrapping and the POS logo strip. No content changes:
   every rule here restyles markup the pages already have.
   ========================================================================== */

/* Text: no single word left alone on a last line; headings wrap evenly. */
p, li, summary, .wp-block-details summary { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Hero photo: the receiving-dock shot is framed on the phone. */
.pw-hero-scene .pw-hero-photo img[src*="dock-portrait"] { object-position: 50% 66%; }
@media (max-width: 760px) { .pw-hero-scene .pw-hero-photo img[src*="dock-portrait"] { object-position: 50% 62%; } }

/* Figures line up in columns. */
.ab-records-window, .pw-dialog, .ab-contact-phone { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons: a little depth, so they read as pressable.
   -------------------------------------------------------------------------- */

:is(.pw-btn, .is-style-pw-btn) .wp-block-button__link,
.pw-form-button {
	box-shadow: 0 1px 0 #ffffff29 inset, 0 1px 2px #0b2a1a33, 0 8px 18px -10px #0f6b4580;
}
:is(.pw-btn, .is-style-pw-btn) .wp-block-button__link:hover,
.pw-form-button:hover {
	box-shadow: 0 1px 0 #ffffff29 inset, 0 2px 4px #0b2a1a33, 0 14px 26px -12px #0f6b4599;
}
:is(.pw-btn-light, .is-style-pw-btn-light) .wp-block-button__link {
	box-shadow: 0 1px 0 #ffffff80 inset, 0 10px 24px -12px #d2ed8b99;
}

/* --------------------------------------------------------------------------
   POS logos: one tone, sized by visual weight rather than a fixed box.
   -------------------------------------------------------------------------- */

.ab-pos > p { flex: none; min-width: 0; white-space: nowrap; }
.ab-pos-logos img {
	width: auto;
	max-width: none;
	height: 24px;
	filter: grayscale(1) brightness(0);
	opacity: 0.52;
	transition: opacity 0.25s;
}
.ab-pos-logos img:hover { opacity: 0.8; }
.ab-pos-logos img[alt="LOC"] { height: 38px; }
.ab-pos-logos img[alt="BRdata"] { height: 25px; }
.ab-pos-logos img[alt="NCR Voyix"] { height: 19px; }
.ab-pos-logos img[alt="ECRS"] { height: 22px; }
.ab-pos-logos img[alt="Toshiba"] { height: 20px; }

/* The strip glides (site.js adds .is-marquee; reduced motion keeps the still row). */
.ab-pos-logos.is-marquee {
	flex: 1;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.pw-marquee-track {
	display: flex;
	flex: none;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
	animation: pw-marquee var(--pw-marquee-time, 40s) linear infinite;
}
/* The section fade-in animates this box's children; the strip keeps its own motion and the box fades as a whole. */
.ab-pos-logos.is-marquee.pw-reveal-in { animation: pw-fade 0.6s ease both; }
.ab-pos-logos.is-marquee.pw-reveal-in > .pw-marquee-track { animation: pw-marquee var(--pw-marquee-time, 40s) linear infinite; }
.ab-pos-logos.is-marquee:hover .pw-marquee-track { animation-play-state: paused; }
@keyframes pw-marquee { to { transform: translate3d(-100%, 0, 0); } }

@media (max-width: 760px) {
	.ab-pos-logos.is-marquee { width: calc(100% + 40px); margin-inline: -20px; }
	.pw-marquee-track { gap: 44px; padding-right: 44px; }
	.ab-pos-logos img { height: 21px; }
	.ab-pos-logos img[alt="LOC"] { height: 32px; }
	.ab-pos-logos img[alt="BRdata"] { height: 21px; }
	.ab-pos-logos img[alt="NCR Voyix"] { height: 16px; }
	.ab-pos-logos img[alt="ECRS"] { height: 19px; }
	.ab-pos-logos img[alt="Toshiba"] { height: 17px; }
}

/* --------------------------------------------------------------------------
   More room between sections on larger screens.
   -------------------------------------------------------------------------- */

@media (min-width: 761px) {
	.ref-section { padding-block: 88px; }
	.ab-invoice-records { padding-block: 88px; }
	.ref-insights-teaser { padding-block: 76px; }
	.pw-pricing { margin-block: 28px 48px; }
	.ab-faq { padding-block: 88px 104px; }
	.ab-pos { padding-block: 40px 20px; }
}

/* --------------------------------------------------------------------------
   Depth: hairline plus a soft shadow on every raised surface.
   -------------------------------------------------------------------------- */

.pw-hero-scene { box-shadow: 0 40px 80px -48px #0b1f1480; }
@media (max-width: 760px) { .pw-hero-scene { box-shadow: 0 22px 36px -28px #0b1f1459; } }
.ref-work-comparison { box-shadow: 0 1px 2px #17352008, 0 28px 56px -40px #1735202e; }
.ab-records-art { box-shadow: 0 30px 60px -44px #17352038; }
.ab-records-window { box-shadow: 0 1px 2px #17352010, 0 18px 40px -22px #1735202e; }
.pw-pricing { box-shadow: 0 50px 90px -56px #0b1f14b3; }
.request-card { box-shadow: 0 36px 70px -36px #000000a6; }

/* Header: crisper once the page has scrolled. */
.pw-header.is-scrolled { background: #ffffffeb; box-shadow: 0 1px 0 #173d251a, 0 10px 28px -12px #0f2a1a1f; }

/* Links inside text. */
.pw-prose a, .pw-form-note a, .ab-contact-links a { text-underline-offset: 3px; }

/* Dock hero: the landscape photo on wide screens (a <picture> source), framed on the phone. */
.pw-hero-photo picture { display: contents; }
@media (min-width: 1200px) { .pw-hero-scene .pw-hero-photo img[src*="dock-portrait"] { object-position: 50% 28%; } }

/* Invoice window: department after the invoice number. */
.ab-record-number i { font-style: normal; }
.ab-record-number i::before { content: '·'; margin: 0 5px 0 1px; }

/* Photo caption: over the phone screen (the camera on the invoice) the letters get a soft local shade. */
.pw-hero-caption h2 { text-shadow: 0 0 22px #0008, 0 1px 3px #0006; }
.pw-hero-caption p { text-shadow: 0 0 14px #0007; }

/* Hero: the buttons sit under the paragraph, one block with the headline. */
.ab-hero-bottom { flex-direction: column; align-items: flex-start; gap: 26px; }
.ab-hero-bottom > p { max-width: 560px; }

/* --------------------------------------------------------------------------
   Surfaces (the "surfaces" move): the film window is the reference. Panels
   take its corner (18 px, 14 px on phones), hairline ring and long soft
   shadow; the cards inside them a 12 px corner and a lighter ring. Rings
   replace borders, so every edge is one hairline and never doubles up.
   -------------------------------------------------------------------------- */

.pw-move-surfaces .ref-work-comparison,
.pw-move-surfaces .ab-records-art { border: 0; border-radius: var(--pw-r-panel); box-shadow: var(--pw-ring), var(--pw-shadow-panel); }
.pw-move-surfaces .ab-records-window { border: 0; border-radius: var(--pw-r-card); box-shadow: var(--pw-ring-card), var(--pw-shadow-card); }
.pw-move-surfaces .pw-pricing,
.pw-move-surfaces .request-card,
.pw-move-surfaces .pw-dialog { border-radius: var(--pw-r-panel); }
/* Section 02's arch, which shows only with the "card" move off (the card takes its place and brings its own surfaces, sections.css). */
.pw-move-surfaces .ref-flow-calculation { border: 0; border-radius: var(--pw-r-card); box-shadow: var(--pw-ring-card), var(--pw-shadow-card); }
.pw-move-surfaces .ref-flow-output { border-radius: var(--pw-r-card); }
.pw-move-surfaces .ref-price-flow { border-radius: 50% 50% var(--pw-r-panel) var(--pw-r-panel); }
.pw-move-surfaces .pf-item { border-radius: var(--pw-r-detail); }
@media (prefers-reduced-motion: no-preference) {
	.pw-move-surfaces .ref-price-flow:hover .ref-flow-calculation { box-shadow: var(--pw-ring-card), 0 1px 2px #1a19160d, 0 18px 34px -18px #17352038; }
}
/* At 360 px and below the page's side margin is 16 px (site.css .ab-wrap), so the logo strip bleeds 16 px, not 20 (no sideways scroll). */
@media (max-width: 360px) { .ab-pos-logos.is-marquee { width: calc(100% + 32px); margin-inline: -16px; } }