/* Version F of the Sebalo site (2026-11-14): the concept "systems like clay, molded into any shape, to fit what
   the business already uses", in the structure of clay.com. Loaded after css/site.css and versions.css, only by
   versions/f.html. Scripts: versions/f.js. F does not load e.css: what it shares with E (pills, examples, request
   box) is copied here.
   The clay (rendered images, assets/clay) is the concept of this version, asked for by him: the tools and the lump
   of the hero and of the system cards, the bars of finished work, the tabs, the result bars. The brand book says
   flat colour; everything that is not clay stays flat. Phone text of 10 px and up.
   The parts: hero with the clay scene, the examples the visitor clicks through, the system part by part and then
   whole, the request box in two steps, a last call to action. */

/* ---------- Hero: the headline, one button, and the clay scene ---------- */
.hero--f{padding-top:calc(var(--header-h) + clamp(8px,2vw,32px));padding-bottom:clamp(20px,3vw,44px);min-height:min(100svh,960px);display:grid;align-content:center}
.fh{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.2vw,36px);justify-items:center}
.fh .hero-stage{display:block;width:100%;min-width:0}
.fh-copy{display:grid;justify-items:center;text-align:center;gap:clamp(8px,1.3vw,18px);min-width:0}
.hero--f .hero-title{font-size:clamp(2.4rem,min(1rem + 5vw,9svh),5.6rem);max-width:20ch;text-wrap:balance}
.hero--f .hero-lead{margin-top:0;max-width:44ch;text-wrap:balance}
.hero--f .cta-row{margin-top:clamp(2px,.5vw,8px);justify-content:center}
/* A low, wide screen (a notebook at 175% scaling gives the page 1097 x 550): the headline on one line, so the
   whole hero, scene included, still fits in one screen. */
@media (max-height:640px) and (min-width:900px){
  .hero--f{padding-top:calc(var(--header-h) + 4px);padding-bottom:10px}
  .hero--f .hero-title{max-width:none;font-size:clamp(2rem,8.4svh,3.1rem)}
  .hero--f .hero-lead{max-width:none;font-size:1.02rem}
  .fh{gap:8px}
  .fh-copy{gap:6px}
  .hero--f .btn{min-height:44px}
}

/* ---------- The clay scene (f.js: mold) ----------
   Tools the business already has, each with one empty slot, and one red lump that takes the shape of each slot.
   Every image is a render of the same camera (tools/clay/f_*.py), so a piece laid at a tool's slot matches it.
   The tools are <img> pairs (empty, full); the lump and its shapes are frames of a sheet, drawn on canvases. */
.mold{--tool:clamp(118px,min(19vw,36svh),280px);--gap:clamp(6px,1.6vw,26px);--home:ground;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.7fr) repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:end;width:min(100%,calc(var(--tool) * 4.7 + var(--gap) * 4));margin-inline:auto}
.mold-tool{position:relative;display:grid;justify-items:center;gap:0;min-width:0;grid-row:1}
.mold-tool[data-tool="msg"]{grid-column:1}
.mold-tool[data-tool="agenda"]{grid-column:2}
.mold-tool[data-tool="sheet"]{grid-column:4}
.mold-tool[data-tool="ponto"]{grid-column:5}
.mold-home{grid-column:3;grid-row:1;align-self:stretch;min-width:0}
.mt-img{position:relative;display:block;width:100%;aspect-ratio:1;transform-origin:50% 88%}
/* The picture has a wide clear margin around the tool (room for its shadow): it is drawn larger than its box. */
.mt-img img{--crop:1.3;position:absolute;left:calc((1 - var(--crop)) * 50%);top:calc((1 - var(--crop)) * 50% - 3%);width:calc(100% * var(--crop));height:calc(100% * var(--crop));max-width:none;pointer-events:none;user-select:none}
.js .mt-full{opacity:0}
.mt-ok{position:absolute;right:6%;top:-2%;width:19%;aspect-ratio:1;border-radius:50%;background:var(--mata);display:grid;place-items:center;z-index:2}
.js .mt-ok{transform:scale(0)}
.clay-disc .mt-ok{background:var(--clay-disc) center/108% no-repeat}
.mt-ok svg{width:56%;height:56%}
.mt-ok path{fill:none;stroke:var(--noite);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.f-still .mt-full{opacity:1}
.f-still .mt-ok{transform:none}
.mt-tag{font-size:clamp(.78rem,.7rem + .3vw,.98rem);font-weight:720;line-height:1.2;color:var(--muted);margin-top:5%}
.mold-clay{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.mold-shadow{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,rgba(14,23,38,.3),rgba(14,23,38,0));pointer-events:none}
.mold.is-wait .mold-tool,.mold.is-wait .mold-clay,.mold.is-wait .mold-shadow{opacity:0}
/* A narrow screen: the four tools in a ring, the lump in the middle. */
@media (max-width:699px){
  .mold{--tool:min(42vw,170px);--home:center;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--tool) * .2);row-gap:calc(var(--tool) * .28);width:min(100%,calc(var(--tool) * 2.2))}
  .mold-tool[data-tool="msg"]{grid-column:1;grid-row:1}
  .mold-tool[data-tool="agenda"]{grid-column:2;grid-row:1}
  .mold-tool[data-tool="sheet"]{grid-column:1;grid-row:2}
  .mold-tool[data-tool="ponto"]{grid-column:2;grid-row:2}
  .mold-home{position:absolute;left:50%;top:50%;width:0;height:0;grid-column:auto;grid-row:auto}
}

