/* generated by scripts/gen_web.py --fonts. All fonts OFL (licences in design/fonts). */
@font-face { font-family: "Anybody"; src: url(/fonts/anybody-latin.bd7333f581.woff2) format("woff2"); font-weight: 700 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; 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: "Anybody"; src: url(/fonts/anybody-latin-ext.5a41d19a05.woff2) format("woff2"); font-weight: 700 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Anybody"; src: url(/fonts/anybody-vietnamese.5044287b14.woff2) format("woff2"); font-weight: 700 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans-latin.41e09812c1.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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: "Instrument Sans"; src: url(/fonts/instrument-sans-latin-ext.7b2bec1b81.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Be Vietnam Pro"; src: url(/fonts/be-vietnam-pro-400-latin.8b747d8da8.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Be Vietnam Pro"; src: url(/fonts/be-vietnam-pro-400-vietnamese.bcc15a4c62.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; src: url(/fonts/be-vietnam-pro-600-latin.a57d9f5e32.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; 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: "Be Vietnam Pro"; src: url(/fonts/be-vietnam-pro-600-vietnamese.e714149692.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* getrupa.app: SACHET world for the web (design/rupa/system, DESIGN.md wins). Tokens only below; light + dark (noite).
   Motion rules: the default CSS is always the finished state. Animated starting states exist only under
   html.js:not(.sd) + prefers-reduced-motion: no-preference (+ @supports animation-timeline for scroll stages).
   Only transform / opacity / registered font axes animate. The torn-paper polygons (--tt --tr --tb --tf) are generated
   by scripts/gen_web.py and appended to this file. */

:root {
  color-scheme: light dark;
  --creme: #fffae8; --manteiga: #fdefb6; --manteiga-2: #f9e093; --areia: #f8f3e6; --manga: #f9b73f;
  --caramelo: #c2732c; --caramelo-tinta: #934e1e; --caramelo-claro: #e19956; --cacau-claro: #774c33; --cacau: #391f13;
  --tomate: #b93917; --noite: #1a0f09; --noite-2: #291a12; --noite-3: #3e2c22; --manteiga-fosca: #dac9a6;
  /* flavours: a shelf of differently flavoured sachets. Fill + ink pairs (AA for body text), night pairs for dark bands.
     pandan 7.75 / 11.18, cabai 5.26 / 12.62, kunyit 6.11 / 9.89, langit 8.21 / 11.11, ube 7.42 / 10.97 (light / night). */
  --pandan: #8fcf6a; --pandan-ink: #15300a; --pandan-night: #16290f; --pandan-night-ink: #c3e6a6;
  --cabai: #c4321a; --cabai-ink: #fffae8; --cabai-night: #3a1008; --cabai-night-ink: #ffd8c4;
  --kunyit: #f28a1c; --kunyit-ink: #391f13; --kunyit-night: #33210a; --kunyit-night-ink: #fbc768;
  --langit: #86c9f2; --langit-ink: #0b2a40; --langit-night: #0c2233; --langit-night-ink: #addcf7;
  --ube: #b3a6c6; --ube-ink: #211830; --ube-night: #231c2c; --ube-night-ink: #d8cfe5;

  --bg: var(--manteiga); --surface: var(--creme); --surface-2: var(--manteiga-2);
  --ink: var(--cacau); --ink-muted: var(--cacau-claro); --ink-accent: var(--caramelo-tinta);
  --display-accent: var(--caramelo); --action: var(--cacau); --on-action: var(--manteiga);
  --perf: var(--cacau-claro); --focus: var(--caramelo-tinta);
  --line: color-mix(in oklch, var(--cacau), transparent 85%);
  --line-strong: color-mix(in oklch, var(--cacau), transparent 70%);
  --action-press: color-mix(in oklch, var(--cacau), var(--caramelo) 18%);
  --surface-press: color-mix(in oklch, var(--creme), var(--cacau) 6%);
  --foil-1: var(--creme); --foil-1-ink: var(--cacau);
  --foil-2: var(--manteiga-2); --foil-2-ink: var(--cacau);
  --foil-3: var(--manga); --foil-3-ink: var(--cacau);
  --foil-4: var(--caramelo-claro); --foil-4-ink: var(--cacau);
  --foil-5: var(--cacau); --foil-5-ink: var(--manteiga);
  --e-1: 0 6px 16px -8px color-mix(in oklch, var(--cacau), transparent 65%);
  --e-2: 0 12px 32px -12px color-mix(in oklch, var(--cacau), transparent 55%);

  --f-display: "Anybody", ui-sans-serif, system-ui, sans-serif;
  --f-text: "Instrument Sans", "Anybody", ui-sans-serif, system-ui, sans-serif;
  --f-number: "Anybody", "Anybody Fallback", ui-sans-serif, system-ui, sans-serif;
  --lh-disp: 0.86; --track-disp: -0.03em;

  --gutter: 16px; --maxw: 1200px;
  --crimp-s: 12px; --crimp-h: 6px; --crimp-s-sm: 5.5px; --crimp-h-sm: 2.75px; --crimp-s-lg: 14px; --crimp-h-lg: 7px;
  --seal-band: 16px; --perf-dot: 2.8px; --perf-pitch: 8px; --perf-alpha: 0.55;
  --r-seal: 4px; --r-paper: 6px; --r-s: 10px; --r-m: 20px; --r-pill: 999px;
  --e-settle: linear(0, 0.060 5%, 0.186 10%, 0.329 15%, 0.466 20%, 0.584 25%, 0.682 30%, 0.760 35%, 0.821 40%, 0.868 45%, 0.903 50%, 0.929 55%, 0.949 60%, 0.963 65%, 0.973 70%, 0.981 75%, 0.986 80%, 0.990 85%, 0.993 90%, 0.995 95%, 1);
  --d-settle: 300ms; --d-press: 120ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--noite); --surface: var(--noite-2); --surface-2: var(--noite-3);
    --ink: var(--creme); --ink-muted: var(--manteiga-fosca); --ink-accent: var(--caramelo-claro);
    --display-accent: var(--caramelo-claro); --action: var(--manga); --on-action: var(--cacau);
    --perf: var(--manteiga-fosca); --focus: var(--manga);
    --line: color-mix(in oklch, var(--creme), transparent 86%);
    --line-strong: color-mix(in oklch, var(--creme), transparent 72%);
    --action-press: color-mix(in oklch, var(--manga), var(--creme) 25%);
    --surface-press: color-mix(in oklch, var(--noite-2), var(--creme) 8%);
    --foil-1: var(--noite-2); --foil-1-ink: var(--creme);
    --foil-2: var(--noite-3); --foil-2-ink: var(--creme);
    --foil-5: var(--creme); --foil-5-ink: var(--cacau);
    --e-1: 0 6px 16px -8px oklch(0 0 0 / 0.6); --e-2: 0 12px 32px -12px oklch(0 0 0 / 0.7);
  }
}
@media (prefers-reduced-motion: reduce) { :root { --d-settle: 0ms; --d-press: 0ms; } }
@media (min-width: 900px) { :root { --gutter: 40px; } }

