/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* brand */
  --violet:      #6E2BF5;
  --violet-deep: #5416CE;
  --violet-soft: #A97BFF;
  --lime:        #D7FF3E;

  /* grounds */
  --paper:  #FBF9FF;
  --lilac:  #F1EBFF;
  --lilac-2:#E2D6FF;
  --ink:    #1A0640;

  /* placeholder-skeleton fills, re-tinted inside dark sections */
  --sk-fill: #E2D6FF;
  --sk-soft: #F1EBFF;

  /* semantic availability states */
  --st-ok:   #00C48C;
  --st-half: #FFB020;
  --st-off:  #FF5C7A;
  --st-none: #9AA0B4;

  /* contextual — overridden inside dark sections */
  --text:   #1B0F30;
  --muted:  #6C5D86;
  --line:   #E7DCFC;
  --card:   #FFFFFF;
  --ground: var(--paper);

  /* form */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 30px;
  --pop:  0 2px 0 var(--lilac-2), 0 26px 50px -34px rgba(84,22,206,.55);

  /* One sans, two jobs. Plus Jakarta Sans is geometric like the wordmark and
     sits in the same family of shapes as the app UI, so the page and the
     product read as one thing. Headlines are the 800 weight pulled tight;
     that contrast does the work a second family used to.
     IBM Plex Mono stays on the data: eyebrows, dates, status chips, URLs. */
  --f-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
::selection{background:var(--lime); color:var(--ink)}
:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:26px}
section[id]{scroll-margin-top:96px}
.wrap--tight{max-width:920px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ==========================================================================
   3. SECTION SHELL — single source of vertical rhythm
   ========================================================================== */
.section{position:relative; padding-block:clamp(74px,9.5vw,132px); background:var(--ground)}
.section--lilac{--ground:var(--lilac); --card:#fff}
.section--ink{
  --text:#F7F2FF;
  --muted:#B29CD8;
  --line:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.05);
  --ground:var(--ink);
  --sk-fill:rgba(255,255,255,.15);
  --sk-soft:rgba(255,255,255,.06);
  color:var(--text);
  /* the same top-to-bottom fall as the logo mark */
  background:linear-gradient(176deg, #26095E 0%, var(--ink) 60%);
}

/* ==========================================================================
   4. TYPE SCALE
   ========================================================================== */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--violet);
  display:inline-flex;
  align-items:center;
  gap:.65em;
  margin:0 0 22px;
}
.section--ink .eyebrow{color:var(--violet-soft)}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:currentColor; transform:rotate(45deg); flex:none;
}

.h-xl{font-size:clamp(2.35rem,6.6vw,4.9rem); letter-spacing:-.045em}
.h-lg{font-size:clamp(1.95rem,4.6vw,3.4rem); letter-spacing:-.038em}
.h-md{font-size:clamp(1.55rem,3vw,2.15rem); letter-spacing:-.03em}
.h-sm{font-size:1.1rem; letter-spacing:-.018em; font-weight:700; font-family:var(--f-body)}

.lede{font-size:clamp(1.04rem,1.5vw,1.26rem); color:var(--muted); line-height:1.55; max-width:60ch}
.body{color:var(--muted); line-height:1.65}
.body + .body{margin-top:1.05em}
.body strong{color:var(--text); font-weight:600}
.mono{font-family:var(--f-mono); font-size:.8rem; font-weight:700; letter-spacing:.03em}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}

.head{max-width:760px; margin-bottom:clamp(44px,5vw,66px)}
.head.center{margin-inline:auto}
.head .lede{margin-top:22px}

/* stress mark under a hero word */
.mark{position:relative; display:inline-block; white-space:nowrap; color:var(--violet)}
.mark svg{position:absolute; left:0; bottom:-.01em; width:100%; height:.19em; overflow:visible; pointer-events:none}
.mark path{
  fill:none; stroke:var(--violet); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:320; stroke-dashoffset:320;
  animation:draw 1s cubic-bezier(.2,.7,.3,1) .6s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--violet); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:15px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2px solid transparent; border-radius:999px;
  font-weight:600; font-size:1rem; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s, border-color .18s;
  box-shadow:0 12px 26px -14px rgba(84,22,206,.9);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(84,22,206,.95)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px; height:18px; transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--text); border-color:var(--line); box-shadow:none}