/* ---------- Pills: one finished task. The logo's bar, in clay, with words (as on E). ---------- */
.pill{position:relative;display:inline-flex;align-items:center;gap:.55em;height:var(--pill-h,34px);padding:0 .95em;border-radius:999px;font-size:var(--pill-fs,.82rem);font-weight:680;line-height:1;white-space:nowrap}
.pill b{font-weight:inherit}
.pill--done{background:var(--noite);color:var(--washi)}
.pill--lite{background:var(--washi);color:var(--noite)}
.pill-ok{flex:none;width:1.35em;height:1.35em}
.pill-ok circle{fill:var(--mata)}
.pill-ok path{fill:none;stroke:var(--noite);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.clay-src{display:none}
.clay .pill--done{background:none;isolation:isolate}
.clay .pill--done::before{content:"";position:absolute;z-index:-1;inset:calc(var(--pill-h,34px) * -.1);border:0 solid transparent;border-width:0 calc(var(--pill-h,34px) * .7333);border-image:var(--clay-noite) 0 110 fill / 0 calc(var(--pill-h,34px) * .7333) stretch;pointer-events:none}
.clay .pill--lite::before{border-image-source:var(--clay-washi)}
.clay-disc .pill--done .pill-ok{border-radius:50%;background:var(--clay-disc) center/108% no-repeat}
.clay-disc .pill--done .pill-ok circle{fill:none}

/* ---------- Examples: tabs named by result, one live motion piece (the Explorer of E) ---------- */
.xp{padding-top:clamp(36px,5vw,84px);padding-bottom:clamp(36px,5vw,84px)}
.xp .section-head{margin-bottom:clamp(16px,2.2vw,30px)}
.xp-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter) 14px;scroll-padding-inline:var(--gutter)}
.xp-tabs::-webkit-scrollbar{display:none}
@media (min-width:900px){.xp-tabs{flex-wrap:wrap;overflow:visible}}
.xp-tab{--pill-h:46px;position:relative;flex:none;min-height:var(--pill-h);padding:0 18px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink);font:inherit;font-size:.9rem;font-weight:700;white-space:nowrap;cursor:pointer;isolation:isolate;transition:color .3s,transform .3s var(--ease)}
.xp-tab:hover{transform:translateY(-2px)}
.xp-tab[aria-selected="true"]{background:var(--sol);color:var(--washi);box-shadow:none}
/* The tabs are clay bars too: cream ones, and the open one in red. */
.clay .xp-tab{background:none;box-shadow:none}
.clay .xp-tab::before{content:"";position:absolute;z-index:-1;inset:calc(var(--pill-h) * -.1);border:0 solid transparent;border-width:0 calc(var(--pill-h) * .7333);border-image:var(--clay-washi) 0 110 fill / 0 calc(var(--pill-h) * .7333) stretch;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(14,23,38,.16))}
.clay .xp-tab[aria-selected="true"]::before{border-image-source:var(--clay-sol)}
/* The bar under the open tab fills while its example plays. */
.xp-tab i{position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:3px;background:var(--washi);transform:scaleX(0);transform-origin:0 50%}
.xp-item{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,44px);border-radius:var(--radius);padding:clamp(16px,2.4vw,36px);min-width:0}
.js .xp-item:not(.is-on){display:none}
html:not(.js) .xp-item + .xp-item{margin-top:16px}
.xp-copy{display:grid;gap:clamp(14px,1.6vw,22px);align-content:center;justify-items:start;min-width:0}
.xp-copy h3{font-size:clamp(1.6rem,1.05rem + 1.9vw,2.9rem);line-height:1.06;letter-spacing:-.035em;max-width:15ch}
.xp-copy .want-ex{font-size:clamp(.95rem,.9rem + .25vw,1.1rem)}
/* An example may have a second, smaller line under its main one. */
.xp-sub{font-size:clamp(1rem,.94rem + .32vw,1.22rem);line-height:1.42;font-weight:520;max-width:34ch;margin-top:calc(clamp(14px,1.6vw,22px) * -.4)}
.xp-item.prod--noite .want-bar,.xp-item.prod--paper .want-bar{background:var(--sol)}
.xp-item.prod--sol .btn-light{--sweep:var(--noite)}
.xp-apps{display:flex;flex-wrap:wrap;gap:6px}
.xp-app{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:inherit;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:background-color .3s,color .3s}
.xp-app[aria-pressed="true"]{background:var(--noite);color:var(--washi);box-shadow:none}
.xp-stage{--xp-h:clamp(412px,calc(100svh - 84px),600px);display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-width:0}
.xp-stage .ui-story{width:100%}
@media (min-width:900px){
  .xp-item{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center}
  .xp-stage{min-height:var(--xp-h)}
  .xp-duo{grid-template-columns:calc(var(--xp-h) * .47) minmax(0,1fr);column-gap:clamp(14px,2.4vw,36px)}
}
/* A stage with room: the phone is as tall as the stage allows, never wider than its share. Its close-up at the
   start of a round is 1.15 times larger (--zoom), and that close-up must stay inside the card (his comment of
   2026-11-14: its edge came out a bit): 72 units of phone x 1.15 = 83, and the scene keeps 6 units free above and
   under the phone: 72 + 12 = 84 units is the stage's height. */
