/* ============================================================================
   Strings Mentor · «Verniz»
   Night-stage palette carried over from the app's «Palco» theme, with the
   fingerboard spine borrowed from the «Ébano» direction.
   Single visual world on purpose: the site is the app's own room.
   ========================================================================== */

/* --- Fonts (self-hosted: the app collects nothing, the site calls nobody) -- */
@font-face{
  font-family:"Italiana"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/italiana-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  color-scheme:dark;

  --ink-0:#140F0C;          /* deepest ground */
  --ink-1:#1B1410;          /* page ground */
  --ink-2:#241A14;          /* raised ground */
  --surface:rgba(255,255,255,.045);
  --surface-hi:rgba(255,255,255,.075);
  --border:rgba(232,161,60,.18);
  --border-hi:rgba(232,161,60,.42);

  --cream:#F5E9D2;
  --muted:#B39B72;
  --faded:#8A7658;

  --amber:#E8A13C;
  --amber-lt:#F0BA6A;
  --amber-dp:#B87A22;
  --verdigris:#6FB3B8;
  --intonation:#F0BA6A;   /* the mic mode's intonation arrow */
  --green:#7CC96B;

  --paper:#F0E4CE;
  --paper-ink:#3E2A18;
  --paper-rule:#8C7C62;

  --shell:min(1000px,100% - 2.5rem);
  --step:clamp(2.75rem,7vw,6rem);

  --f-display:"Italiana",Didot,"Bodoni MT",Georgia,serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-1); color:var(--cream);
  font-family:var(--f-body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--amber); text-decoration-color:rgba(232,161,60,.35); text-underline-offset:3px}
a:hover{text-decoration-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:3px}
::selection{background:rgba(232,161,60,.28); color:var(--cream)}

/* --- Varnish grain: the wood is never flat ------------------------------- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(232,161,60,.10), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(184,122,34,.07), transparent 65%);
}

/* --- Layout --------------------------------------------------------------- */
.shell{width:var(--shell); margin-inline:auto; position:relative; z-index:1}
section{padding-block:var(--step); position:relative; z-index:1}
.rule{border:0; border-top:1px solid rgba(232,161,60,.14); margin:0}

/* --- Type ----------------------------------------------------------------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); font-weight:600; margin:0 0 1.1rem;
}
.eyebrow .dot{color:var(--faded); margin-inline:.5em}
h1,h2,h3{text-wrap:balance; margin:0}
h1{
  font-family:var(--f-display); font-weight:400; letter-spacing:.005em;
  font-size:clamp(2.7rem,7vw,4.25rem); line-height:1.05;
}
h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.1; letter-spacing:.01em;
}
h3{font-size:1.12rem; font-weight:600; letter-spacing:-.005em; line-height:1.35}
.lede{
  font-size:clamp(1.05rem,1.55vw,1.22rem); color:var(--muted);
  max-width:52ch; margin:1.4rem 0 0; line-height:1.6;
}
.section-lede{color:var(--muted); max-width:56ch; margin:1.1rem 0 0}
p{margin:0}
.amber{color:var(--amber)}

/* --- Header --------------------------------------------------------------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:40; padding-block:.95rem;
  transition:background .45s ease, backdrop-filter .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
.site-head.stuck{
  background:rgba(20,15,12,.78); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(232,161,60,.16);
}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.wordmark{
  display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--cream);
}
.wordmark img{width:30px; height:30px; border-radius:8px}
.wordmark span{font-family:var(--f-display); font-size:1.3rem; letter-spacing:.05em}
.head-actions{display:flex; align-items:center; gap:1.15rem}
.head-cta{padding:.62rem .9rem; border-radius:.7rem; font-size:.8rem; white-space:nowrap}
.menu-toggle{
  display:none; width:2.75rem; height:2.75rem; padding:.7rem; border:1px solid var(--border);
  border-radius:.75rem; background:rgba(255,255,255,.035); cursor:pointer;
}
.menu-toggle i{
  display:block; width:100%; height:1.5px; margin:4px 0; border-radius:2px;
  background:var(--cream); transition:transform .25s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{
  position:fixed; z-index:39; top:4.7rem; right:max(1.25rem,calc((100% - 1000px)/2));
  width:min(22rem,calc(100% - 2.5rem)); padding:1rem;
  display:grid; gap:.2rem; border:1px solid var(--border-hi); border-radius:1.1rem;
  background:rgba(20,15,12,.97); backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.55);
}
.mobile-menu[hidden]{display:none}
.mobile-menu > a{
  padding:.8rem .85rem; border-radius:.7rem; color:var(--cream); text-decoration:none;
  font-weight:600; transition:color .2s ease, background .2s ease;
}
.mobile-menu > a:hover,.mobile-menu > a.on{color:var(--amber); background:rgba(232,161,60,.08)}
.mobile-menu-foot{
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.65rem; padding:.9rem .85rem .2rem; border-top:1px solid var(--border);
}
.mobile-menu-foot .btn{padding:.65rem .9rem; font-size:.8rem}
@media (max-width:1139px){.menu-toggle{display:block}}
@media (max-width:620px){
  .desktop-action{display:none}
  .mobile-menu-foot{display:flex}
}
@media (max-width:520px){
  .site-head{padding-block:.75rem}
  .head-row{gap:.75rem}
  .head-actions{gap:.7rem}
  .wordmark span{display:none}
  .mobile-menu{top:4.15rem}
}


/* --- Instrument availability --------------------------------------------- */
/* The app opens on an instrument picker where only the cello is playable.
   The site says the same thing, in the same words, rather than implying four. */
.instruments{
  border-block:1px solid rgba(232,161,60,.14);
  background:linear-gradient(180deg,rgba(232,161,60,.045),transparent);
  padding-block:2.4rem;
}
.instruments .eyebrow{margin:0}
.inst-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2.4rem}
.inst-list{display:flex; flex-wrap:wrap; gap:.7rem}
.inst{
  display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.05rem;
  border-radius:99px; font-size:.95rem; font-weight:500; color:var(--faded);
  box-shadow:inset 0 0 0 1px rgba(232,161,60,.16);
}
.inst i{width:7px; height:7px; border-radius:50%; background:rgba(245,233,210,.22); flex:none}
.inst small{font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faded)}
.inst.on{color:var(--cream); box-shadow:inset 0 0 0 1px rgba(232,161,60,.45)}
.inst.on i{background:var(--amber); box-shadow:0 0 10px 2px rgba(232,161,60,.5)}
.inst.on small{color:var(--amber)}

