/* Dottpace landing — the Home hero, presented the way Linear presents its product (the founder's ask, 15 Oct 2026).
   Loaded after home.css, so the rules here win over its older hero rules.

   THE WORDS sit on the content edge, left-aligned: a two-line headline, one grey line, then a row with the two buttons on the
   left and the quiet "Sample data · Open the full demo" link at the far right.
   THE WINDOW is the live dashboard (the app's embed mode) at container width: 1px hairline, 12px radius, a faint top highlight,
   and a soft shadow it casts onto the floor. Above it, inside the stage, the five-site switcher is a quiet row of tabs.
   THE STAGE is a full-width panel, 4px in from the viewport sides, behind the window. It is the page colour at its top (so it
   has no top edge), lights up towards its bottom into a neutral floor — brightest under the window's centre, darker at the
   bottom corners — and its rounded bottom edge shows under the window before the page carries on.
   Colours are the identity's core greys (Dottpace-Identity v1.0, 04-Colours: grey-950 #0C0C0D … grey-100 #EDEDEF) on the
   canvas tokens; dark has no blue tint. The identity's fine grain (feTurbulence 0.9, 3 octaves) is on the floor only — a
   background, never the mark. Light: page white into a soft cool-grey floor, the window on the light app canvas. */

/* ---------- the stage and window colours (light is :root; dark twice: the system setting and the explicit choice) ---------- */
:root{
  /* Oct 15 (founder): "lighter on the grey" — the floor is a whisper, not a slab */
  --st-1:#f7f7f9;                         /* where the floor starts to show */
  --st-2:#f1f1f4;                         /* mid floor */
  --st-3:#ececf0;                         /* the bottom corners */
  --st-glow:rgb(255 255 255 / .5);        /* the pool of light under the window */
  --st-core:rgb(255 255 255 / .3);
  --st-rim:rgb(0 0 0 / .06);              /* the panel's own hairline, visible only where the floor is */
  --st-lip:rgb(255 255 255 / .7);         /* a lit bottom edge */
  --st-grain-o:.045;
  --win-line:rgb(0 0 0 / .1);
  --win-hi:rgb(255 255 255 / .6);
  --win-cast:0 1px 2px rgb(0 0 0 / .06),0 12px 24px -12px rgb(28 28 34 / .16),0 36px 72px -28px rgb(28 28 34 / .24),0 72px 120px -56px rgb(28 28 34 / .2);
  --tab-ink:var(--text-3);--tab-ink-on:var(--text-1);--tab-on:rgb(0 0 0 / .05);--tab-on-line:rgb(0 0 0 / .08);--tab-h:rgb(0 0 0 / .035);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --st-1:#101012;--st-2:#151517;--st-3:#1c1c1f;   /* Oct 15 (founder): lighter on the grey, then "darker at the bottom" */
    --st-glow:rgb(255 255 255 / .08);--st-core:rgb(255 255 255 / .035);
    --st-rim:rgb(255 255 255 / .07);--st-lip:rgb(255 255 255 / .12);
    --st-grain-o:.05;
    --win-line:rgb(255 255 255 / .1);--win-hi:rgb(255 255 255 / .1);
    --win-cast:0 0 0 1px rgb(0 0 0 / .45),0 1px 2px rgb(0 0 0 / .4),0 16px 32px -16px rgb(0 0 0 / .55),0 40px 64px -36px rgb(0 0 0 / .6);
    --tab-on:rgb(255 255 255 / .07);--tab-on-line:rgb(255 255 255 / .09);--tab-h:rgb(255 255 255 / .04);
  }
}
:root[data-theme="dark"]{
  --st-1:#101012;--st-2:#151517;--st-3:#1c1c1f;   /* Oct 15 (founder): lighter on the grey, then "darker at the bottom" */
  --st-glow:rgb(255 255 255 / .08);--st-core:rgb(255 255 255 / .035);
  --st-rim:rgb(255 255 255 / .07);--st-lip:rgb(255 255 255 / .12);
  --st-grain-o:.05;
  --win-line:rgb(255 255 255 / .1);--win-hi:rgb(255 255 255 / .1);
  --win-cast:0 0 0 1px rgb(0 0 0 / .45),0 1px 2px rgb(0 0 0 / .4),0 16px 32px -16px rgb(0 0 0 / .55),0 40px 64px -36px rgb(0 0 0 / .6);
  --tab-on:rgb(255 255 255 / .07);--tab-on-line:rgb(255 255 255 / .09);--tab-h:rgb(255 255 255 / .04);
}