@container (min-width:440px){
  .xp-stage .mo-scene{--pu:min(1.2cqw,calc(var(--xp-h) / 84));padding:calc(var(--pu) * 6) 0}
  /* In the smaller phone the done button's second line needs the room its side margins took. */
  .xp-stage .mo-face-done{padding:0 calc(var(--pu) * 1.1);gap:calc(var(--pu) * .9)}
}
/* A narrow stage (phones): the phone above, the window under it. */
@container (max-width:439px){
  .xp-stage .mo-scene{--pu:2.1cqw;--du:1.667cqw;--zoom:1.12;--stack:1;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:8cqw;padding:0}
  .xp-stage .mo-scene > .mo-phone{grid-row:1;grid-column:1}
  .xp-stage .mo-scene > .mo-dash{grid-row:2;grid-column:1}
}
/* The smallest words of the pieces (sub-labels, hints, states) never go under 10 px here. */
.xp-stage .mo-phone :is(small,.pt-site,.pt-ring-sub,.ag-role,.ag-card span,.ag-toggle span,.ag-actions i,.ag-yes span,.ag-signed span,.ch-ctx){font-size:max(10px,calc(var(--pu) * 1.6))}
.xp-stage .ui-custom .mo-dash :is(em,small,.cs-fixed){font-size:max(10px,calc(var(--du) * 1.7))}
/* The nail salon: one phone that changes app, and the salon's agenda beside it. */
.xp-duo{row-gap:22px}
.xp-phones{display:grid;width:100%;max-width:250px;margin-inline:auto;min-width:0}
.xp-phones > .ui-story{grid-area:1/1}
.js .xp-phones > .ui-story:not(.is-on){visibility:hidden}
.xp-stage.xp-duo .mo-scene--phone{--pu:min(2.94cqw,8.2px);--zoom:1;--stack:0;row-gap:0}
.xp-stage.xp-duo .mo-scene--one{--du:min(1.667cqw,8.4px);--zoom:1;--stack:0;row-gap:0;padding:0}
.xp-stage.xp-duo .mo-scene--one > .mo-dash{grid-row:1;grid-column:1}
@media (min-width:900px){.xp-phones{max-width:none}}