@font-face { font-family: "Anybody Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold");
  font-weight: 700 900; size-adjust: 82%; ascent-override: 105%; descent-override: 25%; }
@property --wdth { syntax: "<number>"; inherits: true; initial-value: 88; }
/* how open a tear window is: 0 sealed .. 1 torn open (finished state) */
@property --q { syntax: "<number>"; inherits: true; initial-value: 1; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: var(--e-settle); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--f-text);
       font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: clip; }
:lang(vi) { --f-text: "Be Vietnam Pro", "Anybody", ui-sans-serif, system-ui, sans-serif; --lh-disp: 1.04; }
.nonlatin { --lh-disp: 1.14; --track-disp: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-20 { width: 20px; height: 20px; } .i-40 { width: 40px; height: 40px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.disp { font-family: var(--f-display); font-weight: 840; letter-spacing: var(--track-disp); line-height: var(--lh-disp);
        font-stretch: calc(var(--wdth) * 1%); }
.h-sec { --wdth: 78; font-size: clamp(36px, 8vw, 72px); font-weight: 880; margin-bottom: 24px; text-wrap: balance; }
.num { font-family: var(--f-number); font-variant-numeric: tabular-nums; }
section { padding-block: 44px; }
@media (min-width: 900px) { section { padding-block: 72px; } }

/* ---------- sachet material ---------- */
.crimp { --s: var(--crimp-s); --h: var(--crimp-h);
  -webkit-mask: linear-gradient(#000 0 0) 0 var(--h) / 100% calc(100% - 2 * var(--h)) no-repeat,
                conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / var(--s) var(--h) repeat-x,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / var(--s) var(--h) repeat-x;
          mask: linear-gradient(#000 0 0) 0 var(--h) / 100% calc(100% - 2 * var(--h)) no-repeat,
                conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / var(--s) var(--h) repeat-x,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / var(--s) var(--h) repeat-x; }
.crimp.sm { --s: var(--crimp-s-sm); --h: var(--crimp-h-sm); }
.crimp.lg { --s: var(--crimp-s-lg); --h: var(--crimp-h-lg); }
.ridges { position: relative; }
.ridges::before, .ridges::after { content: ""; position: absolute; left: 0; right: 0; height: var(--seal-band); pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg, color-mix(in oklch, currentColor, transparent 86%) 0 1px, transparent 1px 4px); }
.ridges::before { top: 0; } .ridges::after { bottom: 0; }
.perf { height: 4px; color: var(--perf); opacity: var(--perf-alpha);
        background: radial-gradient(circle, currentColor 0 calc(var(--perf-dot) / 2), transparent calc(var(--perf-dot) / 2 + .5px)) 0 50% / var(--perf-pitch) 4px repeat-x; }
.mini { width: 14px; height: 19px; border-radius: 2px; background: var(--manga); flex: none; display: inline-block; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.brand { font: 900 30px/1 var(--f-display); font-stretch: 130%; letter-spacing: -0.02em; text-decoration: none;
         min-height: 44px; display: inline-flex; align-items: center; }
.lang-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: var(--r-pill);
             background: var(--surface); text-decoration: none; font: 600 15px/1.1 var(--f-text); }
.lang-link:hover { background: var(--surface-press); }

/* ---------- badge, chip, buttons ---------- */
.act { display: grid; gap: 14px; justify-items: start; }
.act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.badge { display: inline-flex; min-height: 44px; align-items: center; border-radius: 10px; }
.badge img { height: 52px; width: auto; }
.os { font: 600 15px/1.3 var(--f-text); color: var(--ink-muted); max-width: 22ch; }
.pchip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 8px 16px 8px 12px;
         border-radius: var(--r-pill); background: var(--surface); font: 650 17px/1.2 var(--f-text); }
.pchip .mini { width: 16px; height: 22px; }
.pchip .nw { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; }
.pchip .num { font-family: var(--f-number); font-weight: 860; font-size: 20px; font-stretch: 84%; }
.pchip .sep { width: 4px; height: 22px; color: var(--perf);
  background: radial-gradient(circle, currentColor 0 1.4px, transparent 1.9px) 50% 0 / 4px 6px repeat-y; }
.btn { min-height: 56px; border-radius: var(--r-pill); padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
       font: 650 17px/1.15 var(--f-text); text-decoration: none; background: var(--action); color: var(--on-action); }

/* ---------- the sachet window that tears (hero, scroll stages, tool + pack pages) ---------- */
.tw { --tw-h: min(46svh, calc((100vw - 2 * var(--gutter) - 28px) * 1.25));
      position: relative; height: var(--tw-h); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
      background: var(--areia); isolation: isolate; touch-action: pan-y; }
.tw > div { position: absolute; inset: 0; }
.tw picture, .tw img { width: 100%; height: 100%; object-fit: cover; }
.tw-face { position: absolute; inset: 0; background: var(--manga); }
/* The photo never moves: each half slides its torn edge out while its picture slides back by the same amount. */
.tw { --q: 1; }
.tw-top { z-index: 2; background: var(--creme); clip-path: var(--tr); transform: translateY(calc(var(--q) * -58%)); }
.tw-cut { position: absolute; inset: 0; clip-path: var(--tt); }
.tw-top .tw-face { transform: translateY(calc(var(--q) * 58%)); }
.tw-bot { z-index: 3; clip-path: var(--tb); transform: translateY(calc(var(--q) * 58%)); }
.tw-bot .tw-face { transform: translateY(calc(var(--q) * -58%)); }
.tw-perf { position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; z-index: 4; pointer-events: none;
  opacity: calc(.75 - var(--q) * 8);
  color: var(--creme); background: radial-gradient(circle, currentColor 0 1.6px, transparent 2.2px) 0 50% / 9px 4px repeat-x; }
/* labels sit above the tear: "before" while sealed, "after" once open */
.tw-lbl { position: absolute; z-index: 5; top: 12px; inset-inline-start: 12px; border-radius: var(--r-s); padding: 7px 10px;
          font: 650 14px/1 var(--f-text); background: var(--cacau); color: var(--manteiga); pointer-events: none; }
.tw .tw-lbl.b { opacity: calc(1 - var(--q) * 6); }
.tw .tw-lbl.a { opacity: calc(var(--q) * 6 - 5); }
.tw-lbl.a { background: var(--creme); color: var(--cacau); }
.tw-lbl:empty { display: none; }
.tw.sealed { --q: 0; }
.tw.drag { transition: none !important; }
.tw-tab { position: absolute; z-index: 6; inset-inline-end: 10px; top: 10px; width: 48px; height: 48px; border: 0; padding: 0;
  border-radius: var(--r-pill); background: var(--cacau); color: var(--manga); display: grid; place-items: center; cursor: grab;
  box-shadow: var(--e-2); touch-action: none; transform: translateY(calc((1 - var(--q)) * (var(--tw-h) * .5 - 34px))); }
.tw-tab[hidden] { display: none; }
.tw-tab:active { cursor: grabbing; }
.missing { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
           background: repeating-linear-gradient(-45deg, var(--surface-2) 0 10px, var(--surface) 10px 20px);
           font: 600 13px/1.3 ui-monospace, monospace; color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sd) .tw[data-auto] { transition: --q 460ms var(--e-settle); }
  html.js:not(.sd) .tw[data-auto]:not(.open) { --q: 0; }
}

/* ---------- hero: one sealed sachet ---------- */
.hero { display: grid; gap: 18px; justify-items: center; padding-block: 0 36px; }
.hero-pack { --foil: var(--foil-3); background: var(--fl, var(--manga)); color: var(--fl-ink, var(--cacau)); padding: 20px 14px 18px; display: grid; gap: 12px;
             width: calc(var(--tw-h) * .8 + 28px); --tw-h: min(46svh, calc((100vw - 2 * var(--gutter) - 28px) * 1.25)); }
.hero-pack .tw { --tw-h: inherit; }
.band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; padding: 6px 4px 0; }
.wm { font: 900 46px/.8 var(--f-display); font-stretch: 140%; letter-spacing: -0.03em; }
.hl { --wdth: 92; font-size: clamp(20px, 5.6vw, 30px); font-weight: 820; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.nonlatin .hl, :lang(vi) .hl { line-height: 1.14; }
.hero-side { display: grid; gap: 18px; width: 100%; justify-items: center; text-align: center; }
.hero-side .act { justify-items: center; }
.hero-side .act-row { justify-content: center; }
.hw { display: none; }
.intro { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; max-width: 40ch; }
.hero-side .intro, .hero-side .notes { text-align: start; justify-self: stretch; }
.notes { display: grid; gap: 2px; font: 600 17px/1.45 var(--f-text); color: var(--ink-muted); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; justify-items: start; padding-block: 8px 72px; }
  .hero-pack { --tw-h: min(72vh, 660px); order: 2; }
  .wm { font-size: 64px; }
  .hl { font-size: 34px; }
  .hero-side { justify-items: start; text-align: start; gap: 26px; }
  .hero-side .act { justify-items: start; } .hero-side .act-row { justify-content: flex-start; }
  .hw { display: grid; font-size: clamp(72px, 9vw, 150px); font-weight: 900; --wdth: 70; }
  .hw .w { color: var(--ink-muted); opacity: .45; }
  .hw .w.on { color: var(--display-accent); opacity: 1; }
  .hw .w { display: block; }
}