/* ---------- the words, the two buttons and the sample-data link ---------- */
.hero{position:relative;padding-top:clamp(48px,6.4vw,104px);overflow:clip;isolation:isolate}
.hero-in{text-align:left}
.hero .hero-h{max-width:none;margin:0;font-size:clamp(2.25rem,1.3rem + 2.9vw,3.5rem);font-weight:600;line-height:1.06;letter-spacing:-.036em;text-wrap:balance}
.hero-l{display:block}   /* each line is its own block: at any width a sentence never breaks across the two */
.hero-sub{max-width:40em;margin:20px 0 0;font-size:clamp(1rem,.95rem + .2vw,1.125rem);line-height:1.5;letter-spacing:-.006em;color:var(--text-3);text-wrap:pretty}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:32px}
.hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;margin:0}
.hero-actions .btn{height:42px;padding:0 18px;border-radius:var(--r-ctl);font-size:14.5px}
.hero .hero-cap{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;line-height:1.3;color:var(--text-3);white-space:nowrap}
.hero-cap-k{display:inline-flex;align-items:center;gap:7px}
.hero-cap .live-dot{width:6px;height:6px;background:currentColor;box-shadow:none;animation:none;opacity:.6}
.hero:has(.hero-fig.is-live) .hero-cap .live-dot{background:var(--pos);opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--pos) 20%,transparent)}
.motion .hero:has(.hero-fig.is-live) .hero-cap .live-dot{animation:live-pulse 2.4s var(--ease-out) 2}   /* two pulses (4.8 s), then still: Rulebook L3 */
.hero-cap a{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--text-1);border-radius:4px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--dur-1) var(--ease-out)}
.hero-cap a:hover{text-decoration-color:currentColor}
.hero-cap a .ic{width:13px;height:13px;transition:translate var(--dur-2) var(--ease-out)}
.hero-cap a:hover .ic{translate:2px 0}
.hero-cap a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ---------- the stage ---------- */
.hero-fig{position:relative;margin:0;padding:clamp(40px,3.9vw,56px) 0 clamp(56px,6.2vw,88px)}
.hero-fig-in{position:relative;z-index:1}
.hero-bd{position:absolute;z-index:0;inset:0 4px;border-radius:0 0 12px 12px;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 22% at 50% 100%,var(--st-core),transparent),
    radial-gradient(ellipse 64% 62% at 50% 100%,var(--st-glow),transparent),
    linear-gradient(to bottom,var(--bg) 0,var(--bg) 120px,var(--st-1) 34%,var(--st-2) 68%,var(--st-3));
  box-shadow:inset 0 0 0 1px var(--st-rim),inset 0 -1px 0 var(--st-lip);
  /* the top is the page itself: the panel fades in from it, so neither its top nor its sides start with an edge */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 96px,#000 46%);mask-image:linear-gradient(to bottom,transparent 0,transparent 96px,#000 46%)}
