/* ==========================================================================
   Serengeti — shared stylesheet
   Used by: index.html, create.html, present.html, pricing.html, story.html

   1. Tokens and base
   2. Nav and buttons
   3. Shared sections: eyebrow, divider, CTA band, download menu
   4. Home page: hero, feature rows, feature visuals, pull quote
   5. Scaled boxes and Beamer slides
   6. Presenter window (home page and Present tour)
   7. Feature tour (Present and Create pages)
   8. Present tour: the desktop app's window
   9. Create tour: the online editor in a browser window
   10. Our story
   11. Pricing
   12. Footer
   13. Responsive
   ========================================================================== */

/* ---------- 1. Tokens and base ---------- */
:root{
  --paper:#FFFFFF;
  --paper-2:#F3F5FD;
  --tint-green:#EAEFFC;
  --ink:#0A1440;
  --ink-soft:#48507D;
  --ink-faint:#8A90B8;
  --forest:#0014A0;
  --forest-dark:#000B6E;
  --line:#DCE2F6;
  --line-strong:#C2CBED;
  --radius:10px;
  --maxw:1180px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Source Serif 4', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
img,svg{display:block;max-width:100%;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* ---------- 2. Nav and buttons ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{
  font-family:'Source Serif 4', serif;font-weight:600;font-size:1.3rem;
  letter-spacing:0.01em;display:flex;align-items:center;gap:10px;
}
.logo-mark{width:48px;height:48px;flex:none;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{font-size:0.95rem;color:var(--ink-soft);position:relative;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-20px;height:2px;background:var(--forest);
}
.nav-right{display:flex;align-items:center;gap:18px;}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:7px;font-family:inherit;font-size:0.92rem;font-weight:500;line-height:inherit;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--forest);color:#fff;}
.btn-primary:hover{background:var(--forest-dark);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink-soft);}
.btn-text{padding:0;border:none;color:var(--forest);font-weight:500;}
.btn-text:hover{color:var(--forest-dark);}

/* ---------- 3. Shared sections ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--forest);margin-bottom:14px;display:block;
}
.divider{height:1px;background:var(--line);}

/* Download / get-started CTA */
.cta-band{padding:110px 0;text-align:center;}
.cta-band h2{font-size:2.4rem;max-width:600px;margin:0 auto 20px;}
.cta-band .sub{color:var(--ink-soft);max-width:440px;margin:0 auto 36px;}
.platform-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;}
.platform-note{margin-top:16px;font-size:0.8rem;color:var(--ink-faint);}
.dl-band{background:var(--tint-green);padding:96px 0;}
.dl-band .sub{max-width:640px;}

/* Download button: a menu of every build */
.dl-split{position:relative;display:inline-flex;}
.dl-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.dl-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.dl-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:3;min-width:100%;text-align:left;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px -8px rgba(10,20,64,0.35);}
.dl-menu a{display:block;padding:8px 12px;border-radius:5px;font-size:0.9rem;color:var(--ink);white-space:nowrap;}
.dl-menu a[href]:hover,.dl-menu a[href]:focus-visible{background:var(--paper-2);}
.dl-menu a[aria-disabled="true"]{color:var(--ink-faint);cursor:default;}
.dl-group{padding:10px 12px 4px;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);}
.dl-group:first-child{padding-top:6px;}

/* ---------- 4. Home page ---------- */
/* Hero */
.hero{padding-top:88px;padding-bottom:60px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;}
.hero h1{font-size:clamp(2.6rem,4.6vw,4rem);line-height:1.05;font-weight:500;}
.hero .sub{margin-top:24px;font-size:1.15rem;color:var(--ink-soft);max-width:480px;}
.hero-ctas{margin-top:36px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}

.hero-visual{position:relative;}
.stage{position:relative;width:100%;max-width:560px;margin-left:auto;aspect-ratio:20/19;}
.stage-hint{margin-top:22px;text-align:right;font-size:0.8rem;color:var(--forest);}
.ambient-lines{position:absolute;inset:-40px -60px auto auto;width:340px;opacity:0.5;z-index:-1;}