/* ---------- flavour bands: full-bleed coloured packs, crimped top and bottom ---------- */
.fl-pandan { --fl: var(--pandan); --fl-ink: var(--pandan-ink); --band: var(--pandan); --band-ink: var(--pandan-ink); }
.fl-cabai { --fl: var(--cabai); --fl-ink: var(--cabai-ink); --band: var(--cabai); --band-ink: var(--cabai-ink); }
.fl-kunyit { --fl: var(--kunyit); --fl-ink: var(--kunyit-ink); --band: var(--kunyit); --band-ink: var(--kunyit-ink); }
.fl-langit { --fl: var(--langit); --fl-ink: var(--langit-ink); --band: var(--langit); --band-ink: var(--langit-ink); }
.fl-ube { --fl: var(--ube); --fl-ink: var(--ube-ink); --band: var(--ube); --band-ink: var(--ube-ink); }
.shelf { --band: var(--cacau); --band-ink: var(--manteiga); }
@media (prefers-color-scheme: dark) {
  .fl-pandan { --band: var(--pandan-night); --band-ink: var(--pandan-night-ink); }
  .fl-cabai { --band: var(--cabai-night); --band-ink: var(--cabai-night-ink); }
  .fl-kunyit { --band: var(--kunyit-night); --band-ink: var(--kunyit-night-ink); }
  .fl-langit { --band: var(--langit-night); --band-ink: var(--langit-night-ink); }
  .fl-ube { --band: var(--ube-night); --band-ink: var(--ube-night-ink); }
  .shelf { --band: var(--noite-2); --band-ink: var(--creme); }
}
.fband { --ink: var(--band-ink); --ink-muted: var(--band-ink); --display-accent: var(--band-ink); --perf: var(--band-ink);
  background: var(--band, var(--surface-2)); color: var(--band-ink, var(--ink)); margin-block: 8px;
  -webkit-mask: linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 16px) no-repeat,
                conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 16px 8px repeat-x,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 8px repeat-x;
          mask: linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 16px) no-repeat,
                conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 16px 8px repeat-x,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 8px repeat-x; }
