/* Pingala – site styles. Brand: teal #037C7D, charcoal #33363D. */
:root{
  --teal:#037C7D; --teal-dark:#026263; --teal-tint:#E6F2F2; --charcoal:#33363D;
  --ink:#33363D; --muted:#5B606B; --bg:#FFFFFF; --bg-alt:#F5F8F8; --line:#DCE3E3;
  --radius:14px; --max:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16.17V48.5L28 64.67L0 48.5V16.17Z M28 64.67V97 M0 48.5L-28 64.67 M56 48.5L84 64.67' fill='none' stroke='%23037C7D' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:hover{color:var(--teal-dark)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.2;color:var(--charcoal);letter-spacing:-.01em}
/* One heading scale everywhere: h1 52/36px, h2 32/26px, h3 20/18px (desktop/mobile) */
h1{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.25rem);margin:.2em 0 .4em}
h2{font-size:clamp(1.625rem,1.35rem + .8vw,2rem);margin:0 0 .6em}
h3{font-size:clamp(1.125rem,1.05rem + .25vw,1.25rem);margin:0 0 .3em}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--charcoal);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{display:flex;align-items:center}
.brand img{height:34px;width:auto}
.nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.nav a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--charcoal);font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{background:var(--teal-tint);color:var(--teal-dark)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:inherit;color:var(--charcoal);cursor:pointer}
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;padding:8px 16px 16px}
  .nav a{padding:12px}
  .no-js .nav{display:block;position:static;border:0}
}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--bg-alt) var(--hex);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.eyebrow{display:inline-block;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);background:var(--teal-tint);padding:4px 10px;border-radius:999px}
.lede{font-size:1.2rem;color:var(--muted);max-width:34em}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;font-weight:600;text-decoration:none;border:2px solid var(--teal)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.btn-ghost{color:var(--teal-dark);background:#fff}
.hero-art{display:flex;justify-content:center;gap:16px;align-items:flex-end}
.hero-art .phone{width:42%;max-width:210px;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(51,54,61,.18);border:6px solid var(--charcoal);background:var(--charcoal)}
.hero-art .phone:nth-child(2){transform:translateY(-28px)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:48px}.hero-art .phone{max-width:170px}}
@media (max-width:600px){.hero .wrap{padding-top:32px;padding-bottom:36px;gap:28px}.hero-art .phone{border-width:4px;border-radius:16px}.hero-art .phone img{max-height:228px;width:auto}.hero-art .phone{max-width:none;width:auto}.hero-art .phone:nth-child(2){transform:translateY(-12px)}}

/* Sections */
section{padding:72px 0}
section.alt{background:var(--bg-alt)}
.section-intro{color:var(--muted);max-width:40em;margin-bottom:32px}

/* App cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;list-style:none;margin:0;padding:0}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,transform .2s}
.card:hover,.card:focus-within{box-shadow:0 12px 30px rgba(51,54,61,.12);transform:translateY(-2px)}
.card:has(a:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.card h3 a:focus-visible{outline:none}
.card-cta{margin-top:14px;font-weight:600;color:var(--teal-dark)}
.card:hover .card-cta{text-decoration:underline}
.card-media{aspect-ratio:4/3;background:var(--teal-tint) var(--hex);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-top:20px}
.card-media img{width:46%;border-radius:12px 12px 0 0;box-shadow:0 8px 24px rgba(51,54,61,.2)}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3 a{color:var(--charcoal);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{color:var(--muted);margin-bottom:14px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:0;list-style:none}
.tag{font-size:.8rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);color:var(--charcoal)}
.tag.status{background:var(--teal-tint);border-color:transparent;color:var(--teal-dark)}

/* Placeholder (no screenshots) */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;background:var(--teal-tint) var(--hex);color:var(--teal-dark);font-weight:700;font-size:1.3rem;text-align:center;padding:20px}
.placeholder svg{width:56px;height:56px}
.card-media .placeholder{padding-bottom:40px}

/* About / contact */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:760px){.two-col{grid-template-columns:1fr;gap:24px}}
.values{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.values li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.values svg{flex:none;width:28px;height:28px;margin-top:2px}
.values strong{display:block;color:var(--charcoal)}
.values span{color:var(--muted)}
.contact-box{background:var(--charcoal) var(--hex);color:#fff;border-radius:var(--radius);padding:40px;text-align:center}
.contact-box h2{color:#fff}
.contact-box p{color:#E3E6EA}
.contact-box .btn-primary{background:#fff;color:var(--charcoal);border-color:#fff}
.contact-box .btn-primary:hover{background:var(--teal-tint);border-color:var(--teal-tint);color:var(--charcoal)}

/* App detail page */
.app-hero{background:var(--bg-alt) var(--hex);border-bottom:1px solid var(--line);padding:48px 0}
.breadcrumb{font-size:.9rem;margin-bottom:12px}
.breadcrumb a{color:var(--muted)}
.app-hero .lede{margin-bottom:16px}
.status-box{margin-top:20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:10px;padding:14px 18px;max-width:44em}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.badge-slot{display:inline-flex;align-items:center;gap:10px;min-width:190px;padding:10px 16px;border-radius:10px;background:var(--charcoal);color:#fff;text-decoration:none;line-height:1.2}
.badge-slot small{display:block;font-size:.72rem;opacity:.85}
.badge-slot.soon{background:#fff;color:var(--muted);border:1px dashed #8A9099}
.badge-slot svg{width:24px;height:24px;flex:none}
.features{columns:2 320px;column-gap:40px;padding-left:1.2em}
.features li{margin-bottom:.6em;break-inside:avoid}
.gallery{display:flex;gap:20px;overflow-x:auto;padding:8px 0 20px;scroll-snap-type:x mandatory;list-style:none;margin:0;scroll-behavior:smooth}
.gallery figure{margin:0}
.carousel-controls{display:flex;align-items:center;gap:12px;margin-top:4px}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--charcoal);font-size:1.2rem;cursor:pointer}
.car-btn:hover{background:var(--teal-tint)}
.car-btn:disabled{opacity:.4;cursor:default}
.car-count{font-size:.9rem;color:var(--muted);min-width:4.5em;text-align:center}
.gallery-note{margin-top:20px}
.gallery li{flex:none;scroll-snap-align:start}
.gallery img{height:440px;width:auto;max-width:none;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(51,54,61,.1);background:#fff}
.gallery figcaption{font-size:.85rem;color:var(--muted);max-width:280px;margin-top:8px}
.gallery:focus-visible{outline-offset:0}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .gallery{gap:12px}
  .gallery li{flex:0 0 85%}
  .gallery img{width:100%;height:auto;max-height:520px;object-fit:contain;object-position:left top}
}
.note{font-size:.9rem;color:var(--muted)}
.big-placeholder{max-width:560px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}

/* Prose pages */
.prose{max-width:46em}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul{padding-left:1.2em}
.callout{background:var(--teal-tint);border-radius:10px;padding:14px 18px;margin:1em 0}
details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:10px;background:#fff}
summary{cursor:pointer;font-weight:600;color:var(--charcoal)}

/* Footer */
.site-footer{background:var(--charcoal);color:#E3E6EA;padding:40px 0;font-size:.95rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.site-footer a{color:#fff}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0}
.site-footer img{height:36px;width:36px}
.foot-brand{display:flex;align-items:center;gap:12px}

/* ================= Home: the page is a Fold Notebook cover =================
   A port of the app's default notebook (ui/BookCover.kt): Tan pebbled leather, light from the upper left,
   a rounded spine with a hinge groove, tonal saddle stitching, a cream paper belly band and the black elastic. */
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url(../fonts/montserrat-semibold.woff?v=7d87077a1b) format("woff")}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url(../fonts/montserrat-bold.woff?v=bbf2d78092) format("woff")}
.home{--leather:#7A4A24;--thread:#AC8A69;--paper:#F3EEE4;--ink:#2A2521;--ink-soft:#6B625B;--foil:#F6E3A6;--spine:28px;--el-right:40px;--el-w:16px;--st:9px;
  background:#2a1a0e;color:var(--ink)}
.home .skip{z-index:30}
.cover-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:22px calc(var(--el-right) + var(--el-w) + 24px) 0 calc(var(--spine) + 26px)}
.cover-mark img{display:block;opacity:.85;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.45))}
.cover-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.cover-nav a,.cover-foot a,.back-cover a,.cover-open{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--foil);text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.08)}
.cover-nav a:hover,.back-cover a:hover,.cover-open:hover{text-decoration:underline;text-underline-offset:4px}
.home a:focus-visible,.home button:focus-visible,.home .gallery:focus-visible{outline:2px solid var(--foil);outline-offset:3px;border-radius:3px}
.inside a:focus-visible,.inside button:focus-visible,.inside .gallery:focus-visible{outline-color:var(--teal)}