/* ---------- The school example: the class's day and the period's summary (f.js: diario) ----------
   It stands on the Agenda piece's three screens and classes (css/site.css, ".ag-"); only what is new is here. */
.ui-diario .dr-card{margin-top:calc(var(--pu)*1.5);padding:calc(var(--pu)*1.5) calc(var(--pu)*1.8);gap:calc(var(--pu)*.7)}
.ui-diario .dr-chips{display:flex;flex-wrap:wrap;gap:calc(var(--pu)*.6)}
.ui-diario .dr-chips i{font-style:normal;font-weight:700;font-size:max(10px,calc(var(--pu)*1.5));line-height:1;padding:calc(var(--pu)*.7) calc(var(--pu)*1.1);border-radius:999px;background:var(--mata);color:var(--noite)}
.ui-diario .dr-kid{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--pu)*1);font-size:max(10px,calc(var(--pu)*1.6))}
.ui-diario .dr-kid b{font-size:inherit;font-weight:750;color:var(--ink)}
.ui-diario .dr-kid em{font-style:normal;font-weight:600;color:var(--muted);text-align:right}
.ui-diario .ag-teacher .mo-btn{margin-top:calc(var(--pu)*1.6)}
.ui-diario .ag-actions .ag-yes{flex:1}
.ui-diario .ag-rows li{grid-template-columns:calc(var(--du)*21) minmax(0,1fr) auto}
.ui-diario .ag-sub{margin-top:calc(var(--du)*2.2)}
/* The period's rows: the words and the number on one line, the bar under them (the words are too long for the
   Agenda piece's narrow first column). */
.ui-diario .dr-sum li{grid-template-columns:minmax(0,1fr) auto;row-gap:calc(var(--du)*.9)}
.ui-diario .dr-sum li > span:first-child{white-space:normal;overflow:visible}
.ui-diario .dr-sum .ag-meter{grid-column:1 / -1;grid-row:2}
.ui-diario .dr-sum .ag-meter i{transform:none}
.ui-diario .dr-ready{display:flex;align-items:center;gap:calc(var(--du)*1.1);margin-top:calc(var(--du)*1.8);font-size:calc(var(--du)*2.2);font-weight:750;line-height:1.2}
.ui-diario .dr-ready .mo-check{flex:none;width:calc(var(--du)*3);height:calc(var(--du)*3)}

/* ---------- The staff portal example (f.js: portal) ----------
   It stands on the Vistos piece's window rows (css/site.css, ".vs-") and the Agenda piece's phone headings; only
   what is new is here. */