.fband .tag { background: var(--band-ink); color: var(--band); }
.fband .tag .mini { background: var(--manga); }
.fband .st-link { text-decoration-color: currentColor; }
/* ---------- tool showcases: the remove scroll tear (.st) and three hands-on stages (.sh) ---------- */
.st { padding-block: 32px; }
.st-stage { display: grid; gap: 18px; justify-items: center; align-content: center; }
.st-text { width: 100%; display: grid; gap: 12px; }
.st-word { --col: calc(100vw - 2 * var(--gutter)); --wdth: 96; font-weight: 900; font-size: min(150px, calc(var(--col) * var(--k)));
           width: 100%; }
.st-word .ln { display: block; white-space: nowrap; contain: layout; font-stretch: calc(var(--wdth) * 1%); }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 10px; border-radius: var(--r-s);
       background: var(--surface); font: 650 15px/1.2 var(--f-text); }
.tag.ai .mini { background: var(--manga); }
.st-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 650 17px/1.25 var(--f-text);
           text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--manga); }
.st-pack { background: var(--foil, var(--manga)); padding: 16px 14px; }
.st .tw { --tw-h: min(48svh, calc((100vw - 2 * var(--gutter) - 28px) * 1.25)); }
@media (min-width: 900px) {
  .st-stage { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; justify-items: start; align-items: center; }
  .st-word { --col: calc(min(100vw, var(--maxw) + 2 * var(--gutter)) - 2 * var(--gutter) - 460px - 56px); }
  .st .tw { --tw-h: min(70vh, 600px); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* ~1100 px of scroll per tool: the tear starts while the stage scrolls in and ends shortly after it pins */
    html.js:not(.sd) .st { height: calc(100svh + 260px); padding-block: 0; view-timeline: --st block; }
    html.js:not(.sd) .st-stage { position: sticky; top: 0; height: 100svh; padding-block: 20px; }
    html.js:not(.sd) .st .tw { animation: t-q linear both; animation-timeline: --st; animation-range: entry 80% contain 75%; }
    html.js:not(.sd) .st .st-word .ln { animation: widen linear both; animation-timeline: --st; animation-range: entry 40% contain 40%; }
    html.js:not(.sd) .st .st-word .ln:nth-child(2) { animation-range: entry 50% contain 50%; }
  }
  html.js.no-sda:not(.sd) .st .tw { transition: --q 460ms var(--e-settle); }
  html.js.no-sda:not(.sd) .st:not(.open) .tw { --q: 0; }
}
@keyframes t-q { 0%, 6% { --q: 0; } 14% { --q: .05; } 100% { --q: 1; } }
@keyframes widen { from { --wdth: 52; } to { --wdth: 96; } }

/* hands-on stages share the layout; on desktop every other stage puts the photo first */
.sh { padding-block: 52px 56px; }
.st-vis { width: min(100%, 440px); justify-self: center; }
@media (min-width: 900px) {
  .sh { padding-block: 88px; }
  .sh.flip .st-vis { order: -1; }
  .sh .st-stage { grid-template-columns: minmax(0, 1fr) 460px; }
  .sh.flip .st-stage { grid-template-columns: 460px minmax(0, 1fr); }
}

/* restore: a stack of old prints; the top one flips from the faded original to the restored photo */
.prints { position: relative; display: grid; padding: 18px 26px 14px; perspective: 1400px; }
.prints > * { grid-area: 1 / 1; }
.pr { margin: 0; background: #f4ecda; color: var(--cacau); padding: 12px 12px 0; border-radius: 2px; box-shadow: var(--e-2);
      display: grid; }
.pr-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--areia); }
.pr-ph picture, .pr-ph img { width: 100%; height: 100%; object-fit: cover; }
.pr figcaption { --wdth: 90; font-size: 24px; font-weight: 860; padding: 10px 4px 14px; text-align: center; }
.pr-b2 { rotate: -7deg; translate: -10px 8px; background: #e7dbc0; }
.pr-b1 { rotate: 5deg; translate: 14px 2px; background: #ece2cc; }
.pr-b1 figcaption { visibility: hidden; }
html.js .pr-b1 .pr-ph > * { display: none; }
.pr-card { position: relative; display: grid; rotate: -1.5deg; transform-style: preserve-3d; }
.pr-card > .pr { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pr-back { display: none; }
html.js .pr-back { display: grid; transform: rotateY(180deg); }
html.js .prints { cursor: pointer; }
html.js .prints.show-b .pr-card { transform: rotateY(180deg); }
.prints:focus-visible { outline-offset: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sd) .pr-card { transition: transform 620ms var(--e-settle); }
  html.js:not(.sd) .prints:not(.in) .pr-card { transform: rotateY(180deg); }
}

/* glow: the app's slider; dragging blends before into after and the tool word widens with the value */
.gl { display: grid; gap: 18px; }
.gl-ph { background: var(--creme); padding: 16px 14px; }
.gl-in { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--areia); }
.gl-b, .gl-a { position: absolute; inset: 0; }
.gl-a { opacity: var(--v, 1); }
.gl picture, .gl img { width: 100%; height: 100%; object-fit: cover; }
.gl-ctl { display: grid; gap: 10px; }
.gl-ctl[hidden] { display: none; }
.gl-val { display: flex; align-items: baseline; gap: 8px; }
.gl-val b { font: 900 44px/.9 var(--f-number); font-stretch: 72%; font-variant-numeric: tabular-nums; min-width: 1.3ch; text-align: end; }
.gl-val .num { font-weight: 800; font-size: 20px; font-stretch: 84%; }
.gl-zone { margin-inline-start: auto; font: 650 17px/1.2 var(--f-text); padding: 6px 12px; border-radius: var(--r-s);
           background: var(--band-ink); color: var(--band); }
.gl input { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 0; background: transparent; cursor: pointer;
  --track: linear-gradient(90deg, transparent 0 calc(var(--nat) * 100%), transparent 0),
           repeating-linear-gradient(-45deg, color-mix(in oklch, var(--band-ink), transparent 70%) 0 2px, transparent 2px 7px) 0 0 / calc(var(--nat) * 100%) 100% no-repeat; }
.gl input::-webkit-slider-runnable-track { height: 18px; border-radius: 9px; background: var(--track), var(--creme);
  box-shadow: inset 0 0 0 2px var(--band-ink); }
.gl input::-moz-range-track { height: 18px; border-radius: 9px; background: var(--track), var(--creme); box-shadow: inset 0 0 0 2px var(--band-ink); }
.gl input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -8px; border-radius: 50%;
  background: var(--cacau); border: 3px solid var(--creme); box-shadow: var(--e-2); }