.btn--ghost:hover{border-color:var(--violet); color:var(--violet); box-shadow:none}
.btn--ghost svg{transition:transform .2s}
.btn--lime{--btn-bg:var(--lime); --btn-fg:var(--ink); box-shadow:0 12px 26px -14px rgba(215,255,62,.85)}
.btn--white{--btn-bg:#fff; --btn-fg:var(--violet-deep); box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
.btn--sm{padding:11px 20px; font-size:.92rem}
.btn--lg{padding:18px 32px; font-size:1.05rem}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.btn-row.center{justify-content:center}

/* ==========================================================================
   6. AVAILABILITY CHIP — the signature object
   ========================================================================== */
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 8px;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:999px;
  font-size:.88rem; font-weight:500; white-space:nowrap;
  box-shadow:0 8px 20px -14px rgba(23,9,43,.6);
}
.chip--plain{padding-left:15px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--st-none); flex:none}
.dot--ok  {background:var(--st-ok);   box-shadow:0 0 0 4px rgba(0,196,140,.16)}
.dot--half{background:var(--st-half); box-shadow:0 0 0 4px rgba(255,176,32,.16)}
.dot--off {background:var(--st-off);  box-shadow:0 0 0 4px rgba(255,92,122,.16)}
.dot--none{background:var(--st-none); box-shadow:0 0 0 4px rgba(154,160,180,.16)}
.state{font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}

.avatar{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  color:#fff; background:var(--violet);
}
.avatar--lg{width:42px; height:42px; font-size:.78rem}

/* ==========================================================================
   7. CARDS + GRIDS
   ========================================================================== */
.card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  padding:30px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.card--hover:hover{transform:translateY(-5px); border-color:var(--violet-soft); box-shadow:var(--pop)}
.card__icon{
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--lilac); color:var(--violet);
  margin-bottom:18px;
}
.section--ink .card__icon{background:rgba(169,123,255,.16); color:var(--violet-soft)}
.card__icon svg{width:23px; height:23px}
.card .h-sm{margin-bottom:8px}
.card .body{font-size:.96rem}

.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* ==========================================================================
   8. SCREENSHOT PLACEHOLDER
   ========================================================================== */
