/* Brandmere Studio. Direction: the contractor's own world — drywall white, graphite pencil,
   chalk-line blue, concrete gray — and tool-brand lettering (Archivo expanded) for headlines.
   One bold element: the live phone in the hero that builds a site with the visitor's name. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --wall: #f2f3f1;
  --paper: #ffffff;
  --graphite: #20242a;
  --graphite-2: #545a62;
  --concrete: #c6cac9;
  --chalk: #1e4fd8;
  --chalk-ink: #163da8;
  --pencil: #f4c21b;
  --wide: 125%;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--graphite); font: 400 17px/1.6 "Archivo", system-ui, sans-serif; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 48rem) { .wrap { padding-inline: 40px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--graphite); color: #fff; padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

h1, h2, h3 { margin: 0; font-stretch: var(--wide); font-weight: 800; letter-spacing: -.025em; line-height: .98; }
h1 { font-size: clamp(40px, 5.6vw, 76px); }
h2 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.02; }
h3 { font-size: 21px; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--graphite-2); max-width: 34em; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; font: 700 16px/1 "Archivo", sans-serif; font-stretch: 112%; text-decoration: none; border: 2px solid var(--graphite); border-radius: 4px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-main { background: var(--chalk); border-color: var(--chalk); color: #fff; }
.btn-main:hover { background: var(--chalk-ink); border-color: var(--chalk-ink); }
.btn-line { background: transparent; }
.btn-line:hover { background: var(--graphite); color: #fff; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--wall); border-bottom: 1px solid var(--concrete); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mark { font-weight: 800; font-stretch: var(--wide); font-size: 21px; letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.mark i { width: 22px; height: 22px; background: var(--chalk); display: block; clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%, 64% 100%, 64% 62%, 36% 62%, 36% 100%); }
.mark span { font-weight: 500; color: var(--graphite-2); }
.nav { display: none; gap: 28px; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:not(.btn):hover { color: var(--chalk); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
.menu { display: inline-flex; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--graphite); }
.menu svg { width: 26px; height: 26px; }
.sheet { display: none; padding: 4px 16px 20px; border-top: 1px solid var(--concrete); }
.sheet.open { display: grid; }
.sheet a { padding: 14px 0; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--concrete); }
.sheet .btn { margin-top: 16px; border-bottom: 2px solid var(--chalk); }
@media (min-width: 56rem) { .nav { display: flex; } .menu, .sheet, .sheet.open { display: none; } }

/* hero: copy left, live phone right */
.hero { padding: 40px 0 72px; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 60rem) { .hero { padding: 72px 0 104px; } .hero .wrap { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.hero h1 { margin-bottom: 24px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .note { margin-top: 18px; font-size: 15px; color: var(--graphite-2); }

.demo { display: grid; justify-items: center; gap: 22px; }
.phone { width: min(320px, 82vw); aspect-ratio: 9 / 18.5; background: var(--graphite); border-radius: 44px; padding: 10px; box-shadow: 0 2px 0 #000, 0 40px 70px -30px rgb(32 36 42 / .55); position: relative; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 92px; height: 24px; border-radius: 14px; background: #000; z-index: 3; }
.screen { height: 100%; border-radius: 35px; overflow: hidden; background: #fff; display: grid; grid-template-rows: auto 1fr auto; font-size: 12px; }
.s-head { padding: 50px 16px 10px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e6e8e7; }
.s-name { font-weight: 800; font-stretch: 112%; font-size: 13px; letter-spacing: -.01em; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-burger { width: 18px; height: 10px; border-block: 2px solid var(--graphite); position: relative; }
.s-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid var(--graphite); }
.s-hero { position: relative; overflow: hidden; display: grid; align-content: end; padding: 16px; color: #fff; }
.s-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.s-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgb(10 12 16 / .78)); }
.s-hero > :not(img) { position: relative; z-index: 1; }
.s-kicker { font-size: 11px; opacity: .9; margin-bottom: 6px; }
.s-title { font-weight: 800; font-stretch: 115%; font-size: 21px; line-height: 1.02; letter-spacing: -.02em; overflow-wrap: anywhere; }
.s-bar { padding: 12px 16px 22px; display: grid; gap: 8px; }
.s-call { background: var(--chalk); color: #fff; font-weight: 700; text-align: center; padding: 11px; border-radius: 6px; }
.s-quote { border: 1.5px solid var(--graphite); font-weight: 700; text-align: center; padding: 9px; border-radius: 6px; }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.try { width: min(380px, 100%); display: grid; gap: 10px; }
.try p { font-weight: 700; font-size: 15px; }
.try .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.try input, .try select { width: 100%; min-height: 46px; padding: 0 12px; font: 500 16px "Archivo", sans-serif; color: var(--graphite); background: var(--paper); border: 1.5px solid var(--concrete); border-radius: 4px; }
.try input:focus, .try select:focus { border-color: var(--chalk); outline: none; box-shadow: 0 0 0 3px rgb(30 79 216 / .18); }
.try label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* sections */
section { scroll-margin-top: 76px; }
.sec { padding: 88px 0; }
@media (min-width: 56rem) { .sec { padding: 120px 0; } }
.head { max-width: 760px; margin-bottom: 44px; display: grid; gap: 16px; }

/* trades: four real-work photos, a strip that scrolls sideways on phones */
.trades { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: thin; }
@media (min-width: 56rem) { .trades { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }
.trades figure { margin: 0; scroll-snap-align: start; }
.trades img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 4px; }
.trades figcaption { padding-top: 12px; display: grid; gap: 2px; }
.trades figcaption b { font-stretch: var(--wide); font-size: 18px; }
.trades figcaption span { color: var(--graphite-2); font-size: 15px; }

/* work */
.work { background: var(--graphite); color: #fff; }
.work .lead { color: #b9bec5; }
.case { display: grid; gap: 36px; align-items: center; }
@media (min-width: 60rem) { .case { grid-template-columns: 1.35fr 1fr; gap: 64px; } }
.shot { position: relative; padding: 0 0 40px; }
.shot .desk { border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
.shot .mob { position: absolute; right: -8px; bottom: 0; width: 26%; border: 6px solid #0d0f12; border-radius: 22px; overflow: hidden; }
.shot .mob img { aspect-ratio: 390 / 720; object-fit: cover; object-position: top; }
.case h3 { font-size: clamp(26px, 2.6vw, 34px); font-stretch: var(--wide); margin-bottom: 12px; }
.case .where { color: #b9bec5; margin-bottom: 20px; }
.case ul { padding: 0; margin: 24px 0 32px; list-style: none; display: grid; gap: 10px; }
.case li { padding-left: 26px; position: relative; }
.case li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: var(--pencil); }
.work .btn-line { border-color: #fff; color: #fff; }
.work .btn-line:hover { background: #fff; color: var(--graphite); }

/* steps: a real sequence, joined by a chalk line */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; max-width: 820px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 4px 20px; padding-bottom: 36px; position: relative; }
.steps li::before { content: counter(step); grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--chalk); color: #fff; font-weight: 800; font-stretch: var(--wide); font-size: 18px; border-radius: 50%; position: relative; z-index: 1; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 2px dashed var(--chalk); opacity: .5; }
.steps h3 { padding-top: 9px; }
.steps p { color: var(--graphite-2); max-width: 40em; }

/* pricing as an itemized estimate */
.estimate { background: var(--paper); border: 1px solid var(--concrete); border-radius: 4px; padding: 28px 20px; max-width: 980px; box-shadow: 0 1px 0 var(--concrete); }
@media (min-width: 48rem) { .estimate { padding: 48px 52px; } }
.est-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 20px; border-bottom: 2px solid var(--graphite); }
.est-top h3 { font-size: 26px; font-stretch: var(--wide); }
.est-top p { color: var(--graphite-2); font-size: 15px; }
.plans { display: grid; gap: 32px; margin-top: 28px; }
@media (min-width: 56rem) { .plans { grid-template-columns: 1fr 1fr; gap: 52px; } }
.plan { display: flex; flex-direction: column; }
.plan .total { margin-top: auto; }
.plan h4 { margin: 0 0 14px; min-height: 30px; font-size: 19px; font-stretch: 112%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flag { background: var(--pencil); color: var(--graphite); font-size: 13px; font-weight: 700; font-stretch: 100%; padding: 3px 9px; border-radius: 3px; }
.line { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 16px; }
.line span:nth-child(2) { flex: 1; border-bottom: 2px dotted var(--concrete); transform: translateY(-4px); }
.line b { font-weight: 600; white-space: nowrap; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--graphite); margin-top: 10px; padding-top: 14px; }
.total span { font-weight: 700; }
.total b { font-size: clamp(36px, 4vw, 46px); font-weight: 800; font-stretch: var(--wide); letter-spacing: -.03em; }
.total b small { font-size: 16px; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--graphite-2); }
.total s { color: var(--graphite-2); font-size: 16px; margin-right: 8px; }
.fine { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--concrete); display: grid; gap: 6px; color: var(--graphite-2); font-size: 15px; }
@media (min-width: 56rem) { .fine { grid-template-columns: 1fr 1fr; gap: 6px 52px; } }

/* faq */
.faq { max-width: 860px; border-top: 2px solid var(--graphite); }
.faq details { border-bottom: 1px solid var(--concrete); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--chalk); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 22px; color: var(--graphite-2); max-width: 44em; }

/* contact */
.contact { background: var(--chalk); color: #fff; }
.contact .wrap { display: grid; gap: 40px; }
@media (min-width: 56rem) { .contact .wrap { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.contact .lead { color: #dbe4fb; margin-top: 18px; }
.ways { display: grid; gap: 12px; }
.ways a { display: grid; gap: 2px; padding: 18px 20px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .35); border-radius: 4px; text-decoration: none; transition: background .15s; }
.ways a:hover { background: rgb(255 255 255 / .16); }
.ways span { font-size: 14px; color: #dbe4fb; }
.ways b { font-size: clamp(18px, 2vw, 22px); font-stretch: 112%; overflow-wrap: anywhere; }

footer { padding: 36px 0 48px; font-size: 15px; color: var(--graphite-2); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; }
footer nav { display: flex; gap: 22px; }

/* legal pages */
.legal { max-width: 760px; padding: 64px 16px 40px; margin-inline: auto; }
.legal h1 { font-size: clamp(36px, 5vw, 54px); margin-bottom: 20px; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal p { color: var(--graphite-2); }
.legal p + p { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .caret::after { animation: none; } .s-hero img { transition: none; } }

/* concept designs, under the client case */
.concepts { margin-top: 96px; padding-top: 48px; border-top: 1px solid #3a3f47; }
.concepts-head { display: grid; gap: 10px; max-width: 640px; margin-bottom: 32px; }
.concepts-head h3 { font-size: clamp(24px, 2.4vw, 30px); font-stretch: var(--wide); }
.concepts-head p { color: #b9bec5; }
.concept-grid { display: grid; gap: 28px 20px; }
@media (min-width: 40rem) { .concept-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .concept-grid { grid-template-columns: repeat(3, 1fr); } }
.concept-grid a { display: grid; gap: 4px; text-decoration: none; }
.concept-grid img { border-radius: 6px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin-bottom: 10px; transition: transform .25s; }
.concept-grid a:hover img { transform: translateY(-3px); }
.concept-grid b { font-size: 18px; }
.concept-grid span { color: #b9bec5; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .concept-grid img { transition: none; } }

/* lead form in the contact band */
.lead-form { display: grid; gap: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .35); border-radius: 4px; padding: 20px; }
.lead-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #dbe4fb; }
.lead-form input { min-height: 48px; padding: 0 12px; border-radius: 4px; border: 1.5px solid transparent; font: 500 16px "Archivo", sans-serif; color: var(--graphite); background: #fff; }
.lead-form input:focus { outline: 3px solid var(--pencil); outline-offset: 1px; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.btn-light { background: #fff; color: var(--chalk-ink); border-color: #fff; }
.btn-light:hover { background: var(--wall); }
.btn-light:disabled { opacity: .6; cursor: wait; }
.lead-status { min-height: 1.4em; font-size: 15px; color: #fff; }

/* sticky actions on phones */
.mbar { display: none; }
@media (max-width: 47.99rem) {
  .mbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(242 243 241 / .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--concrete); }
  .mbar a { display: grid; place-items: center; min-height: 48px; border-radius: 4px; font-weight: 700; text-decoration: none; border: 2px solid var(--graphite); }
  .mbar a:first-child { background: var(--chalk); border-color: var(--chalk); color: #fff; }
  footer { padding-bottom: 96px; }
}

/* trades strip */
.strip { overflow: hidden; border-block: 1px solid var(--concrete); background: var(--paper); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip-track { list-style: none; margin: 0; padding: 18px 0; display: flex; gap: 44px; inline-size: max-content; animation: strip 40s linear infinite; }
.strip-track li { font-weight: 800; font-stretch: var(--wide); font-size: clamp(18px, 2vw, 24px); letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 44px; }
.strip-track li::after { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--chalk); }
@keyframes strip { to { transform: translateX(-50%); } }

/* bento of what every site has, each tile with a small live visual */
.bento { display: grid; gap: 14px; }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .bento { grid-template-columns: repeat(6, 1fr); } .bx-phone, .bx-speed, .bx-form { grid-column: span 2; } .bx-chat, .bx-video, .bx-seo { grid-column: span 2; } .bx-video { grid-row: span 1; } }
.bx { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 18px 18px 24px; background: var(--paper); border: 1px solid var(--concrete); border-radius: 14px; transition: transform .25s, box-shadow .25s; }
.bx:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgb(32 36 42 / .35); }
.bx h3 { font-size: 20px; margin-top: 8px; }
.bx p { color: var(--graphite-2); font-size: 16px; }
.bx-vis { position: relative; block-size: 180px; border-radius: 10px; background: var(--wall); overflow: hidden; display: grid; place-items: center; }
.mini-phone { inline-size: 92px; block-size: 160px; border-radius: 18px; border: 6px solid var(--graphite); background: #fff; padding: 22px 8px 8px; display: grid; gap: 6px; align-content: start; transform: translateY(26px); }
.mini-phone i { display: block; block-size: 8px; border-radius: 4px; background: var(--concrete); }
.mini-phone i:nth-child(2) { inline-size: 70%; }
.mini-phone .mini-btn { block-size: 18px; background: var(--chalk); margin-top: 10px; }
.mini-phone .mini-btn.alt { background: none; border: 2px solid var(--graphite); }
.gauge { inline-size: 120px; block-size: 120px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke: var(--concrete); stroke-width: 10; }
.gauge .gauge-v { stroke: #1a9f5b; stroke-dasharray: 0 100; stroke-linecap: round; transition: stroke-dasharray 1.6s cubic-bezier(.2,.7,.2,1); }
.bx-speed.in .gauge-v { stroke-dasharray: 96 100; }
.gauge-n { position: absolute; font-weight: 800; font-stretch: var(--wide); font-size: 28px; color: #1a9f5b; }
.mini-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; inline-size: 80%; }
.mini-chips span { padding: 9px 6px; border-radius: 8px; border: 1.5px solid var(--concrete); background: #fff; text-align: center; font-size: 13px; font-weight: 600; }
.mini-chips .on { background: var(--chalk); border-color: var(--chalk); color: #fff; }
.mini-steps { position: absolute; inset: auto 10% 16px 10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini-steps i { block-size: 4px; border-radius: 2px; background: var(--concrete); } .mini-steps .on { background: var(--chalk); }
.bx-chat .bx-vis { place-items: stretch; align-content: center; gap: 10px; padding: 16px; }
.bubble { max-inline-size: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.bubble.in { justify-self: end; background: var(--chalk); color: #fff; }
.bubble.out img { inline-size: 32px; block-size: 32px; border-radius: 50%; flex: none; }
.bubble.out { justify-self: start; background: #fff; border: 1px solid var(--concrete); display: flex; gap: 10px; align-items: flex-start; }
.bubble.out small { display: block; margin-top: 4px; font-size: 11px; color: var(--graphite-2); }
.bx-video video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.serp { inline-size: 88%; display: grid; gap: 8px; }
.serp-q { padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--concrete); font-size: 13px; color: var(--graphite-2); }
.serp-r { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 14px; }
.serp-r b { color: #1a0dab; } .serp-r small { color: #b06000; font-size: 12px; }
.serp-r.dim { block-size: 26px; opacity: .55; }

/* how it works: steps on the left, the matching screen pinned on the right */
.howgrid { display: grid; gap: 40px; }

.howvis { position: relative; align-self: start; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--wall); box-shadow: 0 30px 60px -30px rgb(32 36 42 / .4); }
.howvis img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s ease; }
.howvis img.on { opacity: 1; }
.howgrid .steps li { opacity: .45; transition: opacity .4s; }
.howgrid .steps li.on { opacity: 1; }
@media (max-width: 63.99rem) { .howgrid .steps li { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } .bx, .gauge .gauge-v, .howvis img { transition: none; } }

/* fixes after review (2026-10-01) */
@media (min-width: 64rem) {
  .howgrid { grid-template-columns: 1fr 1.1fr; align-items: start; }
  .howgrid .howvis { position: sticky; top: 110px; }
  .howgrid .steps li { min-height: 30vh; align-content: start; }
}
.howgrid .steps li { align-content: start; }
.contact .wrap { align-items: center !important; }
.lead-form input::placeholder { color: #8a93a6; }
.try-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.try-row input:first-of-type { grid-column: 1 / -1; }
.try-row input { width: 100%; min-height: 46px; padding: 0 12px; font: 500 16px "Archivo", sans-serif; color: var(--graphite); background: var(--paper); border: 1.5px solid var(--concrete); border-radius: 4px; }
.try-row input:focus { border-color: var(--chalk); outline: none; box-shadow: 0 0 0 3px rgb(30 79 216 / .18); }
.try-row label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.phone { width: min(280px, 74vw); }
@media (min-width: 60rem) { .hero { padding: 56px 0 88px; } }
/* laptop + phone with a sample site playing */
.devices-sec { padding-bottom: 40px; }
.devices { position: relative; max-width: 1040px; margin: 8px auto 0; padding-bottom: 6%; }
.laptop { width: 88%; }
.laptop-screen { position: relative; aspect-ratio: 16 / 10; background: #0d0f12; border: 14px solid #1b1d21; border-bottom-width: 18px; border-radius: 18px 18px 6px 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(32 36 42 / .5); }
.laptop-screen video, .dphone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop-base { height: 16px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#d8dbdf, #a9aeb5); box-shadow: 0 18px 30px -18px rgb(32 36 42 / .6); }
.laptop-base::before { content: ""; display: block; width: 16%; height: 6px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #9aa0a8; }
.dphone { position: absolute; right: 0; bottom: 0; width: 24%; aspect-ratio: 9 / 19.5; border: 8px solid #111317; border-radius: 34px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -20px rgb(32 36 42 / .6); }
.dphone::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 50%; translate: -50% 0; width: 34%; height: 16px; border-radius: 10px; background: #000; }
.devices-cap { text-align: center; color: var(--graphite-2); font-size: 15px; margin-top: 18px; }
@media (max-width: 40rem) { .laptop { width: 100%; } .dphone { width: 34%; right: -2%; bottom: -8%; border-width: 5px; border-radius: 22px; } .laptop-screen { border-width: 8px; border-bottom-width: 10px; } }

/* four trade clips taking turns, each labelled */
.bx-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.bx-reel video.on { opacity: 1; }
.reel-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgb(17 21 29 / .78); color: #fff; font-size: 14px; font-weight: 700; }

/* hero now shows the laptop + phone; the try-it phone has its own section */
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: .9fr 1.1fr; gap: 48px; } }
.hero-devices .devices { margin: 0; padding-bottom: 8%; }
.hero-devices .devices-cap { text-align: left; margin-top: 10px; }
@media (min-width: 60rem) { .hero-devices .devices-cap { text-align: right; } }
.demo-try { display: grid; gap: 28px; justify-items: center; align-items: center; }
@media (min-width: 56rem) { .demo-try { grid-template-columns: auto 1fr; justify-items: start; gap: 56px; } .demo-try .try { max-width: 440px; } }
.demo-try .try-row input { min-height: 54px; font-size: 17px; }

/* hero: the mini form under the buttons drives the phone's mini homepage */
.try-hero { margin-top: 26px; max-width: 460px; width: 100%; }
.try-hero p { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.dphone .dscreen { position: absolute; inset: 0; z-index: 1; border-radius: 0; display: grid; grid-template-rows: auto 1fr auto; font-size: 8px; background: #fff; }
.dphone .dscreen[hidden] { display: none; }
.dphone .s-head { padding: 26px 9px 6px; }
.dphone .s-name { font-size: 9px; }
.dphone .s-burger { width: 11px; height: 7px; border-width: 1.5px; }
.dphone .s-burger::after { top: 1.3px; border-top-width: 1.5px; }
.dphone .s-hero { padding: 9px; }
.dphone .s-kicker { font-size: 7px; margin-bottom: 3px; }
.dphone .s-title { font-size: 12px; }
.dphone .s-bar { padding: 7px 9px 12px; gap: 5px; }
.dphone .s-call, .dphone .s-quote { padding: 6px; font-size: 8px; border-radius: 4px; }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: clamp(42px, 4.4vw, 64px); } .hero .lead { font-size: 18px; } .hero .cta { margin-top: 24px; } }