/* the identity's fine grain, on the floor only */
.hero-bd::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--st-grain-o);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000);mask-image:linear-gradient(to bottom,transparent 30%,#000)}
/* the page under the stage carries on without a rule of its own */
.hero+.sec{border-top:0}

/* ---------- the switcher: a quiet row of tabs on the stage, just above the window ---------- */
.hero-bar{display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px}
.hero-bar .hero-sw{display:flex;flex-wrap:nowrap;gap:2px;padding:0;border-radius:0;background:none;box-shadow:none}
.hero-sw[hidden]{display:none!important}
.hero-sw button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:500;color:var(--tab-ink);white-space:nowrap;background:transparent;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.hero-sw button .ic{width:14px;height:14px;color:currentColor;opacity:.8}
.hero-sw button:hover{color:var(--tab-ink-on);background:var(--tab-h)}
.hero-sw button[aria-selected="true"]{color:var(--tab-ink-on);background:var(--tab-on);box-shadow:inset 0 0 0 1px var(--tab-on-line)}
.hero-sw button[aria-selected="true"] .ic{color:currentColor;opacity:1}
.hero-sw button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.motion .hero-sw:not([hidden]){animation:hero-fade 500ms linear both}

/* ---------- the window ---------- */
.hero-fig .hero-stage{position:relative;margin:0;padding:0;border-radius:12px;overflow:visible;background:none;box-shadow:var(--win-cast)}
.hero-fig .shot-hero{width:100%;max-width:none;margin:0;border-radius:12px;background:var(--bg-band);box-shadow:none;-webkit-mask-image:none;mask-image:none}
.hero-fig .shot-hero::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--win-line),inset 0 1px 0 var(--win-hi);pointer-events:none}
@media (min-width:640px){
  /* one shape before and after the live demo arrives (900px and up), so nothing moves; 640–899 keep the same window with the picture */
  .hero-fig .shot-hero{aspect-ratio:1440/900}
  .hero-fig .shot-hero picture{display:block;height:100%;-webkit-mask-image:none;mask-image:none}
  .hero-fig .shot-hero picture img{height:100%;object-fit:cover;object-position:top}
}

/* ---------- under 900px: the picture (no live demo, so no switcher), the same stage; phones get the phone-sized picture ---------- */
@media (max-width:899px){
  .hero-fig{padding-top:40px}
  .hero-bar{display:none}
}
@media (max-width:639px){
  .hero-fig .hero-stage{max-width:452px;margin-inline:auto}
  .hero-fig .shot-hero{aspect-ratio:900/1180}
  .hero-fig .shot-hero picture,.hero-fig .shot-hero img{display:block;height:100%;object-fit:cover;object-position:top}
  .hero-bd{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 48px,#000 44%);mask-image:linear-gradient(to bottom,transparent 0,transparent 48px,#000 44%)}
}
@media (max-width:560px){
  .hero-row{flex-direction:column;align-items:stretch;gap:18px;margin-top:28px}
  .hero .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;height:44px}
  .hero .hero-cap{justify-content:flex-start}
  .hero-bd{border-radius:0 0 10px 10px}
}

/* ---------- arrival: the words come into focus as they rise, then the window fades up onto the stage;
   scrolling then brings up the floor's light. Without motion (Reduce motion, no JS) all of it is simply there. ---------- */
@keyframes hero-in{from{opacity:0;translate:0 10px;filter:blur(8px)}}
@keyframes hero-up{from{opacity:0;translate:0 18px}}
@keyframes hero-fade{from{opacity:0}}
.motion .hero .hero-h{animation:hero-in 1000ms var(--ease-expo) 40ms both}
.motion .hero .hero-sub{animation:hero-in 1000ms var(--ease-expo) 140ms both}
.motion .hero .hero-row{animation:hero-in 1000ms var(--ease-expo) 220ms both}
.motion .hero-fig .hero-stage{animation:hero-up 1300ms var(--ease-expo) 420ms both}
.motion .hero-bd{animation:hero-fade 1400ms linear 300ms both}
@supports (animation-timeline:scroll()){
  /* the floor's light: a little over half strength at the top of the page, full once the window has scrolled up */
  .motion .hero-bd{background:
    radial-gradient(ellipse 34% 22% at 50% 100%,var(--st-core),transparent),
    linear-gradient(to bottom,var(--bg) 0,var(--bg) 120px,var(--st-1) 34%,var(--st-2) 68%,var(--st-3))}
  .motion .hero-bd::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 64% 62% at 50% 100%,var(--st-glow),transparent);
    animation:hero-floor linear both;animation-timeline:scroll(root);animation-range:0 640px}
  @keyframes hero-floor{from{opacity:.55}}
}
@media (prefers-reduced-motion:reduce){
  .hero .hero-h,.hero .hero-sub,.hero .hero-row,.hero-fig .hero-stage,.hero-bd,.hero-bd::before,.hero-sw,.hero-cap .live-dot{animation:none!important}
}