/* --- Language switch ------------------------------------------------------ */
.lang-switch{display:flex; align-items:center; gap:.5rem; font-size:.86rem; font-weight:600}
.lang-switch a{color:var(--faded); text-decoration:none; transition:color .25s ease}
.lang-switch a:hover{color:var(--cream)}
.lang-switch [aria-current="true"]{color:var(--amber)}
.lang-switch span{color:rgba(245,233,210,.2)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font:inherit; font-weight:700;
  font-size:.95rem; padding:.85rem 1.5rem; border-radius:.85rem; border:0;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{
  background:linear-gradient(180deg,var(--amber-lt),var(--amber)); color:#2B2019;
  box-shadow:0 5px 0 var(--amber-dp);
}
.btn--primary:hover{transform:translateY(2px); box-shadow:0 3px 0 var(--amber-dp)}
.btn--primary:active{transform:translateY(4px); box-shadow:0 1px 0 var(--amber-dp)}
.btn--ghost{
  background:none; color:var(--amber); box-shadow:inset 0 0 0 2px rgba(232,161,60,.4);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.btn[aria-disabled="true"]{cursor:default; opacity:.92}
.btn[aria-disabled="true"]:hover{transform:none}
.btn .soon{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:.2em .55em; border-radius:.4rem; background:rgba(43,32,25,.22);
}
.btn--ghost .soon{background:rgba(232,161,60,.16)}
.ctas{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem}
.cta-note{margin-top:1.1rem; font-size:.88rem; color:var(--faded)}


/* --- Store badges --------------------------------------------------------- */
/* Apple's and Google's official artwork, unmodified and self-hosted. The two
   files have different built-in padding, so the heights differ on purpose:
   they are the numbers at which the two PILLS read the same size. Clear space
   around them is the gap below, which exceeds Apple's quarter-height rule.
   An <a> with no href yet is not a link; that is the "coming soon" state,
   and adding the href is the only edit needed to make it live. */
.badges{display:flex; flex-wrap:wrap; align-items:center; gap:.95rem; margin-top:2.2rem}
.badge{display:inline-block; line-height:0; border-radius:8px; transition:transform .18s ease}
.badge img{display:block; width:auto}
.badge-apple img{height:52px}
.badge-google img{height:68px}      /* 52px pill + the PT asset's own margin (29px) */
.badge-google.is-en img{height:77px} /* the EN asset carries more margin (41px) */
a.badge[href]:hover{transform:translateY(-2px)}
a.badge[href]:active{transform:translateY(0)}
.badge:not([href]){cursor:default}
.badge:focus-visible{outline:2px solid var(--amber); outline-offset:4px}
@media (max-width:420px){
  .badge-apple img{height:46px}
  .badge-google img{height:60px}
  .badge-google.is-en img{height:68px}
}

/* --- Curtain: the app's own splash gesture, played once on arrival -------- */
/* Four strings draw themselves down the seam, the stage parts along them, and
   they then glide left into the margin rail they belong to. The splash hands
   the page its own spine instead of merely wiping itself away. */
.curtain{position:fixed; inset:0; z-index:90; pointer-events:none}
.curtain b{
  position:absolute; top:0; bottom:0; width:50.5%;
  background:linear-gradient(180deg,#3A2A1E,#241A14 55%,#191210);
  animation:part 1s .45s cubic-bezier(.72,0,.2,1) forwards;
}
.curtain b:first-child{left:0; transform-origin:left}
.curtain b:last-child{right:0; animation-name:part-r}

/* The travelling strings. Widths and spacing mirror `.spine .strings` exactly,
   so they land dead on the rail. The flight layer is deliberately the size of
   the window: --fly contains a percentage, and inside a transform that resolves
   against the element's own width, so it has to be an element the width of the
   viewport, the same reference `.spine` measures its own offset against. */
.curtain .fly{
  --fly:0px;
  position:absolute; inset:0;
  animation:fly 1.1s .6s cubic-bezier(.25,.9,.25,1) forwards;
}
@media (min-width:1140px){ .curtain .fly{--fly:calc(var(--shell)/2 + 1.9rem + 17px)} }

.curtain i{
  position:absolute; top:0; bottom:0; left:50%; margin-left:-17px; width:34px;
  display:flex; justify-content:space-between;
}
.curtain i span{
  display:block; width:1px; transform:scaleY(0);
  background:linear-gradient(180deg,transparent,var(--amber-lt) 14%,var(--amber-lt) 86%,transparent);
  box-shadow:0 0 13px 0 rgba(232,161,60,.38);   /* glow tight enough that four stay four */
  animation:string-draw .42s cubic-bezier(.2,.8,.3,1) forwards;
}
.curtain i span:nth-child(2){width:1.5px; opacity:.90; animation-delay:.05s}
.curtain i span:nth-child(3){width:2px;   opacity:.78; animation-delay:.10s}
.curtain i span:nth-child(4){width:2.5px; opacity:.62; animation-delay:.15s}

@keyframes part{ to{ transform:translateX(-101%) } }
@keyframes part-r{ to{ transform:translateX(101%) } }
@keyframes string-draw{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
/* They hold at the seam for a beat, sweep across, then hand the rail over:
   the fade only begins once the travel is effectively done. */
@keyframes fly{
  0%,10%{transform:none}
  82%{opacity:1}
  100%{transform:translateX(calc(-1 * var(--fly))); opacity:0}
}

/* --- The string spine: a margin index, always readable ------------------ */
/* Anchored by its RIGHT edge (the strings), so the whole rail is pushed a
   clear gap away from the text column, whatever the labels happen to say.
   The labels then grow leftwards, into the outer margin, never over the page. */
.spine{
  display:none; position:fixed; top:0; bottom:0; z-index:20; pointer-events:none;
  opacity:0; animation:spine-in .6s 1.3s ease forwards;   /* acende quando as cordas chegam */
  right:calc(50% + var(--shell)/2 + 1.9rem);   /* strings ↔ text column */
  width:auto;                                   /* as wide as the longest label */
}
.spine .strings{position:absolute; top:0; bottom:0; right:0; width:34px; display:flex; justify-content:space-between}
.spine .strings i{
  display:block; width:1px;
  background:linear-gradient(180deg,transparent,rgba(207,197,180,.30) 12%,rgba(207,197,180,.30) 88%,transparent);
}
.spine .strings i:nth-child(2){width:1.5px; opacity:.85}
.spine .strings i:nth-child(3){width:2px; opacity:.7}
.spine .strings i:nth-child(4){width:2.5px; opacity:.55}

.spine .marks{
  height:100%; display:flex; flex-direction:column;
  align-items:flex-end; justify-content:center; gap:1.35rem;
}
.spine .marks a{
  display:flex; align-items:center; gap:1.9rem;   /* label ↔ strings */
  pointer-events:auto; text-decoration:none; padding-block:.15rem;
}
.spine .marks a::after{
  content:""; flex:none; width:10px; height:10px; margin-right:12px; border-radius:50%;
  background:rgba(245,233,210,.28); transition:all .4s cubic-bezier(.2,.8,.3,1);
}
.spine .marks a:hover::after{background:var(--amber-lt); width:12px; height:12px; margin-right:11px}
.spine .marks a.on::after{
  width:14px; height:14px; margin-right:10px; background:var(--amber);
  box-shadow:0 0 0 1px rgba(232,161,60,.35), 0 0 18px 4px rgba(232,161,60,.4);
}
.spine .marks a span{
  display:none; text-align:right; white-space:nowrap; font-size:.95rem;
  font-weight:500; color:var(--faded); transition:color .3s ease;
}
.spine .marks a:hover span{color:var(--cream)}
.spine .marks a.on span{color:var(--amber)}

/* Dots only where the margin is tight; full labelled index where it is not.
   Both thresholds are the width at which the rail still clears the window edge:
   below them it would hang off-screen, so it simply does not appear. */
@keyframes spine-in{to{opacity:1}}
@media (min-width:1140px){ .spine{display:block} }
@media (min-width:1400px){ .spine .marks a span{display:block} }

/* --- Hero ----------------------------------------------------------------- */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding-block:clamp(7rem,14vh,10rem) var(--step);
}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.hero h1{font-size:clamp(2.7rem,5vw,3.55rem)}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--amber-lt)}

/* A short, faithful product loop belongs in the hero: note → fingers → answer. */
.hero-demo-wrap{position:relative; width:100%; max-width:460px; justify-self:end}
.hero-demo-wrap::before{
  content:""; position:absolute; inset:-20%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle,rgba(232,161,60,.16),transparent 63%);
}
.hero-demo{
  position:relative; padding:1rem; overflow:hidden;
  border:1px solid var(--border-hi); border-radius:1.5rem;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 2.2rem 4.5rem -1.7rem rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.055);
}
.hero-demo-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.1rem .2rem .75rem; color:var(--faded);
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.hero-demo-top span:last-child{color:var(--amber); font-variant-numeric:tabular-nums}
.hero-demo-stage{display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:.75rem; align-items:stretch}
.hero-demo-staff{
  min-height:220px; padding:.75rem .6rem .55rem; display:flex; flex-direction:column;
  justify-content:center; border-radius:1rem; background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(62,42,24,.12);
}
.hero-demo-staff svg{display:block; width:100%; height:auto}
.hero-demo-staff p{
  margin-top:.25rem; color:#8A7658; text-align:center;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
}
.hero-demo-note{opacity:1; transition:opacity .35s ease}
.hero-demo-board{
  min-height:220px; padding:.65rem .55rem .55rem; border-radius:1rem;
  background:linear-gradient(90deg,#110C0A,#2B1D15 50%,#100B09);
  box-shadow:inset 0 0 0 1px rgba(232,161,60,.14);
}
.hero-demo-board-labels{
  display:grid; grid-template-columns:repeat(4,1fr); color:#8C8578;
  font-size:.5rem; text-align:center; margin-bottom:.45rem;
}
.hero-demo-board-neck{
  position:relative; height:calc(100% - 1.1rem); display:flex;
  justify-content:space-around; border-top:5px solid #D5C9AE; border-radius:2px 2px .7rem .7rem;
}
.hero-demo-board-neck i{
  display:block; width:1px; height:100%; background:#70685D;
}
.hero-demo-board-neck i:nth-child(2){width:1.4px; background:#918879}
.hero-demo-board-neck i:nth-child(3){width:2px; background:#BDB3A2}
.hero-demo-board-neck i:nth-child(4){width:2.4px; background:#CFC5B4}
.hero-demo-finger{
  position:absolute; left:62.5%; width:1.75rem; height:1.75rem; margin-left:-.875rem;
  display:grid; place-items:center; border-radius:50%; font-size:.72rem; font-weight:700;
  color:var(--amber); background:#3E2E20; border:1.5px solid var(--amber);
  opacity:.15; transform:scale(.78); transition:opacity .35s ease, transform .35s ease,
  color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hero-demo-finger.finger-1{top:24%}
.hero-demo-finger.finger-3{top:54%}
.hero-demo.is-pick .hero-demo-finger,
.hero-demo.is-ok .hero-demo-finger{opacity:1; transform:scale(1)}
.hero-demo.is-pick .hero-demo-finger{box-shadow:0 0 13px rgba(232,161,60,.45)}
.hero-demo.is-ok .hero-demo-finger{
  color:#18320F; background:var(--green); border-color:var(--green);
  box-shadow:0 0 15px rgba(124,201,107,.5);
}
.hero-demo-feedback{
  min-height:2.75rem; margin-top:.75rem; padding:.65rem .8rem;
  display:flex; align-items:center; gap:.65rem; border-radius:.8rem;
  color:var(--cream); background:rgba(20,15,12,.72); font-size:.88rem; font-weight:600;
}
.hero-demo-feedback i{
  width:.55rem; height:.55rem; flex:none; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(232,161,60,.45); transition:background .35s ease, box-shadow .35s ease;
}
.hero-demo.is-pick .hero-demo-feedback i{box-shadow:0 0 0 6px rgba(232,161,60,.1)}
.hero-demo.is-ok .hero-demo-feedback{color:var(--green)}
.hero-demo.is-ok .hero-demo-feedback i{
  background:var(--green); box-shadow:0 0 0 6px rgba(124,201,107,.1);
}
.hero-demo-caption{margin-top:.8rem; color:var(--faded); text-align:center; font-size:.82rem}
.scroll-hint{
  margin-top:clamp(2.5rem,6vh,4rem); display:flex; align-items:center; gap:.75rem;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faded);
}
.scroll-hint i{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg,var(--amber),transparent);
  animation:draw 2.4s ease-in-out infinite;
}
@keyframes draw{0%{transform:scaleY(.2); transform-origin:top; opacity:0} 40%{opacity:1} 100%{transform:scaleY(1); transform-origin:top; opacity:0}}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .hero-demo-wrap{max-width:520px; justify-self:start}
  .scroll-hint{display:none}
}
@media (max-width:520px){
  .hero{align-items:flex-start; padding-top:6.5rem}
  .hero h1{font-size:clamp(2.55rem,12vw,3.25rem)}
  .hero-demo{padding:.75rem}
  .hero-demo-stage{grid-template-columns:minmax(0,1fr) 88px; gap:.55rem}
  .hero-demo-staff,.hero-demo-board{min-height:188px}
  .hero-demo-board{padding:.55rem .4rem .45rem}
  .hero-demo-finger{width:1.55rem; height:1.55rem; margin-left:-.775rem; font-size:.65rem}
  .hero-demo-top{font-size:.6rem; letter-spacing:.09em}
}

/* --- Outcomes ------------------------------------------------------------- */
.outcomes{
  border-block:1px solid rgba(232,161,60,.14);
  background:linear-gradient(180deg,rgba(232,161,60,.045),transparent);
}
.outcomes h2{max-width:18ch}
.outcome-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.6rem;
}
.outcome{
  min-height:11rem; padding:1.4rem; border:1px solid var(--border); border-radius:1.2rem;
  background:rgba(255,255,255,.025);
}
.outcome > span{
  display:block; margin-bottom:1.7rem; color:var(--amber); font-size:.72rem;
  font-weight:700; letter-spacing:.16em;
}
.outcome p{margin-top:.45rem; color:var(--muted); font-size:.95rem}
@media (max-width:720px){.outcome-grid{grid-template-columns:1fr}.outcome{min-height:0}}

/* --- The mechanic: staff card + fingerboard ------------------------------- */
.mech-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media (max-width:940px){ .mech-grid{grid-template-columns:1fr} }

.demo{position:relative}
.demo-stage{
  display:grid; grid-template-columns:1fr auto; gap:1.1rem; align-items:stretch;
  background:var(--surface); border:1px solid var(--border); border-radius:1.5rem;
  padding:1.1rem; box-shadow:0 2rem 4rem -1.5rem rgba(0,0,0,.7);
}
.staff-card{
  background:var(--paper); border-radius:1rem; padding:1rem .8rem;
  display:flex; flex-direction:column; justify-content:center; min-height:210px;
  box-shadow:inset 0 0 0 1px rgba(62,42,24,.12);
}
.staff-card svg{width:100%; height:auto; display:block}
.staff-caption{
  text-align:center; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8A7658; margin-top:.7rem;
}
.demo-neck{width:132px}
.demo-neck svg{width:100%; height:100%; display:block}

.demo-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.95rem; padding:0 .3rem;
}
.demo-verdict{font-size:.9rem; color:var(--muted); min-height:1.5em; transition:color .3s ease}
.demo-verdict.ok{color:var(--green)}
.demo-play{
  font:inherit; font-weight:700; font-size:.85rem; padding:.6rem 1.15rem; border:0;
  border-radius:.7rem; cursor:pointer; color:#2B2019;
  background:linear-gradient(180deg,var(--amber-lt),var(--amber));
  box-shadow:0 4px 0 var(--amber-dp); transition:transform .12s ease, box-shadow .12s ease;
}
.demo-play:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--amber-dp)}
.demo-play.pulse{animation:tap 1.1s ease-in-out 2}
@keyframes tap{0%,100%{box-shadow:0 4px 0 var(--amber-dp),0 0 0 0 rgba(232,161,60,.5)} 50%{box-shadow:0 4px 0 var(--amber-dp),0 0 0 14px rgba(232,161,60,0)}}