/* Projection screen (back) */
.projector{position:absolute;top:0;right:0;width:80%;}
.projector-roller{height:10px;margin:0 -3%;border-radius:5px;background:linear-gradient(#EEF1FB,#C2CBED);box-shadow:0 2px 4px rgba(10,20,64,0.12);}
.projector-screen{
  background:var(--paper);padding:3.5%;border:1px solid var(--line);border-top:none;
  box-shadow:0 30px 60px -30px rgba(10,20,64,0.3);
}
.projector-screen .slide{box-shadow:0 0 24px rgba(66,95,203,0.18);}
.projector-cord{position:absolute;right:12%;top:100%;width:1px;height:28px;background:var(--line-strong);}
.projector-cord::after{content:"";position:absolute;left:-3px;bottom:-6px;width:7px;height:7px;border-radius:50%;background:var(--line-strong);}

/* Laptop with presenter view (front) */
.laptop{position:absolute;left:0;bottom:0;width:62%;z-index:1;}
.laptop-screen{
  background:#111216;border-radius:10px 10px 0 0;padding:3% 3% 3.5%;
  box-shadow:0 30px 60px -20px rgba(10,20,64,0.4);
}
.laptop-base{position:relative;height:12px;margin:0 -7%;border-radius:0 0 12px 12px;background:linear-gradient(#EEF1FB,#C2CBED);}
.laptop-base::before{content:"";position:absolute;left:41%;width:18%;top:0;height:4px;border-radius:0 0 4px 4px;background:#B0BAE0;}

/* Feature rows */
.feature{padding:96px 0;}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.feature-grid > *{min-width:0;}
.feature-grid.reverse .feature-grid-visual{order:-1;}
.feature h2{font-size:2.1rem;font-weight:500;line-height:1.15;margin-bottom:18px;}
.feature p.body{color:var(--ink-soft);max-width:460px;}

.visual-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;min-height:280px;display:flex;align-items:center;justify-content:center;
}

/* Feature visuals */
.fv-cap{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);}

.fv-union{position:relative;width:100%;max-width:400px;padding:22px 0 26px;}
.fv-union .slide{border-radius:4px;box-shadow:0 18px 36px -18px rgba(10,20,64,0.35);}
.fv-tag{position:absolute;font-size:0.68rem;background:#fff;border:1px solid var(--line-strong);border-radius:20px;padding:4px 11px;color:var(--ink-soft);white-space:nowrap;}
.fv-tag-tex{top:0;left:-10px;}
.fv-tag-js{bottom:0;right:-10px;color:var(--forest);border-color:#96AAEE;}

.fv-solo{width:100%;max-width:340px;}
.fv-win{flex:1;min-width:0;margin:0;}
.fv-win-bar{display:flex;gap:4px;padding:6px 8px;background:#EEF1F6;border:1px solid var(--line-strong);border-bottom:0;border-radius:6px 6px 0 0;}
.fv-win-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);}
.fv-win-bar span{margin-left:8px;font-size:0.6rem;line-height:6px;color:#A2A2A8;}
.fv-win-body{aspect-ratio:16/10;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:8px;background:#131315;border:1px solid var(--line-strong);border-radius:0 0 6px 6px;box-shadow:0 14px 28px -14px rgba(10,20,64,0.35);}
.fv-win .fv-mini{width:100%;border:0;}
.fv-win-dark .fv-win-bar{background:#38383C;border-color:#38383C;}
.fv-win-dark .fv-win-bar i{background:#5A5A60;}
.fv-pv{display:grid;grid-template-columns:1fr 34%;gap:8px;align-items:stretch;background:#262628;border-color:#38383C;}
.fv-pv-main{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;}
.fv-pv-strip{display:flex;gap:4px;}
.fv-pv-strip s{flex:1;aspect-ratio:16/9;border-radius:2px;background:#4A4A50;}
.fv-pv-strip s.on{background:#fff;outline:1.5px solid #1F6FE5;outline-offset:1px;}
.fv-pv-side{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fv-pv-side .fv-mini{padding:7px 5px 0;gap:3px;}
.fv-pv-side .fv-mini b{height:5px;}
.fv-pv-side .fv-mini i{height:2px;}
.fv-pv-side .fv-mini i::before{display:none;}
.fv-gs{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 12%;background:#fff;border-radius:2px;}
.fv-gs b{width:75%;height:8px;border-radius:2px;background:#202124;}
.fv-gs i{width:45%;height:3px;border-radius:2px;background:#9AA0A6;}
.fv-gs strong{font-family:Arial,Helvetica,sans-serif;font-size:0.72rem;font-weight:400;line-height:1.2;color:#202124;}
.fv-gs span{font-family:Arial,Helvetica,sans-serif;font-size:0.52rem;color:#5F6368;}
.fv-gs-body{justify-content:flex-start;padding:10% 10% 0;}
.fv-pv-side .fv-gs{gap:3px;}
.fv-pv-side .fv-gs b{height:3px;}
.fv-pv-side .fv-gs i{height:1.5px;}
.fv-pv-time{font-size:0.7rem;line-height:1;color:#fff;}
.fv-pv-lbl{font-size:0.45rem;letter-spacing:0.1em;text-transform:uppercase;color:#A2A2A8;}
.fv-pv-notes{flex:1;display:flex;flex-direction:column;gap:3px;padding:4px;border:1px solid #3B3B40;border-radius:3px;}
.fv-pv-notes i{height:2px;border-radius:1px;background:#5A5A60;}
.fv-pv-notes i:last-child{width:60%;}
.fv-win figcaption{margin-top:12px;text-align:center;font-size:0.8rem;color:var(--ink-soft);}
.fv-win figcaption .fv-cap{display:block;margin-bottom:3px;}

.fv-attach{display:flex;flex-direction:column;align-items:center;gap:26px;}
.fv-attach-row{position:relative;display:flex;align-items:flex-start;padding-top:14px;}
.fv-attach-pdf{position:relative;z-index:2;text-align:center;font-size:0.75rem;color:var(--ink-soft);}
.fv-attach-page{position:relative;width:170px;aspect-ratio:16/10;margin-bottom:12px;padding:28px 16px 0;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line-strong);border-radius:4px;box-shadow:0 14px 28px -14px rgba(10,20,64,0.3);}
.fv-attach-page::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:#3333B3;border-radius:3px 3px 0 0;}
.fv-attach-page i{height:5px;border-radius:3px;background:var(--line);}
.fv-attach-page i:nth-child(2){width:80%;}
.fv-attach-page i:nth-child(3){width:60%;}
.fv-attach-page b{position:absolute;left:-10px;bottom:-10px;background:var(--forest);color:#fff;font-size:0.65rem;font-weight:500;border-radius:5px;padding:3px 7px;}
.fv-attach-files{list-style:none;margin:6px 0 0 -28px;padding:0;display:flex;flex-direction:column;}
.fv-attach-files li{display:flex;align-items:center;gap:8px;margin-top:-4px;padding:6px 12px 6px 38px;background:#fff;border:1px solid var(--line-strong);border-radius:4px;font-size:0.7rem;color:var(--ink);box-shadow:0 6px 12px -8px rgba(10,20,64,0.25);}
.fv-attach-files li:nth-child(odd){transform:rotate(-1.5deg);}
.fv-attach-files li:nth-child(even){transform:rotate(1deg);}
.fv-attach-files b{font-size:0.55rem;font-weight:500;color:var(--forest);background:var(--tint-green);border-radius:3px;padding:2px 4px;}
.fv-attach-files .js b{color:#fff;background:var(--ink-soft);}
.fv-clip{position:absolute;z-index:3;left:151px;top:-6px;width:28px;height:80px;transform:rotate(6deg);fill:none;stroke:var(--ink-faint);stroke-width:2;stroke-linecap:round;}

.fv-file-foot{background:var(--tint-green);padding:10px 18px;font-size:0.66rem;color:var(--forest);letter-spacing:0.04em;}

.fv-mini{position:relative;width:84px;aspect-ratio:16/9;background:#fff;border:1px solid var(--line-strong);border-radius:3px;padding:16px 10px 0;display:flex;flex-direction:column;gap:5px;}
.fv-mini b{position:absolute;left:0;right:0;top:0;height:10px;background:#3333B3;border-radius:2px 2px 0 0;}
.fv-mini i{height:4px;width:70%;border-radius:2px;background:#B9C7F5;}
.fv-mini i::before{content:"";float:left;width:4px;height:4px;margin-left:-7px;border-radius:50%;background:#3333B3;}
.fv-folder{width:100%;max-width:380px;background:#fff;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;}
.fv-folder-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EEF1F6;border-bottom:1px solid var(--line);font-size:0.68rem;color:var(--ink-soft);}
.fv-folder-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);}
.fv-folder-bar span{margin-left:8px;}
.fv-folder-files{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:24px 14px 20px;text-align:center;}
.fv-folder-files span.mono{display:block;font-size:0.64rem;color:var(--ink);overflow-wrap:anywhere;}
.fv-folder-files small{display:block;margin-top:4px;font-size:0.7rem;line-height:1.35;color:var(--ink-soft);}
.fv-doc{position:relative;width:40px;height:50px;margin:0 auto 12px;padding-top:6px;background:#fff;border:1px solid #96AAEE;border-radius:3px;}
.fv-doc.opt{border-style:dashed;border-color:var(--line-strong);}
.fv-doc i{display:block;height:3px;margin:4px 7px 0;border-radius:2px;background:var(--line);}
.fv-doc b{position:absolute;left:-7px;bottom:7px;font-size:0.55rem;font-weight:500;color:#fff;background:var(--forest);border-radius:3px;padding:2px 4px;}
.fv-doc.txt b{background:var(--ink-soft);}
.fv-folder-app{display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.8rem;font-weight:500;letter-spacing:0;}

.fv-editor{position:relative;width:100%;max-width:380px;display:flex;height:190px;background:#fff;border:1px solid var(--line-strong);border-radius:6px;margin-bottom:34px;}
.fv-pane{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:5px 0 0 5px;}
.fv-pane:last-of-type{border-radius:0 5px 5px 0;}
.fv-tabs{display:flex;background:#EEF1F6;border-bottom:1px solid var(--line);}
.fv-tabs span{font-size:0.64rem;padding:6px 10px;color:var(--ink-faint);border-right:1px solid var(--line);}
.fv-tabs span.on{background:#fff;color:var(--ink);box-shadow:inset 0 2px 0 var(--forest);}
.fv-code{padding:10px;font-size:0.62rem;line-height:1.7;color:var(--ink-soft);white-space:nowrap;}
.fv-code em{font-style:normal;color:var(--forest);}
.fv-split{width:5px;background:var(--line);cursor:col-resize;flex:none;}
.fv-preview{flex:1;display:flex;align-items:center;justify-content:center;background:var(--paper-2);}
.fv-wizard{position:absolute;right:12px;bottom:-1px;transform:translateY(55%);width:190px;background:#fff;border:1px solid var(--line-strong);border-radius:7px;padding:10px 12px;font-size:0.68rem;box-shadow:0 14px 28px -12px rgba(10,20,64,0.3);display:flex;flex-direction:column;gap:5px;}
.fv-wizard div{display:flex;justify-content:space-between;color:var(--ink-soft);}
.fv-wizard b{font-weight:500;color:var(--ink);}

/* Pull quote */
.pull-quote{padding:70px 0;text-align:center;}
.pull-quote blockquote{
  font-family:'Source Serif 4',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:680px;margin:0 auto;line-height:1.35;color:var(--ink);
}
.pull-quote.wide blockquote{max-width:70%;}
.pull-quote .mark{width:34px;height:2px;background:var(--forest);margin:0 auto 24px;}

/* ---------- 5. Scaled boxes and Beamer slides ---------- */
/* Slides (640×360), the home page's presenter window (1000×625) and the
   tour windows (1100×680) are laid out at a fixed size and scaled to fit
   their box (see main.js), so every copy renders the same picture at any width. */
.slide,.presenter,.tour-window{position:relative;overflow:hidden;}
.slide{aspect-ratio:16/9;background:#fff;}
.slide-inner,.presenter-inner,.ed-inner{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--scale,0.5));}
.slide-inner{width:640px;height:360px;}

.beamer{
  display:grid;grid-template-columns:64px 1fr;grid-template-rows:62px 1fr;
  font-family:'Latin Modern Sans','CMU Sans Serif','IBM Plex Sans',sans-serif;color:#000;
}
.beamer-corner{background:#26268C;}
.beamer-title{background:#3333B3;color:#fff;font-size:19px;display:flex;align-items:center;padding:0 14px;}
.beamer-side{background:#3333B3;color:#fff;padding:14px 6px;text-align:center;font-size:8.5px;line-height:1.3;}
.beamer-side b{font-weight:400;display:block;margin-bottom:8px;}
.beamer-side span{color:#B8B8EC;}
.beamer-side .beamer-sec{display:block;margin-top:18px;text-align:left;color:#9A9AE0;}
.beamer-sec small{display:block;margin:4px 0 0 4px;font-size:6px;color:#fff;}
.beamer-body{display:flex;flex-direction:column;align-items:center;padding:14px 26px 12px;min-height:0;}
.beamer-figure{flex:1;width:100%;min-height:0;border:0;display:block;border-bottom:1px solid #E2E2E2;}
.beamer-placeholder{
  width:76%;margin-bottom:2px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.4;color:#999;border:1px solid #E6E6E6;
  background:
    linear-gradient(to top right,transparent calc(50% - 0.5px),#DDD,transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right,transparent calc(50% - 0.5px),#DDD,transparent calc(50% + 0.5px)),
    #F6F6F6;
}
.beamer-placeholder span{background:#F6F6F6;padding:2px 6px;}
.beamer-caption{margin-top:10px;font-size:11.5px;line-height:1.3;text-align:center;}
.beamer-caption span{color:#3333B3;}
.beamer-titlepage{justify-content:center;gap:16px;font-size:11px;}
.beamer-titlebox{background:#3333B3;color:#fff;width:100%;padding:10px;text-align:center;display:flex;flex-direction:column;gap:4px;}
.beamer-titlebox b{font-weight:400;font-size:15px;}
.beamer-titlebox span{font-size:10px;}

/* ---------- 6. Presenter window, modelled on the Serengeti app ---------- */
.presenter{aspect-ratio:16/10;}
.presenter-inner{
  width:1000px;height:625px;
  display:grid;grid-template-columns:1fr 290px;grid-template-rows:1fr 118px;
  background:#2A2A2D;color:#E8E8EA;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;line-height:1.2;
}
.pv-main{display:flex;flex-direction:column;min-width:0;border-right:1px solid #3A3A3E;}
.pv-toolbar{height:44px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid #1E1E20;}
.pv-icon{width:16px;height:16px;fill:none;stroke:#D0D0D4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.pv-toolbar .pv-icon:last-child{margin-left:auto;}
.pv-page{display:flex;align-items:center;gap:8px;margin-left:56px;}
.pv-pagebox{border:1px solid #55555A;border-radius:3px;padding:3px 9px;font-size:15px;}
.pv-zoom{display:flex;gap:16px;margin-left:64px;}
.pv-select{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#1E1E20;border:1px solid #47474C;border-radius:5px;padding:6px 9px;}
.pv-fit{width:130px;margin-left:40px;background:#38383C;border-color:transparent;}
.pv-caret{width:12px;height:12px;fill:none;stroke:#C8C8CC;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.pv-stage{flex:1;min-height:0;background:#131315;display:flex;align-items:center;justify-content:center;padding:0 18px;}
.pv-stage .slide{width:100%;}
.pv-panel{padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.pv-card{border:1px solid #3B3B40;border-radius:7px;background:#2E2E32;padding:12px;}
.pv-timer{display:flex;align-items:center;justify-content:space-between;}
.pv-time{font-size:24px;font-variant-numeric:tabular-nums;}
.pv-btn{background:#1F6FE5;color:#fff;border-radius:5px;padding:7px 12px;font-weight:500;}
.pv-pointer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;}
.pv-pointer .pv-label{display:block;margin:0 0 6px;}
.pv-label{font-size:10.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:#A2A2A8;margin-top:4px;}
.pv-next{padding:0 22px;}
.pv-notes{flex:1;min-height:0;border:1px solid #3B3B40;border-radius:7px;padding:10px 12px;color:#C8C8CC;}
.pv-notes-empty{color:#8A8A90;border-color:#1F6FE5;}
.pv-save{align-self:flex-end;}
.pv-strip{grid-column:1 / -1;display:flex;gap:12px;padding:12px;overflow:hidden;border-top:1px solid #1E1E20;}
.pv-thumb{position:relative;width:166px;flex:none;border-radius:4px;overflow:hidden;}
.pv-thumb.current{outline:2px solid #1F6FE5;outline-offset:2px;}
.pv-badge{position:absolute;left:6px;bottom:6px;min-width:20px;height:20px;border-radius:10px;background:#3A3A3E;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.pv-thumb.current .pv-badge{background:#1F6FE5;}

/* ---------- 7. Feature tour: spotlight parts of a window, one step at a time ---------- */
/* The tour is the page. Fill the viewport below the sticky header (85px)
   and fit the window (1100:680) in it, leaving ~280px for the header, the
   page padding, the heading and the tabs, but no narrower than 600px of
   content (64px is the .wrap padding) */
.tour-page{--vh:100vh;display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--vh) - 85px);padding:16px 0;}
@supports (height:100svh){
  .tour-page{--vh:100svh;}
}
.tour-head{margin-bottom:20px;text-align:center;}
.tour-head .eyebrow{margin-bottom:6px;}
.tour-head h1{font-family:'IBM Plex Sans',sans-serif;font-size:1.3rem;font-weight:500;line-height:1.3;letter-spacing:0;}
.tour{position:relative;width:100%;max-width:max(664px,min(var(--maxw),calc((var(--vh) - 280px) * 1100 / 680 + 64px)));}

/* The window being toured, and the parts of it each step lights up */
.tour-window{aspect-ratio:1100/680;border-radius:10px;box-shadow:0 0 0 1px rgba(10,20,64,0.14),0 40px 80px -30px rgba(10,20,64,0.45);}
.tour-window .beamer-figure{border-bottom:0;}
.win-lights{display:flex;gap:8px;}
.win-lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57;}
.win-lights i:nth-child(2){background:#FEBC2E;}
.win-lights i:nth-child(3){background:#28C840;}
.tour [data-region]{transition:opacity .45s,box-shadow .45s;}
.tour .is-dim{opacity:0.28;}
.tour .is-lit:not(span){box-shadow:inset 0 0 0 2px #5B8CFF,0 0 28px 2px rgba(91,140,255,0.45);}

/* Steps, each with a bar that fills while it plays */
.tour-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:24px;margin-top:24px;}
.tour-tab{position:relative;display:flex;align-items:baseline;gap:10px;white-space:nowrap;padding:16px 0 0;border:0;border-top:2px solid var(--line);background:none;font:inherit;font-size:1.05rem;font-weight:500;color:var(--ink-faint);text-align:left;cursor:pointer;transition:color .2s;}
.tour-tab:hover,.tour-tab[aria-selected="true"]{color:var(--ink);}
.tour-tab::after{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--forest);}
.tour-tab[aria-selected="true"]::after{width:100%;}
.tour.is-playing .tour-tab[aria-selected="true"]::after{animation:tour-progress var(--tour-step,8s) linear;}
@keyframes tour-progress{from{width:0;}to{width:100%;}}
.tour-num{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--forest);}

/* Tooltips, placed beside the lit part of the window (see main.js) */
.tour-tip{position:absolute;z-index:2;width:300px;padding:14px 16px;border-radius:8px;background:#fff;color:var(--ink);font-size:0.95rem;line-height:1.5;box-shadow:0 12px 32px -8px rgba(10,20,64,0.45);animation:fade-in .35s ease-out;}
.tour-note{display:block;margin-top:8px;color:#D92D20;}
.tour-tip code{font-family:'IBM Plex Mono',monospace;font-size:0.85em;color:var(--forest);}
.tour-tip::before{content:"";position:absolute;top:var(--tip-arrow,50%);width:12px;height:12px;margin-top:-6px;background:#fff;transform:rotate(45deg);}
.tour-tip[data-side="right"]::before{left:-6px;}
.tour-tip[data-side="left"]::before{right:-6px;}
.tour-tip[data-side="top"]::before{top:auto;bottom:-6px;left:var(--tip-arrow-x,50%);margin:0 0 0 -6px;}
@media (max-width:600px){
  .tour-tabs{gap:12px;}
  .tour-tab{flex-direction:column;gap:4px;font-size:0.9rem;}
  .tour-tip{position:static;width:auto;margin-top:16px;background:var(--paper-2);box-shadow:none;}
  .tour-tip::before{display:none;}
}

/* ---------- 8. Present tour: the desktop app's window ---------- */
.tour-window .presenter-inner{width:1100px;height:680px;grid-template-columns:1fr 360px;grid-template-rows:30px 1fr 140px;}
.pv-titlebar{grid-column:1 / -1;position:relative;display:flex;align-items:center;justify-content:center;padding:0 90px;background:linear-gradient(#ECEAED,#E0DEE1);border-bottom:1px solid #1E1E20;color:#2B2B2E;font-size:12.5px;font-weight:600;}
.pv-titlebar .win-lights{position:absolute;left:12px;}
.pv-wintitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tour-window .pv-thumb{width:205px;}
.tour-window .pv-thumb img,.tour-window .pv-next img{width:100%;aspect-ratio:16/9;}
/* The next frame's PDF pages, shown over the live slide (see main.js) */
.slide-page{position:absolute;inset:0;width:100%;height:100%;}

/* ---------- 9. Create tour: the online editor in a browser window ---------- */
.ed-inner{width:1100px;height:680px;display:grid;grid-template-rows:44px 26px 1fr 24px;background:#fff;color:#212121;font-family:-apple-system,system-ui,'Segoe UI',sans-serif;font-size:12.5px;line-height:1.2;}
.ed-ico{width:16px;height:16px;fill:none;stroke:#616161;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.ed-ico-fill{fill:#616161;stroke:none;}
.ed-ico-off{opacity:0.4;}
.ed-ico-pdf{stroke:#D32F2F;}
.ed-ico-html{stroke:#E65100;}

/* Browser chrome and menu bar */
.ed-chrome{position:relative;display:flex;align-items:center;gap:18px;padding:0 16px;background:#F3F3F3;border-bottom:1px solid #D6D6D6;}
.ed-chrome .win-lights{margin-right:10px;}
.ed-address{position:absolute;left:50%;width:420px;margin-left:-210px;height:28px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:7px;background:#E4E4E6;color:#3A3A3C;font-size:13px;}
.ed-address .ed-ico:last-child{position:absolute;right:8px;}
.ed-chrome-end{margin-left:auto;display:flex;gap:20px;}
.ed-menubar{position:relative;z-index:2;display:flex;align-items:center;padding:0 6px;border-bottom:1px solid #E0E0E0;background:#fff;font-size:13px;}
.ed-menubar img{width:16px;height:16px;margin:0 8px 0 4px;}
.ed-menu{position:relative;padding:4px 8px;}
.ed-menu.is-open{background:#E0E0E0;}
.ed-filemenu{position:absolute;left:0;top:100%;min-width:230px;padding:4px 0;background:#fff;border:1px solid #BDBDBD;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.ed-filemenu span{display:flex;align-items:center;justify-content:space-between;padding:5px 12px 5px 28px;transition:background .2s;}
.ed-filemenu .is-disabled{color:#9E9E9E;}
.ed-filemenu .ed-ico{width:10px;height:10px;}
.ed-filemenu span.is-hover{background:#E0E0E0;}
.ed-filemenu kbd{font:inherit;}
.ed-filemenu .is-disabled kbd{color:#9E9E9E;}
.ed-filemenu hr{margin:4px 0;border:0;border-top:1px solid #E0E0E0;}

/* Side rails and file browser */
.ed-body{display:grid;grid-template-columns:30px 212px 1fr 30px;grid-template-rows:minmax(0,1fr);min-height:0;}
.ed-rail{display:flex;flex-direction:column;padding-top:6px;background:#fff;border-right:1px solid #E0E0E0;}
.ed-rail-end{border-right:0;border-left:1px solid #E0E0E0;}
.ed-railtab{display:flex;align-items:center;justify-content:center;height:34px;}
.ed-railtab .ed-ico{width:18px;height:18px;}
.ed-railtab.is-on{box-shadow:inset 2px 0 #1976D2;}
.ed-files{min-width:0;overflow:hidden;background:#fff;border-right:1px solid #E0E0E0;}
.ed-files-inner{width:212px;}
.ed-files-bar{display:flex;gap:18px;padding:12px 12px 10px 22px;}
.ed-crumbs{display:flex;align-items:center;gap:4px;padding:2px 12px 10px;}
.ed-files-head{display:flex;justify-content:space-between;padding:6px 10px;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;font-weight:600;}
.ed-files-head span{display:flex;align-items:center;gap:20px;}
.ed-files-head .ed-ico{width:12px;height:12px;}
.ed-file{display:flex;align-items:center;gap:6px;padding:5px 10px;}
.ed-file:not(.is-selected){animation:fade-in .35s ease-out;}
.ed-when{margin-left:auto;color:#616161;}
.ed-file.is-selected{background:#1976D2;color:#fff;}
.ed-file.is-selected .ed-when,.ed-file.is-selected .ed-ico{color:#fff;stroke:#fff;}

/* Source and PDF panes */
.ed-dock{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:6px;min-width:0;padding:6px 5px 0 6px;background:#E0E0E0;transition:grid-template-columns .6s ease;}
.ed-dock.is-wide{grid-template-columns:5fr 2fr;}
/* Docked into one pane: the preview's tab and contents move into the source pane (see main.js) */
.ed-dock.is-tabbed{grid-template-columns:1fr;}
.ed-dock.is-tabbed > .ed-pane + .ed-pane{display:none;}
/* The tour's later steps open a second project; each element belongs to one */
.tour[data-open="sample"] [data-doc="main"],.tour:not([data-open="sample"]) [data-doc="sample"]{display:none;}
.ed-pane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;}
.ed-pane.is-drop::after{content:"";position:absolute;inset:0;background:rgba(25,118,210,0.15);border:1px dashed #1976D2;}
.ed-tabs{flex:none;display:flex;height:26px;background:#BDBDBD;}
.ed-tab{display:flex;align-items:center;gap:6px;width:180px;min-width:0;padding:0 8px;background:#fff;border-top:2px solid transparent;}
.ed-tab.is-focus{border-top-color:#1976D2;}
.ed-x{margin-left:auto;width:12px;height:12px;}
.ed-code{position:relative;flex:1;min-height:0;overflow:hidden;padding-top:4px;border-top:1px solid #E0E0E0;background:linear-gradient(90deg,#EEEEEE 30px,#DDDDDD 30px,#DDDDDD 31px,#fff 31px);counter-reset:ln;font-family:ui-monospace,Menlo,'IBM Plex Mono',monospace;font-size:11px;line-height:15.3px;}
.ed-code div{position:relative;min-height:15.3px;padding-left:36px;white-space:pre-wrap;counter-increment:ln;}
.ed-code div::before{content:counter(ln);position:absolute;left:0;width:25px;text-align:right;color:#999;}
.ed-code b{color:#008000;}
.ed-code i{font-style:normal;color:#997;}
.ed-code em{font-style:normal;color:#A11;}
.ed-code var{font-style:italic;color:#408080;}
.ed-code div.is-marked{background:#DDE9FB;transition:background .4s;}
.ed-code div.is-synced{animation:ed-synced 2s ease-out;}
@keyframes ed-synced{from{background:#FFE98A;}to{background:transparent;}}
.ed-caret{display:inline-block;height:13px;margin-right:-1.5px;border-left:1.5px solid #000;vertical-align:-2px;animation:ed-blink 1s steps(1) infinite;}
@keyframes ed-blink{50%{opacity:0;}}
.ed-pdfbar{flex:none;display:flex;align-items:center;gap:12px;height:34px;padding:0 10px;background:#F9F9FA;border-top:1px solid #E0E0E0;border-bottom:1px solid #D7D7DB;white-space:nowrap;overflow:hidden;}
.ed-pagein{width:44px;padding:3px 6px;border:1px solid #C8C8CC;border-radius:3px;background:#fff;text-align:right;}
.ed-zoom{margin-left:auto;}
.ed-sep{width:1px;height:16px;background:#C8C8CC;}
.ed-pdfbar-end{display:flex;gap:12px;margin-left:auto;}
.ed-pdfview{flex:1;min-height:0;overflow:hidden;padding-top:10px;background:#D4D4D7;}
.ed-page{width:min(345px,calc(100% - 40px));margin:0 auto;box-shadow:0 1px 4px rgba(0,0,0,0.3);transition:opacity .25s;}
/* The sample project's PDF: a scrolling stack of pages (see main.js) */
.ed-pages{position:relative;padding:10px 14px;transition:opacity .25s;}
.ed-page.is-compiling,.ed-pages.is-compiling{opacity:0.35;}
.ed-pages .slide + .slide{margin-top:10px;}
.ed-pages .slide{box-shadow:0 1px 4px rgba(0,0,0,0.3);}
.ed-pages .beamer-caption{position:relative;}
.ed-pages .is-synced{animation:ed-synced-box 2s ease-out;}
@keyframes ed-synced-box{from{box-shadow:0 0 0 2px #E53935;}to{box-shadow:0 0 0 2px transparent;}}
.ed-ripple{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid #1976D2;border-radius:50%;opacity:0;animation:ed-ripple .45s ease-out 2;}
@keyframes ed-ripple{from{transform:scale(0.2);opacity:1;}to{transform:scale(1);opacity:0;}}
.ed-keys{position:absolute;left:50%;top:44px;z-index:1;padding:6px 12px;border-radius:7px;background:rgba(33,33,33,0.85);color:#fff;font-size:15px;font-weight:500;transform:translateX(-50%);opacity:0;transition:opacity .2s;pointer-events:none;}
.ed-keys.is-on{opacity:1;}

/* Status bar */
.ed-status{display:flex;align-items:center;gap:20px;padding:0 14px;background:#fff;border-top:1px solid #E0E0E0;color:#424242;font-size:12px;}
.ed-status-item{display:flex;align-items:center;gap:6px;}
.ed-status .ed-ico{width:13px;height:13px;}
.ed-toggle{position:relative;width:28px;height:14px;border-radius:7px;background:#BDBDBD;}
.ed-toggle::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;}
.ed-mode{gap:8px;}
.ed-status .ed-mode .ed-ico{box-sizing:content-box;padding:5px 10px;background:#1976D2;stroke:#fff;}
.ed-status-end{display:flex;align-items:center;gap:20px;margin-left:auto;}

/* Project Settings dialog */
.ed-dialog{position:absolute;left:410px;top:150px;z-index:3;display:flex;flex-direction:column;width:290px;padding:18px 18px 16px;background:#fff;border-radius:3px;box-shadow:0 4px 24px rgba(0,0,0,0.35);visibility:hidden;font-size:12.5px;}
.ed-dialog.is-open{visibility:visible;animation:fade-in .3s ease-out;}
.ed-dialog b{margin-bottom:12px;font-size:17px;font-weight:400;}
.ed-label{margin:8px 0 4px;}
.ed-input{position:relative;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 8px;background:#F3F3F3;border:1px solid #BDBDBD;border-radius:3px;font-size:13.5px;}
.ed-select{background:#F5F5F5;border-color:#8A8A8A;}
.ed-options{position:absolute;left:-1px;right:-1px;top:100%;display:flex;flex-direction:column;padding:3px 0;background:#fff;border:1px solid #BDBDBD;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.ed-options span{padding:4px 8px;}
.ed-options .is-hover{background:#1976D2;color:#fff;}
.ed-dialog-btns{display:flex;justify-content:flex-end;gap:12px;margin-top:22px;}
.ed-dialog-btns span{padding:8px 14px;border-radius:2px;color:#fff;font-size:13.5px;}
.ed-cancel{background:#757575;}
.ed-save{background:#1976D2;outline:1.5px solid transparent;outline-offset:2px;transition:outline-color .2s;}
.ed-save.is-hover{outline-color:#1976D2;}

@media (prefers-reduced-motion:reduce){
  .ed-dock{transition:none;}
  .ed-caret{animation:none;}
}

/* ---------- 10. Our story: a single long-form read ---------- */
.story{padding:90px 0 120px;}
.story-head,.story-body{max-width:704px;}
.story-head h1{font-size:clamp(2.3rem,4vw,3.3rem);line-height:1.1;}
.story-body{margin-top:44px;font-family:'Source Serif 4',serif;font-size:1.2rem;line-height:1.75;color:var(--ink);}
.story-body p + p{margin-top:1.1em;}
.story-body > p:first-of-type::first-letter{float:left;margin:0.08em 0.1em 0 0;font-size:3.5em;line-height:0.85;color:var(--forest);}
.story-body hr{margin:2.2em 0;border:0;text-align:center;color:var(--ink-faint);}
.story-body hr::before{content:"* * *";letter-spacing:0.6em;}
.story-body blockquote{margin:1.6em 0;padding-left:1.2em;border-left:2px solid var(--forest);font-style:italic;color:var(--ink-soft);}
.story-lede{margin-top:20px;font-family:'Source Serif 4',serif;font-size:1.35rem;line-height:1.55;color:var(--ink-soft);}
.story-body * + .story-part{margin-top:2.6em;}
.story-body h3{margin:1.8em 0 0.6em;font-size:1.45rem;line-height:1.25;}
.story-body code{font-family:'IBM Plex Mono',monospace;font-size:0.85em;color:var(--forest);}
.story-part{display:flex;align-items:center;gap:14px;margin-bottom:1.4em;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;line-height:1.4;color:var(--forest);}
.story-part::after{content:"";flex:1;height:1px;background:var(--line);}
.story-body p.story-signoff{margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line);font-weight:500;line-height:1.5;}
.story-signoff .mono{font-size:0.75rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--forest);}
.story-fig{margin:2em 0;}
.story-fig img,.story-img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);}
.story-img{display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);}
.story-fig figcaption{margin-top:12px;font-family:'IBM Plex Sans',sans-serif;font-size:0.85rem;line-height:1.5;color:var(--ink-soft);}
.story-fig figcaption .fv-cap{display:block;margin-bottom:3px;}
.story-fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:2em 0;}
.story-fig-pair .story-fig{margin:0;}
.story-fig-pair .story-fig img,.story-fig-pair .story-img{aspect-ratio:4/5;}

/* ---------- 11. Pricing ---------- */
.pricing{padding:90px 0 120px;}
.pricing-head{max-width:704px;}
.pricing-head h1{font-size:clamp(2.3rem,4vw,3.3rem);line-height:1.1;}
.pricing-head .sub{margin-top:20px;font-size:1.15rem;color:var(--ink-soft);}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;}
.plan{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:column;align-items:flex-start;
}
.plan h2{font-size:2rem;line-height:1.1;}
.plan p{margin:14px 0 28px;color:var(--ink-soft);flex:1;}

/* ---------- 12. Footer ---------- */
footer{border-top:1px solid var(--line);padding:64px 0 32px;background:var(--paper-2);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{color:var(--ink-soft);font-size:0.9rem;max-width:280px;}
.footer-col h5{font-family:'IBM Plex Mono';font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-faint);margin-bottom:16px;}
.footer-col a{display:block;font-size:0.9rem;color:var(--ink-soft);margin-bottom:12px;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;font-size:0.8rem;color:var(--ink-faint);flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:var(--ink-soft);}
.footer-bottom a:hover{color:var(--ink);}

/* ---------- 13. Responsive ---------- */
@media (max-width:900px){
  .pull-quote.wide blockquote{max-width:none;}
  .hero-grid{grid-template-columns:1fr;gap:0;}
  .hero-copy{display:contents;}
  .hero-visual{margin-top:40px;}
  .hero-ctas{order:1;margin-top:28px;}
  .hero{padding-top:56px;}
  .stage{margin:0 auto;}
  .stage-hint{text-align:center;}
  .feature-grid{grid-template-columns:1fr;gap:36px;}
  .feature-grid.reverse .feature-grid-visual{order:0;}
  .pricing-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;padding:20px 32px;border-bottom:1px solid var(--line);
    display:none;gap:18px;
  }
  .nav-links.open{display:flex;}
  .menu-toggle{display:block;}
}
@media (max-width:600px){
  .wrap,.nav-inner{padding-left:20px;padding-right:20px;}
  .nav-links{padding:20px;}
  .hero{padding-top:40px;}
  .story-fig-pair{grid-template-columns:1fr;}
}