@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Sora Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'); font-weight: 600 700; size-adjust: 106.86%; ascent-override: 90.77%; descent-override: 27.14%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Roboto'), local('Roboto-Regular'); font-weight: 400; size-adjust: 107.04%; ascent-override: 90.5%; descent-override: 22.53%; line-gap-override: 0%; }

/* Brand H: light sky wash, navy text, one blue for actions */
:root {
  --night: #0b1f4b; --cobalt: #1b55e8; --cobalt-d: #1546c4; --sky: #a9c6ff; --mist: #d5e0f4;
  --ink: #0b1f4b; --body: #3f4b63; --line: #d5e0f4; --tint: #ebf1fc; --tint-2: #dbe6fb;
  --head: 'Sora', 'Sora Fallback', system-ui, sans-serif; --ease: cubic-bezier(.2,.7,.2,1);
  --gut: clamp(16px, 4vw, 32px); --sec: clamp(64px, 8vw, 112px); --gap: clamp(28px, 4.5vw, 56px); --r: 16px;
  --shadow: 0 30px 50px -30px rgba(11,31,75,.45); --shadow-sm: 0 14px 28px -20px rgba(11,31,75,.4);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; color: var(--body); background: var(--tint); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 3.7vw, 3.6rem); line-height: 1.08; letter-spacing: -.042em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.038em; }
p, li { text-wrap: pretty; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: 16px; top: -70px; z-index: 90; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px; border-radius: 10px; background: var(--cobalt); color: #fff; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 12px 22px -12px rgba(27,85,232,.85); transition: background .2s, transform .25s var(--ease), box-shadow .25s; }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); }
.link { font-weight: 600; text-underline-offset: 5px; color: var(--cobalt-d); overflow-wrap: anywhere; }
.photo { width: 100%; border-radius: var(--r); object-fit: cover; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px -22px rgba(11,31,75,.6); }
.bar { display: flex; align-items: center; gap: 32px; height: 74px; }
.bar img { height: 32px; width: auto; }
.nav { display: flex; gap: 30px; margin-left: auto; align-items: center; font-weight: 500; font-size: .98rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--body); transition: color .2s; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--cobalt); text-decoration-thickness: 2px; }
.nav .btn { min-height: 42px; padding: 9px 20px; color: #fff; }
.menu { display: none; margin-left: auto; min-height: 44px; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 14px; cursor: pointer; }

/* Home hero and page headers */
.page-head { position: relative; overflow: hidden; isolation: isolate; color: var(--body); background: radial-gradient(760px 460px at 88% 8%, #cfdefb, transparent 70%), var(--tint); border-bottom: 1px solid var(--line); padding-block: clamp(44px, 6vw, 84px); }
.page-head h1 { margin-bottom: 20px; }
.page-head p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 34em; margin-bottom: 30px; }
.page-head.small { padding-block: clamp(44px, 5vw, 72px); }
.page-head.small p { margin-bottom: 0; }
.hero-mark { position: absolute; right: -8%; top: -12%; width: min(860px, 70vw); opacity: .08; z-index: -1; pointer-events: none; }

/* Sections */
.plain { padding-block: var(--sec); }
.tinted { background: #fff; }
.two { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--gap); align-items: start; }
.two > *, .case-row > *, .lab-grid > *, .frames > *, .svc-grid > *, .demo > *, .audit-in > *, .cta-in > * { min-width: 0; }
.two > div > .photo { margin-top: 26px; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.side { margin-top: 16px; font-size: 1.12rem; max-width: 26em; }
.after { margin-top: 22px; }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--line); }
.ticks li:first-child { border-top: 0; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-2); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: 21px; width: 11px; height: 6px; border-left: 2px solid var(--cobalt-d); border-bottom: 2px solid var(--cobalt-d); transform: rotate(-45deg); }

/* Home: what we do */
.tiles-sec { padding-block: var(--sec); }
.tiles-sec h2, .work h2, .how h2 { margin-bottom: clamp(26px, 3.5vw, 44px); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.art { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint-2); }
.art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tile-tx { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.tile h3 { font-size: 1.32rem; letter-spacing: -.02em; margin-bottom: 8px; }
.go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; color: var(--cobalt-d); font-weight: 600; overflow-wrap: anywhere; }
.go::after { content: "\2192"; transition: transform .25s var(--ease); }