/* demo animated parts */
.dm-note{opacity:0; transition:opacity .45s ease}
.dm-note.show{opacity:1}
.dm-dot{transition:all .45s cubic-bezier(.2,.8,.3,1)}
.dm-dot.pick circle{fill:#E8A13C; stroke:#E8A13C}
.dm-dot.pick text{fill:#241811}
.dm-dot.ok circle{fill:#7CC96B; stroke:#7CC96B}
.dm-dot.ok text{fill:#18320F}
.dm-dot.pick,.dm-dot.ok{filter:drop-shadow(0 0 7px rgba(232,161,60,.55))}
.dm-dot.ok{filter:drop-shadow(0 0 9px rgba(124,201,107,.6))}

/* --- Steps ---------------------------------------------------------------- */
.steps{display:flex; flex-direction:column; gap:1.6rem; margin-top:2.2rem; counter-reset:s}
.step{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start}
.step .n{
  counter-increment:s; width:2.35rem; height:2.35rem; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:700; font-size:.95rem;
  color:var(--amber); background:rgba(232,161,60,.1);
  box-shadow:inset 0 0 0 1px rgba(232,161,60,.3);
}
.step .n::before{content:counter(s)}
.step p{color:var(--muted); margin-top:.35rem; font-size:.97rem}
.steps--horizontal{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.7rem}
.steps--horizontal .step{
  display:block; min-height:13rem; padding:1.5rem; border-radius:1.2rem;
  background:var(--surface); border:1px solid var(--border);
}
.steps--horizontal .step .n{margin-bottom:1.5rem}
@media (max-width:760px){
  .steps--horizontal{grid-template-columns:1fr}
  .steps--horizontal .step{min-height:0}
}


/* --- Microphone mode: a faithful redraw of the mic screen ---------------- */
/* Everything here mirrors lib/features/mic/mic_mode_screen.dart: the cream
   staff card with the phrase, the amber spotlight on the note being waited
   for, the green/red verdict flash on the note just played, the «Nota n de N»
   caption, and the lone intonation arrow on the strip underneath. */
.mic-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media (max-width:940px){ .mic-grid{grid-template-columns:1fr} }

.mic-points{display:flex; flex-direction:column; gap:1.5rem; margin-top:2.2rem}
.mic-point{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start}
.mic-point .g{
  width:2.35rem; height:2.35rem; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:1.05rem; color:var(--amber); background:rgba(232,161,60,.1);
  box-shadow:inset 0 0 0 1px rgba(232,161,60,.3);
}
.mic-point p{color:var(--muted); margin-top:.35rem; font-size:.97rem}
.mic-privacy{
  margin-top:1.7rem; padding-top:1.1rem; border-top:1px solid rgba(232,161,60,.16);
  color:var(--faded); font-size:.86rem;
}

.mic-stage{
  background:var(--surface); border:1px solid var(--border); border-radius:1.5rem;
  padding:1.1rem; box-shadow:0 2rem 4rem -1.5rem rgba(0,0,0,.7);
}
.mic-stage .staff-card{min-height:0; padding:1.1rem .9rem .8rem}

/* The strip under the staff carries one thing only, exactly as in the app. */
.mic-strip{
  height:3rem; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--intonation);
  opacity:0; transition:opacity .35s ease;
}
.mic-strip.show{opacity:1}
.shot-caption,
.mic-shot-caption{
  margin-top:1rem; font-size:.86rem; color:var(--faded); text-align:center; line-height:1.5;
}

/* Melody notes: the four states the widget paints. */
.ms-note ellipse,.ms-note .acc path{fill:#2B2019; transition:fill .4s ease}
.ms-note line{stroke:#2B2019; stroke-width:2.2; transition:stroke .4s ease}
.ms-note .acc line{stroke-width:1.7}
.ms-note .halo{fill:#E8A13C; opacity:0; transition:opacity .4s ease}
.ms-note.done ellipse,.ms-note.done .acc path{fill:rgba(43,32,25,.3)}
.ms-note.done line{stroke:rgba(43,32,25,.3)}
.ms-note.now ellipse,.ms-note.now .acc path{fill:#E8A13C}
.ms-note.now line{stroke:#E8A13C}
.ms-note.now .halo{opacity:.24}
.ms-note.ok ellipse,.ms-note.ok .acc path{fill:#3F7D3A}
.ms-note.ok line{stroke:#3F7D3A}
.ms-note.ok .halo{fill:#3F7D3A; opacity:.26}

/* --- Cards (modes) -------------------------------------------------------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem; margin-top:2.6rem;
}
/* Five modes, three columns: the boss level takes the wide slot it deserves. */
@media (min-width:900px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards .card:last-child{grid-column:span 2}
}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:1.25rem;
  padding:1.5rem 1.4rem 1.6rem; position:relative; overflow:hidden;
  transition:border-color .35s ease, background .35s ease, transform .35s ease;
}
.card:hover{border-color:var(--border-hi); background:var(--surface-hi); transform:translateY(-3px)}
.card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,161,60,.5),transparent);
  opacity:0; transition:opacity .35s ease;
}
.card:hover::after{opacity:1}
.card .glyph{
  font-family:var(--f-display); font-size:1.9rem; color:var(--amber); line-height:1;
  display:block; margin-bottom:.9rem;
}
.card p{color:var(--muted); margin-top:.5rem; font-size:.95rem}
.cards--goals .card:last-child{grid-column:auto}
.card .mode-names{
  margin-top:.65rem; color:var(--amber-lt); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.card .lock{
  display:inline-block; margin-top:.9rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faded);
}

/* --- Chapters ------------------------------------------------------------- */
.chapters{margin-top:2.8rem; display:grid; gap:0}
.chapter{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center;
  padding:1.05rem .4rem; border-top:1px solid rgba(232,161,60,.13); position:relative;
}
.chapter:last-child{border-bottom:1px solid rgba(232,161,60,.13)}
.chapter .node{
  width:.85rem; height:.85rem; border-radius:50%; background:rgba(245,233,210,.16);
  box-shadow:inset 0 0 0 1px rgba(232,161,60,.3);
  transition:background .5s ease, box-shadow .5s ease, transform .5s ease;
}
.chapter.lit .node{
  background:var(--amber); transform:scale(1.15);
  box-shadow:0 0 14px 3px rgba(232,161,60,.42);
}
.chapter .name{font-weight:600}
.chapter .num{
  font-size:.75rem; color:var(--faded); letter-spacing:.14em; margin-right:.9rem;
  font-variant-numeric:tabular-nums;
}
.chapter .notes{color:var(--muted); font-size:.92rem; text-align:right}
@media (max-width:640px){
  .chapter{grid-template-columns:auto 1fr; gap:.9rem}
  .chapter .notes{grid-column:2; text-align:left; font-size:.86rem}
}

/* --- Feature band (SRS) --------------------------------------------------- */
.band{
  background:linear-gradient(180deg,rgba(232,161,60,.055),transparent 70%);
  border-block:1px solid rgba(232,161,60,.14);
}
.band-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:880px){ .band-grid{grid-template-columns:1fr} }
.interval-track{margin-top:2.2rem; display:flex; flex-direction:column; gap:.75rem}
.interval{display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:center}
.interval span{
  font-size:.8rem; color:var(--faded); letter-spacing:.08em; text-align:right;
  font-variant-numeric:tabular-nums;
}
.interval i{
  display:block; height:8px; border-radius:99px; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--amber-dp),var(--amber-lt));
  transition:transform 1.1s cubic-bezier(.22,.9,.3,1);
}
.band.in .interval i{transform:scaleX(1)}
.band.in .interval:nth-child(2) i{transition-delay:.09s}
.band.in .interval:nth-child(3) i{transition-delay:.18s}
.band.in .interval:nth-child(4) i{transition-delay:.27s}
.band.in .interval:nth-child(5) i{transition-delay:.36s}
.band.in .interval:nth-child(6) i{transition-delay:.45s}

/* --- Pillars -------------------------------------------------------------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.6rem 2rem; margin-top:2.6rem}
.pillar h3{color:var(--cream)}
.pillar p{color:var(--muted); font-size:.94rem; margin-top:.45rem}
.pillar .mk{
  display:block; width:1.6rem; height:2px; background:var(--amber);
  margin-bottom:.9rem; border-radius:2px;
}
.fineprint{
  margin-top:2.4rem; padding:1.2rem 1.4rem; border-radius:1rem;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); font-size:.94rem;
}

/* --- Progress review ------------------------------------------------------ */
.review-callout{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem);
  margin-top:2.5rem; padding:clamp(1.4rem,3.5vw,2.2rem); border-radius:1.35rem;
  border:1px solid var(--border-hi);
  background:linear-gradient(135deg,rgba(232,161,60,.1),rgba(255,255,255,.025));
}
.review-callout h3{font-size:clamp(1.2rem,2.2vw,1.55rem)}
.review-callout p{margin-top:.6rem; color:var(--muted); font-size:.95rem}
.review-callout .review-example{
  margin:0; padding-left:1.4rem; align-self:center; border-left:2px solid var(--amber);
  color:var(--cream);
}
@media (max-width:720px){
  .review-callout{grid-template-columns:1fr}
  .review-callout .review-example{padding:.9rem 0 0; border-left:0; border-top:1px solid var(--border)}
}

/* --- Between lessons ------------------------------------------------------ */
.between-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.teacher-note{
  margin-top:1.5rem; padding:1.1rem 1.2rem; border-left:2px solid var(--amber);
  color:var(--cream); background:rgba(232,161,60,.065);
}
.audience-grid{display:grid; gap:1rem}
.audience-card{
  padding:1.35rem; border:1px solid var(--border); border-radius:1.1rem;
  background:var(--surface);
}
.audience-card p{margin-top:.45rem; color:var(--muted); font-size:.95rem}
.audience-grid .btn{justify-self:start; margin-top:.45rem}
@media (max-width:820px){.between-grid{grid-template-columns:1fr}}

/* --- Trust strip ---------------------------------------------------------- */
.trust{padding-top:clamp(3rem,7vw,5rem); padding-bottom:0}
.trust-box{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:clamp(1.5rem,4vw,2.2rem); border:1px solid var(--border-hi);
  border-radius:1.35rem; background:var(--surface);
}
.trust-box h2{font-size:clamp(1.8rem,3.5vw,2.5rem)}
.trust-box p{margin-top:.55rem; color:var(--muted)}
.trust-box .btn{flex:none}
@media (max-width:720px){
  .trust-box{align-items:flex-start; flex-direction:column}
}

/* --- FAQ ------------------------------------------------------------------ */
.faq-grid{display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.faq-list{border-top:1px solid rgba(232,161,60,.2)}
.faq-list details{border-bottom:1px solid rgba(232,161,60,.2)}
.faq-list summary{
  position:relative; padding:1.25rem 2.5rem 1.25rem 0; cursor:pointer;
  list-style:none; color:var(--cream); font-weight:600;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  color:var(--amber); font-size:1.4rem; font-weight:400;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{max-width:62ch; padding:0 2.5rem 1.3rem 0; color:var(--muted)}
@media (max-width:780px){.faq-grid{grid-template-columns:1fr}}

/* --- Closing CTA ---------------------------------------------------------- */
.closing{text-align:center; padding-block:clamp(4rem,10vw,7rem)}
.closing .ctas{justify-content:center}
.closing .lede{margin-inline:auto}

/* --- Footer --------------------------------------------------------------- */
.site-foot{
  border-top:1px solid rgba(232,161,60,.14); padding-block:2.6rem 3.4rem;
  color:var(--faded); font-size:.88rem;
}
.foot-row{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:1.4rem}
.foot-links a{color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--amber)}

/* --- Reveal on scroll ----------------------------------------------------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1; transform:none}
.rv-1{transition-delay:.08s} .rv-2{transition-delay:.16s} .rv-3{transition-delay:.24s}
.rv-4{transition-delay:.32s} .rv-5{transition-delay:.4s}

/* --- Hero entrance (after the curtain) ------------------------------------ */
.hero .rise{opacity:0; transform:translateY(26px); animation:rise .95s 1.25s cubic-bezier(.2,.8,.3,1) forwards}
.hero .rise-2{animation-delay:1.4s}
.hero .rise-3{animation-delay:1.55s}
.hero .rise-4{animation-delay:1.7s}
.hero .rise-5{animation-delay:1.9s}
@keyframes rise{to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .curtain{display:none}
  .rv{opacity:1; transform:none}
  .hero .rise{opacity:1; transform:none}
}

/* ============================================================================
   Legal pages: a printed sheet resting on the stage.
   Long text belongs on paper; the dark ground stays as the room around it.
   ========================================================================== */
.legal{padding-block:clamp(6.5rem,13vh,9rem) var(--step)}
.sheet{
  background:var(--paper); color:var(--paper-ink);
  width:min(760px,100%); margin-inline:auto;
  padding:clamp(2rem,5vw,3.6rem) clamp(1.5rem,5vw,3.4rem) clamp(2.5rem,5vw,3.6rem);
  border-radius:1.25rem;
  box-shadow:0 2.5rem 5rem -1.5rem rgba(0,0,0,.75), inset 0 0 0 1px rgba(62,42,24,.1);
}
.sheet h1{
  font-family:var(--f-display); font-size:clamp(2.3rem,5.5vw,3.2rem);
  line-height:1.05; color:var(--paper-ink); margin:0;
}
.sheet .meta{
  margin-top:.6rem; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:#8A6E4E;
}
.sheet h2{
  font-family:var(--f-body); font-weight:700; font-size:1.05rem; letter-spacing:.005em;
  color:var(--paper-ink); margin:2.6rem 0 .6rem; line-height:1.4;
}
.sheet h2 .n{color:#9A5B14; margin-right:.55em; font-variant-numeric:tabular-nums}
.sheet .ctas{margin:1.7rem 0 1.4rem}
.sheet h3{
  font-family:var(--f-body); font-weight:700; font-size:1rem; letter-spacing:.005em;
  color:var(--paper-ink); margin:1.7rem 0 .4rem; line-height:1.45;
}
.sheet p{margin:0 0 .9rem; max-width:66ch; line-height:1.72}
.sheet strong{font-weight:700}
.sheet a{color:#9A5B14; text-decoration-color:rgba(154,91,20,.4)}
.sheet a:hover{text-decoration-color:#9A5B14}
.sheet hr{border:0; border-top:1px solid rgba(62,42,24,.18); margin:2.4rem 0 0}
.sheet .note{
  margin:1.4rem 0; padding:1rem 1.2rem; border-left:3px solid #C2801F;
  background:rgba(194,128,31,.11); border-radius:0 .6rem .6rem 0;
}
.sheet .note p{margin:0}
/* Dashes rather than dots: the sheet is a printed page, not a slide. */
.sheet ul{margin:0 0 1.1rem; padding:0; max-width:66ch; list-style:none}
.sheet li{position:relative; padding-left:1.35rem; margin-bottom:.4rem; line-height:1.72}
.sheet li::before{
  content:"\2014"; position:absolute; left:0; top:0;
  color:#9A5B14; opacity:.5;
}
.sheet .sign{
  margin-top:2rem; font-size:.9rem; color:#6E5638; max-width:66ch; line-height:1.65;
}
.back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.6rem;
  color:var(--muted); text-decoration:none; font-size:.88rem;
}
.back:hover{color:var(--amber)}


/* ============================================================================
   «CADERNO» — o papel, os desenhos e as secções que os usam.
   Promovido das propostas em 2026-08-29. O palco escuro continua a ser a casa
   da app; o papel é onde se explica o método. Nada aqui vem de fora: a fibra
   da folha é um filtro SVG embutido e os desenhos são SVG na marcação.
   ========================================================================== */
/* ════════════════════════════════════════════════════════════════════════════
   O MATERIAL — papel a sério.
   Partilhado pelas três propostas. Nada aqui vem de fora: a fibra é um filtro
   SVG embutido, a pauta são gradientes. Continua a funcionar sem internet.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --pp:#EFE3CB;            /* o tom base da folha */
  --pp-ink:#3A2A19;        /* tinta, nunca preto */
  --pp-ink-soft:#6B5236;
  --pp-rule:rgba(58,42,25,.16);
  --pp-red:#A8503C;        /* a margem do caderno */
  --pp-accent:#9A5B14;
}

/* A folha: tom base + manchas quentes + fibra. As manchas evitam o achatado
   de uma cor sólida; a fibra dá-lhe superfície. */
.pp{
  position:relative; isolation:isolate;
  background-color:var(--pp);
  background-image:
    radial-gradient(70% 50% at 12% 8%,  rgba(196,158,104,.10), transparent 62%),
    radial-gradient(60% 45% at 88% 30%, rgba(178,140,88,.08),  transparent 66%),
    radial-gradient(80% 60% at 50% 105%,rgba(150,112,66,.09),  transparent 70%);
  color:var(--pp-ink);
  /* A folha assenta no palco: luz na aresta de cima, sombra por baixo dela. */
  box-shadow:
    inset 0 1px 0 rgba(255,250,240,.6),
    inset 0 -1px 0 rgba(58,42,25,.18),
    0 -18px 30px -22px rgba(0,0,0,.85),
    0 18px 30px -22px rgba(0,0,0,.85);
}
/* Fibra: ruído fractal, multiplicado sobre o tom. É o que separa «bege» de
   «papel» — sem isto a folha lê-se como um rectângulo pintado. */
.pp::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.58; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23f)' opacity='0.55'/></svg>");
  background-size:220px 220px;
}

/* A pauta saiu. Ficou provado que competia com o texto: as linhas atravessavam
   o corpo da letra e a leitura cansava. Papel é papel — a fibra chega. */

/* Tinta impressa: absorve um fio, não assenta em cima. */
.pp h1,.pp h2,.pp h3{color:var(--pp-ink); text-shadow:0 .5px 0 rgba(255,252,245,.35)}
.pp p{color:var(--pp-ink-soft)}
.pp strong{color:var(--pp-ink)}
.pp a{color:var(--pp-accent); text-decoration-color:rgba(154,91,20,.45)}
.pp .eyebrow{color:var(--pp-accent)}

/* As cordas da margem passam a tinta sobre o papel, em vez de desaparecerem. */
.spine .strings i,.spine .marks a span,.spine .marks a::after{transition:background .5s ease,color .5s ease}
.spine.on-paper .strings i{
  background:linear-gradient(180deg,transparent,rgba(58,42,25,.26) 12%,rgba(58,42,25,.26) 88%,transparent);
}
.spine.on-paper .marks a span{color:var(--pp-ink-soft)}
.spine.on-paper .marks a::after{background:rgba(58,42,25,.28)}
.spine.on-paper .marks a.on::after{background:#B87A22; box-shadow:0 0 0 1px rgba(184,122,34,.4)}

/* Peças comuns às três: a sequência escura, os apoios sobre o fio, as linhas
   dos modos e a confiança. É o que substitui as caixas repetidas do palco. */



.trust-line{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem; padding-block:2.2rem;
  border-top:1px solid rgba(232,161,60,.2); border-bottom:1px solid rgba(232,161,60,.2)}
.trust-line h2{margin:0; font-size:clamp(1.6rem,3vw,2.1rem)}
.trust-line p{margin:.4rem 0 0; color:var(--muted); font-size:.95rem; flex-basis:100%}
.trust-line .btn{margin-left:auto}

/* O índice de capítulos, impresso. */
.pp--index .section-lede{color:var(--pp-ink-soft)}
.pp--index .chapter{border-top-color:var(--pp-rule)}
.pp--index .chapter:last-child{border-bottom-color:var(--pp-rule)}
.pp--index .chapter .num{color:var(--pp-accent); opacity:.8}
.pp--index .chapter .name{color:var(--pp-ink)}
.pp--index .chapter .notes{color:var(--pp-ink-soft)}
.pp--index .chapter .node{background:rgba(58,42,25,.22)}
.pp--index .chapter.lit .node{background:#B87A22; box-shadow:0 0 0 3px rgba(184,122,34,.15)}
.pp--index .review-callout{background:rgba(58,42,25,.05); border-color:rgba(58,42,25,.16)}
.pp--index .review-callout h3{color:var(--pp-ink)}
.pp--index .review-callout p{color:var(--pp-ink-soft)}
.pp--index .review-example{color:var(--pp-ink-soft); border-left-color:#B87A22}

@media (max-width:760px){ .trust-line .btn{margin-left:0} }

/* --- «Entre aulas»: o recado do professor -------------------------------- */
/* Era o último bloco da página com molduras — dois cartões e um aviso com
   fundo próprio, três recipientes num espaço pequeno. A frase que diz o que a
   app NÃO faz é a que mais pesa aqui, e é a que ganha papel: a única folha no
   meio do escuro. Os dois públicos passam a linhas, como o resto da página. */
.ea1{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.who-rows{margin-top:2.2rem}
.who-row{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:1.2rem; align-items:center;
  padding:1.15rem 0; border-top:1px solid rgba(232,161,60,.14);
}
.who-row:last-of-type{border-bottom:1px solid rgba(232,161,60,.14)}
.who-art{color:var(--amber); opacity:.9}
.who-row h3{margin:0; font-size:1.04rem; font-weight:700}
.who-row p{margin:.3rem 0 0; color:var(--muted); font-size:.95rem}
.recado{
  padding:clamp(1.7rem,3vw,2.4rem) clamp(1.6rem,3vw,2.3rem);
  border-radius:2px; transform:rotate(-.8deg);
  box-shadow:
    inset 0 1px 0 rgba(255,250,240,.5),
    0 2px 2px rgba(0,0,0,.3),
    0 22px 44px -14px rgba(0,0,0,.66);
}
.recado p{margin:0; font-size:1.06rem; line-height:1.62; color:var(--pp-ink)}
/* Uma clave de fá em vez de um traço: é a clave que o violoncelo lê, é o
   mesmo ficheiro Bravura que a pauta do herói usa, e a tinta dela (#3E2A18)
   é já a tinta do papel. */
.recado .mark{
  display:block; width:auto; height:46px; margin-bottom:1.15rem; opacity:.9;
}
.ea1 .btn{margin-top:1.8rem}
@media (max-width:860px){
  .ea1{grid-template-columns:1fr; gap:2.4rem}
  .recado{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   OS DESENHOS
   Feitos no vocabulário da própria app — pauta, braço, dedos — e não com
   ícones genéricos. São SVG embutido e herdam a cor do texto (currentColor),
   por isso funcionam em tinta sobre o papel e em creme sobre o palco, sem
   duplicar ficheiros.
   ══════════════════════════════════════════════════════════════════════════ */
.ill{display:block; width:100%; height:auto; color:inherit}

/* --- «O que ganhas»: o desenho ocupa a margem, no lugar do número --------- */
.gain-list{list-style:none; margin:2.6rem 0 0; padding:0; max-width:64ch}
.gain-list li{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:clamp(1.3rem,3vw,2.6rem);
  align-items:center; padding:1.65rem 0; border-top:1px solid var(--rule-c,rgba(232,161,60,.14));
}
.gain-list li:last-child{border-bottom:1px solid var(--rule-c,rgba(232,161,60,.14))}
.gain-art{opacity:.9}
.gain-list h3{margin:0; font-size:1.1rem; font-weight:700}
.gain-list p{margin:.35rem 0 0; font-size:.97rem}
.pp .gain-list{--rule-c:var(--pp-rule)}
.pp .gain-art{color:var(--pp-accent)}
.gain-art{color:var(--amber)}

/* --- «Vê a nota…»: um diagrama do gesto, em vez de uma lista -------------- */
.flow{
  margin-top:2.8rem; display:grid; gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:1fr auto 1fr auto 1fr; align-items:start;
}
.flow-step{text-align:center}
.flow-art{
  color:var(--amber); margin-inline:auto; max-width:190px;
  padding:.6rem 0 1.1rem;
}
.pp .flow-art{color:var(--pp-accent)}
.flow-step h3{margin:0; font-size:1.02rem; font-weight:700}
.flow-step p{margin:.35rem auto 0; font-size:.93rem; max-width:30ch}
.flow-link{
  align-self:center; width:clamp(18px,4vw,44px); height:14px;
  color:var(--amber); opacity:.5; margin-top:2.2rem;
}
.pp .flow-link{color:var(--pp-accent)}
/* Em coluna estreita — telemóvel, ou a página direita da dupla — o gesto
   passa a vertical e as setas rodam. */
@media (max-width:860px){
  .flow{grid-template-columns:1fr; gap:.4rem}
  .flow-link{transform:rotate(90deg); margin:.2rem auto; width:34px}
  .flow-step{padding-block:.8rem}
}

/* --- Modos: três desenhos grandes, sem moldura ---------------------------- */
.modes-art{
  margin-top:2.8rem; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3.4rem);
}
.mode{text-align:left}
.mode-art{color:var(--amber); max-width:150px; margin-bottom:1.1rem; opacity:.95}
.mode h3{margin:0; font-size:1.12rem; font-weight:700}
.mode .mode-names{
  margin:.35rem 0 .5rem; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--amber); opacity:.85;
}
.mode p{margin:0; color:var(--muted); font-size:.95rem}
@media (max-width:760px){
  .modes-art{grid-template-columns:1fr; gap:2.2rem}
  .gain-list li{grid-template-columns:78px minmax(0,1fr); gap:1.1rem}
}

/* ════════════════════════════════════════════════════════════════════════════
   P1 — «Caderno»
   Folha a toda a largura, com a margem vermelha de um caderno de música. Sem
   pauta: a fibra chega e o texto lê-se sem concorrência. «O que ganhas» fica
   escrito na folha, com o desenho na margem no lugar do número. O «como
   funciona» volta ao palco escuro, como diagrama do gesto.
   ══════════════════════════════════════════════════════════════════════════ */
.pp--notebook{padding-block:clamp(4rem,9vw,6.5rem)}
.nb{position:relative; padding-left:clamp(1.6rem,5vw,4.5rem)}
.nb::before{
  content:""; position:absolute; left:0; top:-1rem; bottom:-1rem; width:1.5px;
  background:linear-gradient(180deg,transparent,rgba(168,80,60,.5) 8%,rgba(168,80,60,.5) 92%,transparent);
}
.nb h2{font-size:clamp(2rem,4vw,3rem); margin:0; line-height:1.08}
.nb .eyebrow{margin-bottom:1rem}