:root{
    /* ── color tokens ─────────────────────────────────────────────────────
       Foundation (raw hues) + semantic roles. EVERY page color lives here;
       palettes (editor) override foundation values, roles stay stable. */
    --ground:#0F0D08; --ground2:#161208; --ink:#F4E9D4; --faint:#6B6350;
    --amber:#FFC24A; --amber-deep:#8A5A12; --mark:#F7E7C8;
    --paper:#F3EEE3; --card:#FBF8F1; --paper-ink:#1C1810;
    /* body ink = computed contrast step between faint and full ink (editor --bc %):
       ceiling is the brand cream/ink, never pure white */
    --bc:62;
    --muted:color-mix(in srgb,var(--ink) calc(var(--bc)*1%),var(--faint));
    --paper-muted:color-mix(in srgb,var(--paper-ink) calc(var(--bc)*1%),#B3A88F);
    --line-dark:#2A2517; --line-light:#D8D0BD;
    --surface-2:#1C1810;               /* raised dark surface: inbox, inputs escuros */
    --surface-3:#1F1A0E;               /* commit box */
    --card-dark:rgba(28,24,16,.88);    /* team cards */
    --tint:rgba(22,18,8,.45);          /* .dark.tint scene wash */
    --avatar:#2A2415;                  /* icon avatars */
    --footer:#0A0805;                  /* footer ground */
    --cta-ink:#1A1305;                 /* text on amber CTAs/badges */
    --ok-bg:#22301C; --ok-ink:#9BC98F; /* success chips / form ok */
    --err-bg:#3A211B; --err-ink:#E8A899; /* form error banner */
    --wait-bg:#3A2E12;                 /* waiting chip (ink = --amber) */
    --build-bg:#EFE3C8;                /* "em construção" chip (ink = --amber-deep) */
    --input-bg:#FFFFFF; --ph:#B3A88F;  /* form fields + placeholder */
    --paper-grid:color-mix(in srgb,var(--amber-deep) 5%,transparent); /* paper texture hatch */
    --r-ctrl:10px;                     /* buttons + input fields corner radius */
    --hatch:
      repeating-linear-gradient(45deg,var(--paper-grid) 0px,var(--paper-grid) 1px,transparent 1px,transparent 11px,var(--paper-grid) 11px,var(--paper-grid) 12px,transparent 12px,transparent 32px),
      repeating-linear-gradient(90deg,var(--paper-grid) 0px,var(--paper-grid) 1px,transparent 1px,transparent 11px,var(--paper-grid) 11px,var(--paper-grid) 12px,transparent 12px,transparent 32px),
      repeating-linear-gradient(0deg,var(--paper-grid) 0px,var(--paper-grid) 1px,transparent 1px,transparent 11px,var(--paper-grid) 11px,var(--paper-grid) 12px,transparent 12px,transparent 32px),
      repeating-linear-gradient(135deg,var(--paper-grid) 0px,var(--paper-grid) 1px,transparent 1px,transparent 11px,var(--paper-grid) 11px,var(--paper-grid) 12px,transparent 12px,transparent 32px);
    --line-dark-soft:rgba(42,37,23,.6);/* inbox row divider */
    --mark-mix:#9fe7ac;                /* 3D sticker gradient second tone */
    --head:"Sora",system-ui,sans-serif; --body:"Sen","Avenir Next",system-ui,sans-serif;
    --hm:1; /* heading scale multiplier (editor) */
    --wm:1; /* hero wordmark scale multiplier (editor) */
    --mark-color:#FFB8C9; /* highlight color (editor swatches) — default: rosa */
    /* modular type scale — every page text maps to one of these 5 steps
       (+ per-element display sizes for the jewel moments: h1, 5min, 20).
       Rule: a scene exposes at most title/support/body (+meta). */
    --t-meta:.75rem;                       /* eyebrows, chips, microcopy   ~13.5px */
    --t-body:.9rem;                        /* ALL running text             ~16.2px */
    --t-support:1.2rem;                    /* list scenes, card/risk titles ~21.6px */
    --t-quote:clamp(1.35rem,2.1vw,1.7rem); /* pull-quotes/closings — below title */
    --t-title:clamp(1.5rem,3.4vw,2.375rem);/* section titles               ~42.8px */
    --hwt:500; --hlh:1; --htrk:0em; /* heading weight / line-height × / tracking (editor) */
    --bwt:400; --blh:1.2; --btrk:0em; /* body weight / line-height × / tracking (editor) */
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{font-size:18px}
  body{background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:var(--bwt);letter-spacing:var(--btrk);-webkit-font-smoothing:antialiased}

  /* ambient particle ground — one fixed canvas behind everything */
  #field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
  main{position:relative;z-index:1}

  /* SCENE RULE: every page section is a full-viewport scene on every device
     (scoped to main — #editor is also a <section> and must NOT be a flex scene) */
  main section{position:relative;padding:96px 24px;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .wrap{max-width:1120px;margin:0 auto;width:100%}
  .dark{background:transparent;color:var(--ink)}
  .dark.tint{background:var(--tint)}
  /* glassmorphism (editor toggle): frosted content panel on dark scenes —
     the particle field becomes bokeh behind the glass instead of noise under text */
  body.glass main section.dark .wrap{
    background:color-mix(in srgb,var(--ground) 52%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
    backdrop-filter:blur(14px) saturate(1.15);
    border:1px solid color-mix(in srgb,var(--amber) 16%,transparent);
    border-radius:24px;
    padding:48px;
  }
  body.glass main section.dark.tint{background:transparent}
  @media (max-width:767px){body.glass main section.dark .wrap{padding:25px}}
  .paper{background-color:var(--paper);color:var(--paper-ink)}
  /* paper texture (editor toggle): 4-way hatch in the palette's deep accent */
  body.papertex .paper{background-image:var(--hatch)}
  /* prose paper scenes: center fade — solid paper under the text column, the
     hatch fills the surrounding empty space (features scene keeps full hatch:
     its texture lives between the opaque cards) */
  body.papertex #porque,body.papertex #oferta{
    background-image:
      radial-gradient(ellipse 78% 72% at 50% 50%,var(--paper) 0%,var(--paper) 45%,transparent 80%),
      var(--hatch);
  }

  .sec-mark{position:absolute;top:20px;left:24px;font-weight:900;font-size:1.3125rem;letter-spacing:-.035em;z-index:2}
  .dark .sec-mark{color:var(--mark)}
  .paper .sec-mark{color:var(--paper-ink)}

  .eyebrow{font-size:var(--t-meta);font-weight:700;letter-spacing:.19em;margin-bottom:14px}
  .dark .eyebrow{color:var(--amber)}
  .paper .eyebrow{color:var(--amber-deep)}
  h2{font-family:var(--head);font-weight:var(--hwt);letter-spacing:var(--htrk);line-height:calc(1.28*var(--hlh));font-size:calc(var(--t-title)*var(--hm))}
  .lead{line-height:calc(1.7*var(--blh));font-size:var(--t-body)}
  .dark .lead{color:var(--muted)}
  .paper .lead{color:var(--paper-muted)}

  /* skewed highlight — technique from pepelsbey.dev/articles/skewed-highlight/
     (three layered gradients build the angled edges; box-decoration-break:clone
     gives every wrapped line its own cut) */
  mark{
    --mark-ink:var(--mark-color);
    --mark-skew:.25em;--mark-height:1.1em;--mark-overlap:.3em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    margin-inline:calc(var(--mark-overlap)*-1);
    padding-inline:var(--mark-overlap);
    background-color:transparent;
    background-image:
      linear-gradient(to bottom right,transparent 50%,var(--mark-ink) 50%),
      linear-gradient(var(--mark-ink),var(--mark-ink)),
      linear-gradient(to top left,transparent 50%,var(--mark-ink) 50%);
    background-size:
      var(--mark-skew) var(--mark-height),
      calc(100% - var(--mark-skew)*2 + 1px) var(--mark-height),
      var(--mark-skew) var(--mark-height);
    background-position:left center,center,right center;
    background-repeat:no-repeat;
    color:var(--paper-ink);
    font-weight:500;
  }
  /* dark sections: the highlight ink softens to ~45% (glow, not shout) and the
     marked text stays light — the translucent band reads as a tint behind it */
  .dark mark{
    color:var(--ink);
    --mark-ink:color-mix(in srgb,var(--mark-color) 45%,transparent);
  }
  /* LN-02 exception (author's call): full-strength highlight, no dimming */
  #diferente mark{--mark-ink:var(--mark-color)}
  /* kindle style (editor toggle): soft rounded full band instead of skewed cuts
     (gradient image, not background-color, so the sweep-in can animate its size) */
  body.mark-kindle mark{
    background-image:linear-gradient(var(--mark-ink),var(--mark-ink));
    background-size:100% 100%;
    background-position:left center;
    background-repeat:no-repeat;
    border-radius:.3em;
    padding-block:.06em;
  }
  /* sublinhado: thick marker underline band — bottom padding drops the band
     below the descenders (ç, g, q keep their legs off the color) */
  body.mark-under mark{
    background-image:linear-gradient(var(--mark-ink),var(--mark-ink));
    background-size:100% .28em;
    background-position:left bottom;
    background-repeat:no-repeat;
    padding-bottom:.18em;
  }
  /* meia altura: band behind the lower half of the letters */
  body.mark-half mark{
    background-image:linear-gradient(var(--mark-ink),var(--mark-ink));
    background-size:100% .62em;
    background-position:left bottom;
    background-repeat:no-repeat;
  }
  /* ondulado: wavy colored underline, no band */
  body.mark-wavy mark{
    background-image:none;
    text-decoration:underline wavy var(--mark-ink);
    text-decoration-thickness:.1em;
    text-underline-offset:.18em;
  }
  /* 3D: perspective "sticker" behind the phrase, wiggles on hover
     (technique from the Pinia pen — ::before + perspective transform;
     inline-block, so long phrases that wrap become one block sticker) */
  body.mark-tilt mark{
    background-image:none;
    display:inline-block;
    position:relative;
    isolation:isolate;
    margin-inline:0;padding-inline:.12em;
  }
  body.mark-tilt mark::before{
    content:'';position:absolute;inset:0;z-index:-1;
    transform:perspective(300px) skewX(6deg) rotateX(5deg) rotateY(8deg) scale(1.06,1.1);
    background-image:linear-gradient(78deg,var(--mark-ink) 30%,color-mix(in srgb,var(--mark-ink) 45%,var(--mark-mix)));
    border-radius:.2em;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;
  }
  body.mark-tilt mark:hover::before{
    transform:perspective(300px) skewX(-3deg) rotateX(-6deg) rotateY(-3deg) scale(1.09,1.13);
  }
  @media (prefers-reduced-motion: reduce){
    body.mark-tilt mark::before{transition:none}
    mark{transition:none}
  }

  /* hero exception (2026-08-27): the headline highlight is always meia-altura,
     whatever mark style the rest of the page uses (id specificity wins) */
  #hero mark{
    background-image:linear-gradient(var(--mark-ink),var(--mark-ink));
    background-size:100% .62em;
    background-position:left bottom;
    background-repeat:no-repeat;
    padding-bottom:0;
    text-decoration:none;
  }
  #hero mark::before{content:none}
  body.anim #hero:not(.marks-in) mark{background-size:0% .62em}

  /* ── progressive highlight reveal ─────────────────────────────────────────
     body.anim = reveal system active. While a section hasn't earned .marks-in
     (added ~stagger after the scene builds), its marks sit in a hidden state;
     the transition then plays them in: sweep (kindle/under/half), inflate
     (skew), color-in (wavy), sticker-slap (3D). Replays on scene re-entry. */
  mark{transition:background-size .55s cubic-bezier(.25,.8,.3,1),text-decoration-color .5s}
  body.anim section:not(.marks-in) mark{
    background-size:var(--mark-skew) 0em,calc(100% - var(--mark-skew)*2 + 1px) 0em,var(--mark-skew) 0em;
    text-decoration-color:transparent;
  }
  body.anim.mark-kindle section:not(.marks-in) mark{background-size:0% 100%}
  body.anim.mark-under section:not(.marks-in) mark{background-size:0% .28em}
  body.anim.mark-half section:not(.marks-in) mark{background-size:0% .62em}
  body.anim.mark-tilt section:not(.marks-in) mark::before{
    opacity:0;
    transform:perspective(300px) skewX(6deg) rotateX(5deg) rotateY(8deg) scale(.5,.6);
  }

  /* prose niceties: better rag on paragraphs, balanced headings (progressive) */
  p{text-wrap:pretty}
  h1,h2,.opening,.pullquote blockquote{text-wrap:balance}
  /* justified mode (editor toggle) — justify ONLY with pt-BR auto-hyphenation,
     and only on left-aligned prose blocks; centered text and micro-copy stay put */
  body.justify .why-cols p,body.justify .how-left p,body.justify .how-close,
  body.justify .offer-close,body.justify .risk p,body.justify .slots-left p,
  body.justify .lead,body.justify .commit p,body.justify .tcard p{
    text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
  /* mobile (2026-08-27): narrow columns + justify = rivers — left-align there,
     keep the pt-BR hyphenation for a tighter ragged edge; and lower the TITLE
     clamp floors ~15% (body size untouched — 16.2px is already the mobile floor) */
  @media (max-width:767px){
    body.justify .why-cols p,body.justify .how-left p,body.justify .how-close,
    body.justify .offer-close,body.justify .risk p,body.justify .slots-left p,
    body.justify .lead,body.justify .commit p,body.justify .tcard p{text-align:left}
    :root{--t-title:clamp(1.275rem,3.4vw,2.375rem);--t-quote:clamp(1.15rem,2.1vw,1.7rem)}
    main h1{font-size:calc(clamp(1.8rem,4.6vw,3.625rem)*var(--hm))} /* main-scoped: the bare h1 rule comes later in the sheet */
  }
  /* section-header centering (editor toggle): eyebrow + title + intro lead of the
     content scenes; LN-01 (opening+cenas) and LN-07 (big20) keep their own art */
  body.centerheads :is(#diferente,#pratica,#time,#oferta) .wrap>.eyebrow,
  body.centerheads :is(#diferente,#pratica,#time,#oferta) .wrap>h2,
  body.centerheads :is(#diferente,#pratica,#time,#oferta) .wrap>.lead{
    text-align:center;margin-left:auto;margin-right:auto;hyphens:manual}

  /* ── hero ──────────────────────────────────────────────────────────────── */
  #hero{padding:0 24px}
  .pill{display:inline-block;background:var(--amber);color:var(--cta-ink);font-weight:700;font-size:.8125rem;
        padding:10px 20px;border-radius:var(--r-ctrl);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;font-family:var(--body)}
  .pill:hover{filter:brightness(1.06)}
  .hero-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:24px 0 48px}
  .hero-glass{display:flex;flex-direction:column;align-items:center;gap:26px}
  body.glass .hero-glass{
    background:color-mix(in srgb,var(--ground) 52%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
    backdrop-filter:blur(14px) saturate(1.15);
    border:1px solid color-mix(in srgb,var(--amber) 16%,transparent);
    border-radius:24px;
    padding:44px clamp(24px,6vw,88px);
  }
  .wordmark{font-weight:900;letter-spacing:-.035em;font-size:calc(clamp(1.875rem,3.4vw,2.75rem)*var(--hm)*var(--wm));color:var(--mark);line-height:.95;
    text-shadow:-0.0075em .0075em 0 #fffdf6,.005em .005em 0 #bc8945,.010em .010em 0 #a2763b,.015em .015em 0 #886432,
      .020em .020em 0 #6e5128,.025em .025em 0 #533e1f,.030em .030em 0 #392c15,.035em .035em 0 #231c0d,0 0 .55em rgba(213,154,78,.26)}
  /* shimmer (2026-08-27, v2 — shimmer-text technique): an ::after clone (via
     data-text) fully repaints the letter FACE with a travelling dim→bright→dim
     gradient clipped to the glyphs; the extruded shadows underneath stay put.
     v1 (transparent gloss band) was invisible: light band over an already
     near-white face has no contrast — the face itself must carry the wave. */
  .wordmark{position:relative}
  .wordmark::after{
    content:attr(data-text);
    position:absolute;inset:0;
    text-shadow:none;
    background-image:linear-gradient(100deg,
      color-mix(in srgb,var(--mark) 72%,#8a6a35) 38%,
      #FFFFF6 50%,
      color-mix(in srgb,var(--mark) 72%,#8a6a35) 62%);
    background-size:220% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    pointer-events:none;
    animation:wmshine 3.2s linear infinite;
  }
  @keyframes wmshine{0%{background-position:120% 0}100%{background-position:-120% 0}}
  @media (prefers-reduced-motion: reduce){.wordmark::after{display:none}}
  .wordmark-tick{width:34px;height:2px;background:var(--amber);margin:14px auto 0}
  h1{font-family:var(--head);font-weight:var(--hwt);letter-spacing:var(--htrk);line-height:calc(1.15*var(--hlh));font-size:calc(clamp(2.125rem,4.6vw,3.625rem)*var(--hm));max-width:20ch}
  /* .h1a/.h1b stay inline: the typewriter only animates per-char opacity, and
     inline-block halves would defeat the h1's text-wrap:balance (block reads wider) */
  .hero-sub{max-width:74ch;color:var(--muted);line-height:calc(1.68*var(--blh));font-size:var(--t-body)}
  .express{display:flex;gap:10px;width:min(560px,100%)}
  .express input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line-dark);border-radius:var(--r-ctrl);
    padding:14px 20px;color:var(--ink);font:inherit;font-size:.875rem}
  .express input::placeholder{color:var(--faint)}
  .express input:focus{outline:1.5px solid var(--amber-deep)}
  .micro{font-size:var(--t-meta);color:var(--faint)}
  .scroll-hint{color:var(--amber);font-size:1.125rem;animation:bob 2.2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

  /* ── why ───────────────────────────────────────────────────────────────── */
  #porque .opening{font-family:var(--head);font-weight:var(--hwt);letter-spacing:var(--htrk);font-size:calc(var(--t-title)*var(--hm));line-height:calc(1.35*var(--hlh))}
  .scenes{margin:30px 0;display:flex;flex-direction:column;gap:14px}
  .scene{display:flex;align-items:center;gap:12px;font-family:var(--head);font-style:italic;
         font-size:var(--t-support);color:var(--paper-muted)}
  .scene::before{content:"";width:22px;height:1px;background:var(--amber-deep);flex:0 0 auto}
  .scene:nth-child(2){padding-left:clamp(16px,4vw,48px)}
  .scene:nth-child(3){padding-left:clamp(32px,8vw,96px)}
  .why-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:30px}
  .why-cols p{line-height:calc(1.7*var(--blh));font-size:var(--t-body);color:var(--paper-muted)}
  .pullquote{margin-top:56px;text-align:center}
  .pullquote blockquote{font-family:var(--head);font-weight:var(--hwt);letter-spacing:var(--htrk);font-size:calc(var(--t-quote)*var(--hm));line-height:calc(1.35*var(--hlh))}
  .pullquote p{margin-top:12px;font-size:var(--t-body);color:var(--paper-muted)}

  /* ── how ───────────────────────────────────────────────────────────────── */
  .how-split{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center;margin-top:40px}
  .fivemin{font-family:var(--head)}
  .fivemin .big{font-size:calc(clamp(2.875rem,6vw,4.5rem)*var(--hm));font-weight:600;color:var(--amber);line-height:1}
  .fivemin .sub{font-size:calc(clamp(1.25rem,2.4vw,2.125rem)*var(--hm));font-style:italic;margin-top:4px}
  .how-left p{margin-top:18px;line-height:calc(1.7*var(--blh));font-size:var(--t-body);color:var(--muted)}
  .inbox{background:var(--surface-2);border:1px solid var(--line-dark);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
  .inbox-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-dark)}
  .inbox-head b{font-size:.9375rem}
  .bellwrap{display:flex;align-items:center;gap:7px;color:var(--muted)}
  .badge{background:var(--amber);color:var(--cta-ink);font-size:.6875rem;font-weight:700;border-radius:999px;padding:2px 7px}
  .row{display:flex;gap:12px;align-items:flex-start;padding:14px 20px}
  .row+.row{border-top:1px solid var(--line-dark-soft)}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--line-dark);margin-top:6px;flex:0 0 auto}
  .dot.on{background:var(--amber)}
  .row .col{flex:1;min-width:0}
  .row .top{display:flex;justify-content:space-between;gap:10px}
  .row .nm{font-size:.84375rem;font-weight:600}
  .row .tm{font-size:.75rem;color:var(--faint)}
  .row .pv{font-size:.78125rem;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chip{display:inline-block;margin-top:7px;font-size:.65625rem;font-weight:600;border-radius:6px;padding:3px 8px}
  .chip.auto{background:var(--ok-bg);color:var(--ok-ink)}
  .chip.wait{background:var(--wait-bg);color:var(--amber)}
  .how-close{margin-top:40px;max-width:70ch;line-height:calc(1.7*var(--blh));font-size:var(--t-body);color:var(--muted)}

  /* ── what ──────────────────────────────────────────────────────────────── */
  /* card-grid scenes widen beyond the default wrap so the 2×2 grids fit one viewport */
  #pratica .wrap,#time .wrap{max-width:1560px}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
  .card{background:var(--card);border:1px solid var(--line-light);border-radius:16px;padding:28px}
  .card h3{font-family:var(--head);font-weight:600;font-size:calc(var(--t-support)*var(--hm));margin-bottom:18px}
  .feat{display:flex;gap:12px;align-items:flex-start}
  .feat+.feat{margin-top:15px}
  .feat svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--amber-deep)}
  .feat b{display:block;font-size:var(--t-body)}
  .feat span{display:block;font-size:var(--t-body);line-height:calc(1.55*var(--blh));color:var(--paper-muted);margin-top:2px}
  .card hr{border:0;border-top:1px solid var(--line-light);margin:18px 0}
  .roadlead{font-size:var(--t-body);font-weight:600;line-height:1.5}
  .road{display:flex;gap:12px;align-items:center;margin-top:12px}
  .road svg{width:16px;height:16px;flex:0 0 auto;color:var(--amber-deep)}
  .road span{font-size:var(--t-body);line-height:calc(1.55*var(--blh));color:var(--paper-muted)}
  .build-chip{display:inline-block;margin-top:16px;background:var(--build-bg);color:var(--amber-deep);
    font-size:.6875rem;font-weight:600;border-radius:999px;padding:5px 12px}

  /* ── team ──────────────────────────────────────────────────────────────── */
  .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px}
  .tcard{background:var(--card-dark);border:1px solid var(--line-dark);border-radius:16px;padding:26px}
  .avatar{width:52px;height:52px;border-radius:50%;background:var(--avatar);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .avatar svg{width:24px;height:24px;color:var(--amber)}
  .tcard h3{font-family:var(--head);font-weight:600;font-size:calc(var(--t-support)*var(--hm))}
  .thead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
  .thead .avatar{margin-bottom:0;flex-shrink:0}
  .tcard p{margin-top:10px;font-size:var(--t-body);line-height:calc(1.65*var(--blh));color:var(--muted)}
  .team-close{margin:48px auto 0;max-width:56ch;text-align:center;font-family:var(--head);font-style:italic;letter-spacing:var(--htrk);
    font-size:calc(var(--t-quote)*var(--hm));line-height:calc(1.5*var(--hlh))}

  /* ── vision ────────────────────────────────────────────────────────────── */
  #inicio{text-align:center}
  #inicio .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
  .sun{width:clamp(120px,14vw,180px);aspect-ratio:2/1;border-radius:999px 999px 0 0;
       background:linear-gradient(to top,var(--amber-deep),var(--amber));box-shadow:0 0 70px rgba(255,194,74,.22)}
  .horizon{width:min(420px,80%);height:1px;background:var(--amber-deep)}
  #inicio p{max-width:66ch;line-height:calc(1.75*var(--blh));color:var(--muted);font-size:var(--t-body)}
  #inicio blockquote{font-family:var(--head);font-style:italic;font-weight:var(--hwt);letter-spacing:var(--htrk);font-size:calc(var(--t-quote)*var(--hm));line-height:calc(1.4*var(--hlh));max-width:34ch}

  /* ── offer ─────────────────────────────────────────────────────────────── */
  .risks{margin-top:28px}
  .risk{display:flex;gap:18px;padding:22px 0}
  .risk+.risk{border-top:1px solid var(--line-light)}
  .risk svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--amber-deep)}
  .risk h3{font-family:var(--head);font-weight:600;font-size:calc(var(--t-support)*var(--hm));text-decoration:line-through;text-decoration-thickness:1.5px}
  .risk p{margin-top:6px;font-size:var(--t-body);line-height:calc(1.65*var(--blh));color:var(--paper-muted)}
  .offer-close{margin-top:32px;max-width:72ch;line-height:calc(1.7*var(--blh));font-size:var(--t-body)}

  /* ── vagas ─────────────────────────────────────────────────────────────── */
  .slots-split{display:grid;grid-template-columns:1fr 440px;gap:64px;margin-top:8px}
  .big20{display:flex;align-items:flex-end;gap:16px;margin:12px 0 20px}
  .big20 .n{font-family:var(--head);font-weight:600;font-size:calc(clamp(5.25rem,9vw,7.5rem)*var(--hm));line-height:1;color:var(--amber)}
  .big20 .l{font-family:var(--head);font-weight:500;font-size:calc(clamp(1.3125rem,2.4vw,1.875rem)*var(--hm));line-height:1.2}
  .slots-left p{margin-top:14px;line-height:calc(1.7*var(--blh));font-size:var(--t-body);color:var(--muted)}
  .commit{display:flex;gap:14px;margin-top:24px;background:var(--surface-3);border:1px solid var(--amber-deep);border-radius:14px;padding:20px}
  .commit svg{width:22px;height:22px;flex:0 0 auto;color:var(--amber)}
  .commit p{margin:0;font-size:var(--t-body);line-height:calc(1.65*var(--blh));color:var(--ink)}
  .form-card{background:var(--paper);color:var(--paper-ink);border-radius:20px;padding:32px;align-self:start}
  .form-card h3{font-family:var(--head);font-weight:600;font-size:calc(1.5rem*var(--hm))}
  .form-card .sub{font-size:.8125rem;color:var(--paper-muted);margin-top:4px}
  .field{margin-top:14px}
  .field label{display:block;font-size:.78125rem;font-weight:600;margin-bottom:6px}
  .field input{width:100%;background:var(--input-bg);border:1px solid var(--line-light);border-radius:var(--r-ctrl);padding:12px 16px;font:inherit;font-size:.84375rem;color:var(--paper-ink)}
  .field input::placeholder{color:var(--ph)}
  .field input:focus{outline:1.5px solid var(--amber-deep)}
  .submit{margin-top:18px;width:100%;background:var(--amber);color:var(--cta-ink);border:0;border-radius:var(--r-ctrl);
    padding:15px;font:inherit;font-size:.90625rem;font-weight:700;cursor:pointer}
  .submit:hover{filter:brightness(1.06)}
  .submit:disabled{opacity:.6;cursor:default;filter:none}
  .form-micro{margin-top:12px;text-align:center;font-size:.71875rem;line-height:1.5;color:var(--paper-muted)}
  .form-ok{display:none;margin-top:14px;background:var(--ok-bg);color:var(--ok-ink);border-radius:10px;padding:12px 14px;font-size:.8125rem;line-height:1.5}
  .form-err{display:none;margin-top:14px;background:var(--err-bg);color:var(--err-ink);border-radius:10px;padding:12px 14px;font-size:.8125rem;line-height:1.5}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
  .step .num{width:34px;height:34px;border:1px solid var(--amber);border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--head);font-weight:600;color:var(--amber);margin-bottom:10px}
  .step b{font-size:var(--t-body)}
  .step p{margin-top:4px;font-size:var(--t-meta);line-height:calc(1.55*var(--blh));color:var(--muted)}

  /* ── footer ────────────────────────────────────────────────────────────── */
  footer{position:relative;z-index:1;background:var(--footer);padding:36px 24px;font-size:var(--t-meta);color:var(--faint)}
  footer .wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
  .foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .foot-badge{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.75rem}
  .foot-badge svg{width:14px;height:14px;color:var(--amber-deep)}

  /* ── per-scene top-right CTA (2026-08-27, replaces the fixed #cta-top):
        declared statically inside each section except the hero and #vagas,
        scrolls with its scene — mirror of .sec-mark on the right edge ──── */
  .sec-cta{position:absolute;top:14px;right:24px;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.12)}

  /* ── editor overlay ────────────────────────────────────────────────────── */
  #gear{position:fixed;top:14px;left:14px;z-index:21;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-dark);
    background:rgba(22,18,8,.85);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;backdrop-filter:blur(6px)}
  #gear:hover{color:var(--ink)}
  #editor{position:fixed;right:14px;top:14px;bottom:14px;overflow-y:auto;width:330px;z-index:20;
    background:rgba(12,12,6,.92);border:1px solid rgba(201,192,168,.18);border-radius:6px;padding:13px 15px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#8d8467;backdrop-filter:blur(10px);
    overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(213,154,78,.5) transparent}
  #editor::-webkit-scrollbar{width:6px}
  #editor::-webkit-scrollbar-thumb{background:rgba(213,154,78,.45);border-radius:3px}
  #editor.hidden{display:none}
  #editor summary{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c9c0a8;font-weight:600;
    cursor:pointer;list-style:none;position:sticky;top:-13px;z-index:2;
    background:rgba(12,12,6,.97);padding:8px 0 6px;margin:0}
  #editor summary::-webkit-details-marker{display:none}
  #editor summary::before{content:'▾ ';color:#a8834e}
  #editor details:not([open]) summary::before{content:'▸ '}
  #editor details{border-bottom:1px solid rgba(201,192,168,.12);padding-bottom:8px;margin-bottom:4px}
  #editor h4{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c9c0a8;margin:14px 0 8px;font-weight:600}
  #editor h4:first-child{margin-top:0}
  #editor label{display:flex;align-items:center;gap:7px;margin:5px 0}
  #editor label span:first-child{flex:0 0 92px}
  #editor label span:first-child i{display:block;font-style:normal;font-size:9px;color:#6d6553;letter-spacing:.03em}
  #editor input[type=range]{flex:1;accent-color:#d59a4e;min-width:0}
  #editor select{flex:1;background:#1a1710;color:#c9c0a8;border:1px solid rgba(201,192,168,.2);border-radius:3px;padding:4px 6px;font:inherit}
  #editor .val{flex:0 0 36px;text-align:right;color:#c9c0a8}
  #editor .btns{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
  #editor button{font:inherit;font-size:10.5px;color:#8d8467;background:transparent;border:1px solid rgba(201,192,168,.2);border-radius:3px;padding:3px 8px;cursor:pointer}
  #editor button:hover{color:#c9c0a8;border-color:#a8834e}
  #editor button.on{background:#a8834e;border-color:#a8834e;color:#0b0b04}
  #editor .swatch{width:20px;height:20px;border-radius:4px;padding:0;flex:0 0 auto;border:1px solid rgba(201,192,168,.3)}
  #editor .swatch.on{outline:2px solid #d59a4e;outline-offset:1px;background-color:inherit}
  #editor .meta{margin-top:10px;padding-top:8px;border-top:1px solid rgba(201,192,168,.15);display:flex;justify-content:space-between;color:#6d6553}
  #editor .meta b{color:#c9c0a8}
  @media (max-width:767px){#editor{left:14px;width:auto}}

  /* ── carousels (mobile) ────────────────────────────────────────────────── */
  .car-dots{display:none}
  @media (max-width:767px){
    main section{padding:88px 25px 64px} /* extra top clearance under the per-scene CTA */
    #hero{padding:0 25px} /* id selector beats the rule above — restate */
    .sec-mark{top:14px;left:25px;font-size:1.0625rem}
    .sec-cta{top:10px;right:25px}
    .why-cols{grid-template-columns:1fr;gap:20px}
    .how-split{grid-template-columns:1fr;gap:28px}
    .team-grid,.cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
      margin:28px -25px 0;padding:0 25px;scrollbar-width:none} /* bleed must mirror the section side padding */
    .team-grid::-webkit-scrollbar,.cards::-webkit-scrollbar{display:none}
    .cards .card,.team-grid .tcard{flex:0 0 100%;scroll-snap-align:center}
    .car-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px}
    .car-dots i{width:9px;height:9px;border-radius:999px;background:var(--line-light);transition:all .25s}
    .dark .car-dots i{background:var(--line-dark)}
    .car-dots i.on{width:22px;background:var(--amber-deep)}
    .dark .car-dots i.on{background:var(--amber)}
    .car-dots .hint{font-size:.65625rem;color:var(--paper-muted);margin-left:8px}
    .dark .car-dots .hint{color:var(--faint)}
    .slots-split{grid-template-columns:1fr;gap:32px}
    .steps{grid-template-columns:1fr;gap:18px;margin-top:40px}
    .step{display:grid;grid-template-columns:34px 1fr;gap:12px}
    .step .num{margin-bottom:0}
    .express{flex-direction:column}
    .express .pill{width:100%;text-align:center;padding:13px}
    /* mobile type pass (2026-08-27) */
    .field input,.express input{font-size:16px}  /* <16px triggers iOS focus-zoom */
    .fivemin .big{font-size:calc(clamp(2.3rem,6vw,4.5rem)*var(--hm))}
    .big20 .n{font-size:calc(clamp(4.2rem,9vw,7.5rem)*var(--hm))}
    .eyebrow{letter-spacing:.12em}
    .wordmark{font-size:calc(clamp(1.7rem,3.4vw,2.75rem)*var(--hm)*var(--wm))}
    .hero-body,.hero-glass{gap:20px}
  }

  @media (prefers-reduced-motion: reduce){
    .scroll-hint{animation:none}
  }