/* Waterline's colors on the shared v5 look: deep teal for buttons and dark bands, the aqua pool tile for highlights
   on dark, coral for the one odd tile. The waterline tile band marks the hero and the closing band. */
:root {
  --paper: #F1F6F7; --white: #FFFFFF; --ink: #102A33; --body: #43535B; --soft: #66767E; --line: #D8E3E6; --line-2: #C3D3D7;
  --night: #0B3540; --night-2: #114754; --on-night: #E8F4F6; --on-night-soft: #A5C4CB;
  --sun: #0E4A5A; --sun-press: #0A3B48; --sun-ink: #FFFFFF; --sun-tint: #E3F3F5; --sun-line: #A8D9DF; --ok: #1E7F6A;
  --tile: #5FB3BD; --tile-ink: #062C35; --coral: #F26E5B;
}
.x-pl { background: #0F4452; }
/* Highlights on dark: the aqua tile, 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(--tile); }
.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: #79C4CC; }
.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='%230E4A5A' 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(--tile); }

/* The waterline: a band of small square pool tile, one coral tile in it, sitting on a soft wave. */
.tileband { height: 12px; background:
  linear-gradient(90deg, transparent calc(50% - 7px), var(--coral) calc(50% - 7px) calc(50% + 5px), transparent calc(50% + 5px)),
  repeating-linear-gradient(90deg, var(--tile) 0 12px, #fff 12px 14px); opacity: .95; }
.x-hero { position: relative; }
.x-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--tile) 0 12px, #fff 12px 14px); opacity: .9; }
.x-end { position: relative; }
.x-end::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--tile) 0 12px, var(--night) 12px 14px); }

/* 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; }

/* Phones: a real iPhone frame with status bar for app screens. */
.ph { margin: 0; position: relative; aspect-ratio: 390 / 844; border-radius: 15% / 7%; padding: 3.4%; background: linear-gradient(145deg, #2B3A40, #0E1A1F 40%, #1C2A30); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.10), 0 30px 60px -22px rgba(8,30,38,.5); }
.ph-screen { position: relative; height: 100%; border-radius: 12.5% / 5.8%; overflow: hidden; background: var(--screen, #F5F7F9); container-type: inline-size; }
.ph-screen img { display: block; width: 100%; height: auto; }
.ph-screen iframe { position: absolute; left: 0; right: 0; bottom: 0; top: 11.4cqw; width: 100%; height: calc(100% - 11.4cqw); border: 0; background: var(--screen, #F5F7F9); }
.ph-status { height: 11.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5cqw 0 9cqw; color: #0E1A1F; position: relative; }
.ph-status b { font: 650 4.1cqw/1 -apple-system, 'Inter', sans-serif; }
.ph-status i { position: absolute; left: 50%; top: 2.6cqw; transform: translateX(-50%); width: 31cqw; height: 9cqw; border-radius: 99px; background: #05090B; }
.ph-status span { display: flex; gap: 1.6cqw; align-items: center; }
.ph-status svg { height: 3.2cqw; 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; } }

/* Marco band */
.x-marco { background: var(--night); color: var(--on-night-soft); padding: var(--x-band, 96px) 0; position: relative; overflow: hidden; }
.x-marco h2 { color: #fff; }
.x-marco-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.x-marco .x-points dt { color: #fff; } .x-marco .x-points dd { color: var(--on-night-soft); }
.x-marco .x-points > div { border-color: rgba(255,255,255,.14); }
.x-marco .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.x-marco-art { position: relative; }
.x-marco-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-marco-grid { grid-template-columns: 1fr; } .x-marco-art .who { display: none; } }

/* Printed estimate in the brand section */
.x-brand-doc img { border-radius: 6px; box-shadow: 0 1px 2px rgba(16,42,51,.08), 0 30px 60px -24px rgba(16,42,51,.4); }

/* 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%); }