.cover{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
  padding:max(110px,22vh) 0 56px;isolation:isolate;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.13),transparent 85vmax),
    radial-gradient(circle at 50% 45%,transparent 0,transparent 40vmax,rgba(0,0,0,.28) 78vmax),
    url(../img/leather-tan.webp?v=4e673a0706) 0 0/384px 384px,
    var(--leather);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -6px 6px -2px rgba(0,0,0,.30),inset -4px 0 4px -1px rgba(0,0,0,.2)}
.cover-spine{position:absolute;z-index:-1;top:0;bottom:0;left:0;width:calc(var(--spine) + 6px);
  background:linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(255,255,255,.06) calc(var(--spine)*.3),transparent calc(var(--spine)*.8),rgba(0,0,0,.16) var(--spine),
  rgba(0,0,0,.30) var(--spine),rgba(0,0,0,.30) calc(var(--spine) + 1px),rgba(255,255,255,.10) calc(var(--spine) + 1px),transparent calc(var(--spine) + 6px))}
/* stitching: head, fore-edge and tail, 2.4:1.5 stitch:gap like the app (doubled for a page-size cover) */
.cover-stitch{position:absolute;z-index:-1;top:var(--st);bottom:var(--st);left:calc(var(--spine) + 9px);right:var(--st);pointer-events:none;
  --dash:repeating-linear-gradient(90deg,var(--thread) 0 5px,transparent 5px 8px);--dashv:repeating-linear-gradient(180deg,var(--thread) 0 5px,transparent 5px 8px);
  background:var(--dash) 0 0/100% 1.5px no-repeat,var(--dash) 0 100%/100% 1.5px no-repeat,var(--dashv) 100% 0/1.5px 100% no-repeat;
  filter:drop-shadow(.6px .9px 0 rgba(0,0,0,.35))}
.cover-elastic{position:absolute;z-index:3;top:0;bottom:0;right:var(--el-right);width:var(--el-w);pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 50%,rgba(0,0,0,.3)),
    linear-gradient(90deg,#151413,#34312E 35%,#22201E 70%,#0E0D0C);
  box-shadow:6px 0 8px -2px rgba(0,0,0,.35)}

/* the paper belly band */
.band{position:relative;z-index:1;margin:0;min-height:30vh;display:flex;align-items:center;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.30),transparent 70%),
    linear-gradient(90deg,rgba(0,0,0,.16) 0,rgba(0,0,0,.02) var(--spine),transparent 35%,transparent 93%,rgba(0,0,0,.10)),
    url(../img/paper.webp?v=665a2492ee) 0 0/128px 128px,var(--paper);
  border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.16);
  box-shadow:0 4px 5px -1px rgba(0,0,0,.30),0 -2px 3px -1px rgba(0,0,0,.12)}
.band::before{content:"";position:absolute;top:0;bottom:0;left:var(--spine);width:1px;background:rgba(0,0,0,.10)}
.band-inner{width:100%;max-width:680px;margin:0 auto;padding:40px calc(var(--el-right) + var(--el-w) + 20px) 40px calc(var(--spine) + 20px);text-align:center;box-sizing:content-box}
.kicker{margin:0 0 14px}
.band-logo{height:40px;width:auto;display:inline-block}
.band-title{font-family:Montserrat,system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.08;
  font-size:clamp(2.2rem,1.2rem + 3.6vw,4.2rem);color:var(--ink);margin:0}