/* Work */
.work { background: #fff; padding-block: var(--sec); }
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.frames h3 { font-size: 1.25rem; margin: 22px 0 6px; }
.frames .link { display: inline-block; margin-top: 10px; }
.browser { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.frames .browser, .case-row .browser { margin-bottom: 26px; }
.chrome { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 6px; }
.dots b { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.url { flex: 1; min-width: 0; background: var(--tint); color: var(--body); border-radius: 7px; padding: 5px 12px; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot { height: clamp(300px, 34vw, 460px); position: relative; overflow: hidden; border-radius: 0 0 14px 14px; }
.shot { --sh: clamp(300px, 34vw, 460px); }
.shot img { width: 100%; }
.shot.play img { animation: pageview 16s ease-in-out 1s infinite alternate; }
@keyframes pageview { to { transform: translateY(calc(-100% + var(--sh))); } }
.pshot { position: absolute; right: -14px; bottom: -28px; width: clamp(84px, 10vw, 128px); border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: 0 26px 44px -20px rgba(11,31,75,.6); z-index: 2; }
.pshot img { width: 100%; }
.case-list { display: grid; gap: clamp(64px, 8vw, 104px); }
.case-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); align-items: center; }
.case-row:nth-child(even) > .browser { order: 2; }
.case-row h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom: 14px; }
.case-row .ticks { margin-top: 16px; }

/* How it works */
.how { padding-block: var(--sec); }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-steps > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-sm); }
.how-steps svg { display: block; width: 44px; height: 44px; padding: 10px; margin-bottom: 18px; border-radius: 12px; background: var(--tint-2); color: var(--cobalt-d); }
.how-steps h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 8px; }

