/* Home page. Shared design system (tokens, reset, nav, footer, focus,
   reduced motion) lives in assets/base.css.
   One idea per screen: what it is (the recording), what Publish did
   underneath, the three ways to run it, who it is for, what works where,
   what editors can do, why the name, questions. */

section{padding:88px 0;position:relative}
.sec-head{max-width:860px;margin:0 0 40px}
.sec-head .kick{display:block;margin-bottom:14px}
.sec-head h2{font-family:var(--display);font-weight:740;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.04;letter-spacing:-.022em;max-width:20ch}
.sec-head h2 .it{color:var(--clay-hl)}

/* reveal: content visible by default; reveal.js opts into hide-then-reveal so no-JS keeps content */
.rise{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js-reveal .rise{opacity:0;transform:translateY(18px)}
.js-reveal .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rise,.js-reveal .rise{opacity:1;transform:none;transition:none}}

/* ============ 1. HERO: the headline, marked the way the editor marks what can change ============ */
.hero{padding:56px 0 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:56px;
  grid-template-areas:"h film" "sub film" "under film" "cta film" "inv film" ". film";grid-template-rows:auto auto auto auto auto 1fr;align-items:start}
.hero-h{grid-area:h;font-family:var(--display);font-weight:780;font-size:clamp(2.5rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.028em;margin-top:8px}
.hero-sub{grid-area:sub}
.hero-under{grid-area:under}
.hero-cta{grid-area:cta;display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-cta .btn{font-size:16px;padding:15px 26px;border-radius:999px}
.invited{grid-area:inv;margin-top:22px;font-size:15px;color:var(--ink-soft)}
.hero .sub{font-size:1.2rem;color:var(--ink-soft);max-width:36ch;margin-top:22px;line-height:1.5}
.hero .sub.hero-sub{color:var(--ink)}

/* The dashed outline and its label: the editor's own sign for "you can change this". */
.editmark{position:relative;display:inline-block;padding:.04em .18em .08em;margin-left:-.18em;border-radius:12px;
  outline:2px dashed var(--clay);outline-offset:6px}
.editmark-tag{position:absolute;left:.1em;top:-1.55em;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--clay-deep);border-radius:6px;padding:3px 8px;line-height:1.2;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .editmark{animation:mark-in 1.1s cubic-bezier(.16,1,.3,1) .35s both}
  .editmark-tag{animation:tag-in .5s ease 1.1s both}
}
@keyframes mark-in{from{outline-color:transparent;outline-offset:14px}to{outline-color:var(--clay);outline-offset:6px}}
@keyframes tag-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* The recording, in a browser frame on a laptop and a phone frame on a phone. */
.film{grid-area:film;margin:0;min-width:0}
.film-frame{position:relative;border-radius:14px;overflow:hidden;background:var(--kiln);box-shadow:var(--shadow);border:1px solid rgba(var(--ink-rgb),.18)}
.film-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#e6e4dd;border-bottom:1px solid var(--edge)}
.film-bar span{width:10px;height:10px;border-radius:50%;background:#cfccc3}
.film-bar b{margin-left:10px;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink-soft);background:var(--card);border-radius:6px;padding:3px 10px}
.see-v{display:block;width:100%;height:auto;background:var(--kiln)}
.see-v-wide{aspect-ratio:1280/800}
.see-v-phone{display:none;aspect-ratio:390/844}
.film figcaption{margin-top:16px}
.beats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:beat}
.beats li{counter-increment:beat;position:relative;padding:12px 0 0;border-top:2px solid var(--edge-2);font-size:14px;line-height:1.4;color:var(--ink-soft);transition:border-color .3s,color .3s}
.beats li::before{content:counter(beat);font-family:var(--mono);font-size:11.5px;color:var(--clay-deep);display:block;margin-bottom:4px}
.beats li b{display:block;color:var(--ink);font-weight:640}
.beats li.on{border-top-color:var(--clay-deep);color:var(--ink)}
.film-note{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft)}