.ui-portal .pl-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(var(--pu)*1);margin-top:calc(var(--pu)*1.3);padding:calc(var(--pu)*1.5) calc(var(--pu)*1.8);border-radius:calc(var(--pu)*2.2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.ui-portal .ag-head + .pl-tile{margin-top:calc(var(--pu)*2.2)}
.ui-portal .pl-tile > span:first-child{display:grid;gap:calc(var(--pu)*.3);min-width:0}
.ui-portal .pl-tile b{font-size:calc(var(--pu)*2);font-weight:750;line-height:1.2}
.ui-portal .pl-tile small{font-size:max(10px,calc(var(--pu)*1.5));font-weight:600;line-height:1.25;color:var(--muted)}
.ui-portal .pl-chips{display:grid;justify-items:end}
.ui-portal .pl-chip{grid-area:1/1;font-style:normal;font-weight:750;font-size:max(10px,calc(var(--pu)*1.5));line-height:1;padding:calc(var(--pu)*.8) calc(var(--pu)*1.3);border-radius:999px;white-space:nowrap}
.ui-portal .pl-ask{background:var(--noite);color:var(--washi);opacity:0}
.ui-portal .pl-got{background:var(--ouro);color:var(--noite);opacity:0}
.ui-portal .pl-ready{background:var(--mata);color:var(--noite)}
.ui-portal .pl-done{display:flex;align-items:flex-start;gap:calc(var(--pu)*1);margin-top:auto;padding:calc(var(--pu)*1.5) calc(var(--pu)*1.6);border-radius:calc(var(--pu)*2.2);background:var(--noite);color:var(--washi);font-size:max(10px,calc(var(--pu)*1.6));font-weight:650;line-height:1.3}
.ui-portal .pl-done .mo-check{flex:none;width:calc(var(--pu)*2.6);height:calc(var(--pu)*2.6)}
.ui-portal .vs-rows .vs-was{background:var(--ouro);color:var(--noite)}
.ui-portal .vs-rows .vs-now{background:var(--mata);color:var(--noite)}
.ui-portal .vs-rows time{font-variant-numeric:normal}

/* ---------- The system, part by part, then whole (his comment of 2026-11-14, after clay.com) ----------
   Four cards that stack: each sticks under the header and the next one slides over it. In each card one tool,
   the lump that takes the shape of its slot, and what that part then does. After the four, all of them run
   together. */
.sys{padding-top:clamp(40px,6vw,96px);padding-bottom:0;position:relative}
.sys .section-head{margin-bottom:clamp(22px,3.2vw,44px)}
.sys .section-head h2{max-width:18ch}
.stk{--peek:clamp(0px,(100svh - 660px) * .22,52px);--stk-top:calc(var(--header-h) + 10px);--stk-h:clamp(380px,calc(100svh - var(--header-h) - var(--peek) * 3 - 40px),600px);display:grid;gap:16px}
.stk-card{position:sticky;top:calc(var(--stk-top) + var(--i) * var(--peek));min-height:var(--stk-h);border-radius:var(--radius);padding:clamp(16px,2.6vw,44px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,3vw,56px);align-content:space-between;min-width:0;transform-origin:50% 0}
@media (min-width:820px){.stk-card{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);align-content:stretch;align-items:stretch}}
/* A card taller than the screen cannot stick: then the cards simply follow each other (set by f.js). */
.stk.is-flow .stk-card{position:relative;top:auto;min-height:0}
.sys-card--ouro{background:var(--ouro);color:var(--noite)}
.sys-card--paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink)}
.sys-card--noite{background:var(--noite);color:var(--washi)}
.sys-card--azul{background:#34407A;color:var(--washi)}
/* The part's name at the top, its phrase in the middle of the card's height (his comment of 2026-11-14: it stood
   at the bottom). The third row balances the first, so the phrase is centred on the whole card. */
.sys-copy{display:grid;grid-template-rows:1fr auto 1fr;gap:clamp(10px,1.4vw,18px);min-width:0}
.sys-copy .sys-n{align-self:start}
.sys-n{display:flex;align-items:center;gap:12px;font-size:clamp(.95rem,.9rem + .3vw,1.15rem);font-weight:750;line-height:1.2}
.sys-n i{width:36px;height:5px;border-radius:3px;background:var(--sol)}
.sys-card--azul .sys-n i{background:var(--ouro)}
.stk-card h3{font-size:clamp(1.9rem,1rem + 2.9vw,4rem);line-height:1.02;letter-spacing:-.045em;max-width:13ch}
@media (max-height:640px){.stk-card h3{font-size:clamp(1.7rem,1rem + 2.2vw,2.8rem)}}
/* A part that does many small jobs lists them, one per line, a size smaller. */
.stk-card h3.sys-list{font-size:clamp(1.3rem,.8rem + 1.5vw,2rem);line-height:1.12;max-width:none}
.sys-list span{display:block}
.sys-list span + span{margin-top:.14em}
@media (max-height:640px){.stk-card h3.sys-list{font-size:clamp(1.3rem,.85rem + 1.4vw,2rem)}}
.sys-stage{display:grid;align-content:center;justify-items:center;border-radius:20px;padding:clamp(10px,1.6vw,24px);background:rgba(127,127,127,.14);background:color-mix(in srgb,currentColor 8%,transparent);min-width:0}
/* One tool, with the lump on its left; under them, what that part then does. */
.mold--one{--tool:clamp(150px,min(24vw,40svh),320px);--pill-h:clamp(34px,2.4vw + 22px,46px);--pill-fs:clamp(.84rem,.74rem + .45vw,1.08rem);grid-template-columns:minmax(0,.62fr) minmax(0,1fr);width:min(100%,calc(var(--tool) * 1.62 + var(--gap)));row-gap:clamp(6px,1vw,14px)}
.mold--one .mold-home{grid-column:1}
.mold--one .mold-tool{grid-column:2}
.mold--one .mt-tag{display:none}
.mold-outs{margin-top:6%;grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--pill-h) * .4) 14px;min-height:var(--pill-h);padding-inline:calc(var(--pill-h) * .12)}
/* The finished tasks may stand a little wider than the scene, so that four of them make two rows of two. */
@media (min-width:1000px){.mold-outs{margin-inline:-18%}}
@media (max-height:640px) and (min-width:700px){.mold--one{--pill-h:34px;--pill-fs:.86rem}}
.sys-card--noite .pill--done,.sys-card--azul .pill--done{background:var(--washi);color:var(--noite)}
.clay .sys-card--noite .pill--done,.clay .sys-card--azul .pill--done{background:none}
.clay .sys-card--noite .pill--done::before,.clay .sys-card--azul .pill--done::before{border-image-source:var(--clay-washi)}
@media (max-width:699px){
  .mold--one{--tool:min(48vw,200px);--home:ground;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);column-gap:var(--gap);row-gap:8px;width:min(100%,calc(var(--tool) * 1.62 + var(--gap)))}
  .mold--one .mold-tool{grid-column:2;grid-row:1}
  .mold--one .mold-home{position:static;width:auto;height:auto;grid-column:1;grid-row:1}
}

