/* Frostline's look on the shared v5 frame, from the brand sheet (src/brand/brand-sheet.png): locate-paint colors on
   concrete off-white, asphalt charcoal for dark bands, sewer green for buttons, water blue for Percy, locate orange as
   the one alert accent. Headlines use the frame's Archivo at its condensed width; the frost line (a dashed line with
   the down triangle) marks the hero and the closing band. */
:root {
  --paper: #F2EFE9; --white: #FFFFFF; --ink: #26292B; --body: #45494C; --soft: #5C6063; --line: #DEDAD2; --line-2: #CBC6BC;
  --night: #26292B; --night-2: #33373A; --on-night: #F2EFE9; --on-night-soft: #BDBAB3;
  --sun: #2E7D44; --sun-press: #256638; --sun-ink: #FFFFFF; --sun-tint: #E2EEE4; --sun-line: #A9CFB2; --ok: #2E7D44;
  --tile: #6BBF7E; --tile-ink: #17281C; --coral: #EB5D1A; --blue: #1D639C; --blue-press: #174F7D;
  --shadow: 0 1px 2px rgba(38,41,43,.06), 0 12px 32px -12px rgba(38,41,43,.22);
}
.x-pl { background: var(--night-2); }
/* Highlights on dark: a light sewer green, with dark text. */
.x-suggest, .x-ask span, .x-pl-key .k-n { background: var(--tile); color: var(--tile-ink); }
.x-pl-bars > div::after { background: var(--tile) !important; }
.x-warn { border-left-color: var(--coral); }
.flow .who { color: var(--tile); }
.on-night .btn-sun, .x-end .btn-sun, .cta .btn-sun, .v4p .cta .btn:not(.btn-line) { background: var(--tile); color: var(--tile-ink); }
.on-night .btn-sun:hover, .x-end .btn-sun:hover, .cta .btn-sun:hover { background: #82CB93; }
.ticks li::before { background-color: var(--sun-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }
.v4p .f-y { background: var(--sun-tint); }
:focus-visible { outline-color: var(--sun); }

/* Type: Archivo at its condensed width for headlines (the brand sheet's condensed sans); reading text stays normal. */
.v5 { --x-wide: 74%; }
h1 { font-stretch: 74%; font-weight: 800; letter-spacing: -.005em; font-size: clamp(46px, 6.4vw, 84px); }
h2 { font-stretch: 76%; font-weight: 780; letter-spacing: 0; font-size: clamp(32px, 3.8vw, 50px); }
h3 { font-stretch: 88%; letter-spacing: 0; }
.v5 h2 { font-stretch: var(--x-wide); letter-spacing: 0; font-size: clamp(36px, 4.2vw, 58px); max-width: 18ch; }
.x-hero h1 { font-stretch: var(--x-wide); letter-spacing: -.005em; font-size: clamp(52px, 6.6vw, 96px); max-width: 12ch; }
.x-num, .x-amt b { font-stretch: var(--x-wide); letter-spacing: 0; }
.x-amt b { font-size: 60px; }
/* Small labels in a stencil-like mono, like truck lettering. */
.x-kicker, .x-panel-h, .x-pl-key, .crumbs { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.crumbs a, .crumbs span { text-transform: uppercase; }

/* The frost line: a dashed line with the down triangle, under the hero and over the closing band. */
.x-hero { position: relative; }
.x-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 0h24L12 16z' fill='%23EB5D1A'/%3E%3C/svg%3E") calc(62% - 12px) 0 / 24px 18px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 24px) 0 17px / 100% 3px no-repeat; }
.x-end { position: relative; background-image: url(/img/contours.svg); background-size: cover; background-position: center; }
.x-end::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 0h24L12 16z' fill='%23EB5D1A'/%3E%3C/svg%3E") calc(38% - 12px) 2px / 24px 18px no-repeat,
    repeating-linear-gradient(90deg, var(--on-night) 0 14px, transparent 14px 24px) 0 0 / 100% 3px no-repeat; }
/* Contour lines behind the dark bands (brand sheet B9). */
.x-night, .v4p .cta { background-image: url(/img/contours.svg); background-size: cover; background-position: center; }

/* The live product, embedded and live: no fake browser bar, the real app clickable from the start. */
.live .frame { border-radius: 14px; }
.live .frame-stage iframe { background: var(--paper); }
.live-open { display: none; }
@media (max-width: 700px) {
  .live .frame-stage { aspect-ratio: 4 / 5; }
  .live-open { display: inline-flex; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; box-shadow: var(--shadow); }
}
.live-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* Live demos: the picture stays until the app inside has loaded (site.mjs LIVE_WAIT). */
.ph-screen iframe.wl-loading, .live .frame-stage iframe.wl-loading { opacity: 0; pointer-events: none; }
.ph-screen iframe, .live .frame-stage iframe { transition: opacity .35s ease; }

/* Rendered device pictures (img/device/<name>.webp): the phone, its frame and the screen in one image. */
.dev { margin: 0; }
.dev img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(8,30,38,.28)); }
.phs .dev { width: min(260px, 30vw); }
.phs .dev:nth-child(2) { margin-bottom: 36px; }
@media (max-width: 700px) { .phs .dev { width: 44vw; } .phs .dev:nth-child(3) { display: none; } }
.v4p .pair-row .dev { width: min(300px, 72%); margin: 0 auto; }