/* ============ 2. UNDERNEATH: the commit, and four facts ============ */
.under{background:var(--wash-blue)}
.under-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.receipt{background:var(--kiln);color:#e9e6de;border-radius:var(--r);padding:22px 24px 20px;font-family:var(--mono);font-size:14px;line-height:1.55;box-shadow:var(--shadow);transform:rotate(-.6deg)}
.receipt-top,.receipt-foot{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#b8b4aa;text-transform:uppercase;letter-spacing:.08em}
.receipt-msg{font-size:16px;color:#fff;margin:14px 0 16px;overflow-wrap:anywhere}
.receipt-diff{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:12px 0;margin-bottom:14px}
.receipt-diff div{display:flex;gap:12px;padding:3px 8px;border-radius:6px;overflow-wrap:anywhere}
.receipt-diff .del{color:#f3b8a8;background:rgba(235,130,107,.12);text-decoration:line-through;text-decoration-color:rgba(243,184,168,.6)}
.receipt-diff .add{color:#c9e3bd;background:rgba(126,148,114,.2)}
.receipt-foot{text-transform:none;letter-spacing:0;font-size:12.5px}
.receipt-cap{font-family:var(--serif);font-style:italic;font-size:15px;color:#cfcac0;margin-top:16px;line-height:1.45}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facts{list-style:none;counter-reset:fact;display:flex;flex-direction:column}
.facts li{counter-increment:fact;display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:18px 0;border-top:1px solid var(--edge-2)}
.facts li:first-child{border-top:none;padding-top:4px}
.facts li::before{content:"0" counter(fact);font-family:var(--mono);font-size:13px;color:var(--clay-deep);padding-top:4px;grid-row:span 2}
.facts h3{font-family:var(--display);font-weight:660;font-size:1.2rem;letter-spacing:-.01em}
.facts p{font-size:15.5px;color:var(--ink-soft);line-height:1.55;margin-top:4px;max-width:52ch}
.ui{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--paper);border:1px solid var(--edge);border-radius:6px;padding:0 6px;white-space:nowrap}

/* ============ 3. THREE WAYS TO RUN IT: three columns divided by rules, not cards ============ */
.anchor{position:absolute;top:-70px}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.way{display:flex;flex-direction:column;padding:26px 28px 6px;border-left:1px solid var(--edge-2)}
.way:first-child{border-left:none;padding-left:0}
.way:last-child{padding-right:0}
.way-mid{background:linear-gradient(180deg,var(--wash-clay),transparent 75%);border-top:4px solid var(--clay);margin-top:-3px}
.way-name h3{font-family:var(--display);font-weight:740;font-size:1.55rem;letter-spacing:-.018em}
.way-price{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:8px}
.way-price b{font-family:var(--display);font-size:2.3rem;font-weight:760;letter-spacing:-.025em;color:var(--ink);margin-right:8px;vertical-align:-3px}
.way-who{font-size:15.5px;color:var(--ink-soft);line-height:1.55;margin:16px 0 24px;flex:1}
.way .btn{align-self:flex-start;font-size:15.5px;padding:13px 22px;border-radius:999px}
.ways-note{margin-top:30px;font-size:15.5px;color:var(--ink-soft);max-width:70ch}

/* ============ 4. WHO IT IS FOR: the lines people say, in the serif voice ============ */
.you-sec{background:var(--wash-sage)}
.you{border-top:2px solid var(--ink)}
.you-row{border-bottom:1px solid var(--edge-2)}
.you-row summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0}
.you-row summary::-webkit-details-marker{display:none}
.you-q{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.25;color:var(--ink)}
.you-row summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--edge-2);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--clay-deep);transition:transform .2s}
.you-row[open] summary::after{content:"\2212"}
.you-a{padding:0 0 24px;max-width:68ch}
.you-a p{font-size:16.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 10px}
.you-a p.you-next{margin-top:12px;font-size:15.5px}

/* ============ 5. WHAT WORKS WHERE ============ */
.fit{border-top:2px solid var(--ink)}
.fit-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--edge-2)}
.fit-site{font-weight:600;font-size:16.5px;line-height:1.4}
.fit-state{display:flex;gap:12px;font-size:15.5px;color:var(--ink-soft);line-height:1.5;min-width:0}
.fit-state .dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:6px;border:2px solid var(--ink-faint)}
.fit-yes .dot{background:var(--sage-ink);border-color:var(--sage-ink)}
.fit-part .dot{background:linear-gradient(90deg,var(--sage-ink) 50%,transparent 50%);border-color:var(--sage-ink)}
.fit-cmd .dot{background:var(--clay-deep);border-color:var(--clay-deep)}
.fit-state code{font-family:var(--mono);font-size:13px;color:var(--clay-deep);background:var(--wash-clay);padding:1px 6px;border-radius:5px;overflow-wrap:anywhere}
.fit-state code.nb{white-space:nowrap}
.fit-note{margin-top:22px;font-size:15px;color:var(--ink-soft);max-width:70ch}