.gl input::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--cacau); border: 3px solid var(--creme); }
.gl input:focus-visible { outline: none; }
.gl input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--band-ink); outline-offset: 3px; }

/* remove text: tap the photo or the button and a brush wipes the text off the sign */
.er { display: grid; gap: 18px; justify-items: center; }
.er-ph { background: var(--creme); padding: 16px 14px; width: 100%; }
.er-in { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--areia); touch-action: pan-y; }
.er-in picture, .er-in img { width: 100%; height: 100%; object-fit: cover; }
.er-b, .er-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.er-b { display: none; }
.er-c { pointer-events: none; opacity: 0; }
html.js .er-b { display: block; }
html.js .er-in { cursor: pointer; }
.er.done .er-b { display: none; }
.er-btn { background: var(--band-ink); color: var(--band); border: 0; cursor: pointer; }
.er-btn[hidden] { display: none; }

/* ---------- tool strip: sachets hanging from a perforated cord ---------- */
.cord { position: relative; }
.hang { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
.hang::-webkit-scrollbar { display: none; }
.hs { flex: 0 0 min(66vw, 260px); scroll-snap-align: start; position: relative; }
.cc { display: grid; gap: 10px; padding: 12px 10px 14px; background: var(--surface); color: var(--ink); border-radius: var(--r-seal);
      text-decoration: none; height: 100%; }
.cc-ph { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.cc-b, .cc-a { position: absolute; inset: 0; }
.cc-ph picture, .cc-ph img { width: 100%; height: 100%; object-fit: cover; }
.cc-n { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-n b { font: 820 19px/1.05 var(--f-display); font-stretch: 90%; letter-spacing: -0.01em; flex: 1; min-width: 0;
          overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
.ai-chip { position: absolute; z-index: 1; top: 6px; inset-inline-start: 6px; padding: 3px 6px; border-radius: 6px;
           background: var(--manga); color: var(--cacau); font: 860 12px/1 var(--f-display); font-stretch: 100%; letter-spacing: .02em; }
.zf img { transform: scale(var(--zs)); transform-origin: var(--zx) var(--zy); }
.dome { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-muted); }
.dome .i { width: 44px; height: 44px; }
.hang.links .hs { flex-basis: min(42vw, 200px); }
.hang.links .cc:hover { background: var(--surface-press); }
/* with JS (and on every tool page): a cord with small sachets on strings */
html.js .cord::before, .cord:has(.links)::before { content: ""; position: absolute; top: 10px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  height: 4px; color: var(--perf); opacity: .8; background: radial-gradient(circle, currentColor 0 1.6px, transparent 2.1px) 0 50% / 8px 4px repeat-x; }
html.js [data-strip] .hang, .hang.links { padding-top: 40px; gap: 10px; }
html.js [data-strip] .hs, .hang.links .hs { flex-basis: 136px; transform-origin: 50% -28px; }
html.js [data-strip] .hs::before, .hang.links .hs::before { content: ""; position: absolute; left: 50%; top: -28px; width: 1.5px; height: 30px;
  background: var(--perf); opacity: .7; }
html.js [data-strip] .cc, .hang.links .cc { -webkit-mask: var(--crimp-mask); mask: var(--crimp-mask); padding-top: 16px; cursor: pointer; }
html.js [data-strip] .cc-n b { font-size: var(--cl, 16px); }
.hang.links .cc-n b { font-size: 16px; }
/* selected sachet: manga outline + a small lift (the card keeps its colours, so it reads in light and dark) */
html.js [data-strip] .hs { transition: translate var(--d-settle) var(--e-settle); }
html.js [data-strip] .hs:has(> .cc[aria-pressed="true"]) { translate: 0 -8px; filter: drop-shadow(0 10px 12px color-mix(in oklch, var(--cacau), transparent 60%)); }
html.js [data-strip] .cc[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--manga); }
html.js [data-strip] .hs:has(> .cc[aria-pressed="true"])::before { opacity: 1; background: var(--manga); }
:root { --crimp-mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 10px) no-repeat,
  conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 10px 5px repeat-x,
  conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 10px 5px repeat-x; }
/* desktop: every sachet reachable without a trackpad, two rows of five on their own cords */
@media (min-width: 900px) {
  [data-strip] .hang { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  html.js [data-strip] .hang { gap: 52px 18px; }
  html.js [data-strip] .hs { flex-basis: auto; }
  html.js [data-strip] .cc-n b { font-size: calc(var(--cl, 16px) * 1.25); }
  html.js .cord[data-strip]::before { display: none; }
  html.js [data-strip] .hs::after { content: ""; position: absolute; top: -30px; left: -10px; right: -10px; height: 4px; color: var(--perf);
    opacity: .8; background: radial-gradient(circle, currentColor 0 1.6px, transparent 2.1px) 0 50% / 8px 4px repeat-x; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js:not(.sd) [data-strip] .hs, .hang.links .hs { animation: sway-a linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    html.js:not(.sd) [data-strip] .hs:nth-child(even), .hang.links .hs:nth-child(even) { animation-name: sway-b; }
  }
}
@keyframes sway-a { 0% { rotate: -5deg; } 30% { rotate: 3deg; } 55% { rotate: -1.5deg; } 75%, 100% { rotate: 0deg; } }
@keyframes sway-b { 0% { rotate: 4deg; } 30% { rotate: -3deg; } 55% { rotate: 1.5deg; } 75%, 100% { rotate: 0deg; } }
/* the opened sachet: before/after compare, auto-sweeps once then drags */
.viewer { margin: 12px auto 0; max-width: 520px; display: grid; gap: 12px; }
.viewer[hidden] { display: none; }
.cmp { --p: .5; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-paper); background: var(--surface-2);
       touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; box-shadow: var(--e-2); }
.cmp picture, .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.cmp-b, .cmp-aw, .cmp-h { position: absolute; inset: 0; }
.cmp-aw, .cmp-h { transform: translateX(calc((var(--p) - 1) * 100%)); will-change: transform; }
.cmp-aw { overflow: hidden; z-index: 1; }
.cmp-a { position: absolute; inset: 0; transform: translateX(calc((1 - var(--p)) * 100%)); will-change: transform; }
.cmp-h { pointer-events: none; z-index: 2; }
.cmp-h::before { content: ""; position: absolute; right: -1.5px; top: 0; bottom: 0; width: 3px; background: var(--creme); }
.knob { position: absolute; right: -24px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  background: var(--cacau); box-shadow: var(--e-2); pointer-events: auto; display: grid; place-items: center; }
.knob::after { content: "\2039\2003\203A"; font: 700 18px/1 var(--f-text); color: var(--manga); }
.cmp .tw-lbl { z-index: 3; top: 12px; } .cmp .tw-lbl.a { left: 12px; } .cmp .tw-lbl.r { left: auto; right: 12px; }
.viewer-n { --wdth: 88; font-size: 30px; font-weight: 860; }

/* ---------- templates: a shelf of festival sachets ---------- */
.shelf { padding-block: 52px 40px; }
.fan { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
       margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 28px; }
.fan::-webkit-scrollbar { display: none; }
.fan li { flex: 0 0 158px; scroll-snap-align: start; rotate: calc((var(--i) - 1.5) * 1.6deg); transition: rotate var(--d-settle) var(--e-settle), translate var(--d-settle) var(--e-settle); }
.fan li:nth-child(even) { translate: 0 10px; }
.tp { display: grid; gap: 10px; height: 100%; padding: 16px 10px 16px; background: var(--fl); color: var(--fl-ink); text-decoration: none;
      -webkit-mask: var(--crimp-mask); mask: var(--crimp-mask); }
.tp-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--areia); }
.tp-ph picture, .tp-ph img { width: 100%; height: 100%; object-fit: cover; }
.tp-n { font: 840 18px/1.05 var(--f-display); font-stretch: 86%; letter-spacing: -0.01em; text-wrap: balance; padding-inline: 2px; }
.fan li:hover, .fan li:focus-within { rotate: 0deg; translate: 0 -6px; }
@media (min-width: 900px) {
  .fan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 20px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tp-n { font-size: 20px; }
}

