/* The presentations of Agente3: the narrated story (/apresentacao/), the pitch
   (/apresentacao/pitch/) and the training (/apresentacao/treinamento/). One
   sheet for the three (owner, 11 Nov 2026: "WORK ON THE PRESENTATION PAGE, MAKE
   SUBSTANTIAL IMPROIVEMENTS, ALSO MAKE A PITCH STYLE PRESNETATION, AND THEN
   ANOTHER ONE THAT WILL BE A TRAINING STYLE PRESENTATION"). They look like the
   homepage of 11 Nov 2026: white scenes, the forest green bar, Barlow
   Condensed headings, the people cut out with their light green contour, flat
   square cards and no shadows.

   Sizes. Everything on a slide is sized in --u, one hundred and sixtieth of
   the widest 16:9 picture that fits between the bar and the footer, so a
   slide keeps its proportions from a laptop to a 2500 px monitor (until now a
   big window had the same small text in a sea of space). A window taller
   than wide, or a phone, is "upright": the words go over the picture, --u
   follows the width alone and a slide may scroll. The condition is the
   homepage story's own. */
:root{--forest:#082d1d;--green:#075a34;--bright:#098045;--mint:#c7f2a9;--cream:#f3f6ee;--yellow:#ffc72c;--ink:#0b1f14;--text:#304e3b;--line:#d7e0d3;--blue:#005bd3;--sans:Urbanist,system-ui,sans-serif;--display:'Barlow Condensed',system-ui,sans-serif;--whatsapp-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--top:64px;--foot:72px;--footer-height:72px;--room:calc(100svh - var(--top) - var(--footer-height));--u:clamp(5.4px,min(100vw / 160,var(--room) / 90),17px)}
@supports not (height:1svh){:root{--room:calc(100vh - var(--top) - var(--footer-height))}}
@media (max-width:900px),(max-aspect-ratio:23/20){:root{--u:clamp(6.1px,100vw / 64,10.4px)}}
@media (max-width:760px){:root{--top:56px;--foot:64px}}
*{box-sizing:border-box}
html{background:var(--forest)}
body{margin:0;padding-bottom:var(--footer-height);color:var(--ink);font:500 18px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p,h1,h2,h3,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- the bar ---------- */
.deck-top{position:relative;z-index:3;height:var(--top);display:flex;align-items:center;gap:22px;padding:0 max(18px,4vw);background:var(--forest);color:#fff}
.brand{display:inline-flex;flex-shrink:0;align-items:center;text-decoration:none}
/* The homepage's sticker wordmark. */
.wordmark{display:inline-flex;align-items:center;padding:4px 8px;font-size:1.5rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:#000;-webkit-text-stroke:6px #fff;paint-order:stroke fill;user-select:none}
/* Which of the three presentations this is, and the way to the other two. */
.deck-switch{display:flex;align-items:center;gap:4px;margin-left:6px;padding-left:22px;border-left:1px solid #ffffff33}
.deck-switch a{padding:8px 12px;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#cfe2d2;border-bottom:2px solid transparent}
.deck-switch a:hover{color:#fff}
.deck-switch a[aria-current=page]{color:var(--yellow);border-bottom-color:var(--yellow)}
.cta{--sticker-edge:4px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:14px 28px;border:1px solid var(--yellow);border-radius:999px;background:var(--yellow);color:#000;box-shadow:0 0 0 var(--sticker-edge) #fff;font:700 17px/1.2 var(--sans);letter-spacing:.035em;text-transform:uppercase;text-decoration:none;text-align:center;transition:background-color .18s,color .18s,translate .18s}
.cta:hover{translate:0 -2px;background:var(--green);color:var(--yellow)}
.cta:active{translate:0 0}
.cta-small{--sticker-edge:3px;min-height:40px;padding:10px 20px;font-size:14px}
.deck-top .cta{margin-left:auto}
@media (max-width:760px){.deck-top{gap:10px;padding:0 16px}.wordmark{font-size:1.3rem}.deck-switch{margin-left:0;padding-left:10px;gap:0}.deck-switch a{padding:8px 7px;font-size:14px;letter-spacing:.02em}.deck-switch a:not([aria-current=page]){display:none}.deck-top .cta{padding:9px 14px;min-height:38px}}

/* ---------- a slide ---------- */
.slide{position:relative;min-height:var(--room);display:grid;place-items:center;overflow:hidden;background:#fff;color:var(--ink)}
.slide.is-cream{background:var(--cream)}
.slide.is-forest{background:var(--forest);color:#fff}
.slide.is-green{background:var(--green);color:#fff}
.slide.is-yellow{background:var(--yellow);color:var(--ink)}
.slide-inner{position:relative;width:min(100% - 12 * var(--u),148 * var(--u));padding:calc(3.5 * var(--u)) 0}
.kicker{margin-bottom:calc(2.2 * var(--u));font-size:max(14px,1.7 * var(--u));line-height:1.3;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bright)}
.is-forest .kicker,.is-green .kicker{color:var(--mint)}
.is-yellow .kicker{color:var(--green)}
.title{font:700 calc(8 * var(--u))/1.02 var(--display);letter-spacing:-.022em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.title em{font-style:normal;color:var(--green)}
.is-forest .title,.is-green .title{color:#fff}
.is-forest .title em,.is-green .title em{color:var(--yellow)}
.is-yellow .title em{color:var(--green)}
.title.is-big{font-size:calc(9.6 * var(--u))}
.title.is-small{font-size:calc(6.2 * var(--u))}
.lead{max-width:36em;margin-top:calc(2.6 * var(--u));font-size:max(17px,2.7 * var(--u));line-height:1.45;color:var(--text);text-wrap:pretty}
.is-forest .lead,.is-green .lead{color:#e0eee1}
.is-yellow .lead{color:#33321a}
.foot{max-width:46em;margin-top:calc(2.2 * var(--u));font-size:max(14px,1.75 * var(--u));line-height:1.5;color:#405c48}
.is-forest .foot,.is-green .foot{color:#c7dfcb}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:calc(2.4 * var(--u));margin-top:calc(3.4 * var(--u))}
.actions .cta{min-height:max(52px,6.2 * var(--u));padding:max(14px,1.6 * var(--u)) max(28px,3.4 * var(--u));font-size:max(17px,2 * var(--u))}
.action-note{font-size:max(14px,1.6 * var(--u));line-height:1.4;color:#c6ddcb}
.contact{font-size:max(18px,2.3 * var(--u));font-weight:900;text-decoration:none}
.watch{display:inline-flex;align-items:center;gap:.8em;min-height:max(52px,6.2 * var(--u));padding:max(14px,1.6 * var(--u)) max(26px,3.2 * var(--u));border:0;border-radius:999px;background:var(--yellow);color:#071d11;box-shadow:0 0 0 4px #fff;font-size:max(17px,2 * var(--u));font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.watch:hover{translate:0 -2px}

/* Words beside a picture: the commonest slide. */
.s-split .slide-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:calc(7 * var(--u))}
.s-split.is-wide-visual .slide-inner{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:calc(5 * var(--u))}
.s-split.is-flip .copy{order:2}
.copy{position:relative;z-index:2;min-width:0}
.visual{position:relative;min-width:0;display:grid;place-items:center}
/* One thought, alone and large. */
.s-statement .slide-inner{text-align:center}
.s-statement .title{font-size:calc(10 * var(--u))}
.s-statement .lead{margin-inline:auto}
.s-center .slide-inner{text-align:center}
.s-center .title.is-small{font-size:calc(7.2 * var(--u))}
.s-center .lead,.s-center .foot{margin-inline:auto}
.s-center .actions{justify-content:center}

/* ---------- pictures ---------- */
/* A person cut out, with the contour drawn into the picture (scripts/build-deck-pictures.mjs). */
.cutout{width:auto;max-width:100%;max-height:calc(62 * var(--u));object-fit:contain}
.cutout.is-tall{max-height:calc(70 * var(--u))}
.pair{display:flex;align-items:flex-end;justify-content:center;gap:calc(2 * var(--u))}
.pair .cutout{max-height:calc(58 * var(--u));min-width:0}
/* A screen of the product: the real panel with demonstration data. A press enlarges it. */
.screen{width:100%;border:1px solid #c9d6c6;background:#fff}
.is-forest .screen,.is-green .screen{border-color:#ffffff40}
.screen-bar{display:flex;align-items:center;gap:calc(.7 * var(--u));height:max(22px,3 * var(--u));padding:0 calc(1.4 * var(--u));border-bottom:1px solid #dfe7dc;background:var(--cream)}
.screen-bar i{width:max(7px,.9 * var(--u));aspect-ratio:1;border-radius:50%;background:#c3d2c0}
.screen-bar span{margin-left:calc(1.2 * var(--u));font-size:max(14px,1.35 * var(--u));font-weight:700;color:#4d6a55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-shot{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.screen-shot img{width:100%;height:auto}
.screen.is-fit .screen-shot{aspect-ratio:var(--fit,16 / 10);overflow:hidden}
.screen.is-fit .screen-shot img{height:100%;object-fit:cover;object-position:top}
.caption{margin-top:calc(1.3 * var(--u));font-size:max(14px,1.45 * var(--u));line-height:1.4;color:#4d6a55;text-align:center}
.is-forest .caption,.is-green .caption{color:#c7dfcb}
/* The customer's phone, drawn: a conversation on WhatsApp. */
.phone{width:min(100%,calc(44 * var(--u)));border:calc(.9 * var(--u)) solid #14261d;border-radius:calc(4.6 * var(--u));background:#efeae2 url(../img/app/whatsapp-chat-bg.webp) center/cover;overflow:hidden;font-family:var(--whatsapp-font)}
.phone-head{display:flex;align-items:center;gap:calc(1.3 * var(--u));padding:calc(1.8 * var(--u)) calc(2 * var(--u));background:#075e54;color:#fff}
.phone-head img{width:calc(5 * var(--u));aspect-ratio:1;border-radius:50%;background:#fff;object-fit:cover}
.phone-head strong{display:block;font-size:max(14px,2 * var(--u));line-height:1.2}
.phone-head small{display:block;font-size:max(14px,1.5 * var(--u));opacity:.85}
.phone-body{display:flex;flex-direction:column;gap:calc(1.2 * var(--u));min-height:calc(48 * var(--u));padding:calc(2 * var(--u)) calc(1.6 * var(--u)) calc(2.4 * var(--u))}
.bubble{max-width:86%;padding:calc(1.2 * var(--u)) calc(1.6 * var(--u));border-radius:calc(1.2 * var(--u));background:#fff;color:#111b21;font-size:max(14px,1.95 * var(--u));line-height:1.35;align-self:flex-start}
.bubble.is-out{align-self:flex-end;background:#d9fdd3}
.bubble b{font-weight:700}
.bubble small{display:block;margin-top:.3em;font-size:max(14px,1.4 * var(--u));color:#54656f}
.bubble-product{display:flex;align-items:center;gap:calc(1.4 * var(--u));width:86%;padding:calc(1 * var(--u));border-radius:calc(1.2 * var(--u));background:#fff;color:#111b21;font-size:max(14px,1.95 * var(--u));line-height:1.3}
.bubble-product img{width:calc(12 * var(--u));aspect-ratio:1;object-fit:contain;background:#f6f8f6}
.bubble-product b{display:block;color:#075e54}
.bubble-button{width:86%;padding:calc(1.2 * var(--u));border-radius:calc(1.2 * var(--u));background:#fff;color:#027eb5;font-size:max(14px,1.95 * var(--u));font-weight:600;text-align:center}
.bubble-done{align-self:center;padding:calc(.7 * var(--u)) calc(1.6 * var(--u));border-radius:999px;background:#075e54;color:#fff;font-size:max(14px,1.6 * var(--u));font-weight:700}

/* ---------- lists of things ---------- */
/* Cards: flat and square, a green line on top. */
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:calc(2.4 * var(--u));margin-top:calc(4.4 * var(--u));text-align:left}
.card{padding:calc(3.2 * var(--u)) calc(3 * var(--u)) calc(3.4 * var(--u));border-top:max(3px,.45 * var(--u)) solid var(--green);background:var(--cream)}
.is-cream .card{background:#fff}
.is-forest .card,.is-green .card{background:#ffffff12;border-top-color:var(--yellow)}
.card-mark{display:block;margin-bottom:calc(1.4 * var(--u));font:800 calc(5 * var(--u))/1 var(--display);color:var(--bright)}
.is-forest .card-mark,.is-green .card-mark{color:var(--yellow)}
.card h3{font:700 calc(3.8 * var(--u))/1.08 var(--display);letter-spacing:-.01em;text-transform:uppercase}
.card p{margin-top:calc(1.4 * var(--u));font-size:max(16px,2.25 * var(--u));line-height:1.45;color:var(--text)}
.is-forest .card p,.is-green .card p{color:#dcebdd}
/* Steps in a row, each under its number: how it works. */
.steps{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:calc(2.4 * var(--u));margin-top:calc(4.6 * var(--u));text-align:left;counter-reset:step}
.steps li{position:relative;padding-top:calc(8.8 * var(--u));counter-increment:step}
.steps li:before{content:counter(step);position:absolute;top:0;left:0;display:grid;place-items:center;width:calc(6.6 * var(--u));aspect-ratio:1;border-radius:50%;background:var(--yellow);color:#000;font:800 calc(4 * var(--u))/1 var(--display)}
.steps li:after{content:'';position:absolute;top:calc(3.3 * var(--u));left:calc(8 * var(--u));right:calc(-1.2 * var(--u));border-top:2px dashed #b9cbb6}
.steps li:last-child:after{display:none}
.is-forest .steps li:after,.is-green .steps li:after{border-top-color:#ffffff40}
.steps h3{font:700 calc(3.7 * var(--u))/1.08 var(--display);text-transform:uppercase}
.steps p{margin-top:calc(1.2 * var(--u));font-size:max(16px,2.25 * var(--u));line-height:1.45;color:var(--text)}
.is-forest .steps p,.is-green .steps p{color:#dcebdd}
/* What to do on a screen, one line a step, numbered like the marks on its picture. */
.todo{display:grid;gap:calc(1.5 * var(--u));margin-top:calc(2.8 * var(--u));counter-reset:todo}
.todo li{position:relative;padding-left:calc(5.4 * var(--u));min-height:calc(3.8 * var(--u));font-size:max(17px,2.15 * var(--u));line-height:1.4;color:var(--text);counter-increment:todo}
.todo li:before{content:counter(todo);position:absolute;left:0;top:calc(-.2 * var(--u));display:grid;place-items:center;width:calc(3.8 * var(--u));min-width:26px;aspect-ratio:1;border-radius:50%;background:var(--yellow);color:#000;font:800 max(15px,2.2 * var(--u))/1 var(--display)}
.todo b{color:var(--ink);font-weight:800}
.is-forest .todo li,.is-green .todo li{color:#e0eee1}
.is-forest .todo b,.is-green .todo b{color:#fff}
/* Points with a tick: what is included, what was learned. */
.ticks{display:grid;gap:calc(1.4 * var(--u));margin-top:calc(2.8 * var(--u))}
.ticks li{position:relative;padding-left:calc(4.4 * var(--u));font-size:max(17px,2.4 * var(--u));line-height:1.4;color:var(--text)}
.ticks li:before{content:'';position:absolute;left:.2em;top:.28em;width:calc(1.9 * var(--u));min-width:13px;height:calc(1 * var(--u));min-height:7px;border-left:max(3px,.42 * var(--u)) solid var(--bright);border-bottom:max(3px,.42 * var(--u)) solid var(--bright);rotate:-45deg}
.is-forest .ticks li,.is-green .ticks li{color:#e0eee1}
.is-forest .ticks li:before,.is-green .ticks li:before{border-color:var(--yellow)}
.ticks b{color:var(--ink);font-weight:800}
.is-forest .ticks b,.is-green .ticks b{color:#fff}
.tip{margin-top:calc(2.6 * var(--u));padding:calc(1.6 * var(--u)) calc(2 * var(--u));border-left:max(4px,.5 * var(--u)) solid var(--yellow);background:var(--cream);font-size:max(16px,1.9 * var(--u));line-height:1.45;color:var(--text)}
.is-cream .tip{background:#fff}
.tip b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:calc(1 * var(--u));margin-top:calc(2.6 * var(--u))}
.chips li{padding:calc(.9 * var(--u)) calc(1.5 * var(--u));border:1px solid #d8e4d5;background:#fff;color:var(--green);font-size:max(14px,1.75 * var(--u));font-weight:800}
.is-forest .chips li,.is-green .chips li{background:#ffffff14;border-color:#ffffff55;color:#fff}

/* ---------- numbers ---------- */
.prices{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:calc(2.4 * var(--u));margin-top:calc(3.6 * var(--u))}
.price{padding:calc(2.6 * var(--u)) calc(2.4 * var(--u)) calc(2.8 * var(--u));border-top:max(4px,.5 * var(--u)) solid var(--green);background:#fff;text-align:center}
.is-white .price{background:var(--cream)}
.price strong{display:flex;align-items:baseline;justify-content:center;gap:.14em;font:700 calc(14 * var(--u))/1 var(--display);letter-spacing:-.025em;color:var(--green);white-space:nowrap}
.price strong small{font-size:max(14px,.3em);letter-spacing:0}
.price.is-minor strong{font-size:calc(9 * var(--u))}
.price span{display:block;margin-top:calc(1.4 * var(--u));font-size:max(16px,2.1 * var(--u));line-height:1.35;font-weight:700;color:var(--text)}
.price p{margin-top:calc(1 * var(--u));font-size:max(14px,1.8 * var(--u));line-height:1.45;color:#405c48}
.example{margin-top:calc(2.8 * var(--u));font-size:max(17px,2.3 * var(--u));line-height:1.4;font-weight:700;color:var(--green)}
.example span{display:block;margin-top:.3em;font-size:max(14px,1.6 * var(--u));font-weight:500;color:var(--text)}
/* The poster at the store's till, and what the customer agrees to. */
.poster{width:min(100%,calc(42 * var(--u)));padding:calc(3 * var(--u));background:var(--forest);color:#fff;text-align:center;border:calc(.8 * var(--u)) solid var(--mint)}
.poster small{display:block;font-size:max(14px,1.5 * var(--u));font-weight:800;letter-spacing:.08em;color:var(--mint)}
.poster strong{display:block;margin-top:calc(1.2 * var(--u));font:700 calc(4.4 * var(--u))/1.05 var(--display);text-transform:uppercase}
.poster img{width:calc(20 * var(--u));aspect-ratio:1;margin:calc(2.2 * var(--u)) auto calc(1.6 * var(--u));background:#fff}
.poster span{display:block;font-size:max(14px,1.7 * var(--u))}
.consent{width:min(100%,calc(42 * var(--u)));margin-top:calc(1.6 * var(--u));padding:calc(1.8 * var(--u)) calc(2.2 * var(--u));border:1px solid #cbd9c8;background:#fff;color:var(--ink);font-size:max(14px,1.7 * var(--u));line-height:1.45}
.consent strong{display:block;font-size:max(16px,2 * var(--u))}
.consent span{display:block;color:var(--green);font-weight:700}

/* ---------- the footer ---------- */
/* One fixed row keeps the navigation at hand on every slide. */
.deck-footer{position:fixed;inset:auto 0 0;z-index:10;min-height:var(--foot);display:flex;align-items:center;gap:18px;padding:10px max(18px,4vw) calc(10px + env(safe-area-inset-bottom));border-top:1px solid #d8e4d5;background:#fff;color:var(--ink)}
.deck-nav{display:flex;align-items:center;gap:14px;margin-left:auto}
#slide-count{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:#4d6a55;white-space:nowrap}
.nav-actions{display:flex;gap:8px}
.nav-actions button,.deck-tool{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbd9c8;border-radius:50%;background:#fff;color:var(--green);font-size:20px;line-height:1}
.nav-actions button:hover:not(:disabled),.deck-tool:hover{background:var(--cream)}
.nav-actions #next{background:var(--green);border-color:var(--green);color:#fff}
.nav-actions #next:hover:not(:disabled){background:var(--forest)}
.deck-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.deck-label{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#4d6a55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.progress{position:absolute;inset:-3px 0 auto;height:3px;background:#e3ebdf}
.progress span{display:block;height:100%;width:0;background:var(--bright);transition:width .25s}
/* The story's narration, at the footer's left. */
.narration-bar{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.narration-play{display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--green);color:#fff;font-size:15px;font-weight:800;white-space:nowrap}
.narration-track{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.narration-track input{flex:1;min-width:0;accent-color:var(--bright)}
#narration-time{font-size:14px;font-variant-numeric:tabular-nums;color:#4d6a55;white-space:nowrap}
.player-options{position:relative}
.player-options>summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbd9c8;border-radius:50%;list-style:none;cursor:pointer;color:var(--green);font-weight:900;letter-spacing:.05em}
.player-options>summary::-webkit-details-marker{display:none}
.options-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 32px));padding:16px;border:1px solid #cbd9c8;background:#fff;display:grid;gap:14px}
.option-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.audio-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbd9c8;border-radius:50%;background:#fff;color:var(--green);font-size:20px}
.audio-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.audio-icon .sound-off,.audio-icon[aria-pressed=true] .sound-waves{display:none}
.audio-icon[aria-pressed=true] .sound-off{display:inline}
.auto-advance{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.auto-advance input{width:18px;height:18px;accent-color:var(--bright)}
.narration-transcript>summary{cursor:pointer;font-size:15px;font-weight:800;color:var(--green)}
.narration-transcript>div{margin-top:10px;display:grid;gap:8px;font-size:15px;line-height:1.5;max-height:40svh;overflow:auto}
.narration-source{font-size:14px;color:#4d6a55}
.transcript-kicker{font-size:14px;font-weight:800;letter-spacing:.08em;color:#4d6a55}
.options-panel>button,.options-panel>a{min-height:44px;padding:0 16px;border:1px solid #cbd9c8;border-radius:999px;background:#fff;color:var(--green);font-size:15px;font-weight:800;text-decoration:none;display:flex;align-items:center;justify-content:center}
@media (max-width:1050px){#narration-play-label{display:none}.narration-play{width:44px;padding:0}.deck-label{display:none}}
@media (max-width:760px){.deck-footer{gap:10px;padding-inline:14px}.narration-bar{gap:10px}#narration-time{display:none}.deck-nav{gap:8px}.nav-actions{gap:6px}}
@media (max-width:370px){#slide-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
/* A narrow phone's bar holds the name and the button; the other presentations are in Opções. */
@media (max-width:430px){.deck-switch{display:none}.deck-top .cta{padding:9px 12px;letter-spacing:.02em}}
.options-decks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px;font-weight:800}
.options-decks span{flex-basis:100%;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4d6a55}
.options-decks a{color:var(--green);text-decoration:none;padding:6px 0}
.options-decks a[aria-current=page]{color:var(--ink)}

/* ---------- windows over the deck ---------- */
dialog{padding:0;border:0;color:var(--ink)}
dialog::backdrop{background:#031b12cc}
#screen-viewer{width:min(1500px,96vw);max-width:96vw;max-height:92svh;background:var(--cream)}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid #d8e4d5;background:#fff;font-size:15px;font-weight:700}
.viewer-toolbar button{min-height:44px;padding:0 16px;border:1px solid #cbd9c8;border-radius:999px;background:#fff;color:var(--green);font-weight:800}
.viewer-scroll{max-height:calc(92svh - 70px);overflow:auto}
.viewer-scroll img{width:100%;height:auto}
/* Índice: every slide by its title, by chapter where the deck has chapters. */
#deck-index{width:min(920px,94vw);max-width:94vw;max-height:88svh;background:#fff}
.index-list{max-height:calc(88svh - 70px);overflow:auto;padding:10px 18px 20px}
.index-list h3{margin:18px 0 6px;font:700 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bright)}
.index-list ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px}
.index-list button{display:flex;align-items:baseline;gap:10px;width:100%;padding:9px 8px;border:0;border-bottom:1px solid #e3ebdf;background:none;color:var(--ink);font-size:16px;font-weight:600;line-height:1.3;text-align:left}
.index-list button:hover{background:var(--cream)}
.index-list button[aria-current=true]{color:var(--green);font-weight:800}
.index-list button span{font:700 15px/1 var(--display);color:#6f8a75;min-width:1.8em}

/* ---------- how a slide comes ---------- */
/* The picture grows from its foot, then the words come one after another, as
   the homepage's scenes do (owner, 11 Nov 2026: "THE IMAGE GROWING AND THEN
   TEXT APPEARNING"). Only with the script, and never against a wish for less
   motion. */
@keyframes deck-rise{from{opacity:0;translate:0 calc(1.6 * var(--u))}to{opacity:1;translate:0 0}}
@keyframes deck-grow{0%{opacity:0;scale:.78}70%{opacity:1;scale:1.03}100%{opacity:1;scale:1}}
.js .slide:not([hidden]) .visual>*{animation:deck-grow .6s cubic-bezier(.2,.9,.3,1) both;transform-origin:50% 100%}
.js .slide:not([hidden]) :is(.copy,.s-statement .slide-inner,.s-center .slide-inner)>*{animation:deck-rise .45s ease both;animation-delay:calc(.28s + var(--i,0) * .09s)}
.js .slide:not([hidden]) :is(.copy,.slide-inner)>:nth-child(2){--i:1}
.js .slide:not([hidden]) :is(.copy,.slide-inner)>:nth-child(3){--i:2}
.js .slide:not([hidden]) :is(.copy,.slide-inner)>:nth-child(4){--i:3}
.js .slide:not([hidden]) :is(.copy,.slide-inner)>:nth-child(5){--i:4}
.js .slide:not([hidden]) :is(.copy,.slide-inner)>:nth-child(n+6){--i:5}
.js .slide:not([hidden]) :is(.cards,.steps,.prices)>*{animation:deck-rise .45s ease both;animation-delay:calc(.5s + var(--k,0) * .1s)}
.js .slide:not([hidden]) :is(.cards,.steps,.prices)>:nth-child(2){--k:1}
.js .slide:not([hidden]) :is(.cards,.steps,.prices)>:nth-child(3){--k:2}
.js .slide:not([hidden]) :is(.cards,.steps,.prices)>:nth-child(4){--k:3}
.js .slide:not([hidden]) :is(.cards,.steps,.prices)>:nth-child(n+5){--k:4}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
body:not(.js){padding-bottom:0}
body:not(.js) .deck-footer,body:not(.js) [data-watch]{display:none}

/* ---------- upright: a phone, or a window taller than wide ---------- */
@media (max-width:900px),(max-aspect-ratio:23/20){
  .slide{place-items:start center}
  .slide-inner{width:min(100% - 8 * var(--u),96 * var(--u));padding:calc(5 * var(--u)) 0 calc(6 * var(--u))}
  .s-split .slide-inner,.s-split.is-wide-visual .slide-inner{grid-template-columns:minmax(0,1fr);gap:calc(4.4 * var(--u))}
  .s-split.is-flip .copy{order:0}
  .s-statement,.s-center{place-items:center}
  .cards,.steps,.prices{grid-template-columns:minmax(0,1fr)}
  .cards.is-pairs,.prices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li{padding-top:0;padding-left:calc(9.4 * var(--u));min-height:calc(7 * var(--u))}
  .steps li:after{display:none}
  .cutout,.cutout.is-tall{max-height:calc(52 * var(--u))}
  .pair .cutout{max-height:calc(44 * var(--u))}
  .phone{width:min(100%,calc(48 * var(--u)))}
}
@media (max-width:560px){.prices,.cards.is-pairs{grid-template-columns:minmax(0,1fr)}.price{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 14px;text-align:left;border-top:0;border-left:4px solid var(--green);padding:14px 16px}.price strong{justify-content:flex-start;font-size:60px}.price.is-minor strong{font-size:44px}.price span{margin:0}.price p{grid-column:1 / -1}}

/* ---------- on paper ---------- */
/* File, Print gives the deck a slide a page, as a PDF to send. */
@page{size:13.333in 7.5in;margin:0}
@media print{
  :root{--u:.0833in;--room:7.5in}
  html,body{background:#fff}
  body{padding:0}
  .deck-top,.deck-footer,dialog{display:none!important}
  .slide,.slide[hidden]{display:grid!important;place-items:center;width:13.333in;height:7.5in;min-height:0;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .slide:not(:last-child){break-after:page}
  .sr-only{display:none}
  .slide-inner{width:calc(148 * var(--u));padding:0}
  .s-split .slide-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .s-split.is-wide-visual .slide-inner{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  *{animation:none!important}
  .watch,.screen-shot{cursor:auto}
}