/* ==========================================================================
   CasePloy public site — the sign-in pages' language on a marketing canvas.
   Paper ground, DM Sans, medium display type with a grey second line,
   lavender / sky / peach panels with rotated story cards, black pill actions,
   and real product screens in white frames. Standalone: fonts.css + this file.

   The page is a single path: promise → recognition → how it works → the
   differentiator → what you get → objections → the ask. One idea per block.
   ========================================================================== */

:root {
    color-scheme: light;
    --paper: #fafafa;
    --ink: #232323;
    --muted: #68686f;
    --faint: #8a8a93;
    --line: #e5e5e8;
    --line-strong: #dfe5ed;
    --blue: #006dfc;
    --blue-hover: #0058df;
    --blue-text: #0058d9;
    --blue-border: #4384ee;
    --blue-ring: #e9f1ff;
    --lavender: #edeef6;
    --sky: #dce9ff;
    --peach: #f1d9ca;
    --tail: #787b98;
    --card-shadow: 0 8px 20px -16px #454b68;
    --card-shadow-lift: 0 18px 32px -20px #454b68;
    --frame-shadow: 0 30px 60px -44px #14264c66;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --section: 184px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
::selection { background: #dbe7ff; color: #123a85; }
:where(a, button, summary, [tabindex], [role="button"]):focus-visible { outline: 2px solid var(--blue-border); outline-offset: 4px; }
:where(input, select, textarea):focus-visible { outline: none; }
.icon { display: inline-block; flex: none; vertical-align: middle; width: 16px; height: 16px; }
.num { font-variant-numeric: tabular-nums; }
/* One content width on every public page, the index included, so the header pill never changes size between pages. */
.wrap { width: min(1360px, calc(100% - 96px)); margin-inline: auto; }
@media (max-width: 1150px) { .wrap { width: calc(100% - 64px); } }
@media (max-width: 900px) { .wrap { width: calc(100% - 48px); } }
@media (max-width: 600px) { .wrap { width: calc(100% - 40px); } }
em { font-style: normal; color: var(--tail); }

.home-skip { position: fixed; top: -70px; left: 20px; z-index: 40; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 100px; background: #fff; }
.home-skip:focus { top: 12px; }

/* ---------- Shared pieces ---------- */
.home-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.home-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 50px; padding: 12px 26px; border-radius: 100px;
    background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
    transition: background-color .2s, translate .2s var(--ease), box-shadow .2s;
}
.home-button:hover { background: var(--blue-hover); translate: 0 -1px; box-shadow: 0 10px 22px -14px #0058df; }
.home-button .icon { width: 14px; height: 14px; }
.home-button.small { min-height: 40px; padding: 9px 18px; font-size: 13px; gap: 9px; }
.home-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; font-weight: 500; }
.home-text-link > span { font-size: 18px; line-height: 1; transition: translate .2s var(--ease); }
.home-text-link:hover { color: var(--blue-text); }
.home-text-link:hover > span { translate: 0 2px; }
.panel { background: var(--lavender); border-radius: 28px; }
.story-card {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: 12px; background: #fff; box-shadow: var(--card-shadow);
    font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.35;
    transform: rotate(var(--r, 0deg));
    transition: transform .4s var(--ease), box-shadow .3s;
}
.story-card > span { flex: none; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: #7a8293; }
.story-card.is-sky { background: var(--sky); }
.story-card.is-peach { background: var(--peach); }

h1, h2 { font-weight: 500; line-height: 1.06; letter-spacing: -.035em; }
h1 { font-size: clamp(46px, 5.3vw, 70px); letter-spacing: -.04em; }
h2 { font-size: clamp(34px, 3.6vw, 48px); }
h3 { font-weight: 500; letter-spacing: -.3px; }

/* Framed product screens */
.frame-bar { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 18px; background: #f4f4f7; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cfd2da; }
.frame-separator { padding: 0 6px; color: #b0b4c0; }
.frame-sample { margin-left: auto; font-size: 11px; color: var(--faint); }
.image-zoom {
    position: absolute; z-index: 1; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 9px;
    padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 100px; background: #fff; box-shadow: var(--card-shadow);
    font-size: 12px; font-weight: 500; color: var(--ink); transition: background .2s, color .2s;
}
.image-zoom .icon { width: 13px; height: 13px; }
button:hover > .image-zoom { background: var(--ink); color: #fff; }

/* ---------- Header: a floating glass pill with two dropdowns ---------- */
.home-header-bar { position: sticky; top: 0; z-index: 30; padding: 14px 0 0; pointer-events: none; }
.home-header {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
    height: 62px; padding: 0 10px 0 22px; border-radius: 100px; pointer-events: auto;
    background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(69, 75, 104, .06), 0 14px 34px -24px #454b68;
    transition: background-color .25s, box-shadow .25s, border-color .25s;
}
.home-header-bar.is-scrolled .home-header { background: rgba(255, 255, 255, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(69, 75, 104, .08), 0 16px 40px -22px #454b68; }
.home-logo { display: block; justify-self: start; }
.home-logo img { height: 28px; width: auto; }
.home-nav { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13.5px; font-weight: 500; }
.home-nav > a, .nav-menu-trigger {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 100px;
    background: transparent; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.home-nav > a:hover, .nav-menu-trigger:hover, .nav-menu-trigger[aria-expanded="true"] { background: rgba(35, 35, 35, .06); }
.nav-menu-trigger .icon { width: 13px; height: 13px; color: var(--faint); transition: transform .2s var(--ease); }
.nav-menu-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-menu { position: relative; }
.nav-panel {
    position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; z-index: 40;
    width: 560px; padding: 10px; border-radius: 22px;
    background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -30px #1d2140, 0 2px 8px -4px #1d214022;
}
.nav-panel-list { width: 340px; }
/* The Product menu spans the page: four product cards, four use cases, two action notes. */
.nav-menu-mega { position: static; }
.nav-mega { left: 0; right: 0; width: auto; translate: none; padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mega-inner {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: 0;
    padding: 28px 32px 30px; border-radius: 26px;
    background: rgba(255, 255, 255, .965); border: 1px solid rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 34px 70px -34px #1d2140, 0 2px 8px -4px #1d214022;
}
.mega-col { min-width: 0; padding: 0 32px; }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child .mega-label { padding-right: 40px; }
.mega-col + .mega-col { border-left: 1px solid var(--line); }
.mega-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.mega-label a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--blue-text); }
.mega-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mega-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 152px; padding: 18px;
    border-radius: 18px; color: var(--ink);
    transition: transform .3s var(--ease), box-shadow .3s;
}
.mega-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-lift); }
.mega-card.is-lavender { background: linear-gradient(160deg, #f0f1f9, #e2e3f2); }
.mega-card.is-sky { background: linear-gradient(160deg, #e6efff, #cfe0ff); }
.mega-card.is-peach { background: linear-gradient(160deg, #f8e7dc, #efd3c0); }
.mega-card.is-blue { background: linear-gradient(160deg, #3d8dff, #0f5fe6); color: #fff; }
.mega-card-icon { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .72); color: #4a4d70; }
.mega-card.is-blue .mega-card-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.mega-card-icon .icon { width: 18px; height: 18px; }
.mega-card strong { font-size: 15.5px; font-weight: 500; letter-spacing: -.2px; line-height: 1.25; }
.mega-card small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #55586e; }
.mega-card.is-blue small { color: rgba(255, 255, 255, .84); }
.mega-uses { display: flex; flex-direction: column; }
.mega-use { display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .15s; }
.mega-use:hover { background: var(--lavender); }
.mega-use-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--lavender); color: #4a4d70; transition: background-color .15s, color .15s; }
.mega-use:hover .mega-use-icon { background: #fff; color: var(--blue); }
.mega-use-icon .icon { width: 16px; height: 16px; }
.mega-use strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.mega-use small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.mega-note { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .7); transition: border-color .15s, box-shadow .2s, transform .25s var(--ease); }
.mega-note + .mega-note { margin-top: 12px; }
.mega-note:hover { border-color: var(--line-strong); box-shadow: var(--card-shadow); transform: translateY(-2px); }
.mega-note strong { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.mega-note small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mega-note > span { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--blue-text); }
.mega-note i { font-style: normal; margin-left: 2px; }
.mega-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); transition: background-color .15s, color .15s; }
.mega-close:hover { background: var(--lavender); color: var(--ink); }
.mega-close .icon { width: 15px; height: 15px; }
.nav-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; transition: background-color .15s; }
.nav-item:hover, .nav-item:focus-visible { background: var(--lavender); outline: none; }
.nav-item-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--lavender); color: #4a4d70; transition: background-color .15s, color .15s; }
.nav-item:hover .nav-item-icon { background: #fff; color: var(--blue); }
.nav-item strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.nav-item small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); font-weight: 400; }
.nav-panel-foot { display: flex; align-items: center; gap: 8px; margin: 6px 2px 2px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--blue-text); }
.nav-panel-foot .icon { width: 13px; height: 13px; }
.home-header-actions { display: flex; align-items: center; justify-self: end; gap: 6px; font-size: 13.5px; font-weight: 500; }
.home-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 100px; transition: background-color .2s; }
.home-login:hover { background: rgba(35, 35, 35, .06); }
.home-menu-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; }
.home-menu-toggle:hover { background: rgba(35, 35, 35, .06); }
.home-mobile-nav {
    position: fixed; top: 84px; left: 16px; right: 16px; z-index: 29; padding: 10px; border-radius: 22px;
    background: rgba(255, 255, 255, .97); border: 1px solid rgba(223, 229, 237, .95);
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: 0 30px 60px -30px #1d2140;
}
.home-mobile-nav a { display: block; padding: 11px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.home-mobile-nav a:hover { background: var(--lavender); }
.mobile-nav-label { padding: 12px 14px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
@keyframes menu-in { from { opacity: 0; translate: -50% 8px; } to { opacity: 1; translate: -50% 0; } }
@keyframes mega-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes sheet-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
    .nav-panel:not([hidden]) { animation: menu-in .22s var(--ease); }
    .nav-mega:not([hidden]) { animation: mega-in .24s var(--ease); }
    .home-mobile-nav:not([hidden]) { animation: sheet-in .22s var(--ease); }
}

/* ---------- 1. Hero: the promise on the left, the lavender panel and its story cards on the right ---------- */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 500px); align-items: center; gap: 84px; padding: 64px 0 48px; }
.hero-copy > h1 { margin: 24px 0 22px; max-width: 12ch; }
.home-lede { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 470px; }
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; }
.home-access-note { margin-top: 18px; font-size: 12.5px; color: var(--faint); }
.home-access-note span { margin: 0 6px; }
.home-access-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.home-access-note a:hover { color: var(--blue-text); }

.hero-panel { position: relative; padding: 48px 44px 40px; }
.hero-panel-art { width: 100%; border-radius: 18px; margin-bottom: 30px; object-fit: cover; aspect-ratio: 4 / 3; }
.hero-panel h2 { margin: 22px 0 34px; font-size: clamp(30px, 2.8vw, 38px); letter-spacing: -.045em; }
.hero-panel .story-card { margin: 16px -6px 0; font-size: 14px; }
.hero-panel:hover .story-card { transform: rotate(calc(var(--r, 0deg) * .35)); }
.hero-panel-foot { display: block; margin-top: 46px; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #777c8b; }

/* ---------- 2. Sound familiar: recognition before explanation ---------- */
.home-familiar { padding-top: var(--section); text-align: center; }
.familiar-cards { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 22px 28px; margin-top: 8px; }
.familiar-cards .story-card { padding: 20px 26px; font-size: 17px; border-radius: 16px; }
.familiar-cards .story-card > span { font-size: 10px; }
.familiar-answer { max-width: 560px; margin: 60px auto 0; font-size: 19px; line-height: 1.55; color: var(--muted); }

/* ---------- Section headings ---------- */
section[id] { scroll-margin-top: 96px; }
.home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.home-section-heading h2 { margin-top: 18px; }
.home-section-heading > p:not(.home-eyebrow) { max-width: 380px; font-size: 15px; line-height: 1.7; color: var(--muted); padding-bottom: 6px; }
.home-section-heading.is-centered { display: block; text-align: center; margin-bottom: 56px; }
.home-section-heading.is-centered .home-eyebrow { justify-content: center; }

/* ---------- 3. How it works: three numbered rows, screen beside sentence ---------- */
.home-how { padding-top: var(--section); }
.how-steps { display: flex; flex-direction: column; gap: 72px; }
.how-step { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 64px; }
.how-step:nth-child(even) .how-media { order: -1; }
.how-text { max-width: 420px; }
.how-num { display: block; font-size: 15px; font-weight: 600; letter-spacing: 1.6px; color: var(--tail); margin-bottom: 18px; }
.how-text h3 { font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.12; }
.how-text > p { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.how-media { padding: 30px; border-radius: 28px; }
.how-media.is-peach { background: #f6e3d7; }
.how-media.is-sky { background: var(--sky); }
.how-media.is-lavender { background: var(--lavender); }
.how-frame { position: relative; display: block; width: 100%; max-height: 400px; padding: 0; border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; overflow: hidden; text-align: left; box-shadow: var(--frame-shadow); }
.how-frame img { width: 100%; height: auto; }
.how-frame::after { content: ''; position: absolute; inset: 78% 0 0; background: linear-gradient(transparent, #ffffffee); pointer-events: none; }
.how-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--line); }
.how-cta > span { font-size: 13.5px; color: var(--muted); }

/* ---------- 4. Demand letters: the differentiator, shown with real steps ---------- */
.home-demands { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 88px; padding-top: var(--section); }
.demand-panel { background: var(--sky); border-radius: 28px; padding: 32px 32px 28px; }
/* One letter, its blanks filling in from the case. Code, not a screenshot, so it stays crisp. */
.letter-demo { margin-top: 20px; padding: 28px 30px 24px; border: 1px solid #c9d8f2; border-radius: 16px; background: #fff; box-shadow: var(--card-shadow); }
.letter-line { margin: 0 0 6px; font-size: 15px; line-height: 1.9; color: var(--ink); }
.letter-date { color: var(--muted); margin-bottom: 14px; }
.letter-sign { margin-top: 18px; color: var(--muted); }
.blank { position: relative; display: inline-grid; vertical-align: baseline; margin: 0 1px; padding: 0 8px; border-radius: 6px; background: var(--lavender); font-weight: 500; white-space: nowrap; line-height: 1.6; }
.blank::before, .blank::after { grid-area: 1 / 1; }
.blank::before { content: attr(data-from); color: #5a5e86; }
.blank::after { content: attr(data-to); color: #1f4f9c; opacity: 0; }
.letter-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 12px; color: #3d4a66; }
.letter-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.letter-legend > span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; background: var(--lavender); }
.letter-legend > .legend-filled::before { background: #c9dcff; }
.evidence-caption { margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: #3d4a66; }
@keyframes blank-bg { 0%, 28% { background: var(--lavender); } 40%, 86% { background: #dbe8ff; } 100% { background: var(--lavender); } }
@keyframes blank-from { 0%, 28% { opacity: 1; } 40%, 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes blank-to { 0%, 28% { opacity: 0; } 40%, 86% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .blank { animation: blank-bg 9s var(--ease) infinite; animation-delay: var(--d, 0s); }
    .blank::before { animation: blank-from 9s var(--ease) infinite; animation-delay: var(--d, 0s); }
    .blank::after { animation: blank-to 9s var(--ease) infinite; animation-delay: var(--d, 0s); }
}
@media (prefers-reduced-motion: reduce) {
    .blank { background: #dbe8ff; }
    .blank::before { display: none; }
    .blank::after { opacity: 1; }
}
.demand-copy h2 { margin-top: 18px; }
.demand-copy > p:not(.home-eyebrow) { margin-top: 20px; max-width: 400px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.demand-copy ol { margin: 30px 0 20px; }
.demand-copy li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.demand-copy li:last-child { border-bottom: 1px solid var(--line); }
.demand-copy li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lavender); font-size: 11px; color: #4a4d70; }
.demand-copy h3 { font-size: 16px; line-height: 1.45; }
.demand-copy li p { margin-top: 4px; font-size: 13.5px; line-height: 1.65; color: var(--muted); max-width: 360px; }

/* ---------- 5. What you get ---------- */
.home-benefits { padding-top: var(--section); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.benefit-grid li { padding: 28px 28px 30px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .3s, border-color .3s; }
.benefit-grid li:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-lift); border-color: var(--line-strong); }
.benefit-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lavender); color: #4a4d70; margin-bottom: 20px; }
.benefit-icon .icon { width: 18px; height: 18px; }
.benefit-grid h3 { font-size: 18px; }
.benefit-grid p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }

/* ---------- 6. Questions ---------- */
.home-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 80px; padding-top: var(--section); }
.home-faq h2 { margin-top: 18px; }
.home-faq > div > p:not(.home-eyebrow) { margin-top: 24px; font-size: 14.5px; line-height: 1.9; color: var(--muted); }
.home-faq > div > p a { color: var(--blue-text); }
.faq-items details { border-bottom: 1px solid var(--line); }
.faq-items details:first-child { border-top: 1px solid var(--line); }
.faq-items summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 18px 0; list-style: none; font-size: 16.5px; font-weight: 500; cursor: pointer; transition: color .2s; }
.faq-items summary:hover { color: var(--blue-text); }
.faq-items summary::-webkit-details-marker { display: none; }
.faq-items summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lavender); font-size: 18px; font-weight: 400; color: #4a4d70; transition: background .2s, color .2s; }
.faq-items details[open] summary::after { content: '−'; background: var(--ink); color: #fff; }
.faq-items details > p { padding: 0 44px 24px 0; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.faq-items details[open] > p { animation: faq-in .22s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.faq-items details > p a { color: var(--blue-text); }

/* ---------- 7. The ask ---------- */
.home-closing { position: relative; margin-top: var(--section); padding: 100px 40px 92px; text-align: center; overflow: hidden; }
.home-closing .home-eyebrow { justify-content: center; }
.home-closing h2 { margin: 22px auto 34px; font-size: clamp(40px, 4.8vw, 62px); max-width: 12ch; }
.closing-steps { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin: 0 auto 38px; max-width: 760px; }
.closing-steps .story-card { padding: 14px 20px; }
.home-closing > p:last-child { margin-top: 20px; font-size: 13px; color: var(--muted); }
.home-closing > p:last-child a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Book a call ---------- */
.call-hero { padding-top: 56px; text-align: center; }
.call-intro { max-width: 760px; margin: 0 auto; }
.call-intro .home-eyebrow { justify-content: center; }
.call-intro h1 { margin: 22px auto 22px; }
.call-intro .home-lede { max-width: 640px; margin: 0 auto; }
.call-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.call-meta span { display: inline-flex; align-items: center; gap: 8px; }
.call-meta .icon { width: 15px; height: 15px; color: #4a4d70; }
.call-scheduler { max-width: 980px; margin: 52px auto 0; }
.call-frame { border: 1px solid var(--line-strong); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: var(--frame-shadow); }
.call-embed { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
.call-note { margin-top: 14px; font-size: 12.5px; color: var(--faint); }
.call-placeholder { display: flex; flex-direction: column; align-items: center; padding: 60px 40px 64px; text-align: center; }
.call-placeholder .benefit-icon { margin-bottom: 18px; }
.call-placeholder h2 { font-size: clamp(26px, 2.4vw, 32px); }
.call-placeholder p { max-width: 44ch; margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.call-placeholder-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 14px 24px; margin-top: 28px; }
.call-cover { padding-top: 128px; }
.call-cover .home-section-heading { margin-bottom: 40px; }
.call-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.call-steps li { padding: 26px 28px 30px; border-radius: 22px; background: var(--lavender); }
.call-steps li.is-sky { background: var(--sky); }
.call-steps li.is-peach { background: var(--peach); }
.call-steps span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #7a8293; }
.call-steps strong { display: block; margin-top: 40px; font-size: 18px; font-weight: 500; letter-spacing: -.2px; line-height: 1.3; }
.call-steps p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #55586e; }
.call-access { margin-top: 28px; text-align: center; }
.call-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 80px; padding-top: 128px; }
.call-faq h2 { margin-top: 18px; }
.closing-sep { margin: 0 8px; color: var(--faint); }
@media (max-width: 900px) {
    .call-hero { padding-top: 44px; }
    .call-scheduler { margin-top: 40px; }
    .call-cover { padding-top: 96px; }
    .call-steps { grid-template-columns: 1fr; gap: 12px; }
    .call-steps strong { margin-top: 22px; }
    .call-faq { grid-template-columns: 1fr; gap: 32px; padding-top: 88px; }
}
@media (max-width: 600px) {
    .call-hero { padding-top: 32px; }
    .call-meta { gap: 6px 18px; font-size: 13px; }
    .call-scheduler { margin-top: 32px; }
    .call-frame { border-radius: 18px; }
    .call-embed { height: 640px; }
    .call-placeholder { padding: 40px 22px 44px; }
    .call-cover { padding-top: 72px; }
    .call-cover .home-section-heading { margin-bottom: 28px; }
    .call-steps li { padding: 22px 20px 24px; border-radius: 18px; }
    .call-access span { display: none; }
    .call-access a { display: inline-block; margin-top: 4px; }
    .call-faq { padding-top: 64px; }
}

/* Footer */
.home-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 28px; margin-top: 96px; padding: 44px 0 52px; border-top: 1px solid var(--line); }
.home-footer .home-logo img { height: 26px; }
.home-footer > p { font-size: 13px; color: var(--muted); }
.home-footer > nav { margin-left: auto; display: flex; gap: 26px; font-size: 13px; color: var(--muted); }
.home-public-links { width: 100%; }
.home-public-links:empty { display: none; }
.public-information { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; font-size: 12.5px; color: var(--muted); }
.public-information a:hover { color: var(--blue-text); }

/* Viewer */
.product-dialog { width: min(1380px, 96vw); max-width: none; max-height: 92dvh; padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: #fff; box-shadow: 0 15px 50px #0c193533; overflow: hidden; }
.product-dialog[open] { display: flex; flex-direction: column; }
.product-dialog::backdrop { background: #101a32b0; backdrop-filter: blur(5px); }
.dialog-toolbar { display: flex; align-items: center; gap: 18px; flex: none; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); z-index: 2; }
.dialog-label { font-size: 13.5px; font-weight: 500; }
.dialog-hint { margin-left: auto; font-size: 12px; color: var(--muted); }
.dialog-zoom { min-height: 40px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 100px; background: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.dialog-zoom:hover { background: var(--lavender); }
.dialog-toolbar form { margin: 0; }
.dialog-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; }
.dialog-close:hover { background: var(--lavender); }
.dialog-viewport { min-height: 0; max-height: calc(92dvh - 65px); overflow: auto; overscroll-behavior: contain; background: #fff; }
.dialog-viewport > img { width: 100%; max-width: 100%; height: auto; }
.dialog-viewport.is-zoomed > img { width: var(--preview-width); max-width: none; }

/* Information pages (privacy, terms, help, access) */
.information-heading { text-align: center; padding: 56px 0 48px; }
.information-heading .home-eyebrow { justify-content: center; }
.information-heading h1 { margin: 20px auto; font-size: clamp(40px, 4.6vw, 60px); max-width: 16ch; }
.information-heading > p:last-child { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 600px; margin: auto; }
.information-nav { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 60px; }
.information-nav-pill { position: absolute; top: 0; left: 0; width: 0; height: 40px; border-radius: 100px; background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--card-shadow); pointer-events: none; transition: transform .34s var(--ease), width .34s var(--ease); }
.information-nav:not(.is-ready) .information-nav-pill { display: none; }
.information-nav.is-ready a[aria-current] { background: transparent; border-color: transparent; box-shadow: none; }
.information-nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 100px; font-size: 13.5px; font-weight: 500; color: var(--muted); border: 1px solid transparent; transition: background .2s, color .2s; }
.information-nav a:hover { color: var(--ink); }
.information-nav:not(.is-ready) a:hover { background: #fff; }
.information-nav a[aria-current] { background: #fff; color: var(--ink); border-color: var(--line-strong); box-shadow: var(--card-shadow); }
.information-layout { display: grid; grid-template-columns: 240px minmax(0, 700px); gap: 72px; justify-content: center; padding-bottom: 60px; }
.information-layout > aside > p { margin-bottom: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.information-layout aside nav { display: grid; gap: 2px; }
.information-layout aside a { display: block; padding: 8px 0 8px 14px; margin-left: -14px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.5; color: var(--muted); transition: color .18s, border-color .18s; }
.information-layout aside a.is-current { color: var(--ink); font-weight: 500; border-left-color: var(--blue); }
.information-layout aside a:hover { color: var(--blue-text); }
.information-back { display: block; margin-top: 30px; font-size: 13.5px; }
.information-content section { margin-bottom: 36px; scroll-margin-top: 110px; }
.information-content h2 { margin-bottom: 12px; font-size: 24px; letter-spacing: -.6px; line-height: 1.3; }
.information-content p { font-size: 15.5px; line-height: 1.85; color: var(--muted); }
.information-notice { margin-bottom: 36px; padding: 22px 24px; border-radius: 16px; background: var(--lavender); }
.information-notice strong { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.information-notice p { margin-top: 6px; font-size: 13.5px; line-height: 1.75; }
.information-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 30px 0; }
.information-content .information-note { padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; }

/* ---------- Motion ----------
   The hero arrives in sequence; the stage settles with its two tags; every
   later block rises in as it scrolls into view, children one after another.
   All of it is off under prefers-reduced-motion. */
@keyframes home-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes stage-in { from { opacity: 0; translate: 0 26px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes card-settle { from { opacity: 0; transform: translateY(22px) rotate(0deg); } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
@media (prefers-reduced-motion: no-preference) {
    .hero-copy > * { animation: home-rise .75s var(--ease) both; }
    .hero-copy > :nth-child(1) { animation-delay: .05s; }
    .hero-copy > :nth-child(2) { animation-delay: .14s; }
    .hero-copy > :nth-child(3) { animation-delay: .24s; }
    .hero-copy > :nth-child(4) { animation-delay: .34s; }
    .hero-copy > :nth-child(5) { animation-delay: .44s; }
    .hero-panel { animation: stage-in .85s var(--ease) .18s both; }
    .hero-panel > .home-eyebrow, .hero-panel > h2, .hero-panel > .hero-panel-art, .hero-panel-foot { animation: home-rise .7s var(--ease) both; }
    .hero-panel > .hero-panel-art { animation-delay: .4s; }
    .hero-panel > .home-eyebrow { animation-delay: .46s; }
    .hero-panel > h2 { animation-delay: .54s; }
    .hero-panel .story-card { animation: card-settle .75s var(--ease) both; }
    .hero-panel .story-card:nth-of-type(1) { animation-delay: .66s; }
    .hero-panel .story-card:nth-of-type(2) { animation-delay: .8s; }
    .hero-panel .story-card:nth-of-type(3) { animation-delay: .94s; }
    .hero-panel-foot { animation-delay: 1.1s; }
    .reveal-pending { opacity: 0; translate: 0 22px; }
    .reveal-seen { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease) var(--reveal-delay, 0ms), translate .8s var(--ease) var(--reveal-delay, 0ms); }
    .product-panel-enter { animation: home-rise .35s var(--ease); }
    .faq-items details > p { animation: home-rise .3s var(--ease); }
    .familiar-cards:hover .story-card { transform: rotate(calc(var(--r, 0deg) * .3)); }
}

/* ---------- Widths ---------- */
@media (min-width: 1600px) { .wrap { width: min(1300px, calc(100% - 160px)); } }
@media (max-width: 1100px) {
    :root { --section: 144px; }
    .wrap { width: calc(100% - 64px); }
    .home-header { gap: 14px; }
    .home-nav > a, .nav-menu-trigger { padding: 0 10px; }
    .nav-panel { width: 520px; }
    .mega-inner { padding: 22px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); }
    .mega-col { padding: 0 20px; }
    .mega-card { min-height: 136px; padding: 14px; }
    .home-hero { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
    .hero-panel { padding: 36px 30px 30px; }
    .how-step { gap: 40px; }
    .how-media { padding: 22px; }
    .home-demands { gap: 48px; }
    .benefit-grid { gap: 16px; }
    .home-faq { gap: 48px; }
}
@media (max-width: 900px) {
    :root { --section: 112px; }
    .home-header { display: flex; height: 58px; padding: 0 8px 0 18px; }
    .home-nav { display: none; }
    .home-header-actions { margin-left: auto; }
    .home-menu-toggle { display: flex; }
    .home-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 44px; }
    .hero-copy > h1 { max-width: none; }
    .hero-panel { max-width: 520px; }
    .home-section-heading { flex-direction: column; align-items: flex-start; gap: 22px; }
    .how-steps { gap: 72px; }
    .how-step, .how-step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .how-step:nth-child(even) .how-media { order: 0; }
    .how-text { max-width: 560px; }
    .home-demands { grid-template-columns: 1fr; }
    .demand-copy { order: -1; max-width: 600px; }
    .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-faq { grid-template-columns: 1fr; gap: 32px; }
    .home-closing { padding: 64px 28px 56px; }
    .home-footer > nav { margin-left: 0; }
    .public-information { justify-content: flex-start; }
    .information-layout { grid-template-columns: 1fr; gap: 20px; max-width: 690px; margin: auto; }
    .information-layout > aside { display: none; }
}
@media (max-width: 600px) {
    :root { --section: 88px; }
    .wrap { width: calc(100% - 40px); }
    .home-header-bar { padding-top: 10px; }
    .home-header { height: 54px; gap: 8px; padding: 0 6px 0 16px; }
    .home-logo img { height: 24px; }
    .home-header-actions .home-login { display: none; }
    .home-header-actions .home-button.small { min-height: 38px; padding: 8px 14px; font-size: 12.5px; gap: 6px; }
    .home-mobile-nav { top: 72px; left: 12px; right: 12px; }
    .home-hero { padding-top: 32px; gap: 36px; }
    .home-eyebrow { font-size: 9.5px; letter-spacing: 1.2px; }
    h1 { font-size: clamp(40px, 11.5vw, 52px); }
    .home-lede { font-size: 16px; }
    .home-hero-actions { gap: 12px 20px; margin-top: 26px; }
    .home-button { min-height: 46px; padding: 12px 20px; font-size: 13.5px; }
    .hero-panel { padding: 30px 22px 26px; border-radius: 22px; }
    .hero-panel h2 { font-size: 28px; margin-bottom: 26px; }
    .hero-panel .story-card { margin-inline: 0; }
    .familiar-cards { gap: 12px; }
    .familiar-cards .story-card { width: 100%; padding: 16px 20px; font-size: 15.5px; }
    .familiar-answer { margin-top: 32px; font-size: 16.5px; }
    h2 { font-size: clamp(30px, 8.6vw, 38px); }
    .home-section-heading { margin-bottom: 30px; }
    .home-section-heading > p { font-size: 14.5px; }
    .how-steps { gap: 56px; }
    .how-text h3 { font-size: 27px; }
    .how-text > p { font-size: 15.5px; }
    .how-media { padding: 14px; border-radius: 20px; }
    .how-frame { max-height: 300px; border-radius: 12px; }
    .how-cta { margin-top: 44px; padding-top: 30px; }
    .image-zoom { right: 12px; bottom: 12px; padding: 8px 12px; font-size: 11.5px; }
    .home-demands { gap: 30px; }
    .demand-panel { padding: 22px 18px 20px; border-radius: 22px; }
    .letter-demo { padding: 20px 18px 18px; }
    .letter-line { font-size: 14px; }
    .demand-copy h2 { font-size: 30px; }
    .benefit-grid { grid-template-columns: 1fr; gap: 12px; }
    .benefit-grid li { padding: 22px 20px 24px; }
    .faq-items summary { font-size: 15px; min-height: 60px; }
    .faq-items details > p { padding-right: 20px; font-size: 14.5px; }
    .home-closing { padding: 48px 22px 44px; border-radius: 22px; }
    .closing-steps { gap: 10px; }
    .closing-steps .story-card { width: 100%; justify-content: center; }
    .home-footer { margin-top: 48px; padding: 28px 0 32px; gap: 18px; }
    .home-footer > nav { gap: 18px; }
    .information-heading { padding: 30px 0; }
    .information-nav { flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
    .information-nav a { font-size: 12.5px; min-height: 38px; padding-inline: 14px; }
    .information-content h2 { font-size: 21px; }
    .information-notice { padding: 20px; }
    .dialog-toolbar { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
    .dialog-label { font-size: 12.5px; margin-right: auto; }
    .dialog-hint { order: 4; flex-basis: 100%; margin: 0; text-align: center; font-size: 11.5px; }
    .dialog-viewport { max-height: calc(90dvh - 97px); }
}

/* Scrollbars: thin and barely there, no arrows. */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
    ::-webkit-scrollbar-thumb { background: rgba(35, 35, 35, .11); border-radius: 100px; min-height: 36px; }
    :hover::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .22); }
    ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: rgba(35, 35, 35, .34); }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    /* The page's own bar is the one you reach for: a 9px gutter with a floating 5px thumb, clearly
       there. Panels inside cards keep the 4px hairline above. Chrome styles the viewport from the
       body when html has no overflow of its own, so both are named. */
    :root::-webkit-scrollbar, body::-webkit-scrollbar { width: 9px; height: 9px; }
    :root::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; margin: 0; }
    :root::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .2); border: 2px solid transparent; background-clip: padding-box; border-radius: 100px; min-height: 48px; }
    :root:hover::-webkit-scrollbar-thumb, body:hover::-webkit-scrollbar-thumb { background-color: rgba(35, 35, 35, .28); }
    :root::-webkit-scrollbar-thumb:hover, :root::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:active { background-color: rgba(35, 35, 35, .42); }
}
@supports not selector(::-webkit-scrollbar) {
    html, body, * { scrollbar-width: thin; scrollbar-color: rgba(35, 35, 35, .14) transparent; }
    html { scrollbar-width: auto; scrollbar-color: rgba(35, 35, 35, .24) transparent; }
}