/* Free audit */
.audit { background: radial-gradient(700px 440px at 90% 10%, rgba(27,85,232,.45), transparent 70%), var(--night); color: var(--mist); padding-block: var(--sec); }
.audit-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); align-items: center; }
.audit h2 { color: #fff; margin-bottom: 18px; }
.audit p { max-width: 36em; font-size: 1.1rem; margin-bottom: 22px; }
.audit-list { list-style: none; padding: 0; margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.audit-list li { padding: 8px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; font-weight: 500; font-size: .95rem; }

/* White label */
.label-sec { background: radial-gradient(800px 500px at 100% 0, rgba(27,85,232,.4), transparent 70%), var(--night); color: var(--mist); padding-block: var(--sec); }
.label-sec h2 { color: #fff; max-width: 15ch; margin-bottom: 18px; }
.lab-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap); align-items: start; }
.terms { list-style: none; padding: 0; margin-top: 30px; }
.terms li { padding-block: 15px; border-top: 1px solid rgba(255,255,255,.14); }
.terms strong { color: #fff; display: block; font-family: var(--head); font-weight: 600; font-size: 1.1rem; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.pick span { font-size: .9rem; margin-right: 6px; }
.pick button { min-height: 44px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .2s, color .2s; }
.pick button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.sees { --b: #b4451f; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.sees > * { min-width: 0; }
.see { background: #fff; color: var(--body); border-radius: 12px; padding: 18px; }
.see small { display: block; font-size: .76rem; font-weight: 600; color: #55637b; margin-bottom: 10px; }
.see.wide, .see-foot { grid-column: 1 / -1; }
.see-p { font-size: .92rem; margin-top: 10px; }
.bn { font: 600 1.2rem var(--head); color: var(--b); transition: color .35s; }
.cover { background: var(--b); color: #fff; border-radius: 8px; padding: 16px; font: 600 1.02rem/1.2 var(--head); transition: background .35s; }
.cover span { display: block; font: 400 .8rem 'Inter'; margin-top: 18px; opacity: .92; }
.cover .cover-name { display: inline; font: inherit; margin: 0; opacity: 1; }
.prev { font-size: .92rem; background: var(--tint); border-radius: 7px; padding: 9px 12px; overflow-wrap: anywhere; }
.prev b { color: var(--b); font-weight: 600; transition: color .35s; }
.sitefoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; background: var(--ink); color: var(--mist); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 14px 16px; font-size: .9rem; }
.note { font-size: .86rem; color: var(--mist); margin-top: 14px; }

/* Project steps, a simple timeline */
.runs { list-style: none; padding: 0; }
.runs li { position: relative; padding: 0 0 26px 34px; }
.runs li:last-child { padding-bottom: 0; }
.runs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px var(--tint-2); }
.runs li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 26px; bottom: -4px; width: 2px; background: var(--tint-2); }
.runs h3 { font-size: 1.22rem; letter-spacing: -.02em; margin-bottom: 4px; }

/* Questions */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding-block: 12px; cursor: pointer; list-style: none; font: 600 1.06rem/1.3 var(--head); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--tint-2); color: var(--cobalt-d); font: 500 1.15rem/1 'Inter'; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; max-width: 40em; }
.faq a, .prose a { color: var(--cobalt-d); font-weight: 600; }

/* Services */
.svc { background: #fff; padding-block: var(--sec); }
.svc-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--gap); align-items: center; }
.svc h2 { margin-bottom: 18px; }
.svc .ticks { margin-top: 14px; }
.svc-photo .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.demo { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
.chat, .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; font-size: .93rem; box-shadow: var(--shadow-sm); }
.chat { display: flex; flex-direction: column; gap: 9px; background: var(--tint); }
.cap { font: 600 .82rem var(--head); color: var(--ink); margin-bottom: 4px; }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 13px; line-height: 1.38; }
.msg.them { background: #fff; align-self: flex-start; color: var(--ink); }
.msg.you { background: var(--cobalt-d); color: #fff; align-self: flex-end; }
.js .msg { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease); }
.js .msg.in { opacity: 1; transform: none; }
.card { background: var(--ink); color: var(--mist); border: 0; }
.card .cap { color: #fff; margin-bottom: 12px; }
.card dl { margin: 0; }
.card dt { font-size: .76rem; color: var(--sky); }
.card dd { margin: 0 0 11px; color: #fff; font-weight: 500; }
.js .card dd { opacity: 0; transition: opacity .4s; }
.js .card .in { opacity: 1; }
.demo-note { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .86rem; }
.again { background: none; border: 0; min-height: 44px; color: var(--cobalt-d); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: 0; }

.suits-sec h2 { margin-bottom: clamp(26px, 3.5vw, 44px); }
.suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.suit { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.suit img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.suit div { padding: 18px 20px 22px; }
.suit h3 { font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: 6px; }
.suit p { font-size: .96rem; }
@media (max-width: 980px) { .suits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .suits { grid-template-columns: 1fr; gap: 14px; }
  .suit { display: grid; grid-template-columns: 38% 1fr; align-items: stretch; }
  .suit img { height: 100%; }
  .suit div { padding: 14px 16px; align-self: center; }
}

/* Contact */
.ways { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.way { display: flex; flex-direction: column; min-width: 0; min-height: 230px; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.way h2 { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 8px; }
.way-main { background: linear-gradient(145deg, var(--cobalt), var(--cobalt-d)); border-color: var(--cobalt-d); color: #eaf1ff; }
.way-main h2, .way-main .go { color: #fff; }

/* Legal */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; letter-spacing: -.01em; line-height: 1.2; margin: 30px 0 8px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.muted { font-size: .92rem; color: #55637b; }

/* Call to action and footer */
.cta { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(760px 460px at 100% 0, #2d68f0, transparent 70%), var(--cobalt-d); color: #eaf1ff; padding-block: var(--sec); }
.cta > img { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(460px, 44vw); opacity: .16; z-index: -1; filter: brightness(0) invert(1); }
.cta h2 { color: #fff; max-width: 14ch; margin-bottom: 18px; }
.cta p { font-size: 1.15rem; max-width: 30em; margin-bottom: 30px; }
.cta .link { color: #fff; }
.cta-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.cta-in .photo { box-shadow: 0 30px 50px -28px rgba(0,0,0,.6); }
footer { background: var(--night); color: var(--mist); padding-top: clamp(48px, 6vw, 72px); font-size: .98rem; }
.fgrid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.fgrid > * { min-width: 0; }
.fgrid img { height: 34px; width: auto; margin-bottom: 18px; }
.fgrid p { max-width: 26em; }
.fh { color: #fff; font-size: 1rem; letter-spacing: 0; line-height: 1.3; margin-bottom: 14px; }
footer ul { list-style: none; padding: 0; }
footer li { padding-block: 5px; }
footer a { text-decoration: none; overflow-wrap: anywhere; }
.fbase { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; border-top: 1px solid rgba(255,255,255,.14); padding-block: 22px; font-size: .9rem; }
.fbase span { display: flex; gap: 8px 22px; flex-wrap: wrap; }

/* Reveal */
.js .rv { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s), transform .25s var(--ease), box-shadow .25s; }
.js .rv.in { opacity: 1; translate: none; }

/* Home hero: full-width photos of the three kinds of buyer, each tied to its service */
.home-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(600px, calc(100svh - 74px), 860px); background: var(--night); color: var(--mist); }
.hh-media { position: absolute; inset: 0; z-index: -1; }
.hh-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,75,.96) 0%, rgba(11,31,75,.9) 42%, rgba(11,31,75,.62) 62%, rgba(11,31,75,.12) 88%); }
.hh-media { background: var(--night); will-change: translate; }
.hl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; opacity: 0; transform: scale(1.07); transition: opacity 1s ease, transform 8s linear; }
.hl.on { opacity: 1; }
.hl.zoom { transform: none; }
.hl-1 { object-position: 100% 40%; }
.hh-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(44px, 6vw, 80px); }
.home-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.9rem); line-height: 1.03; letter-spacing: -.045em; max-width: 15.5em; max-width: min(15.5em, 62vw); margin-bottom: 24px; }
.home-hero p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 33em; margin-bottom: 32px; }
.home-hero .link { color: #fff; }
.hh-foot { background: rgba(11,31,75,.88); border-top: 1px solid rgba(255,255,255,.16); }
.hh-foot-in { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; }
.hf { position: relative; display: flex; align-items: center; min-height: 68px; padding-right: 20px; color: #fff; font: 600 1.02rem var(--head); letter-spacing: -.015em; text-decoration: none; }
.hf::before { content: ""; position: absolute; left: 0; right: 24px; top: -1px; height: 3px; background: var(--sky); transform: scaleX(0); transform-origin: left; }
.hf.on::before { transform: none; }
.js .home-hero:not(.hold) .hf.on::before { animation: hfill 6s linear both; }
@keyframes hfill { from { transform: scaleX(0); } to { transform: none; } }
.hf { transition: color .2s, padding-left .25s var(--ease); }
.hh-pause { align-self: center; min-height: 44px; padding: 8px 14px; background: none; color: var(--mist); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: .88rem; cursor: pointer; }
/* Keep these two people clear of the headline: the photo fills the right of the hero */
@media (min-width: 700px) { .hl-2, .hl-3 { padding-left: 28%; background: var(--night); box-sizing: border-box; } }
@media (any-hover: hover) { .hf:hover { color: var(--sky); padding-left: 6px; } .hh-pause:hover { color: #fff; border-color: #fff; } }
@media (max-width: 699px) {
  .home-hero { min-height: 0; }
  .hh-copy { order: 1; padding-block: 44px 36px; }
  .home-hero h1 { max-width: none; }
  .hh-media { position: relative; order: 2; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
  .hh-media::after { background: linear-gradient(180deg, rgba(11,31,75,.55), transparent 28%); }
  .hl { object-position: 100% 35%; }
  .hh-foot { order: 3; background: var(--night); border-top: 0; }
  .hh-foot-in { grid-template-columns: 1fr; padding-block: 8px; }
  .hf { min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.12); padding-left: 16px; }
  .hh-media { translate: none !important; }
  .hh-pause { justify-self: start; margin-block: 12px 4px; }
}

/* Motion: everything below is decoration, the content is complete without it */
@view-transition { navigation: auto; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .14em 0; margin: 0 -.07em -.14em 0; }
.w > span { display: inline-block; animation: wordup .6s var(--ease) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes wordup { from { transform: translateY(105%); } }
.home-hero p, .home-hero .acts, .page-head p, .page-head .acts { animation: riseup .7s var(--ease) .25s both; }
.home-hero .acts, .page-head .acts { animation-delay: .35s; }
@keyframes riseup { from { opacity: 0; translate: 0 18px; } }
.site-header { transition: box-shadow .25s; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cobalt); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }
.site-header.scrolled { box-shadow: 0 12px 28px -18px rgba(11,31,75,.55); }
.nav a:not(.btn) { background: linear-gradient(var(--cobalt), var(--cobalt)) left bottom / 0 2px no-repeat; transition: color .2s, background-size .25s var(--ease); }
.nav.open { animation: navin .25s var(--ease); }
@keyframes navin { from { opacity: 0; translate: 0 -10px; } }
.btn:active, .tile:active, .way:active, .hf:active { scale: .98; }
.btn, .tile, .way { transition: background .2s, transform .25s var(--ease), box-shadow .25s, scale .12s; }
.suit { transition: transform .25s var(--ease), box-shadow .25s; }
.suit img, .two > div > .photo, .svc-photo .photo { transition: transform .4s var(--ease); }
.how-steps > div { transition: transform .25s var(--ease), box-shadow .25s; }
.js .runs li::before { background: var(--tint-2); box-shadow: 0 0 0 4px transparent; scale: .7; transition: background .35s, box-shadow .35s, scale .35s var(--ease); }
.js .runs li.lit::before { background: var(--cobalt); box-shadow: 0 0 0 4px var(--tint-2); scale: 1; }
.js .runs li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease) .1s; background: var(--cobalt); opacity: .35; }
.js .runs li.lit:not(:last-child)::after { transform: none; }
.faq details { interpolate-size: allow-keywords; transition: box-shadow .25s; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details[open] { box-shadow: var(--shadow-sm); }

/* Hover only where a pointer exists, so nothing sticks after a tap */
@media (any-hover: hover) {
  .nav a:not(.btn):hover { background-size: 100% 2px; }
  .btn:hover { background: var(--cobalt-d); transform: translateY(-2px); box-shadow: 0 16px 26px -12px rgba(27,85,232,.9); }
  .btn-light:hover { background: #e4ecfb; box-shadow: 0 16px 28px -14px rgba(0,0,0,.65); }
  .nav a:not(.btn):hover { color: var(--ink); }
  .tile:hover, .way:hover, .suit:hover, .how-steps > div:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); box-shadow: var(--shadow); }
  .suit:hover img { transform: scale(1.05); }
  .two > div > .photo:hover, .svc-photo .photo:hover { transform: scale(1.02); }
  .browser:hover .shot img { animation-play-state: paused; }
  .tile:hover .art img { transform: scale(1.05); }
  .tile:hover .go::after, .way:hover .go::after { transform: translateX(4px); }
  footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
}
@media (hover: none) {
  .shot { overflow-y: auto; }
  .shot img { transition: none; }
}

/* Tablet and below */
@media (max-width: 980px) {
  .menu { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 74px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--gut) 20px; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--tint); }
  .nav .btn { margin-top: 14px; min-height: 48px; }
  .two, .lab-grid, .audit-in, .svc-grid, .case-row, .cta-in, .frames, .how-steps, .ways { grid-template-columns: 1fr; }
  .two > div > .photo, .svc-photo .photo { aspect-ratio: 16 / 10; }
  .audit-in .photo, .cta-in .photo { aspect-ratio: 16 / 10; }
  .cta-in .photo { order: 2; }
  .case-row:nth-child(even) > .browser { order: 0; }
  .pshot { right: -4px; bottom: -22px; }
  .way { min-height: 170px; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fgrid > div:first-child { grid-column: 1 / -1; }
  .tiles { grid-template-columns: 1fr; }
  .tile { flex-direction: row; }
  .art { flex: 0 0 42%; aspect-ratio: auto; }
  .tile-tx { justify-content: center; }
  .go { margin-top: 0; }
  footer li { padding-block: 0; }
  footer li a { display: inline-block; padding-block: 8px; }
}

/* Phones */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .bar { height: 66px; }
  .nav { top: 66px; }
  .bar img { height: 28px; }
  .acts .btn { width: 100%; }
  .tile { flex-direction: column; }
  .art { flex: none; aspect-ratio: 3 / 2; }
  .tile-tx { padding: 20px; }
  .sees, .demo { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .chrome { padding: 10px 12px; }
  .dots { display: none; }
  .pick span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { translate: none; opacity: 1; }
  .js .msg, .js .card dd, .js .card dt { opacity: 1; transform: none; }
  .hl { transform: none; }
  .hf::before { display: none; }
  @view-transition { navigation: none; }
  .hh-pause { display: none; }
  .shot { overflow-y: auto; }
}
@media (min-width: 1800px) { .wrap { max-width: 1400px; } }
@media (max-width: 900px) and (max-height: 480px) { .home-hero { min-height: 0; } }

/* ===== Overhaul: one hero language across the site, tighter phones, larger tap areas ===== */

/* Inner page headers share the Home hero */
.page-head { background: var(--night); color: var(--mist); border-bottom: 0; }
.page-head h1 { color: #fff; }
.page-head .link { color: #fff; }
.page-head.ph { display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
.ph-copy { padding-block: clamp(56px, 7vw, 104px); }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 35%; }
.page-head h1 { font-size: clamp(2.1rem, 4.3vw, 4.1rem); line-height: 1.05; letter-spacing: -.045em; }
.home-hero h1, .home-hero p, .ph-copy h1, .ph-copy p { max-width: min(33em, 60vw); }
.home-hero h1, .ph-copy h1 { max-width: min(15.5em, 60vw); }
.page-head:not(.ph) .wrap { position: relative; }
@media (min-width: 700px) {
  .ph-img { padding-left: 30%; background: var(--night); box-sizing: border-box; }
  .page-head.ph { min-height: clamp(420px, 62svh, 600px); }
}

/* White label band is light now that the header above it is dark */
.label-sec { background: var(--tint); color: var(--body); }
.label-sec h2, .terms strong { color: var(--ink); }
.terms li { border-top-color: var(--line); }
.pick button { color: var(--ink); border-color: #b9c9e6; background: #fff; }
.pick button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.see { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.see small, .card dt { font-size: .82rem; }
.cover span { font-size: .84rem; }
.note { color: var(--body); }
.prev { overflow-wrap: break-word; }
.sitefoot { border: 0; }

/* Visible keyboard focus on dark bands */
.home-hero :focus-visible, .page-head :focus-visible, .audit :focus-visible, .cta :focus-visible, footer :focus-visible { outline-color: #fff; }

/* Tap areas */
.bar > a { display: inline-flex; align-items: center; min-height: 44px; }
.link { display: inline-flex; align-items: center; min-height: 44px; }
.cta > img { opacity: .1; }

/* Quieter section ends: demo card keeps its labels while it fills in */
.card { min-height: 0; }
.demo-note { align-items: center; }

/* Tablet: footer and contact stay compact */
@media (max-width: 980px) {
  .fbase a { display: inline-flex; align-items: center; min-height: 44px; }
  .ways { grid-template-columns: 1fr 1fr; }
  .way-main { grid-column: 1 / -1; }
}

/* Small tablets down: copy first, then the photo edge to edge */
@media (max-width: 699px) {
  .home-hero h1, .home-hero p, .ph-copy h1, .ph-copy p { max-width: none; }
  .page-head.ph .hh-media { order: 2; position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; }
  .page-head.ph .hh-media::after { background: linear-gradient(180deg, rgba(11,31,75,.5), transparent 26%); }
  .ph-copy { order: 1; padding-block: 40px 32px; }
  .hh-copy { padding-block: 40px 32px; }
  /* Hero strip: three short tabs on one line, same progress bar as desktop */
  .hh-foot-in { grid-template-columns: repeat(3, 1fr); gap: 10px; padding-block: 0; }
  .hf { min-height: 64px; padding: 0; border-bottom: 0; font-size: .84rem; line-height: 1.2; letter-spacing: -.01em; }
  .hf::before { right: 0; }
  .hh-pause { position: absolute; right: 12px; bottom: 76px; margin: 0; min-height: 40px; background: rgba(11,31,75,.8); }
  .hh-foot-in { position: static; }
}

/* Phones: shorter pages */
@media (max-width: 640px) {
  :root { --sec: 56px; }
  .tile { display: grid; grid-template-columns: 36% 1fr; }
  .art { aspect-ratio: auto; min-height: 100%; }
  .art img { position: absolute; inset: 0; }
  .art { position: relative; }
  .tile-tx { padding: 16px; }
  .tile h3 { font-size: 1.1rem; margin-bottom: 4px; }
  .tile p { font-size: .94rem; line-height: 1.45; }
  .go { padding-top: 10px; font-size: .94rem; }
  .tiles { gap: 14px; }
  .how-steps { gap: 12px; }
  .how-steps > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; }
  .how-steps svg { grid-row: 1 / 3; margin: 0; }
  .how-steps h3 { margin-bottom: 4px; font-size: 1.08rem; }
  .how-steps p { font-size: .95rem; }
  .cta-in .photo { display: none; }
  .cta > img { display: none; }
  .frames { gap: 36px; }
  .shot { --sh: 280px; height: 280px; }
  .ways { grid-template-columns: 1fr; gap: 12px; }
  .way { min-height: 0; padding: 22px; }
  .way h2 { font-size: 1.3rem; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-bottom: 28px; }
  .fgrid > div:first-child, .fgrid > div:last-child { grid-column: 1 / -1; }
  .fgrid > div:last-child ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .fbase { flex-direction: column; gap: 4px; }
  .audit-list { gap: 8px; margin-bottom: 24px; }
  .audit-list li { padding: 6px 13px; font-size: .9rem; }
  .terms { margin-top: 20px; }
  .terms li { padding-block: 12px; }
  .chat, .card { padding: 14px; }
  .suit div { padding: 12px 14px; }
}

/* The photo starts behind solid navy, so no edge shows */
@media (min-width: 700px) {
  .hh-media::after { background: linear-gradient(90deg, var(--night) 0%, var(--night) 31%, rgba(11,31,75,.9) 44%, rgba(11,31,75,.58) 62%, rgba(11,31,75,.1) 88%); }
}
@media (min-width: 700px) and (max-width: 980px) {
  .page-head.ph { min-height: 420px; }
}

/* Demo assistant */
.slc-btn { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--cobalt); color: #fff; font: 600 1rem 'Inter', sans-serif; cursor: pointer; box-shadow: 0 16px 30px -12px rgba(27,85,232,.75); transition: transform .2s var(--ease), background .2s; }
.slc-btn svg { width: 22px; height: 22px; }
.slc-btn:hover { background: var(--cobalt-d); transform: translateY(-2px); }
.slc-btn.on { background: var(--night); }
.sl-chat { position: fixed; right: 20px; bottom: 84px; z-index: 81; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100svh - 110px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(11,31,75,.55); animation: slcin .25s var(--ease); }
.sl-chat[hidden] { display: none; }
@keyframes slcin { from { opacity: 0; translate: 0 12px; } }
.slc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 16px 14px 18px; background: var(--night); color: var(--mist); }
.slc-head strong { color: #fff; font: 600 1.02rem var(--head); }
.slc-head small { display: block; font-size: .82rem; margin-top: 2px; }
.slc-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sky); color: var(--night); font-size: .72rem; font-weight: 700; vertical-align: 2px; }
.slc-x { width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.slc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--tint); overscroll-behavior: contain; }
.slc-m { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .95rem; line-height: 1.45; animation: slcin .2s var(--ease); }
.slc-bot { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: 0 4px 12px -8px rgba(11,31,75,.4); }
.slc-you { align-self: flex-end; background: var(--cobalt-d); color: #fff; border-bottom-right-radius: 4px; }
.slc-bot ul, .slc-bot ol { margin: 6px 0 0; padding-left: 18px; }
.slc-bot li { margin-bottom: 3px; }
.slc-bot a { color: var(--cobalt-d); font-weight: 600; }
.slc-typing { display: flex; gap: 4px; padding: 13px; }
.slc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8fa3c7; animation: slcdot 1s infinite; }
.slc-typing i:nth-child(2) { animation-delay: .15s; } .slc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes slcdot { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.slc-card { align-self: stretch; background: var(--night); color: var(--mist); border-radius: 14px; padding: 14px 16px; font-size: .9rem; }
.slc-card small { display: block; color: var(--sky); font-weight: 600; margin-bottom: 8px; }
.slc-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.slc-card dt { color: var(--sky); } .slc-card dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.slc-card em { display: block; margin-top: 10px; font-style: normal; font-size: .82rem; opacity: .85; }
.slc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; background: var(--tint); }
.slc-chips:not(:empty) { padding-bottom: 12px; }
.slc-chips button { min-height: 38px; padding: 6px 14px; border: 1px solid #b9c9e6; border-radius: 999px; background: #fff; color: var(--cobalt-d); font: 600 .88rem 'Inter', sans-serif; cursor: pointer; }
.slc-chips button:hover { border-color: var(--cobalt); background: var(--tint-2); }
.slc-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.slc-form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid #b9c9e6; border-radius: 12px; font: 1rem 'Inter', sans-serif; color: var(--ink); }
.slc-form input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: transparent; }
.slc-form button { width: 46px; flex: none; border: 0; border-radius: 12px; background: var(--cobalt); color: #fff; font-size: 1.1rem; cursor: pointer; }
.slc-note { margin: 0; padding: 0 14px 10px; font-size: .78rem; color: #55637b; }
.slc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 639px) {
  .slc-btn { right: 14px; bottom: 14px; min-height: 50px; padding: 0 16px 0 14px; }
  .sl-chat { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
  html.slc-lock, html.slc-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sl-chat, .slc-m, .slc-typing i { animation: none; } }
.slc-tease { position: fixed; right: 20px; bottom: 84px; z-index: 79; display: flex; align-items: flex-start; gap: 4px; max-width: min(300px, calc(100vw - 40px)); padding: 6px 6px 6px 0; background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; box-shadow: 0 18px 40px -18px rgba(11,31,75,.5); animation: slcin .35s var(--ease); }
.slc-tease-open { flex: 1; padding: 8px 4px 8px 14px; border: 0; background: none; text-align: left; color: var(--ink); font: 500 .94rem/1.4 'Inter', sans-serif; cursor: pointer; }
.slc-tease-x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: var(--tint); color: var(--body); font-size: 1.1rem; cursor: pointer; }
@media (max-width: 639px) { .slc-tease { right: 14px; bottom: 74px; } }
/* Keep the hero pause control clear of the chat button */
@media (min-width: 700px) {
  .hh-foot-in { grid-template-columns: auto repeat(3, 1fr); }
  .hh-pause { order: -1; margin-right: 28px; }
}
.slc-btn { transition: transform .2s var(--ease), background .2s; }
.slc-btn { bottom: var(--slc-b, 20px); }
.slc-tease { bottom: calc(var(--slc-b, 20px) + 64px); }
.sl-chat { bottom: calc(var(--slc-b, 20px) + 64px); height: min(600px, calc(100svh - var(--slc-b, 20px) - 150px)); }
@media (max-width: 639px) {
  .slc-btn { bottom: var(--slc-b, 14px); }
  .slc-tease { bottom: calc(var(--slc-b, 14px) + 60px); }
  .sl-chat { bottom: 0; height: 100dvh; }
  /* pause sits in the strip on phones, out of the chat button's way */
  .hh-foot-in { grid-template-columns: repeat(3, 1fr) auto; }
  .hh-pause { position: static; align-self: center; min-height: 40px; padding: 6px 10px; background: none; font-size: .8rem; }
}