/* All the parts at once: each tool keeps handing over finished tasks, and each one lands on a result. */
.whole{padding-top:clamp(48px,7vw,110px);padding-bottom:clamp(96px,11vw,180px)}
.whole-head{display:grid;justify-items:center;text-align:center;gap:14px;margin-bottom:clamp(40px,5vw,70px)}
.whole-head .sys-n{justify-content:center}
.whole-head h3{font-size:clamp(1.9rem,1.1rem + 2.9vw,3.8rem);line-height:1.02;letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
.whole-stage{--pill-h:clamp(30px,1.6vw + 22px,40px);--pill-fs:clamp(.78rem,.7rem + .3vw,.95rem);display:grid;gap:clamp(16px,2.6vw,36px);justify-items:center}
.whole-tools{--tool:clamp(120px,min(19vw,30svh),240px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,1.6vw,26px);width:min(100%,calc(var(--tool) * 4 + 80px))}
.whole-tools .mold-tool{grid-column:auto;grid-row:auto}
.whole-tools .mt-full{opacity:1}
.whole-pill{position:absolute;left:50%;top:0;z-index:4;margin:calc(var(--pill-h) * -.72) 0 0 0;transform:translateX(-50%);pointer-events:none}
.whole-res{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--bar-h) * .28) 12px;--bar-h:clamp(46px,3.4vw + 26px,84px)}
.res-bar{--pill-h:var(--bar-h);position:relative;display:inline-flex;align-items:center;height:var(--bar-h);padding:0 calc(var(--bar-h) * .62);border-radius:999px;font-size:calc(var(--bar-h) * .36);font-weight:720;letter-spacing:-.02em;line-height:1;white-space:nowrap;isolation:isolate;background:var(--noite);color:var(--washi)}
.res-bar[data-c="sol"]{background:var(--sol)}
.res-bar[data-c="ouro"]{background:var(--ouro);color:var(--noite)}
.res-bar[data-c="azul"]{background:#34407A}
.res-bar[data-c="mata"]{background:var(--mata);color:var(--noite)}
.clay .res-bar{background:none}
.clay .res-bar::before{content:"";position:absolute;z-index:-1;inset:calc(var(--bar-h) * -.1);border:0 solid transparent;border-width:0 calc(var(--bar-h) * .7333);border-image:var(--clay-noite) 0 110 fill / 0 calc(var(--bar-h) * .7333) stretch;pointer-events:none}
.clay .res-bar[data-c="sol"]::before{border-image-source:var(--clay-sol)}
.clay .res-bar[data-c="ouro"]::before{border-image-source:var(--clay-ouro)}
.clay .res-bar[data-c="azul"]::before{border-image-source:var(--clay-azul)}
.clay .res-bar[data-c="mata"]::before{border-image-source:var(--clay-mata)}
/* Side by side the bars of two tools would touch: every second one sits a little higher. */
.whole-tools .mold-tool:nth-child(even) .whole-pill{margin-top:calc(var(--pill-h) * -1.15)}
/* Under 900 px four tools in a row leave no room for their task bars: two by two. */
@media (max-width:899px){
  .whole-tools{--tool:min(40vw,250px);grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--pill-h) * 1.9);width:min(100%,calc(var(--tool) * 2 + 40px))}
}
@media (max-width:699px){
  .whole-stage{--pill-h:28px;--pill-fs:.72rem}
}