/* ---------- price: a sachet as big as a photo ---------- */
.price-row { display: grid; gap: 28px; align-items: start; }
.price-pack { background: var(--manga); color: var(--cacau); padding: 36px 22px 32px; display: grid; gap: 16px; max-width: 560px; }
.free { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.free b { font: 880 clamp(32px, 8.4vw, 48px)/.92 var(--f-display); font-stretch: 78%; letter-spacing: -0.03em; }
.minis { display: inline-flex; gap: 6px; }
.ms { position: relative; width: 28px; height: 40px; display: block; }
.ms-top, .ms-body { position: absolute; left: 0; right: 0; background: var(--creme); border-radius: 2px; }
.ms-top { top: 0; height: 9px; transform: translate(3px, -7px) rotate(-14deg); }
.ms-body { top: 11px; bottom: 0; }
.ms-body::before { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; border-top: 2px dotted var(--cacau); opacity: .55; }
.ft { font: 650 17px/1.35 var(--f-text); }
.price-pack .perf { color: var(--cacau); }
.then { font: 780 22px/1.08 var(--f-display); font-stretch: 92%; }
.amt { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 4px 8px; white-space: nowrap; }
.amt .n { --wdth: 64; font: 900 clamp(48px, 15vw, 120px)/.84 var(--f-number); font-stretch: calc(var(--wdth) * 1%); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.amt .per { font: 780 clamp(20px, 5.4vw, 26px)/1 var(--f-display); font-stretch: 82%; }
.yr { font: 650 18px/1.3 var(--f-text); }
.note { font: 650 19px/1.35 var(--f-text); }
.pts { display: grid; gap: 10px; margin-top: 4px; }
.pts li { display: flex; align-items: center; gap: 10px; font: 650 17px/1.25 var(--f-text); }
.qr-pack { display: none; }
@media (min-width: 900px) {
  .price-row { grid-template-columns: minmax(0, 560px) auto; gap: 48px; align-items: center; }
  .price-pack { padding: 44px 36px 40px; }
  .qr-pack { display: grid; gap: 14px; justify-items: center; background: var(--surface); padding: 30px 26px 26px; width: 250px; rotate: 2deg; }
  .qr-in { width: 180px; padding: 12px; background: var(--creme); color: var(--cacau); border-radius: 4px; }
  .qr-code { width: 100%; height: auto; display: block; }
  .qr-pack p { font: 650 16px/1.3 var(--f-text); text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sd) [data-in]:not(.in) .amt .n { --wdth: 54; }
  html.js:not(.sd) [data-in] .amt .n { transition: --wdth 900ms var(--e-settle) 200ms; }
  html.js:not(.sd) [data-in]:not(.in) .ms-top { transform: none; }
  html.js:not(.sd) [data-in].in .ms-top { animation: ms-tear 300ms steps(3, end) both; animation-delay: calc(500ms + var(--n) * 320ms); }
}
@keyframes ms-tear { from { transform: none; } to { transform: translate(3px, -7px) rotate(-14deg); } }

/* ---------- FAQ: sachets that tear open ---------- */
.faq-list { display: grid; gap: 14px; max-width: 860px; }
.faq-list details { background: var(--surface); border-radius: var(--r-seal);
  -webkit-mask: linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 12px 6px repeat-x;
          mask: linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 12px 6px repeat-x; }
.faq-list summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 18px 18px 16px; background: var(--surface-2); transition: transform var(--d-settle) var(--e-settle); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 4px; color: var(--perf); opacity: var(--perf-alpha);
  background: radial-gradient(circle, currentColor 0 1.4px, transparent 1.9px) 0 50% / 8px 4px repeat-x; }
.faq-list summary:hover { background: color-mix(in oklch, var(--surface-2), var(--cacau) 5%); }
.faq-q { font: 650 18px/1.3 var(--f-text); }
.faq-list summary .i { transition: rotate var(--d-settle) var(--e-settle); }
.faq-list details[open] summary { clip-path: var(--tf); transform: translateY(-3px) rotate(-.6deg); }
.faq-list details[open] summary::after { opacity: 0; }
.faq-list details[open] summary .i { rotate: 180deg; }
.faq-a { padding: 12px 18px 20px; color: var(--ink-muted); max-width: 65ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] .faq-a { animation: faq-in 300ms var(--e-settle) both; }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- final CTA ---------- */
.cta { padding-block: 40px; }
.cta-pack { background: var(--manga); color: var(--cacau); padding: 44px 24px 40px; display: grid; gap: 22px; justify-items: start; }
.cta-pack .wm { font-size: clamp(64px, 17vw, 180px); }
.cta-pack > * { max-width: 100%; }
.cta-pack h2 { --wdth: 86; font-size: clamp(30px, 7vw, 56px); font-weight: 860; text-wrap: balance; }
.cta-pack .pchip { background: var(--creme); }
@media (max-width: 420px) { .pchip { font-size: 15px; padding-inline: 10px 12px; gap: 6px 8px; } .pchip .num { font-size: 18px; } .cta-pack { padding-inline: 16px; } }
.cta-pack .os { color: var(--cacau); }
@media (min-width: 900px) { .cta-pack { padding: 64px 56px; } }

/* ---------- tool page: steps as a torn coupon strip on the tool's flavour band ---------- */
.steps-sec .coupons li { background: var(--creme); color: var(--cacau); --display-accent: var(--caramelo-tinta); --perf: var(--cacau-claro); }
@media (prefers-color-scheme: dark) {
  .steps-sec .coupons li { background: var(--noite); color: var(--creme); --display-accent: var(--caramelo-claro); --perf: var(--manteiga-fosca); }
}
.coupons { display: grid; max-width: 860px; }
.coupons li { position: relative; background: var(--surface); padding: 22px 20px; display: grid; grid-template-columns: 60px minmax(0, 1fr);
              gap: 14px; align-items: center; }
.coupons li:first-child { border-radius: var(--r-seal) var(--r-seal) 0 0; }
.coupons li:last-child { clip-path: var(--tf); padding-bottom: 28px; }
.coupons li + li::before { content: ""; position: absolute; left: 10px; right: 10px; top: -2px; height: 4px; color: var(--perf); opacity: var(--perf-alpha);
  background: radial-gradient(circle, currentColor 0 1.4px, transparent 1.9px) 0 50% / 8px 4px repeat-x; }
.coupons .n { --wdth: 70; font: 900 60px/.8 var(--f-number); font-stretch: calc(var(--wdth) * 1%); color: var(--display-accent); font-variant-numeric: tabular-nums; }
.coupons .t { font: 800 22px/1.1 var(--f-display); font-stretch: 92%; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .coupons { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: none; }
  .coupons li { grid-template-columns: none; align-content: start; padding: 28px 24px 34px; }
  .coupons li:first-child { border-radius: var(--r-seal) 0 0 var(--r-seal); }
  .coupons li + li::before { left: -2px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto;
    background: radial-gradient(circle, currentColor 0 1.4px, transparent 1.9px) 50% 0 / 4px 8px repeat-y; }
}

/* ---------- template pack cover ---------- */
.cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
         background: var(--fl, var(--manga)); color: var(--fl-ink, var(--cacau)); }