/* ============ 6. WHAT EDITORS CAN DO ============ */
.tools-sec{background:var(--wash-blue)}
.tools-grid{display:grid;grid-template-columns:262px minmax(0,1fr);gap:64px;align-items:start}
.tools-shot{position:sticky;top:100px;margin:0}
.tools-shot img{width:100%;max-width:262px;height:auto;filter:drop-shadow(0 22px 46px rgba(0,0,0,.22));transform:rotate(-1.2deg)}
.tools-shot figcaption{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);margin-top:26px;max-width:30ch;line-height:1.5}
.tools .kick{display:block;margin-bottom:14px}
.tools h2{font-family:var(--display);font-weight:740;font-size:clamp(2rem,4vw,3rem);line-height:1.04;letter-spacing:-.022em;max-width:18ch}
.tools h2 .it{color:var(--clay-hl)}
.tools-lead{font-size:1.12rem;color:var(--ink-soft);margin-top:18px;max-width:56ch;line-height:1.55}
.tools-list{margin-top:30px;border-top:2px solid var(--ink)}
.tools-list dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep);padding-top:18px}
.tools-list dd{font-size:16px;color:var(--ink-soft);line-height:1.55;padding:6px 0 18px;border-bottom:1px solid var(--edge-2);max-width:62ch}
.tools-more{margin-top:24px;font-size:15.5px}

/* ============ 7. WHY THE NAME (dark) ============ */
.kilnblock{background:var(--kiln);color:var(--paper);overflow:hidden}
.kiln-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.kilnblock .kick{color:var(--clay-soft)}
.kilnblock h2{font-family:var(--display);font-weight:760;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.02;letter-spacing:-.025em;margin-top:18px;max-width:16ch}
.kilnblock h2 .in-it{color:var(--clay-soft)}
.kilnblock p{font-size:1.1rem;color:rgba(var(--paper-rgb),.84);margin-top:20px;max-width:50ch;line-height:1.55}
.kilnblock p.kiln-plain{font-size:15px;color:rgba(var(--paper-rgb),.74)}
.kiln-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.kiln-cta .btn{font-size:16px;padding:15px 26px;border-radius:999px}
.kiln-cta .btn-on-dark{color:var(--paper);border-color:rgba(var(--paper-rgb),.4)}
.kiln-cta .btn-on-dark:hover{border-color:var(--paper);background:rgba(var(--paper-rgb),.08)}
.art-frame{border-radius:var(--r);overflow:hidden;border:1px solid rgba(var(--paper-rgb),.14);box-shadow:var(--shadow);background:var(--kiln-2);aspect-ratio:1/1;transform:rotate(1.6deg)}
.art-frame img{width:100%;height:100%;object-fit:cover}

/* ============ 8. QUESTIONS ============ */
.pfaq{max-width:820px;border-top:2px solid var(--ink)}
.pfaq details{border-bottom:1px solid var(--edge-2)}
.pfaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;
  font-family:var(--display);font-weight:640;font-size:1.15rem;letter-spacing:-.01em}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";flex:none;font-size:24px;font-weight:400;color:var(--clay-deep);line-height:1}
.pfaq details[open] summary::after{content:"\2212"}
.pfaq details p{font-size:16px;color:var(--ink-soft);line-height:1.62;padding:0 0 22px;max-width:66ch}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:none;grid-template-rows:none}
  .hero-h,.hero-sub,.hero-under,.hero-cta,.invited,.film{grid-area:auto}
  .film{margin-top:30px}
  .under-grid,.kiln-grid{grid-template-columns:1fr;gap:40px}
  .tools-grid{grid-template-columns:1fr;gap:36px}
  .tools-shot{position:static;margin:0 auto;max-width:262px}
  .ways{grid-template-columns:1fr;border-top:none}
  .way,.way:first-child,.way:last-child{border-left:none;border-top:1px solid var(--edge-2);padding:24px 0 22px}
  .way:first-child{border-top:2px solid var(--ink)}
  .way-mid{border-top:4px solid var(--clay);margin-top:0;padding-left:16px;padding-right:16px;margin-left:-16px;margin-right:-16px}
  .art-frame{transform:none;max-width:420px}
  section{padding:64px 0}
}
@media(max-width:640px){
  .hero{padding:40px 0 48px}
  .hero-h{font-size:2.45rem;margin-top:26px}
  .hero .sub{font-size:1.1rem;margin-top:16px}
  /* the phone recording replaces the laptop one, in a phone-shaped frame */
  .film-bar,.see-v-wide{display:none}
  .see-v-phone{display:block}
  .film-frame{width:min(76vw,300px);margin:0 auto;border-radius:30px;border:8px solid var(--kiln)}
  .beats{grid-template-columns:repeat(2,1fr);gap:12px 16px}
  .beats li span{display:none}
  .film-note{text-align:center}
  .fit-row{grid-template-columns:1fr;gap:8px}
  .you-row summary{padding:18px 0}
  .receipt{transform:none;padding:18px 18px 16px;font-size:13px}
  .receipt-msg{font-size:14.5px}
  .facts li{grid-template-columns:34px 1fr}
}