/* ---------- Contact: the request box, in two steps (as on E) ---------- */
.contact--e{padding-bottom:clamp(40px,5vw,72px)}
.ask{display:grid;gap:14px;min-width:0}
.ask-box{position:relative;border-radius:22px;background:var(--night-raise);box-shadow:inset 0 0 0 1.5px var(--night-line);transition:box-shadow .3s}
.ask-box:focus-within{box-shadow:inset 0 0 0 2px var(--washi)}
.ask-box textarea{display:block;width:100%;min-height:148px;resize:none;border:0;border-radius:inherit;background:transparent;color:var(--washi);font:inherit;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.45;font-weight:520;padding:18px 20px 62px}
.ask-box textarea:focus{outline:none}
.ask-box textarea::placeholder{color:#8A90B4;opacity:1}
/* While the box types an example, the example stands in for the placeholder (never for the visitor's words). */
.ask.is-typing textarea::placeholder{color:transparent}
.ask-ghost{display:none;position:absolute;left:20px;right:20px;top:18px;margin:0;pointer-events:none;color:#8A90B4;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.45;font-weight:520}
.ask.is-typing .ask-ghost{display:block}
.ask.is-filled .ask-ghost{display:none}
.ask-go{position:absolute;right:12px;bottom:12px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--washi);color:var(--noite);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease),background-color .3s}
.ask-go:hover{transform:translateX(3px)}
.ask-go svg{width:20px;height:20px}
/* First only the request box, wide and in the middle; when the visitor presses the arrow, the composer takes its
   place with their words as the message. Without scripts both show. */
.contact--e .contact-grid{grid-template-columns:minmax(0,1fr);max-width:calc(920px + 2 * var(--gutter));gap:clamp(20px,3vw,32px)}
.contact--e .contact-copy h2{text-align:center;justify-self:center}
.contact--e .contact-copy{display:contents}
.contact--e .email-line{order:3;justify-content:center;margin-top:0}
.js .contact--e:not(.is-open) .composer{display:none}
.js .contact--e.is-open .ask{display:none}
.contact--e .ask-box textarea{min-height:clamp(180px,26svh,260px);font-size:clamp(1.2rem,1.05rem + .7vw,1.7rem);padding:22px 24px 76px}
.contact--e .ask-ghost{left:24px;right:24px;top:22px;font-size:clamp(1.2rem,1.05rem + .7vw,1.7rem)}
.contact--e .ask-go{right:14px;bottom:14px;width:52px;height:52px}
.contact--e .ask-go svg{width:24px;height:24px}
.ask-back{justify-self:start;margin:-10px 0 -14px}

/* ---------- The end: one phrase, one button, and the lump that keeps changing shape ---------- */
.fin{background:var(--madrugada);color:var(--washi);padding-top:clamp(20px,3vw,48px);padding-bottom:clamp(56px,7vw,110px)}
.fin-in{display:grid;justify-items:center;text-align:center;gap:clamp(14px,2vw,26px)}
.fin-clay{width:clamp(200px,26vw,340px);height:auto;aspect-ratio:var(--fin-ar,420/320)}
html:not(.js) .fin-clay{display:none}
.fin h2{font-size:clamp(1.9rem,1.1rem + 3.2vw,4.2rem);line-height:1.02;letter-spacing:-.045em}
.fin h2 span{display:block}
main[data-page="f"] + .footer .footer-inner{border-top:0}

/* deploy/build.mjs: no sideways pan on phones */
html{overflow-x:clip}