.band-tagline{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:clamp(.95rem,.85rem + .35vw,1.1rem);color:var(--ink);margin:12px auto 0;max-width:34em}
.band-rule{width:72px;height:2px;background:rgba(107,98,91,.6);margin:18px auto 12px}
.band-foot{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.cover-blurb{font-size:1.02rem;line-height:1.65;color:#FBF4E8;max-width:40em;margin:0 auto 12px;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(40,22,8,.35)}
.cover-blurb + .badges{margin-top:26px}
.band-blurb{font-size:1rem;line-height:1.6;color:var(--ink);margin:0 auto 10px;max-width:40em}
.band-blurb:last-child{margin-bottom:0}

.cover-lower{position:relative;z-index:1;text-align:center;padding:36px calc(var(--el-right) + var(--el-w) + 20px) 0 calc(var(--spine) + 20px)}
.home .badges{justify-content:center;margin:0}
.home .badge-slot{background:#111;color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.home .badge-slot.soon{background:rgba(17,17,17,.82);border-style:solid}
.cover-status{font-size:.9rem;color:#F4EBDD;max-width:44em;margin:14px auto 0;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.cover-open{display:inline-block;margin-top:22px;padding:10px 6px}

/* inside: cream pages */
.inside{background:url(../img/paper.webp?v=665a2492ee) 0 0/128px 128px,var(--paper);padding:24px 0 40px;box-shadow:inset 0 10px 14px -10px rgba(0,0,0,.45)}
.page{max-width:1040px;margin:0 auto;padding:40px 24px 8px}
.page-kicker{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.inside h2{font-family:Montserrat,system-ui,sans-serif;font-weight:700;color:var(--ink)}
.inside a{color:var(--teal-dark,#036566)}
.inside .features{columns:2 320px;column-gap:40px;padding-left:1.2em;margin:0 0 8px}
.inside .features li{margin:0 0 10px;break-inside:avoid}
.page-shots .gallery li{flex:0 0 auto}
.page-shots .gallery img{border-radius:12px;box-shadow:0 4px 14px rgba(42,37,33,.22);background:#fff}
.inside .note{color:var(--ink-soft)}

/* back cover footer */
.back-cover{position:relative;color:#F4EBDD;
  background:radial-gradient(circle at 70% 0,rgba(255,255,255,.08),transparent 60%),url(../img/leather-tan.webp?v=4e673a0706) 0 0/384px 384px,var(--leather);
  box-shadow:inset 0 6px 8px -4px rgba(0,0,0,.45)}
.back-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;max-width:1040px;margin:0 auto;padding:30px 24px}
.back-inner p{margin:0;font-size:.9rem}
.back-logo{opacity:.85}
.back-cover ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 0 auto;padding:0}
.back-cover a{letter-spacing:.08em;text-transform:none;font-size:.85rem}

@media (max-width:600px){
  .home{--spine:18px;--el-right:20px;--el-w:12px;--st:6px}
  .cover{padding:max(84px,14vh) 0 40px}
  .cover-blurb{font-size:.95rem}
  .cover-top{padding:16px calc(var(--el-right) + var(--el-w) + 12px) 0 calc(var(--spine) + 14px)}
  .cover-nav ul{gap:14px}
  .cover-nav a{font-size:.7rem;letter-spacing:.14em}
  .band-inner{padding:30px calc(var(--el-right) + var(--el-w) + 12px) 30px calc(var(--spine) + 12px)}
  .band-logo{height:32px}
  .band-blurb{font-size:.95rem}
  .cover-lower{padding:28px calc(var(--el-right) + var(--el-w) + 12px) 0 calc(var(--spine) + 12px)}
  .back-cover ul{margin-left:0}
  .page{padding:32px 16px 4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* showcase sections */
.showcase{max-width:1200px}
.showcase-text{max-width:44em}
.showcase-text p{line-height:1.65}
.shots{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 4px 18px;margin:18px -4px 0;align-items:flex-start}
.shot{margin:0;flex:none;scroll-snap-align:start;--h:440px}
.shot img,.ph-frame{display:block;height:var(--h);width:auto;border-radius:12px;box-shadow:0 4px 14px rgba(42,37,33,.22);background:#fff}
.shot figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:10px;max-width:30em}
.shot.tall figcaption{max-width:calc(var(--h) * .8)}
.ph-frame{box-sizing:border-box;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(3,124,125,.05) 0 12px,transparent 12px 24px),#FBF8F2;border:2px dashed #8A9099;box-shadow:none;color:var(--ink-soft)}
.shot.wide .ph-frame{aspect-ratio:16/10}
.ph-frame svg{width:44px;height:44px;color:var(--teal)}
.ph-tag{font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-dark)}
.ph-label{font-size:.95rem;color:var(--ink);max-width:18em}
.shot-placeholder figcaption{display:none}
.page-more{border-top:1px solid rgba(42,37,33,.12);margin-top:24px}
@media (max-width:600px){.shot{--h:360px}.shots{gap:14px}}

/* Glossary: planned feature, shown as a labelled mock-up */
.soon-tag{display:inline-block;background:var(--teal);color:#fff;padding:4px 10px;border-radius:999px;letter-spacing:.14em}
.glossary .lede{font-size:1.1rem;color:var(--ink)}
.mockup{margin:22px 0 0;max-width:980px}
.mockup img{display:block;width:100%;height:auto;border-radius:12px;border:2px dashed #8A9099;padding:8px;background:#FBF8F2;box-sizing:border-box}
.mockup figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:10px}
.mockup figcaption strong{color:var(--teal-dark);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
@media (max-width:700px){.mockup{max-width:360px}}
.shot{width:min-content}.shot figcaption,.shot.tall figcaption{max-width:none}

/* ===================== v3: showcase design language =====================
   Style reference: snuuzu.com (layout rhythm, type scale, restraint), adapted to the Fold Notebook cover and the
   Pingala brand. Big medium-weight headlines with tight tracking, a tiny uppercase eyebrow, one short line, lots of
   whitespace, rounded image cards on warm off-white, pill buttons, and quiet fade/slide reveals. */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-regular.woff?v=00476b7038) format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../fonts/inter-semibold.woff?v=dbd9994d7f) format("woff")}
.home{--charcoal:#33363D;--teal:#037C7D;--teal-dark:#026263;--off:#F3F1ED;--W:calc(var(--FH) * .4);--FH:min(68vh,600px);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--charcoal)}
.home main{background:#fff}

/* ---- hero: the cover, with the foldable opening on it ---- */
.hero{padding:0;justify-content:center}
.hero-grid{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;
  max-width:1240px;width:100%;margin:0 auto;box-sizing:border-box;padding:96px calc(var(--el-right) + var(--el-w) + 56px) 72px calc(var(--spine) + 56px)}
.hero-text{position:relative;padding:44px 0;text-align:left}
.hero-text::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.30),transparent 70%),url(../img/paper.webp?v=665a2492ee) 0 0/128px 128px,var(--paper);
  border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.16);box-shadow:0 4px 5px -1px rgba(0,0,0,.30),0 -2px 3px -1px rgba(0,0,0,.12)}
.hero .band-title{font-size:clamp(2.4rem,1rem + 4.2vw,5rem);letter-spacing:.03em}
.hero .band-tagline{margin:14px 0 0;font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);max-width:22em;font-weight:600}
.status-pill{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;padding:7px 14px;border-radius:999px;background:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(3,124,125,.18)}
.hero .badges{justify-content:flex-start;margin-top:18px}
.hero .cover-open{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);margin:0}

/* the device: two panels on a hinge. Closed, the right panel is folded over the left and shows the cover screen. */
.fold-stage{position:relative;perspective:2200px;width:calc(var(--W) * 2 + 16px);display:flex;flex-direction:column;align-items:center}
.fold{position:relative;width:calc(var(--W) * 2);height:var(--FH);transform-style:preserve-3d;
  animation:fold-shift 7.2s cubic-bezier(.65,0,.25,1) .5s both}
.fold::after{content:"";position:absolute;left:5%;right:5%;bottom:-26px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);transform:translateZ(-40px)}
.panel{position:absolute;top:0;width:var(--W);height:100%;transform-style:preserve-3d}
.panel.left{left:0;transform:translateZ(-1px)}
.panel.right{left:var(--W);transform-origin:0 50%;animation:fold-open 7.2s cubic-bezier(.65,0,.25,1) .5s both}
.panel img,.face img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.panel.left,.face{overflow:hidden;background:#1d1e21;box-shadow:0 0 0 7px #1d1e21,0 18px 40px rgba(0,0,0,.45)}
.panel.left{border-radius:20px 0 0 20px}
.panel.left img{left:0}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{border-radius:0 20px 20px 0}.face.front img{left:-100%}
.face.back{transform:rotateY(180deg);border-radius:20px}.face.back img{left:0;width:100%}
.screen{position:absolute;inset:0;border-radius:20px;overflow:hidden;opacity:0;animation:screen-on 7.2s linear .5s both;box-shadow:0 0 0 7px #1d1e21,0 18px 40px rgba(0,0,0,.45);background:#FAF7F0}
.screen .bar{display:block;width:100%;height:auto}
.screen .paper{position:relative;perspective:2600px;perspective-origin:0 50%;overflow:hidden}
.screen .paper>img{display:block;width:100%;height:auto}
.leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;animation:leaf-turn 7.2s cubic-bezier(.5,0,.35,1) .5s both}
.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf-front img{display:block;width:100%;height:auto}
.leaf-front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.35));opacity:0;animation:leaf-shade 7.2s linear .5s both}
.leaf-back{transform:rotateY(180deg);background:linear-gradient(90deg,#efe8da,#faf6ee 60%,#e9e1d2)}
.replay{margin-top:40px;font:600 .72rem Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--foil);background:rgba(0,0,0,.25);border:1px solid rgba(246,227,166,.4);border-radius:999px;padding:7px 14px;cursor:pointer;opacity:0;animation:fade-in .6s ease 7.6s both}
@keyframes fold-shift{0%,16%{transform:translateX(calc(var(--W) / 2)) rotateY(8deg)}46%,100%{transform:translateX(0) rotateY(0)}}
@keyframes fold-open{0%,16%{transform:rotateY(-180deg)}46%,100%{transform:rotateY(0)}}
@keyframes screen-on{0%,47.9%{opacity:0}48%,100%{opacity:1}}
@keyframes leaf-turn{0%,56%{transform:rotateY(0);opacity:1}86%{transform:rotateY(-88deg);opacity:1}89%,100%{transform:rotateY(-92deg);opacity:0}}
@keyframes leaf-shade{0%,56%{opacity:0}86%,100%{opacity:1}}
@keyframes fade-in{to{opacity:1}}

/* ---- sections ---- */
.sec{padding:clamp(88px,12vw,160px) 24px;text-align:center}
.sec:nth-of-type(even){background:var(--off)}
.sec-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px)}
.eyebrow{margin:0 0 14px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#6E727A}
.home h2{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:clamp(2.2rem,1.2rem + 3.6vw,4.6rem);line-height:1.04;letter-spacing:-.045em;color:#1c1d21;margin:0}
.line{margin:18px auto 0;font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.5;color:#5B5F67;max-width:34em}
.card{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -18px rgba(0,0,0,.28)}
.card img{display:block;width:100%;height:auto}
.card figcaption{padding:12px 16px 14px;font-size:.85rem;color:#5B5F67;text-align:left}

/* page turn of real pages */
.spread{max-width:1120px;margin:0 auto;border-radius:22px;padding:10px;background:#1d1e21;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.spread-anim{border-radius:14px;overflow:hidden;background:#FAF7F0}
.sp-bar{position:relative}.sp-bar img{display:block;width:100%;height:auto}
.sp-bar .b2{position:absolute;inset:0;opacity:0;transition:opacity .3s ease 1.3s}
.sp-paper{position:relative;display:flex;perspective:2600px}
.sp-half{width:50%}.sp-half img,.sp-front img,.sp-back img{display:block;width:100%;height:auto}
.sp-leaf{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.45,0,.2,1) .2s}
.sp-front,.sp-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sp-back{transform:rotateY(180deg)}
.sp-front::after,.sp-back::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .85s ease .2s}
.sp-front::after{background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 60%)}
.sp-back::after{background:linear-gradient(270deg,rgba(0,0,0,.25),rgba(0,0,0,0) 60%)}
.spread.in .sp-leaf{transform:rotateY(-180deg)}
.spread.in .sp-bar .b2{opacity:1}
.spread.in .sp-front::after{opacity:1}
.spread-still{display:none;margin:0}.spread-still img{display:block;width:100%;height:auto;border-radius:14px}

/* fold = spine */
.pair{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,4vw,56px);max-width:1000px;margin:0 auto}
.pair .card:first-child{width:min(26%,240px)}.pair .card:last-child{width:min(52%,480px)}

/* materials: full-bleed leather close-up */
.materials{background:#1b1714;color:#F4EBDD;padding-bottom:clamp(72px,9vw,120px)}
.mat-hero{position:relative;height:min(82vh,760px);overflow:hidden}
.mat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.06);transition:transform 2.4s cubic-bezier(.2,.6,.2,1)}
.mat-hero.in .mat-img,.mat-hero:has(.mat-copy.in) .mat-img{transform:scale(1)}
.mat-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(20,14,10,.85))}
.mat-copy{position:absolute;z-index:1;left:0;right:0;bottom:clamp(40px,6vw,80px);text-align:center;padding:0 24px}
.materials h2{color:#fff}.materials .eyebrow{color:#E6D6B8}.materials .line{color:#E9DFCF}
.mat-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1120px;margin:20px auto 0;padding:0 24px}
.mat-row .card{background:#000}
.mat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;max-width:1120px;margin:56px auto 0;padding:0 24px}
.mat-grid .card{background:#26211d}.mat-grid figcaption{color:#D9CDBA}

/* notes: big-type selector */
.kinds{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;max-width:1200px;margin:0 auto;text-align:left}
.kind-stage{position:relative;aspect-ratio:5/4;border-radius:18px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.28)}
.kshot{position:absolute;inset:18px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.kshot.on{opacity:1;transform:none;pointer-events:auto}
.kshot img{max-width:100%;max-height:calc(100% - 34px);width:auto;height:auto;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.kshot figcaption{margin-top:12px;font-size:.88rem;color:#5B5F67}
.kind-list{list-style:none;margin:0;padding:0}
.kind{display:block;width:100%;text-align:left;background:none;border:0;padding:4px 0;cursor:pointer;font:600 clamp(1.7rem,1rem + 2.4vw,3.4rem)/1.12 Inter,system-ui,sans-serif;letter-spacing:-.045em;color:#BFC1C5;transition:color .25s ease}
.kind:hover,.kind.on{color:#1c1d21}
.kind:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:6px}

.pencil-shot{display:flex;justify-content:center}
.pencil-shot .shot{--h:min(52vh,460px)}
.glossary-old{display:none}
.sec-glossary .mockup{margin:0 auto}
.mockup img{border:0;padding:0;border-radius:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.3)}
.mockup figcaption{text-align:center}
.more-copy{max-width:640px;margin:28px auto 0;text-align:left;color:#5B5F67}
.more-copy summary{cursor:pointer;font-weight:600;color:var(--charcoal);text-align:center;list-style-position:inside}
.features-all ul{columns:2 260px;column-gap:32px;padding-left:1.1em;margin-top:18px}.features-all li{margin:0 0 8px;break-inside:avoid}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}
.pill{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--charcoal);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .2s ease,background .2s ease}
.pill:hover{background:#1c1d21;transform:translateY(-1px)}
.pill.ghost{background:#fff;color:var(--charcoal);box-shadow:inset 0 0 0 1px #C9CBD0}
.pill:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.home .sec a:not(.pill){color:var(--teal-dark)}

/* scroll reveals: transform + opacity only; only when JS is running */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.from-left{transform:translateX(-40px)}.js .reveal.from-right{transform:translateX(40px)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;justify-items:center;gap:30px;padding:84px calc(var(--el-right) + var(--el-w) + 14px) 70px calc(var(--spine) + 14px)}
  .hero-text{text-align:center;padding:30px 0;width:100%}
  .hero .band-tagline{margin-left:auto;margin-right:auto}
  .hero .badges{justify-content:center}
  .home{--FH:min(46svh,400px)}
  .kinds{grid-template-columns:1fr}
  .kind-list{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;order:-1}
  .kind{width:auto;font-size:1.25rem;letter-spacing:-.02em}
  .mat-grid{grid-template-columns:1fr 1fr}.mat-grid .card:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .mat-row{grid-template-columns:1fr;gap:12px}
  .mat-hero{height:62svh}
  .pair .card:first-child{width:30%}.pair .card:last-child{width:62%}
  .spread{padding:6px;border-radius:14px}
  .kind-stage{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  .fold,.panel.right,.leaf,.leaf-front::after,.screen,.replay{animation:none!important}
  .fold{transform:none}.panel.right{transform:none}.screen{opacity:0}
  .replay{display:none}
  .spread-anim{display:none}.spread-still{display:block}
  .js .reveal{opacity:1;transform:none;transition:none}
  .mat-img{transform:none}
  .kshot{transition:none}
}
.kshot img{max-height:calc(100% - 34px)}
.papers{display:flex;justify-content:center;align-items:flex-end;gap:0;max-width:1120px;margin:64px auto 0;padding:0 24px}
.paper-card{margin:0 -18px;width:min(23%,240px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.paper-card img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
.paper-card figcaption{margin-top:12px;font-size:.82rem;color:#D9CDBA;text-align:center}
.paper-card:nth-child(1){transform:rotate(-6deg) translateY(16px)}.paper-card:nth-child(2){transform:rotate(-2deg)}
.paper-card:nth-child(3){transform:rotate(2deg)}.paper-card:nth-child(4){transform:rotate(6deg) translateY(16px)}
.papers:hover .paper-card{transform:none}
.paper-card:nth-child(n+2){z-index:1}
.pencil-shot{max-width:1040px;margin:0 auto}
.pencil-shot figcaption strong,.mockup figcaption strong{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--teal-dark)}
@media (max-width:600px){.papers{flex-wrap:wrap;gap:18px 10px}.paper-card{margin:0;width:44%;transform:none!important}}
.mat-grid .card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top}
.hero .cover-open{white-space:nowrap}
@media (max-width:760px){.hero .cover-open{position:relative;left:auto;bottom:auto;transform:none;display:table;margin:18px auto 6px}}

/* ===================== v4: review fixes (Critiquito) ===================== */
.home h2,.line{text-wrap:balance}
/* section labels: teal-dark text on a pale teal pill (7.0:1); the Glossary pill matches */
.home .eyebrow{color:#026263;background:#E3F0F0;padding:5px 12px;border-radius:999px;display:inline-block}
.home .soon-tag{background:none;color:inherit;padding:0;letter-spacing:inherit}
.materials .eyebrow{background:none;padding:0;color:#E6D6B8}
.sec{padding:clamp(72px,9vw,120px) 24px}
.sec-feel{padding-top:clamp(48px,5vw,72px)}
.hero-grid{padding-bottom:56px}
/* materials: the headline sits on the dark band below the full foil title, never over it */
.mat-hero{height:auto;background:#1b1714}
.mat-img{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain}
.mat-hero::after{background:linear-gradient(180deg,rgba(27,23,20,0) 70%,#1b1714)}
.mat-copy{position:relative;bottom:auto;padding:clamp(28px,4vw,48px) 24px 0}
/* paper fan: only the screenshots tilt, so the captions share one baseline */
.paper-card,.paper-card:nth-child(n){transform:none}
.paper-card img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.paper-card:nth-child(1) img{transform:rotate(-6deg) translateY(16px)}.paper-card:nth-child(2) img{transform:rotate(-2deg)}
.paper-card:nth-child(3) img{transform:rotate(2deg)}.paper-card:nth-child(4) img{transform:rotate(6deg) translateY(16px)}
.papers:hover .paper-card img{transform:none}
.paper-card figcaption{margin-top:30px}
/* note kinds */
.kind{color:#7D8189}
.kind-stage{aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;display:grid;justify-items:center}
.kshot{position:relative;inset:auto;grid-area:1/1;display:block;margin:0;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -18px rgba(0,0,0,.28);visibility:hidden}
.kshot.on{visibility:visible}
.kshot.tall{width:min-content}.kshot.wide{width:100%}
.kshot img,.kshot.tall img,.kshot.wide img{display:block;border-radius:0;box-shadow:none;max-height:none;max-width:none}
.kshot.tall img{height:min(64vh,600px);width:auto}
.kshot.wide img{width:100%;height:auto}
.kshot figcaption{margin:0;padding:12px 16px 14px;text-align:left;font-size:.85rem;color:#5B5F67}
/* store slots: plainly not buttons */
.home .badge-slot.soon{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);box-shadow:none;cursor:default;transition:none}
.home .badge-slot.soon:hover{transform:none;box-shadow:none;background:transparent}
.hero .badge-slot.soon{color:var(--charcoal);border-color:var(--charcoal)}
.sec-cta .badges{justify-content:center}
.sec-cta .badge-slot.soon{color:var(--charcoal);border-color:var(--charcoal)}
/* expanders: centred text link with a chevron, 44px target */
.more-copy summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;width:max-content;margin:0 auto;padding:0 8px;
  color:#026263;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.more-copy summary::-webkit-details-marker{display:none}
.more-copy summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.more-copy[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.more-copy summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
/* hero animation v4: ease-in-out travel, a quicker hinge, the outer screen switches off as it opens (clean cut),
   and the toolbar cuts to the new page number once the page has turned */
.fold{animation:fold-shift 7.2s linear .5s both}
.panel.right{animation:fold-open 7.2s linear .5s both}
.face.back img{animation:outer-off 7.2s linear .5s both}
.screen{animation:screen-on 7.2s linear .5s both}
.bars{position:relative}.bars .bar2{position:absolute;inset:0;opacity:0;animation:bar-cut 7.2s linear .5s both}
@keyframes fold-shift{0%,15%{transform:translateX(calc(var(--W) / 2)) rotateY(8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}42%,100%{transform:translateX(0) rotateY(0)}}
@keyframes fold-open{0%,17%{transform:rotateY(-180deg);animation-timing-function:cubic-bezier(.7,0,.3,1)}38%,100%{transform:rotateY(0)}}
@keyframes outer-off{0%,16.9%{opacity:1}17%,100%{opacity:0}}
@keyframes screen-on{0%,41.9%{opacity:0}42%,100%{opacity:1}}
@keyframes bar-cut{0%,85.9%{opacity:0}86%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.face.back img,.bars .bar2{animation:none!important}}
@media (max-width:860px){
  .home{--FH:min(42svh,calc((100vw - 92px) / .8))}
  .hero-grid{padding:70px calc(var(--el-right) + var(--el-w) + 8px) 28px calc(var(--spine) + 8px);gap:18px}
  .hero-text{padding:18px 0}
  .hero .band-logo{width:118px;height:auto}
  .hero .band-title{font-size:clamp(2rem,9vw,2.6rem)}
  .hero .band-tagline{font-size:1rem;margin-top:8px}
  .status-pill{font-size:.6rem;letter-spacing:.1em;padding:5px 10px;margin-top:12px;gap:6px}
  .hero .badges{flex-wrap:nowrap;gap:8px;margin-top:12px}
  .hero .badge-slot{min-width:0;width:155px;box-sizing:border-box;padding:8px 10px;gap:8px}
  .hero .badge-slot svg{width:20px;height:20px}
  .hero .badge-slot small{font-size:.62rem}
  .hero .cover-open{margin:16px auto 8px;font-size:.72rem;letter-spacing:.16em}
  /* the strap runs over the phone like a real elastic: keep it above everything */
  .cover-elastic{z-index:4}
}
@media (max-width:600px){
  .sec{padding:72px 20px}
  .sec-feel{padding-top:48px}
  .mat-hero{height:auto}
  .kshot.tall img{height:min(58svh,520px)}
  .paper-card img,.paper-card:nth-child(n) img{transform:none!important}
  .paper-card figcaption{margin-top:10px}
}
/* v4: cover gallery (real renders from the app's drawBook) */
.covers{display:flex;justify-content:center;align-items:flex-end;gap:0;max-width:1120px;margin:8px auto 36px;padding:12px 24px 0}
.cv{margin:0 -10px;width:min(17vw,190px);text-align:center}
.cv img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));transform:rotate(var(--r,0deg)) translateY(var(--y,0));transform-origin:50% 100%}
.cv:nth-child(1){--r:-7deg;--y:14px}.cv:nth-child(2){--r:-4deg;--y:4px}.cv:nth-child(3){--r:-1deg}
.cv:nth-child(4){--r:1deg}.cv:nth-child(5){--r:4deg;--y:4px}.cv:nth-child(6){--r:7deg;--y:14px}
.cv figcaption{margin-top:28px;font-size:.82rem;color:#E6D6B8;letter-spacing:.01em;line-height:1.3}
.cv:nth-child(6) figcaption{color:#fff;font-weight:600}
@media (max-width:860px){
  .covers{flex-wrap:wrap;gap:22px 14px;padding:0 20px}
  .cv{margin:0;width:calc((100% - 28px)/3)}
  .cv img{transform:none}
  .cv figcaption{margin-top:10px;font-size:.78rem}
}
.home .materials{padding-top:0}
.kind-stage{align-items:center}.kshot{align-self:center;height:auto}
.home details.more-copy{border:0;background:none;padding:0;border-radius:0;margin-top:20px}
.home details.more-copy[open] > :not(summary){margin-top:12px}
@media (max-width:860px){.covers{align-items:flex-start}.cv figcaption{font-size:.74rem}}
@media (max-width:860px){.sec-cta .badges{flex-wrap:nowrap;gap:8px;justify-content:center}.sec-cta .badge-slot{min-width:0;width:160px;box-sizing:border-box;padding:8px 10px;gap:8px}}
@media (max-width:860px){.sec-cta .badge-slot *{white-space:nowrap}.sec-cta .badge-slot small,.sec-cta .badge-slot .s{font-size:.62rem}}
/* v5: iPhone Duo hero. Book-style: the left half is the cover that swings open on the hinge (spine on the left when
   closed). Proportions from the real screens: outer 1398x2034, inner 2853x2007 (each half .711 of the height).
   Frame: mirror-polished titanium rim around a black border; hinge-side corners squarer, outer corners round. */
.home{--FH:min(50vh,350px);--W:calc(var(--FH) * .7108);--R:calc(var(--FH) * .055)}
.fold.duo{animation:duo-shift 7.2s linear .5s both}
.dp{position:absolute;top:0;width:var(--W);height:100%;transform-style:preserve-3d}
.dp-r{left:var(--W);overflow:hidden;border-radius:0 var(--R) var(--R) 0;transform:translateZ(-1px)}
.dp-l{left:0;transform-origin:100% 50%;animation:duo-open 7.2s linear .5s both}
.dp img,.dface img{position:absolute;top:0;height:100%;width:200%;max-width:none}
.dp-r img{left:-100%}
.dface{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dface.front{border-radius:var(--R) 0 0 var(--R)}.dface.front img{left:0}
.dface.back{transform:rotateY(180deg);border-radius:calc(var(--R) * .45) var(--R) var(--R) calc(var(--R) * .45);background:#0b0b0c}
.dface.back img{left:1.7%;width:96.6%;height:100%;object-fit:cover;animation:duo-outer-off 7.2s linear .5s both}
@keyframes duo-outer-off{0%,19%{opacity:1}28%,100%{opacity:.15}}
.dface.back .cam{position:absolute;top:calc(var(--FH) * .061);right:calc(var(--FH) * .054);width:calc(var(--FH) * .026);height:calc(var(--FH) * .026);border-radius:50%;background:#050506;box-shadow:inset 0 0 0 1px #1b1c20}
.dp-r,.dface,.dscreen{box-shadow:0 0 0 4px #0b0b0c,0 0 0 5.5px #e4e1da,0 0 0 7px #a9a59d,0 0 0 7.5px #6f6c66,0 26px 50px -8px rgba(0,0,0,.5)}
.dscreen{border-radius:var(--R);background:#F6F3EA}
.dpaper{position:relative;overflow:hidden;perspective:2400px;perspective-origin:50% 50%}
.dpaper>.pg-b{display:block;width:100%;height:auto}
.pg-a{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;animation:pg-a 7.2s linear .5s both}
.pg-a img,.dl-front img,.dl-back img{position:absolute;top:0;width:200%;max-width:none;height:auto}
.pg-a img{left:0}
.dleaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;animation:duo-leaf 7.2s linear .5s both}
.dl-front,.dl-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dl-front img{left:-100%}
.dl-back{transform:rotateY(180deg)}.dl-back img{left:0}
.dl-front::after,.dl-back::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.dl-front::after{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.04) 40%,rgba(255,255,255,.08));animation:leaf-shade 7.2s linear .5s both}
.dl-back::after{background:linear-gradient(270deg,rgba(0,0,0,.25),rgba(0,0,0,0) 45%);animation:leaf-shade-b 7.2s linear .5s both}
@keyframes duo-shift{0%,15%{transform:translateX(calc(var(--W) / -2)) rotateY(-8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}42%,100%{transform:translateX(0) rotateY(0)}}
@keyframes duo-open{0%,17%{transform:rotateY(180deg);animation-timing-function:cubic-bezier(.7,0,.3,1)}38%,100%{transform:rotateY(0)}}
@keyframes duo-leaf{0%,56%{transform:rotateY(0);animation-timing-function:cubic-bezier(.55,0,.3,1)}84%,100%{transform:rotateY(-180deg)}}
@keyframes pg-a{0%,83.9%{opacity:1}84%,100%{opacity:0}}
@keyframes leaf-shade{0%,56%{opacity:0}70%{opacity:1}71%,100%{opacity:0}}
@keyframes leaf-shade-b{0%,70%{opacity:1}84%,100%{opacity:0}}
@keyframes bar-cut{0%,83.9%{opacity:0}84%,100%{opacity:1}}
@media (max-width:860px){.home{--FH:min(40svh,calc((100vw - 48px) / 1.4216))}}
@media (prefers-reduced-motion:reduce){
  .fold.duo,.dp-l,.dleaf,.pg-a,.dface.back img,.dl-front::after,.dl-back::after{animation:none!important}
  .fold.duo,.dp-l{transform:none}
  .fold.duo .dscreen{opacity:1;animation:none!important}
}

/* v6: Galaxy Z Fold8 hero (build.py HERO_DEVICE = "fold8"; set "duo" to switch back to the iPhone Duo block above).
   Reuses the Duo book mechanics (cover on the back of the left half, spine on the left when closed) with the real
   Android captures: cover P1 884x2208 (half = .4004 of the height), inner P2 1768x2208, then the whole page turns.
   Fold8 design cues (reference URLs in README v6):
   "Perfect Symmetry" (every corner, hinge side included, has the same large soft radius), slim satin Armor Aluminum rim
   in Graphite, thin black border, punch-hole camera on the cover and main screens. No logos, no rear view. */
.home .f8s{--FH:min(52vh,440px);--W:calc(var(--FH) * .4004);--R:calc(var(--FH) * .052)}
.f8 .dp-r{border-radius:0 var(--R) var(--R) 0}
.f8 .dface.front{border-radius:var(--R) 0 0 var(--R)}
.f8 .dface.back{border-radius:var(--R);background:#070708}
.f8 .dface.back img{left:0;width:100%}
.f8 .dp-r,.f8 .dface,.f8 .dscreen{box-shadow:0 0 0 3.5px #070708,0 0 0 4.5px #7d8086,0 0 0 6.5px #4b4d52,0 0 0 7.5px #2a2b2e,0 26px 50px -8px rgba(0,0,0,.5)}
.f8 .dscreen{border-radius:var(--R);background:#F8F4EB}
.f8 .dscreen::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.05),rgba(255,255,255,.04),rgba(0,0,0,0))}
.f8 .cam{position:absolute;top:calc(var(--FH) * .016);width:calc(var(--FH) * .021);height:calc(var(--FH) * .021);border-radius:50%;background:#050506;box-shadow:inset 0 0 0 1px #1b1c20;z-index:2}
.f8 .dface.back .cam{top:calc(var(--FH) * .016);right:auto;left:calc(50% - var(--FH) * .0105)}
.f8 .dp-r{animation:f8-under 7.2s linear .5s both}
@keyframes f8-under{0%,16.9%{opacity:0}17%,100%{opacity:1}}
.f8 .cam-in{left:calc(75% - var(--FH) * .0105)}
.f8paper{position:relative;overflow:hidden;perspective:2600px;perspective-origin:0 50%}
.f8paper>.pg-n{display:block;width:100%;height:auto}
.f8leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;animation:f8-leaf 7.2s linear .5s both}
.f8l-front,.f8l-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.f8l-front img{display:block;width:100%;height:auto}
.f8l-front::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.32));animation:f8-shade 7.2s linear .5s both}
.f8l-back{transform:rotateY(180deg);background:linear-gradient(90deg,#efe9dc,#faf7f0 60%,#ebe4d6)}
@keyframes f8-leaf{0%,56%{transform:rotateY(0);opacity:1;animation-timing-function:cubic-bezier(.55,0,.35,1)}83%{transform:rotateY(-86deg);opacity:1}87%,100%{transform:rotateY(-92deg);opacity:0}}
@keyframes f8-shade{0%,56%{opacity:0}83%,100%{opacity:1}}
@media (max-width:860px){.home .f8s{--FH:min(42svh,calc((100vw - 48px) / .8008))}}
@media (prefers-reduced-motion:reduce){.f8leaf,.f8l-front::after,.f8 .dp-r{animation:none!important}.f8 .bars .bar2{opacity:0}}

/* v6b: standard Galaxy Z Fold8 hero (HERO_DEVICE = "fold8"). Samsung: 5.5" 10:16 cover (1248x1972), 7.6" 4:3 main
   (2448x1848), passport-style book fold, "Perfect Symmetry" equal radii on every corner incl. the hinge side, slim Armor
   Aluminum rim, punch-hole cover camera. Each open half is .6623 of the height (Duo .7108), so the footprint is close to
   the Duo's. Sequence: closed cover -> opens to pages 1-2 -> right page turns to 3-4. Duo mechanics, own frame. */
.home .f8bs{--FH:min(50vh,362px);--W:calc(var(--FH) * .6623);--R:calc(var(--FH) * .06)}
.f8b .dp-r{border-radius:0 var(--R) var(--R) 0;animation:f8-under 7.2s linear .5s both}
.f8b .dface.front{border-radius:var(--R) 0 0 var(--R)}
.f8b .dface.back{border-radius:var(--R);background:#070708}
.f8b .dface.back img{left:2.2%;width:95.6%;top:1.2%;height:97.6%;border-radius:calc(var(--R) * .8);object-fit:cover}
.f8b .dface.back .cam{top:calc(var(--FH) * .03);right:auto;left:calc(50% - var(--FH) * .011);width:calc(var(--FH) * .022);height:calc(var(--FH) * .022)}
.f8b .dp-r,.f8b .dface,.f8b .dscreen{box-shadow:0 0 0 3.5px #070708,0 0 0 4.5px #7d8086,0 0 0 6.5px #4b4d52,0 0 0 7.5px #2a2b2e,0 26px 50px -8px rgba(0,0,0,.5)}
.f8b .dscreen{border-radius:var(--R);background:#F7EEDB}
@keyframes f8-under{0%,16.9%{opacity:0}17%,100%{opacity:1}}
@media (max-width:860px){.home .f8bs{--FH:min(40svh,calc((100vw - 100px) / 1.3247))}}
@media (prefers-reduced-motion:reduce){.f8b .dp-r{animation:none!important}}

/* ===== Studio home (/): marketing/pingala-home-v1.md. White, calm, one card. Inter 400/600 only. ===== */
.studio{background:#FFFFFF;color:#33363D;font-family:"Inter",system-ui,sans-serif;font-weight:400}
.studio .st-wrap{max-width:1120px;margin:0 auto;padding:0 40px}
.st-header .st-wrap{height:88px;display:flex;align-items:center;justify-content:space-between}
.st-brand{display:inline-flex;padding:8px 0}
.st-brand img{height:32px;width:auto;display:block}
.st-header nav{display:flex;gap:28px}
.st-header nav a,.st-flinks a{color:#33363D;text-decoration:none;font-weight:600;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center;
  background:linear-gradient(#037C7D,#037C7D) 0 calc(100% - 10px)/0 2px no-repeat;transition:background-size .2s ease-out}
.st-header nav a:hover,.st-flinks a:hover{background-size:100% 2px}
.studio a:focus-visible{outline:3px solid #037C7D;outline-offset:3px;border-radius:4px}
.studio .st-hero{padding-top:160px}
.st-hero h1{font-family:"Inter",system-ui,sans-serif;font-size:clamp(2.6rem,1.4rem + 4vw,5rem);font-weight:600;line-height:1.04;letter-spacing:-.04em;color:#33363D;margin:0;max-width:12em}
.st-intro{font-size:1.25rem;line-height:1.5;color:#5B606B;max-width:36em;margin:24px 0 0}
.studio .st-apps{padding-top:120px;padding-bottom:160px}
.st-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:#037C7D;margin:0 0 24px;font-family:"Inter",system-ui,sans-serif}
.st-grid{display:grid;grid-template-columns:1fr;gap:32px}
.st-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:#F5F8F8;border-radius:24px;color:#33363D;text-decoration:none;overflow:hidden;min-height:480px}
.st-card:focus-visible{border-radius:24px}
.st-copy{padding:56px 48px}
.st-copy h3{font-family:"Inter",system-ui,sans-serif;font-size:1.75rem;font-weight:600;letter-spacing:-.02em;margin:0 0 12px;color:#33363D}
.st-line{font-size:1.125rem;line-height:1.5;margin:0 0 16px;color:#33363D;max-width:24em}
.st-meta span{white-space:nowrap}
.st-meta{font-size:.875rem;font-weight:600;letter-spacing:.02em;color:#5B606B;margin:0 0 32px}
.st-go{display:inline-flex;align-items:center;gap:8px;background:#33363D;color:#FFFFFF;font-weight:600;font-size:.95rem;padding:12px 22px;border-radius:999px;min-height:44px;box-sizing:border-box}
.st-arrow{display:inline-block;transition:transform .2s ease-out}
.st-img{display:flex;justify-content:center;align-items:center;padding:48px 0}
.st-img img{height:384px;width:auto;border-radius:22px;display:block;transition:transform .2s ease-out}
@media (hover:hover) and (pointer:fine){.st-card:hover .st-img img{transform:translateY(-4px)}.st-card:hover .st-arrow{transform:translateX(4px)}}
.st-footer{border-top:1px solid #DCE3E3;padding:40px 0 48px;font-size:.875rem}
.st-footer .st-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.st-fbrand{display:flex;align-items:center;gap:12px;margin:0;flex:1 1 auto}
.st-fbrand img{height:28px;width:28px}
.st-flinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.st-flinks a{font-size:.875rem;font-weight:400}
.st-copy-r{margin:0;color:#5B606B;flex-basis:100%}
/* Load: headline and intro fade up 12px over 400ms, the card 120ms later. Transform and opacity only. */
@keyframes st-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.st-in{animation:st-up .4s ease-out both}
.st-in2{animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.st-in{animation:none}.st-arrow,.st-img img,.st-header nav a{transition:none}}
@media (max-width:720px){
  .studio .st-wrap{padding:0 24px}
  .st-header .st-wrap{height:72px}
  .st-brand img{height:28px}
  .st-header nav{gap:20px}
  .studio .st-hero{padding-top:72px;text-align:center}
  .st-hero h1{margin:0 auto;max-width:6em;text-wrap:balance}
  .st-intro{font-size:1.125rem;margin:20px auto 0}
  .studio .st-apps{padding-top:72px;padding-bottom:72px}
  .st-label{text-align:center}
  .st-card{grid-template-columns:1fr;min-height:0}
  .st-img{order:-1;padding:32px 0 0}
  .st-img img{height:320px}
  .st-copy{padding:28px 24px 32px}
  .st-footer .st-wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .st-flinks{flex-direction:column}
}

/* v7: static device frames around real captures (build.py device()). Same frames as the heroes: Fold8 (equal
   "Perfect Symmetry" radii, Graphite rim, punch-hole cover camera) and iPhone Duo (polished rim, squarer hinge corners).
   Proportions: Fold8 cover body .6623 (screen 1248x1972 inset), main 2448x1848; Duo cover .7108, inner 2853x2007. */
.dev{position:relative;display:block;margin:8px;background:#070708;overflow:hidden;
  box-shadow:0 0 0 3.5px #070708,0 0 0 4.5px #7d8086,0 0 0 6.5px #4b4d52,0 0 0 7.5px #2a2b2e,0 26px 50px -14px rgba(0,0,0,.45)}
.dev img{display:block;width:100%;height:100%;object-fit:cover}
.dev .cam{position:absolute;aspect-ratio:1;border-radius:50%;background:#050506;box-shadow:inset 0 0 0 1px #1b1c20}
.f8o{aspect-ratio:2448/1848;border-radius:4.53%/6%}
.f8o::after,.duoo::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.06),rgba(255,255,255,.05),rgba(0,0,0,0))}
.f8c{aspect-ratio:.6623;border-radius:9.06%/6%}
.f8c img{position:absolute;left:2.2%;top:1.2%;width:95.6%;height:97.6%;border-radius:7.25%/4.8%}
.f8c .cam{top:3%;left:48.34%;width:3.32%}
.duoo,.duoc{box-shadow:0 0 0 4px #0b0b0c,0 0 0 5.5px #e4e1da,0 0 0 7px #a9a59d,0 0 0 7.5px #6f6c66,0 26px 50px -14px rgba(0,0,0,.45)}
.duoo{aspect-ratio:2853/2007;border-radius:3.87%/5.5%}
.duoc{aspect-ratio:.7108;border-radius:3.48% 7.74% 7.74% 3.48%/2.48% 5.5% 5.5% 2.48%}
.duoc img{position:absolute;left:1.7%;top:0;width:96.6%}
.duoc .cam{top:6.1%;right:7.6%;width:3.66%}
/* the fold is the spine: one device, folded and unfolded, at the same height (cover body is half the open width) */
.pair{align-items:flex-start}
.devfig{margin:0;flex:none}
.pair{--u:min(26%,240px)}.pair .devfig:first-child{width:calc(var(--u) + 16px)}.pair .devfig:last-child{width:calc(var(--u) * 2 + 16px)}
.devfig figcaption{margin-top:18px;font-size:.85rem;color:#5B5F67;text-align:center}
@media (max-width:600px){.pair{gap:14px;--u:calc((100% - 14px - 32px) / 3)}}
/* note kinds: device shots sit on the page, no card */
.kshot.dk{background:none;box-shadow:none;overflow:visible;border-radius:0}
.kshot.dk .dev{margin:8px 8px 0}
.kshot.dk figcaption{padding:16px 8px 0}
/* studio card */
.st-img .dev{transition:transform .2s ease-out}
.st-img.st-f8c .dev{height:384px;width:auto;aspect-ratio:.6623}
.st-img.st-f8o{padding:48px 40px 48px 8px}
.st-img.st-f8o .dev{width:100%;max-width:470px}
@media (hover:hover) and (pointer:fine){.st-card:hover .st-img .dev{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.st-img .dev{transition:none}}
@media (max-width:720px){.st-img.st-f8c .dev{height:320px}.st-img.st-f8o{padding:32px 24px 0}}
/* /notesapp hero: the Fold8 sits centred between the headline's right edge and the elastic, at every desktop/tablet width.
   The text column is exactly as wide as the headline (min-content: "NOTEBOOK"), the device column takes the rest and is a
   size container, and the device is sized from that column so both gaps stay equal and never drop below --hG. */
.hero-dev{display:flex;justify-content:center;min-width:0}
@media (min-width:861px){
  .hero-grid:has(.f8bs){max-width:none;gap:0;grid-template-columns:min-content minmax(0,1fr);
    padding-left:calc(max(0px,(100% - 1240px) / 2) + var(--spine) + 56px);padding-right:calc(var(--el-right) + var(--el-w))}
  .hero-grid:has(.f8bs) .band-title{width:min-content;font-size:clamp(2.4rem,min(1rem + 4.2vw,5.2vw),5rem)}
  .hero-grid:has(.f8bs) .hero-dev{container-type:inline-size;align-self:stretch;align-items:center;
    --hG:clamp(48px,5vw,120px)}
  /* 1.3246 = open width / height; 15px = the rim drawn outside the screen on both sides */
  .hero-grid:has(.f8bs) .f8bs{--FH:min(50vh,362px,calc((100cqw - 2 * var(--hG) - 15px) / 1.3246))}
}

/* reveal-from-right figures start 40px off to the right: never let them make the page scroll sideways on phones */
.home main{overflow-x:clip}
/* v9: the last slab-phone captures replaced by Fold8 renders (papers, Materials row, glossary) in the same .dev frames */
.papers.f8papers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:start;max-width:1180px}
.f8papers .devfig figcaption,.mat-devs .devfig figcaption{margin-top:16px;color:#D9CDBA}
.mat-devs{display:grid;grid-template-columns:1.3247fr 1.3247fr .6623fr;gap:32px;align-items:end;max-width:1120px;margin:64px auto 0;padding:0 24px}
.sec-glossary .mockup.gl-pair{max-width:1040px}
.gl-row{display:grid;grid-template-columns:1.3485fr .6623fr;gap:36px;align-items:center}
.gl-row .gl-spread{width:100%;height:auto}
.mockup .dev img{border-radius:0;box-shadow:none}
.mockup .f8c img{position:absolute;left:2.2%;top:1.2%;width:95.6%;height:97.6%;border-radius:7.25%/4.8%}
.mockup.gl-pair figcaption{margin-top:22px}
@media (max-width:1000px){.papers.f8papers{grid-template-columns:1fr 1fr;gap:26px 24px;max-width:760px}}
@media (max-width:860px){.mat-devs{grid-template-columns:1fr 1fr;gap:28px 20px}.mat-devs .dvc{grid-column:1/-1;justify-self:center;width:46%}}
@media (max-width:700px){.gl-row{grid-template-columns:1fr;justify-items:center}.gl-row .gl-spread{display:none}.gl-row .devfig{width:min(72%,280px)}}
@media (max-width:600px){.papers.f8papers{gap:20px 14px;padding:0 20px}.mat-devs{grid-template-columns:1fr;gap:26px;padding:0 24px}.mat-devs .dvc{width:62%}}
/* v10: /notesapp/feedback/ - three mailto cards, no form, no tracking */
.cover.fb-cover{min-height:0;padding:max(96px,12vh) 0 56px}
.fb-cover .band{min-height:0}
.fb-cover .band-title{font-size:clamp(2.2rem,1.4rem + 3vw,4rem)}
.sec-fb{background:#fff;padding:clamp(56px,7vw,96px) 24px clamp(64px,8vw,112px)}
.fb-cards{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:980px}
.fb-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;box-sizing:border-box;padding:28px 26px 24px;border-radius:20px;
  background:#FBF8F2;box-shadow:inset 0 0 0 1px #E7DFD2;color:var(--charcoal);text-decoration:none;text-align:left;transition:transform .2s ease,box-shadow .2s ease}
.fb-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #D8CCB8,0 18px 34px -20px rgba(0,0,0,.35)}
.home .fb-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:20px}
.fb-ico{width:30px;height:30px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.fb-t{font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.fb-s{font-size:.95rem;line-height:1.45;color:#5B5F67}
.fb-go{margin-top:auto;padding-top:14px;font-weight:600;font-size:.9rem;color:var(--teal-dark)}
.fb-note{margin:40px auto 0;font-size:1rem;color:#5B5F67;max-width:34em}
.fb-mail{margin:8px auto 0;font-size:.88rem;color:#7A7E86}
.fb-mail a,.fb-cta a{color:var(--teal-dark)}
.fb-cta{margin:28px 0 0;font-size:.98rem}
.fb-cta a{font-weight:600;text-decoration:none}.fb-cta a:hover{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.fb-card{transition:none}.fb-card:hover{transform:none}}
@media (max-width:760px){.fb-cards{grid-template-columns:1fr;max-width:420px;gap:14px}.fb-card{padding:22px 22px 20px}}
@media (max-width:600px){.cover-nav li.nav-feat{display:none}}
.cover-nav a{white-space:nowrap}
.cover-top{gap:14px}
@media (max-width:600px){.fb-page .cover-nav ul{gap:12px}.fb-page .cover-nav a{letter-spacing:.08em}}