.cover .mini { width: 28px; height: 38px; background: currentColor; }
.cover-t { --wdth: 80; font-size: clamp(34px, 10vw, 64px); font-weight: 900; }
.pk-t { display: none; }
@media (min-width: 900px) { .pk-t { display: block; --wdth: 74; font-size: clamp(56px, 6vw, 104px); font-weight: 900; text-wrap: balance; } }

/* ---------- language list, lost pack ---------- */
.lost { padding-block: 16px 48px; }
.grp { font: 760 22px/1.1 var(--f-display); font-stretch: 96%; margin: 8px 0 12px; }
.langs { columns: 2 160px; column-gap: 24px; margin-bottom: 28px; }
.langs li { break-inside: avoid; }
.langs a { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1.5px dotted var(--line-strong); text-decoration: none; font: 600 18px/1.2 var(--f-text);
           unicode-bidi: plaintext; text-align: start; }
.langs a:hover { color: var(--ink-accent); }

/* ---------- footer ---------- */
.foot { padding-block: 28px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 8px; }
.foot a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font: 600 15px/1.2 var(--f-text);
          text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); }
.foot .brand { font-size: 22px; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
:root{--tt:polygon(0% 0%,100% 0%,100.00% 46.84%,98.53% 48.25%,96.66% 49.10%,95.11% 49.64%,93.69% 49.82%,92.37% 50.17%,90.43% 50.40%,89.23% 50.64%,87.59% 49.74%,85.77% 49.52%,84.65% 50.90%,82.78% 51.81%,81.11% 51.48%,79.40% 50.48%,78.07% 52.38%,76.72% 50.49%,75.08% 50.93%,73.27% 50.72%,71.89% 51.18%,70.40% 50.06%,69.00% 51.04%,67.46% 50.60%,65.48% 50.61%,63.81% 50.60%,62.80% 51.20%,60.86% 50.84%,59.16% 51.03%,58.08% 50.37%,56.02% 50.19%,54.50% 51.53%,53.06% 50.53%,51.67% 50.31%,49.97% 50.31%,48.71% 49.70%,46.77% 48.55%,45.12% 49.60%,43.85% 47.96%,42.42% 48.38%,40.49% 48.43%,39.29% 49.05%,37.25% 48.71%,35.79% 48.80%,34.44% 49.87%,32.74% 50.43%,31.55% 49.79%,29.42% 49.68%,28.39% 49.36%,26.61% 49.26%,24.89% 49.48%,23.60% 49.21%,21.87% 48.34%,20.06% 49.71%,18.66% 48.83%,16.94% 48.71%,15.47% 48.70%,14.04% 49.95%,12.50% 49.72%,10.86% 49.01%,9.18% 50.58%,7.58% 50.59%,6.08% 52.04%,4.77% 52.23%,2.97% 50.32%,1.30% 52.66%,0.00% 50.92%);--tr:polygon(0% 0%,100% 0%,100.00% 47.55%,98.53% 49.22%,96.66% 50.04%,95.11% 51.11%,93.69% 51.08%,92.37% 51.86%,90.43% 51.18%,89.23% 51.90%,87.59% 51.02%,85.77% 50.38%,84.65% 51.82%,82.78% 53.06%,81.11% 53.10%,79.40% 52.22%,78.07% 53.86%,76.72% 51.95%,75.08% 51.74%,73.27% 52.26%,71.89% 52.03%,70.40% 51.73%,69.00% 52.13%,67.46% 51.62%,65.48% 52.27%,63.81% 52.10%,62.80% 52.53%,60.86% 52.58%,59.16% 51.94%,58.08% 51.61%,56.02% 51.93%,54.50% 52.30%,53.06% 51.39%,51.67% 51.65%,49.97% 52.00%,48.71% 51.12%,46.77% 49.80%,45.12% 51.06%,43.85% 49.04%,42.42% 49.81%,40.49% 49.54%,39.29% 50.43%,37.25% 49.48%,35.79% 50.59%,34.44% 50.85%,32.74% 51.25%,31.55% 50.90%,29.42% 51.38%,28.39% 50.51%,26.61% 50.26%,24.89% 50.20%,23.60% 50.16%,21.87% 49.14%,20.06% 51.32%,18.66% 49.74%,16.94% 49.95%,15.47% 49.90%,14.04% 51.15%,12.50% 51.12%,10.86% 49.94%,9.18% 52.38%,7.58% 51.56%,6.08% 52.83%,4.77% 53.71%,2.97% 51.16%,1.30% 54.42%,0.00% 51.87%);--tb:polygon(0.00% 50.92%,1.30% 52.66%,2.97% 50.32%,4.77% 52.23%,6.08% 52.04%,7.58% 50.59%,9.18% 50.58%,10.86% 49.01%,12.50% 49.72%,14.04% 49.95%,15.47% 48.70%,16.94% 48.71%,18.66% 48.83%,20.06% 49.71%,21.87% 48.34%,23.60% 49.21%,24.89% 49.48%,26.61% 49.26%,28.39% 49.36%,29.42% 49.68%,31.55% 49.79%,32.74% 50.43%,34.44% 49.87%,35.79% 48.80%,37.25% 48.71%,39.29% 49.05%,40.49% 48.43%,42.42% 48.38%,43.85% 47.96%,45.12% 49.60%,46.77% 48.55%,48.71% 49.70%,49.97% 50.31%,51.67% 50.31%,53.06% 50.53%,54.50% 51.53%,56.02% 50.19%,58.08% 50.37%,59.16% 51.03%,60.86% 50.84%,62.80% 51.20%,63.81% 50.60%,65.48% 50.61%,67.46% 50.60%,69.00% 51.04%,70.40% 50.06%,71.89% 51.18%,73.27% 50.72%,75.08% 50.93%,76.72% 50.49%,78.07% 52.38%,79.40% 50.48%,81.11% 51.48%,82.78% 51.81%,84.65% 50.90%,85.77% 49.52%,87.59% 49.74%,89.23% 50.64%,90.43% 50.40%,92.37% 50.17%,93.69% 49.82%,95.11% 49.64%,96.66% 49.10%,98.53% 48.25%,100.00% 46.84%,100% 100%,0% 100%)}
:root{--tf:polygon(0 0,100% 0,100.0% calc(100% - 5.5px),97.5% calc(100% - 5.8px),95.0% calc(100% - 4.5px),92.5% calc(100% - 5.7px),90.0% calc(100% - 2.0px),87.5% calc(100% - 4.4px),85.0% calc(100% - 3.7px),82.5% calc(100% - 5.8px),80.0% calc(100% - 2.4px),77.5% calc(100% - 5.4px),75.0% calc(100% - 5.9px),72.5% calc(100% - 2.1px),70.0% calc(100% - 2.0px),67.5% calc(100% - 5.4px),65.0% calc(100% - 1.0px),62.5% calc(100% - 1.6px),60.0% calc(100% - 4.1px),57.5% calc(100% - 1.7px),55.0% calc(100% - 5.0px),52.5% calc(100% - 1.8px),50.0% calc(100% - 4.8px),47.5% calc(100% - 5.6px),45.0% calc(100% - 2.4px),42.5% calc(100% - 2.1px),40.0% calc(100% - 1.1px),37.5% calc(100% - 3.9px),35.0% calc(100% - 3.7px),32.5% calc(100% - 2.2px),30.0% calc(100% - 3.3px),27.5% calc(100% - 1.6px),25.0% calc(100% - 5.5px),22.5% calc(100% - 4.2px),20.0% calc(100% - 5.7px),17.5% calc(100% - 3.3px),15.0% calc(100% - 1.1px),12.5% calc(100% - 5.6px),10.0% calc(100% - 4.7px),7.5% calc(100% - 5.7px),5.0% calc(100% - 5.0px),2.5% calc(100% - 4.7px),0.0% calc(100% - 4.1px))}