/* ---------- the announcement bar above the nav stays one slim line (on phones: the offer's head only; its terms are on /join/) ---------- */
.announce-in{padding-block:8px}
@media (max-width:560px){
  .announce-t{display:none}
  .announce-h::after{content:"."}
}

/* ---------- Oct 15 (founder): EVERYTHING CENTRED — the words, the buttons, the sample-data link and the site tabs — so the hero is
   our own, not Linear's left-aligned copy. The stage and window stay. Keep this block last; do not revert it. ---------- */
.hero-in{text-align:center}
.hero .hero-h{margin-inline:auto}
.hero-sub{margin:20px auto 0}
.hero-row{flex-direction:column;justify-content:center;align-items:center;gap:16px}
.hero .hero-actions{justify-content:center}
.hero .hero-cap{justify-content:center}
.hero-bar{justify-content:center}
@media (max-width:560px){
  .hero-row{align-items:stretch}
  .hero .hero-cap{justify-content:center}
}

/* ---------- the hero on a phone (the review, Oct 16): one finding, readable — the issue, its evidence, the fix waiting for approval, the result
   (build.py hero_card, from §2's numbers). The dashboard screenshot is too small to read at this width, so it steps aside. ---------- */
.hero-card{display:none}
@media (max-width:639px){
  .hero-fig .shot-hero{display:none}
  .hero-fig .hero-stage{box-shadow:none}
  .hero-card{display:block;padding:16px 16px 6px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--win-cast),inset 0 0 0 1px var(--win-line)}
  .hc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .hc-site{font-size:12.5px;color:var(--text-3);white-space:nowrap}
  .hc-t{margin-top:12px;font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.018em;color:var(--text-1);text-wrap:balance}
  .hc-l{margin-top:12px}
  .hc-r{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line)}
  .hc-i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2)}
  .hc-i .ic{width:15px;height:15px}
  .hc-r.is-pos .hc-i{color:var(--pos)}
  .hc-k{font-size:12px;font-weight:500;color:var(--text-3)}
  .hc-r p:not(.hc-k){margin-top:3px;font-size:15px;line-height:1.45;color:var(--text-1);text-wrap:pretty}
  .hc-r b{font-weight:600}
  .hc-neg{color:var(--neg)}
  .hc-r .chip{vertical-align:1px}
  .hc-r p.hc-ap{display:grid;justify-items:start;margin-top:8px}
  .hc-ap>*{grid-area:1/1}
  .hc-yes{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:8px;background:var(--inv);color:var(--inv-fg);font-size:13.5px;font-weight:500;opacity:0}
  .hc-ok{display:inline-flex;align-items:center;gap:6px;height:30px;font-size:13.5px;font-weight:600;color:var(--pos)}
  .hc-ok .ic{width:15px;height:15px}
  /* with motion: the approval plays once as the card lands — Approve, pressed, Approved */
  .motion .hc-yes{animation:hc-yes 1400ms linear 1500ms both}
  .motion .hc-ok{animation:hc-ok 420ms var(--ease-expo) 2700ms both}
}
@keyframes hc-yes{0%{opacity:0}10%,80%{opacity:1;scale:1}86%{opacity:1;scale:.96}100%{opacity:0;scale:.96}}
@keyframes hc-ok{from{opacity:0;translate:0 4px}}
@media (prefers-reduced-motion:reduce){.hc-yes,.hc-ok{animation:none!important}}