.shot{
  /* the app is dark, so the frame around it is too — a light chrome bar over
     a dark capture reads as two different products */
  --line:rgba(255,255,255,.10);
  --card:#100B1E;
  --text:#F2ECFF;
  --muted:#9F8CC4;
  --sk-fill:rgba(255,255,255,.13);
  --sk-soft:rgba(255,255,255,.05);
  margin:0;
  background:#100B1E;
  border:1.5px solid #2A1D45;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 2px 0 rgba(84,22,206,.2), 0 60px 90px -50px rgba(26,6,64,.8);
}
.shot__chrome{
  display:flex; align-items:center; gap:7px;
  padding:13px 18px;
  border-bottom:1.5px solid var(--line);
  background:#181031;
}
.shot__chrome i{width:10px; height:10px; border-radius:50%; flex:none}
.shot__chrome i:nth-child(1){background:#FF5C7A}
.shot__chrome i:nth-child(2){background:#FFB020}
.shot__chrome i:nth-child(3){background:#00C48C}
.shot__url{
  margin-left:12px; flex:1;
  font-family:var(--f-mono); font-size:.7rem; color:var(--muted);
  background:rgba(255,255,255,.06); border-radius:999px; padding:5px 14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot__body{
  position:relative; overflow:hidden;
  aspect-ratio:1.9/1;
  background:#100B1E;
}
.shot__body img{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%;
  object-fit:cover; object-position:left top;
}
/* the skeleton + slot note only appear if the capture is not there yet */
.shot__body .sk,
.shot__body .shot__note{display:none}
.shot__body.is-empty img{display:none}
.shot__body.is-empty .sk{display:flex}
.shot__body.is-empty .shot__note{display:grid}
.shot__note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:min(400px,74%); display:grid; justify-items:center; gap:9px;
  padding:22px 26px; text-align:center;
  border:1.5px solid var(--line); border-radius:18px;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow:0 26px 54px -30px rgba(23,9,43,.55);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.shot__label{font-family:var(--f-mono); font-size:.76rem; font-weight:700; letter-spacing:.02em; color:var(--violet)}
.shot__label{color:var(--violet-soft)}
.shot__hint{font-size:.83rem; color:var(--muted); max-width:44ch; line-height:1.5}

/* ---- the skeleton behind the note ---------------------------------- */
.sk{position:absolute; inset:0; padding:20px 22px; display:flex; flex-direction:column; gap:10px; opacity:.72}
.sk i{display:block; flex:none}
.sk__bar{display:flex; align-items:center; gap:8px; padding-bottom:13px; border-bottom:1.5px solid var(--line)}
.sk__pill{height:9px; border-radius:99px; background:var(--sk-fill)}
.sk__grow{flex:1 1 auto}
.sk__row{display:flex; align-items:center; gap:11px; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px}
.sk__av{width:22px; height:22px; border-radius:50%; background:var(--sk-fill)}
.sk__ln{height:8px; border-radius:99px; background:var(--sk-fill)}
.sk__tag{width:54px; height:15px; border-radius:99px; background:var(--sk-fill)}
.sk__tag--ok{background:color-mix(in srgb, var(--st-ok) 38%, transparent)}
.sk__tag--half{background:color-mix(in srgb, var(--st-half) 38%, transparent)}
.sk__tag--off{background:color-mix(in srgb, var(--st-off) 38%, transparent)}
.sk__cells{flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.sk__cells i{border-radius:7px; background:var(--sk-soft); border:1.5px solid var(--line)}
.sk__cells i.ok{background:color-mix(in srgb, var(--st-ok) 15%, transparent)}
.sk__cells i.half{background:color-mix(in srgb, var(--st-half) 17%, transparent)}
.sk__cells i.off{background:color-mix(in srgb, var(--st-off) 15%, transparent)}
.sk__msgs{display:flex; flex-direction:column; gap:9px; padding-top:4px}
.sk__msg{height:32px; width:60%; border-radius:14px 14px 14px 4px; background:var(--sk-fill)}
.sk__msg--r{margin-left:auto; width:46%; border-radius:14px 14px 4px 14px}
.shot__hint code{font-family:var(--f-mono); font-size:.78rem; background:var(--lilac); color:var(--violet-deep); padding:2px 7px; border-radius:6px}
.section--ink .shot__hint code{background:rgba(169,123,255,.18); color:var(--violet-soft)}


/* ==========================================================================
   9. SCROLL REVEAL
   ========================================================================== */
/* opacity:0 is applied only once JS confirms it can reveal them again */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-in{opacity:1; transform:none}
.js .reveal[data-d="1"]{transition-delay:.07s}
.js .reveal[data-d="2"]{transition-delay:.14s}
.js .reveal[data-d="3"]{transition-delay:.21s}
.js .reveal[data-d="4"]{transition-delay:.28s}
.js .reveal[data-d="5"]{transition-delay:.35s}

/* ==========================================================================
   10. NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(251,249,255,.78);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1.5px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.is-stuck{border-bottom-color:var(--line); background:rgba(251,249,255,.94)}
.nav__in{display:flex; align-items:center; gap:26px; height:74px}
.brand{display:inline-flex; align-items:center; text-decoration:none; color:#0F0C20}
.brand__logo{height:30px; width:auto; aspect-ratio:283/100; display:block}
.brand__logo--foot{height:36px}
.nav__links{display:flex; gap:4px; margin-left:auto}
.nav__links a{
  padding:9px 15px; border-radius:999px; text-decoration:none;
  font-size:.94rem; font-weight:500; color:var(--muted);
  transition:color .18s, background .18s;
}
.nav__links a:hover{color:var(--violet); background:var(--lilac)}
.nav__cta{display:flex; align-items:center; gap:10px}
.nav__burger{
  display:none; width:44px; height:44px; border-radius:13px;
  border:1.5px solid var(--line); background:var(--card); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__burger svg{width:20px; height:20px}
.nav__burger .x{display:none}

/* ==========================================================================
   11. HERO
   ========================================================================== */
.hero{position:relative; padding-top:clamp(56px,8vw,92px); padding-bottom:0; overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 calc(14.28% - 1.5px), var(--line) calc(14.28% - 1.5px) 14.28%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 12%, #000, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 12%, #000, transparent 72%);
}
.hero__bg::after{
  content:""; position:absolute; left:50%; top:-320px; transform:translateX(-50%);
  width:1100px; height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(110,43,245,.20), rgba(110,43,245,0) 66%);
  filter:blur(10px);
}
.hero__in{position:relative; z-index:1; text-align:center}
.hero__badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 8px 7px 16px; margin-bottom:26px;
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); box-shadow:0 10px 24px -18px rgba(84,22,206,.9);
}
.hero__badge b{
  background:var(--lime); color:var(--ink); font-weight:700;
  padding:4px 10px; border-radius:999px; letter-spacing:.1em;
}
.hero h1{margin-bottom:26px}
.hero h1 > span{display:block}
.hero__sub{font-size:clamp(1.06rem,1.6vw,1.3rem); color:var(--muted); max-width:56ch; margin:0 auto 14px; line-height:1.5}
.hero__nots{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:34px;
}
.hero__nots span{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.02em;
  color:var(--muted); border:1.5px solid var(--line); border-radius:999px; padding:5px 13px;
  background:var(--card);
}
.hero__nots span::before{content:"— "; color:var(--st-off)}
.hero__micro{margin-top:18px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.03em; color:var(--muted)}

/* hero stage: product frame + floating chips */
.stage{position:relative; margin-top:clamp(48px,6vw,76px); padding-bottom:clamp(74px,9vw,120px)}
.stage__date{
  position:absolute; z-index:3; left:50%; top:-22px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:999px; padding:10px 18px;
  font-family:var(--f-mono); font-size:.74rem; font-weight:500; letter-spacing:.02em;
  box-shadow:0 18px 34px -18px rgba(23,9,43,.9);
}
.stage__date b{color:var(--lime); font-weight:700}

/* hero load sequence */
.rise{opacity:0; transform:translateY(20px); animation:rise .85s cubic-bezier(.2,.7,.3,1) forwards}
.rise[data-r="1"]{animation-delay:.05s}
.rise[data-r="2"]{animation-delay:.14s}
.rise[data-r="3"]{animation-delay:.23s}
.rise[data-r="4"]{animation-delay:.32s}
.rise[data-r="5"]{animation-delay:.41s}
.rise[data-r="6"]{animation-delay:.52s}
@keyframes rise{to{opacity:1; transform:none}}

/* ==========================================================================
   12. PROBLEM — scattered questions
   ========================================================================== */
.asks{display:flex; flex-wrap:wrap; gap:16px; margin:38px 0 40px; max-width:820px}
.ask{
  position:relative;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:20px 20px 20px 6px;
  padding:15px 22px;
  font-size:1.02rem; color:var(--text);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.9);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.ask:nth-child(1){transform:rotate(-1.6deg)}
.ask:nth-child(2){transform:rotate(1.2deg)}
.ask:nth-child(3){transform:rotate(-.8deg)}
.ask:nth-child(4){transform:rotate(1.9deg)}
.ask:hover{transform:rotate(0) translateY(-3px)}
.ask small{
  display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.answer{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1.5px solid var(--line); padding-top:32px; margin-top:8px;
}
.answer p{font-family:var(--f-display); font-size:clamp(1.4rem,2.7vw,2rem); font-weight:800; letter-spacing:-.032em}
.answer .hl{color:var(--lime)}

/* ==========================================================================
   13. THE BIG IDEA — interactive date demo
   ========================================================================== */
.demo{
  display:grid; grid-template-columns:300px 1fr; gap:0;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--pop);
}
.demo__side{padding:26px; border-right:1.5px solid var(--line); background:color-mix(in srgb, var(--lilac) 55%, var(--card))}
.demo__label{font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.demo__days{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:20px}
.day{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 4px; border-radius:13px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--card);
  font-family:var(--f-mono); transition:.18s;
}
.day em{font-style:normal; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.day b{font-size:1.02rem; font-weight:700; color:var(--text)}
.day:hover{border-color:var(--violet-soft)}
.day.is-mid{background:var(--lilac); border-color:var(--lilac-2)}
.day.is-end{background:var(--violet); border-color:var(--violet)}
.day.is-end em{color:rgba(255,255,255,.75)}
.day.is-end b{color:#fff}
.demo__range{
  font-family:var(--f-mono); font-size:.76rem; color:var(--text);
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:11px 14px; margin-bottom:16px;
}
.demo__range span{color:var(--muted)}
.demo__hint{font-size:.82rem; color:var(--muted); line-height:1.5}
.demo__main{padding:26px}
.demo__top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.demo__count{font-family:var(--f-display); font-size:1.3rem; font-weight:800; letter-spacing:-.028em}
.demo__count b{color:var(--violet)}
.people{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.person{
  display:flex; align-items:center; gap:13px;
  padding:11px 15px; border-radius:15px;
  border:1.5px solid var(--line); background:var(--card);
  animation:slot .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes slot{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.person__id{min-width:0; flex:1}
.person__id b{display:block; font-size:.97rem; font-weight:600; letter-spacing:-.012em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.person__id span{font-size:.78rem; color:var(--muted)}
.person__days{display:flex; gap:5px}
.person__days i{width:8px; height:8px}
.person__verdict{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.person--free{border-color:rgba(0,196,140,.45); background:rgba(0,196,140,.06)}
.person--free .person__verdict{background:rgba(0,196,140,.14); color:#00845F}
.person--part .person__verdict{background:rgba(255,176,32,.16); color:#946100}
.person--no{opacity:.62}
.person--no .person__verdict{background:color-mix(in srgb, var(--st-none) 18%, transparent); color:var(--muted)}

/* the four availability states */
.states{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(40px,5vw,60px)}
.state-card{
  position:relative; overflow:hidden;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  padding:26px 24px 24px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.state-card:hover{transform:translateY(-5px); box-shadow:var(--pop)}
.state-card::before{content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--sc)}
.state-card__key{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--sc); display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.state-card__key i{width:10px; height:10px; border-radius:50%; background:var(--sc)}
.state-card p{font-size:1.02rem; color:var(--text); font-weight:500; letter-spacing:-.01em}
.state-card svg{width:22px; height:22px; color:var(--sc); margin-bottom:16px; opacity:.9}

/* ==========================================================================
   14. WORKFLOW STEPPER (for project managers)
   ========================================================================== */
.flow{list-style:none; margin:0; padding:0; counter-reset:f}
.flow li{
  position:relative; counter-increment:f;
  padding:0 0 26px 60px;
}
.flow li::before{
  content:"0" counter(f);
  position:absolute; left:0; top:-2px;
  width:40px; height:40px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--violet); color:#fff;
  font-family:var(--f-mono); font-size:.78rem; font-weight:700;
}
.flow li::after{
  content:""; position:absolute; left:19.25px; top:46px; bottom:6px;
  width:1.5px; background:linear-gradient(var(--lilac-2), transparent);
}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::after{display:none}
.flow b{display:block; font-family:var(--f-body); font-size:1.1rem; font-weight:700; letter-spacing:-.02em; margin-bottom:4px}
.flow span{color:var(--muted); font-size:.96rem}

/* ==========================================================================
   15. SLACK
   ========================================================================== */
.slack{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch}
.slack__step{
  position:relative;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  padding:24px;
}
.slack__step + .slack__step::before{
  content:""; position:absolute; left:-16px; top:50%; width:16px; height:1.5px;
  background:var(--violet-soft);
}
.slack__who{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.slack__msg{
  background:color-mix(in srgb, var(--card) 60%, transparent);
  border:1.5px solid var(--line); border-radius:16px 16px 16px 5px;
  padding:14px 17px; font-size:1.02rem; line-height:1.45;
}
.slack__out{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.88rem; font-weight:700; letter-spacing:0;
  background:rgba(0,196,140,.13); color:#33E0AC;
  border:1.5px solid rgba(0,196,140,.3); border-radius:999px; padding:10px 17px;
}
.reverse{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:22px; padding:22px 26px;
  border:1.5px dashed var(--line); border-radius:var(--r);
}
.reverse svg{width:22px; height:22px; color:var(--violet-soft); flex:none}

/* ==========================================================================
   16. HOW IT WORKS — numbered sequence
   ========================================================================== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{position:relative; padding-top:20px}
.step__n{
  font-family:var(--f-mono); font-size:2.7rem; font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--lilac-2); margin-bottom:14px;
}
.step__icon{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--violet); color:#fff; margin-bottom:16px}
.step__icon svg{width:19px; height:19px}
.step h3{
  font-family:var(--f-mono); font-size:.74rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--violet);
  margin-bottom:10px;
}
.step p{color:var(--muted); font-size:.98rem}
.step__list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.step__list li{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.02em;
  border:1.5px solid var(--line); border-radius:999px; padding:4px 11px; color:var(--muted);
}

/* ==========================================================================
   17. COMPARISON
   ========================================================================== */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.vs__col{border-radius:var(--r-lg); padding:32px; border:1.5px solid var(--line); background:var(--card)}
.vs__col--old{background:transparent}
.vs__col--new{background:var(--ink); border-color:var(--ink); color:#F7F2FF; box-shadow:0 40px 70px -44px rgba(23,9,43,.9)}
.vs__title{
  font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.vs__col--old .vs__title{color:var(--muted)}
.vs__col--new .vs__title{color:var(--lime)}
.vs ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.vs li{display:flex; align-items:center; gap:13px; padding:12px 0; font-size:1.02rem; border-bottom:1.5px solid var(--line)}
.vs__col--new li{border-bottom-color:rgba(255,255,255,.1)}
.vs li:last-child{border-bottom:0}
.vs li svg{width:17px; height:17px; flex:none}
.vs__col--old li{color:var(--muted)}
.vs__col--old li svg{color:var(--st-off)}
.vs__col--new li svg{color:var(--st-ok)}

/* ==========================================================================
   18. USE CASES
   ========================================================================== */
.grid--rule{gap:36px 56px}
.uc{padding:26px 0 6px; border-top:2px solid var(--text); transition:border-color .22s, color .22s}
.uc:hover{border-top-color:var(--violet)}
.uc:hover .uc__q{color:var(--violet-deep)}
.uc__q{
  font-family:var(--f-display); font-size:1.28rem; font-weight:800; letter-spacing:-.032em;
  line-height:1.2; margin-bottom:14px; color:var(--violet);
}
.uc__tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.uc__tag svg{width:15px; height:15px; color:var(--violet)}

/* ==========================================================================
   19. PHILOSOPHY + TRUST
   ========================================================================== */
.split3{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; border-top:1.5px solid var(--line)}
.split3 div{padding:26px 24px; border-right:1.5px solid var(--line)}
.split3 div:last-child{border-right:0}
.split3 em{
  display:block; font-style:normal; font-family:var(--f-mono); font-size:.68rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.split3 p{font-size:1.06rem; letter-spacing:-.015em}
.split3 div:last-child p{color:var(--lime); font-weight:600}
.trust{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:34px}
.trust span{
  display:inline-flex; align-items:center; gap:9px;
  border:1.5px solid var(--line); background:var(--card); border-radius:999px;
  padding:10px 18px; font-size:.94rem; font-weight:500;
}
.trust svg{width:16px; height:16px; color:var(--st-ok)}

/* ==========================================================================
   20. PRICING
   ========================================================================== */
.price{
  position:relative; overflow:hidden;
  background:var(--ink); color:#F7F2FF;
  border-radius:var(--r-lg); padding:clamp(34px,4.5vw,54px);
  display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(30px,4vw,54px);
  box-shadow:0 50px 80px -46px rgba(23,9,43,.85);
}
.price::before{
  content:""; position:absolute; right:-140px; top:-140px; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(110,43,245,.55), transparent 66%);
}
.price > *{position:relative}
.price__tag{
  display:inline-block; background:var(--lime); color:var(--ink);
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:22px;
}
.price__amt{display:flex; align-items:baseline; gap:12px; margin-bottom:8px}
.price__amt b{font-family:var(--f-display); font-size:clamp(4rem,9vw,6.4rem); font-weight:800; letter-spacing:-.055em; line-height:.9}
.price__amt span{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--violet-soft)}
.price__note{color:#B29CD8; margin-bottom:26px; font-size:.98rem}
.price__list{list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:11px 22px}
.price__list li{display:flex; align-items:center; gap:11px; font-size:.98rem}
.price__list svg{width:16px; height:16px; color:var(--lime); flex:none}
.price__foot{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.03em; color:#B29CD8; margin-top:14px}

/* ==========================================================================
   21. FAQ
   ========================================================================== */
.faq{border-top:1.5px solid var(--line)}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{
  display:flex; align-items:center; gap:18px; cursor:pointer; list-style:none;
  padding:24px 0; font-family:var(--f-display); font-size:clamp(1.06rem,1.9vw,1.32rem);
  font-weight:700; letter-spacing:-.024em; transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--violet)}
.faq summary::after{
  content:""; margin-left:auto; flex:none; width:28px; height:28px;
  border-radius:9px;
  background:var(--lilac) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236E2BF5" stroke-width="2.8" stroke-linecap="round"><path d="M12 6v12M6 12h12"/></svg>') center / 15px no-repeat;
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary{color:var(--violet)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__a{padding:0 60px 26px 0; color:var(--muted); max-width:70ch}
.faq__a b{display:block; font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); margin-bottom:8px}

/* ==========================================================================
   22. FINAL CTA + FOOTER
   ========================================================================== */
.final{
  --ground:var(--violet);
  --text:#fff; --muted:rgba(255,255,255,.78); --line:rgba(255,255,255,.24);
  background:linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 55%, #3D0BA0 100%);
  color:#fff; text-align:center; overflow:hidden;
}
.final::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.12) calc(10% - 1px) 10%);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 70%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 70%);
}
.final .wrap{position:relative}
.final .eyebrow{color:var(--lime)}
.final h2{margin-bottom:24px}
.final h2 > span{display:block}
.final h2 .fade{color:rgba(255,255,255,.45)}
.final__body{color:rgba(255,255,255,.85); font-size:1.12rem; margin-bottom:32px; line-height:1.5}

.foot{background:var(--ink); color:#F7F2FF; padding-block:64px 34px}
.foot__grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:38px 26px}
.foot h4{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#B29CD8; margin-bottom:16px;
}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot a{text-decoration:none; color:#E5DBF7; font-size:.95rem; transition:color .18s}
.foot a:hover{color:var(--lime)}
.foot__brand p{color:#B29CD8; font-size:.95rem; margin-top:14px; max-width:26ch}
.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1.5px solid rgba(255,255,255,.12); margin-top:52px; padding-top:26px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.03em; color:#B29CD8;
}

/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */
/* the team row needs a different shape once it stops fitting on one line */
@media (max-width:700px){
  .demo__side, .demo__main{padding:20px}
  .demo__top{gap:10px}
  .demo__top .chip{padding:5px 11px 5px 11px; font-size:.78rem}
  /* the name gets the full width so it never truncates; the verdict drops
     to a second line beside the day dots */
  .person{
    display:grid; align-items:center;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"av id id" "av days verdict";
    gap:7px 11px; padding:12px 13px;
  }
  .person .avatar{grid-area:av}
  .person__id{grid-area:id; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px}
  .person__id b{white-space:normal; overflow:visible; text-overflow:clip}
  .person__days{grid-area:days}
  .person__verdict{grid-area:verdict; justify-self:end}
  .demo__top .chip{font-size:.72rem; padding:4px 10px 4px 10px; gap:7px}
  .demo__days{gap:5px}
  .day{padding:9px 2px; border-radius:11px}
}

@media (max-width:1000px){
  .foot__grid{grid-template-columns:1fr 1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .grid--4,.states,.steps{grid-template-columns:repeat(2,1fr)}
  .demo{grid-template-columns:1fr}
  .demo__side{border-right:0; border-bottom:1.5px solid var(--line)}
  .price{grid-template-columns:1fr}
  .slack{grid-template-columns:1fr}
  .slack__step + .slack__step::before{left:50%; top:-16px; width:1.5px; height:16px}
}
/* tablet: keep the links, drop the secondary button */
@media (max-width:1080px){
  .nav__in{gap:14px}
  .nav__links a{padding:9px 12px; font-size:.92rem}
  .nav__cta .btn--ghost{display:none}
}
@media (max-width:880px){
  .nav__links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:2px; margin:0;
    padding:10px 20px 18px;
    background:var(--card);
    border-bottom:1.5px solid var(--line);
    box-shadow:0 26px 40px -30px rgba(26,6,64,.5);
  }
  .nav.is-open{background:var(--card)}
  .nav.is-open .nav__links{display:flex}
  .nav__links a{padding:13px 14px; font-size:1rem; border-radius:12px}
  .nav__burger{display:flex}
  .nav__burger .x{display:none}
  .nav.is-open .nav__burger .x{display:block}
  .nav.is-open .nav__burger .bars{display:none}
  .grid--2,.grid--3,.vs,.split3{grid-template-columns:1fr}
  .split3 div{border-right:0; border-bottom:1.5px solid var(--line)}
  .split3 div:last-child{border-bottom:0}
  .two{grid-template-columns:1fr !important}
  .price__list{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav__in{gap:14px}
  .brand__logo{height:25px}
  .nav__cta{gap:8px}
  .nav__cta .btn--sm{padding:10px 16px; font-size:.9rem}
  .hero__badge{font-size:.6rem; letter-spacing:.07em; padding-left:13px}
  /* the caption pill has to stay on one line or it swamps the frame */
  .stage__date{font-size:.58rem; padding:8px 12px; gap:7px; white-space:nowrap}
  .stage__date svg{width:12px; height:12px}
  /* a 16:9 frame is too shallow for the slot note at this width */
  .shot__body,
  .shot--tall .shot__body{aspect-ratio:4/3}
  .shot__note{width:90%; padding:15px 16px; gap:6px; border-radius:14px}
  .shot__label{font-size:.72rem}
  .shot__hint{font-size:.75rem; line-height:1.45}
  .sk{padding:13px 14px; gap:7px}
  .sk__row{padding:7px 9px; gap:8px}
  .sk__av{width:18px; height:18px}
  .sk__cells{gap:4px}
  .grid--4,.states,.steps{grid-template-columns:1fr}
  .card,.uc,.vs__col{padding:24px}
  .faq__a{padding-right:0}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js .reveal{opacity:1; transform:none}
  .rise{opacity:1; transform:none}
  .mark path{stroke-dashoffset:0}
}

/* shared two-column layout */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center}
.two--wide-right{grid-template-columns:.85fr 1.15fr}

/* ==========================================================================
   24. INNER PAGES — about, contact, privacy, terms
   ========================================================================== */
.page-head{
  padding-block:clamp(52px,7vw,92px) clamp(30px,4vw,46px);
  border-bottom:1.5px solid var(--line);
}
.page-head .lede{margin-top:20px}
.page-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted);
}
.page-meta b{color:var(--text); font-weight:600}

.page-body{padding-block:clamp(44px,5.5vw,72px)}
.page-grid{display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(30px,5vw,64px); align-items:start}

.toc{position:sticky; top:100px}
.toc p{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t; display:flex; flex-direction:column; gap:1px}
.toc li{counter-increment:t}
.toc a{
  display:flex; gap:10px; padding:7px 10px; border-radius:9px;
  text-decoration:none; font-size:.9rem; color:var(--muted); line-height:1.35;
  transition:color .16s, background .16s;
}
.toc a::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.7rem; color:var(--violet-soft); flex:none; padding-top:2px;
}
.toc a:hover{color:var(--violet); background:var(--lilac)}

.prose{max-width:70ch}
.prose > * + *{margin-top:1.1em}
.prose h2{
  font-size:clamp(1.3rem,2.2vw,1.6rem); letter-spacing:-.028em;
  margin-top:2.4em; scroll-margin-top:100px;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem; letter-spacing:-.018em; margin-top:1.9em}
.prose p,.prose li{color:var(--muted); line-height:1.7}
.prose strong{color:var(--text); font-weight:600}
.prose ul,.prose ol{padding-left:1.25em; display:flex; flex-direction:column; gap:.5em}
.prose li::marker{color:var(--violet-soft)}
.prose a{color:var(--violet); text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
/* A button inside prose is still a button. Without these, the rule above
   repaints the label violet — invisible on a violet button. */
.prose a.btn{color:var(--btn-fg)}
.prose a.btn--ghost:hover{color:var(--violet)}
.prose hr{border:0; border-top:1.5px solid var(--line); margin-block:2.4em}

.callout{
  border:1.5px solid var(--line); border-left:3px solid var(--violet);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--card); padding:20px 24px;
}
.callout p{margin:0}
.callout p + p{margin-top:.7em}

.prose table{width:100%; border-collapse:collapse; font-size:.94rem}
.prose thead th{
  text-align:left; padding:0 0 10px; border-bottom:1.5px solid var(--line);
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.prose tbody td{padding:13px 16px 13px 0; border-bottom:1.5px solid var(--line); color:var(--muted); vertical-align:top}
.prose tbody td:first-child{color:var(--text); font-weight:600; width:34%}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* anything the owner still has to fill in — deliberately impossible to miss */
mark.todo{
  background:#FFE9A8; color:#5A4200;
  padding:1px 8px; border-radius:6px;
  font-weight:600; font-size:.94em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* contact form */
.form{display:grid; gap:18px; max-width:560px}
.field{display:grid; gap:7px}
.field label{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px;
  font-family:var(--f-body); font-size:1rem; color:var(--text);
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--violet);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--violet) 14%, transparent);
}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
.form__note{font-size:.86rem; color:var(--muted)}

@media (max-width:860px){
  .page-grid{grid-template-columns:1fr}
  .toc{position:static; padding-bottom:26px; border-bottom:1.5px solid var(--line)}
  .toc ol{display:grid; grid-template-columns:1fr 1fr; gap:2px}
  /* stacked, these become touch targets — 33px was too small to hit */
  .toc a{padding:13px 12px; min-height:44px; align-items:center}
  .toc a::before{padding-top:0}
}
@media (max-width:560px){
  .toc ol{grid-template-columns:1fr}
  .prose tbody td:first-child{width:auto}
}

.side-label{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  margin-bottom:18px;
}
.side-list{display:flex; flex-direction:column; gap:24px}
.side-list h3{margin-bottom:6px}
.side-list p{font-size:.94rem; color:var(--muted); line-height:1.6}
.side-list a{color:var(--violet)}

/* ==========================================================================
   25. CREATOR CARD
   ========================================================================== */
.maker{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:26px; align-items:center;
  padding:26px; border:1.5px solid var(--line); border-radius:var(--r);
  background:var(--card); box-shadow:var(--pop);
}
.maker__photo{
  width:132px; height:132px; border-radius:18px; overflow:hidden; flex:none;
  border:1.5px solid var(--line);
}
.maker__photo img{width:100%; height:100%; object-fit:cover; display:block}
.maker__role{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--violet); margin-bottom:8px;
}
.maker h3{font-size:1.34rem; letter-spacing:-.03em; margin-bottom:8px}
.maker p{color:var(--muted); line-height:1.6; font-size:.98rem; margin:0}
.maker__links{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.maker__links a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border:1.5px solid var(--line); border-radius:999px;
  font-size:.88rem; font-weight:500; text-decoration:none; color:var(--text);
  transition:border-color .18s, color .18s;
}
.maker__links a:hover{border-color:var(--violet); color:var(--violet)}
.maker__links svg{width:15px; height:15px}

.foot__made{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.foot__made a{color:#E5DBF7; text-decoration:underline; text-underline-offset:3px}
.foot__made a:hover{color:var(--lime)}

@media (max-width:560px){
  .maker{grid-template-columns:1fr; gap:20px; text-align:left}
  .maker__photo{width:104px; height:104px}
}

/* contact form: the state after Netlify redirects back with ?sent=1 */
.sent{
  display:none;
  align-items:flex-start; gap:14px;
  padding:20px 24px; margin-bottom:28px;
  border:1.5px solid rgba(0,196,140,.4); border-radius:var(--r-sm);
  background:rgba(0,196,140,.08);
}
.sent.is-on{display:flex}
.sent svg{width:20px; height:20px; color:var(--st-ok); flex:none; margin-top:2px}
.sent b{display:block; margin-bottom:4px; font-family:var(--f-display); font-size:1.05rem; letter-spacing:-.02em}
.sent p{margin:0; color:var(--muted); font-size:.94rem; line-height:1.55}