/* iPhone 16 Pro frame (img/device/iphone-16-pro.svg, drawn at 3x to the real sizes: 1206x2622 px screen with a 55 pt
   corner, thin black border, titanium edge, Dynamic Island, side buttons). The app screen sits in .ph-screen under the
   frame. Screen units: 1 pt = 100/402 cqw. The status bar is 54 pt tall with its items level with the Dynamic Island.
   Screenshots keep their own aspect ratio: full width, top aligned, the bottom few points hidden under the frame. */
.ph { margin: 0; position: relative; aspect-ratio: 1316 / 2712; filter: drop-shadow(0 26px 34px rgba(20, 22, 24, .26)) drop-shadow(0 4px 8px rgba(20, 22, 24, .14)); }
.ph::after { content: ''; position: absolute; inset: 0; background: url(/img/device/iphone-16-pro.svg) center / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.ph-screen { position: absolute; left: 3.95%; top: 1.55%; width: 92.1%; height: 96.9%; border-radius: 14% / 6.45%; overflow: hidden; background: var(--screen, #F5F7F9); container-type: inline-size; }
.ph-screen img { display: block; width: 100%; height: auto; }
.ph-screen::after { content: ''; position: absolute; left: 50%; bottom: .92%; transform: translateX(-50%); width: 34.6%; height: .6%; border-radius: 99px; background: #0E1A1F; opacity: .9; z-index: 1; }
.ph-screen iframe { position: absolute; left: 0; right: 0; bottom: 0; top: 13.43cqw; width: 100%; height: calc(100% - 13.43cqw); border: 0; background: var(--screen, #F5F7F9); }
.ph-status { height: 13.43cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 0; color: #0E1A1F; position: relative; }
.ph-status b { width: 34cqw; text-align: center; padding-left: 4cqw; font: 600 4.23cqw/1 -apple-system, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -.02em; margin-top: 1.4cqw; }
.ph-status i { display: none; }
.ph-status span { width: 34cqw; padding-right: 4cqw; display: flex; justify-content: center; gap: 1.5cqw; align-items: center; margin-top: 1.4cqw; }
.ph-status svg { height: 2.95cqw; width: auto; fill: currentColor; }
.phs { display: flex; gap: clamp(14px, 3vw, 36px); justify-content: center; align-items: flex-end; }
.phs .ph { width: min(260px, 30vw); }
.phs .ph:nth-child(2) { margin-bottom: 36px; }
@media (max-width: 700px) { .phs .ph { width: 44vw; } .phs .ph:nth-child(3) { display: none; } }

/* Percy band */
.x-percy { background: var(--blue); color: #DCE8F3; padding: var(--x-band, 96px) 0; position: relative; overflow: hidden; }
.x-percy h2 { color: #fff; }
.x-percy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.x-percy .x-points dt { color: #fff; } .x-percy .x-points dd { color: #DCE8F3; }
.x-percy .btn-sun { background: var(--paper); color: var(--ink); } .x-percy .btn-sun:hover { background: #fff; }
.x-percy .x-points > div { border-color: rgba(255,255,255,.22); }
.x-percy .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.x-percy-art { position: relative; }
.x-percy-art .who { position: absolute; left: -6%; bottom: -8%; height: 62%; width: auto; z-index: 2; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
@media (max-width: 900px) { .x-percy-grid { grid-template-columns: 1fr; } .x-percy-art .who { display: none; } }

/* Get paid: the sample invoice beside the points (still Waterline's picture; QUESTIONS.md) */
.x-brand-doc:not(.x-brand-phone) img { border-radius: 6px; box-shadow: 0 1px 2px rgba(38,41,43,.08), 0 30px 60px -24px rgba(38,41,43,.4); }
.x-paid .x-brand-doc:not(.x-brand-phone) img { max-height: 820px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
.x-points-tight > div { padding-top: 14px; padding-bottom: 14px; }
.x-paid .tlink { display: inline-block; margin-top: 18px; }

/* iPhone Duo section (shared player and styles in hosting/www/v5) */
.fold-show { --fold-bg: #ECEDEA; } /* the frames' background (img/duo/manifest.json canvas_bg) */
.fold-meta { margin-top: 22px; }

/* Price cards: the full terms under each price */
.x-terms { list-style: none; margin: 10px 0 14px; padding: 0; font-size: 14.5px; color: var(--body); }
.x-terms li { padding: 3px 0 3px 20px; position: relative; }
.x-terms li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 2px; background: var(--tile); }

/* Contact page and form */
.wl-contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .wl-contact { grid-template-columns: 1fr; } }
.wl-form, .wl-thanks { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; box-shadow: var(--shadow); }
.wl-form h2, .wl-thanks h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0; }
.wl-form-note { margin: -6px 0 4px; color: var(--body); }
.wl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .wl-row2 { grid-template-columns: 1fr; } }
.wl-form label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.wl-form .opt { font-weight: 400; color: var(--soft); }
.wl-form input:not([type="hidden"]), .wl-form select, .wl-form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px; }
.wl-form textarea { resize: vertical; min-height: 130px; }
.wl-form input:focus, .wl-form select:focus, .wl-form textarea:focus { outline: 2px solid var(--tile); outline-offset: 1px; border-color: var(--sun); }
.wl-form .wl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-form { position: relative; }
.wl-consent { margin: 0; font-size: 13.5px; color: var(--soft); }
.wl-consent a { color: var(--ink); }
.wl-form .submit-btn { justify-self: start; border: 0; cursor: pointer; }
.wl-form .submit-btn[disabled] { opacity: .7; cursor: wait; }
.wl-form-error { margin: 0; color: #B42318; font-size: 14.5px; }
.wl-thanks { text-align: center; justify-items: center; }
.wl-thanks img { height: 150px; width: auto; }
.wl-thanks p { margin: 0; color: var(--body); max-width: 32em; }
.wl-contact-side .rows { margin: 0; }
.wl-trial { margin: 22px 0 0; color: var(--body); }

/* Inner pages */
.v4p .shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #fff; }
.v4p .shot img { display: block; width: 100%; height: auto; }
.v4p .pair-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.v4p .pair-row + .pair-row { margin-top: clamp(56px, 7vw, 96px); }
.v4p .pair-row.flip > :first-child { order: 2; }
.v4p .pair-row .ph { width: min(300px, 72%); margin: 0 auto; }
.v4p .pair-row h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; }
.v4p .pair-row p { color: var(--body); }
.v4p .pair-row .ticks { margin-top: 14px; }
@media (max-width: 900px) { .v4p .pair-row { grid-template-columns: 1fr; } .v4p .pair-row.flip > :first-child { order: 0; } }
.v4p .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; counter-reset: s; }
.v4p .steps li { counter-increment: s; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.v4p .steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--tile); color: var(--tile-ink); font-weight: 700; margin-bottom: 12px; }
.v4p .steps b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.v4p .steps span { color: var(--body); font-size: 15.5px; }
.v4p [data-phone-live] .ph { width: min(340px, 86%); }
.wl-form[hidden], .wl-thanks[hidden] { display: none; }
.wl-thanks:focus { outline: none; }

/* The interactive demo's placeholder until the demo is ready (site.mjs DEMO_READY). */
.demo-soon { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 48px 32px; text-align: center; }
.demo-soon p { max-width: 34em; margin: 0 auto 8px; color: var(--body); }
.demo-soon .demo-soon-h { font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.demo-soon .cta-actions { justify-content: center; margin-top: 20px; }

/* Percy beside the heading on /percy. */
.phero-art img { display: block; height: 260px; width: auto; }
@media (max-width: 860px) { .phero-art { display: none; } }

/* Get paid: the signed estimate on a phone, in place of a printed document. */
.x-brand-phone { transform: none; max-width: 360px; width: 100%; margin: 0 auto; }
.x-paid .x-brand-phone img, .x-brand-phone img { border-radius: 0; box-shadow: none; max-height: none; width: 100%; background: none; }