/* Trial versions A, B and C of the Sebalo site. Loaded after css/site.css: the same look, new arrangements.
   A: small businesses, seven sections. B: agencies, one worker's journey. C: the visitor picks a business.
   Same rules as site.css: flat color, the logo's bars as the only ornament, sizes of the motion pieces in
   container units (--pu for a phone, --du for a window). */
[hidden]{display:none!important}

/* ---------- Hero piece (A, B): a motion piece inside the hero's red panel, playing on its own clock ---------- */
.panel--piece{padding:14px;min-height:0}
@media (min-width:640px){.panel--piece{padding:clamp(18px,2.2vw,24px)}}
.panel--piece .ui-story{width:100%}
/* One slot for the whole panel. In A the phone and the window take turns in it (the phone leaves before the window
   arrives, so the two never overlap); at rest the window alone shows, which is the last frame. In B it holds one
   window. The phone is as tall as the old hero phone; the window is as wide as the panel lets it be. */
.mo-scene--swap,.mo-scene--one{--pu:min(2.35cqw,clamp(7.2px,.556vw,8.05px));--du:min(1.667cqw,8.4px);--zoom:1;grid-template-columns:minmax(0,1fr);justify-items:center;padding:0}
.mo-scene--swap > .mo-phone,.mo-scene--swap > .mo-dash,.mo-scene--one > .mo-dash{grid-row:1;grid-column:1}
.mo-scene--swap > .mo-phone{opacity:0}
/* Over the red panel the travelling bar is white; it turns red once it is over the window. */
.hero .mo-packet{background:var(--washi)}

/* B's hero window: the five steps of one hire, ticking off one after the other. */
.jn-rows li{grid-template-columns:auto minmax(0,1fr) auto;height:auto;min-height:calc(var(--du)*8.6);padding-block:calc(var(--du)*1.1)}
.jn-rows time{min-width:calc(var(--du)*10.5);font-size:calc(var(--du)*2);font-weight:750;color:var(--ink)}
.jn-what{display:grid;min-width:0;line-height:1.25}
.jn-what b{font-size:calc(var(--du)*2.5);font-weight:750}
.jn-what small{font-size:calc(var(--du)*1.9);font-weight:600;color:var(--muted)}
.jn-ok{flex:none;width:calc(var(--du)*3.2);height:calc(var(--du)*3.2)}
.jn-ok circle{fill:var(--mata)}
.jn-ok path{fill:none;stroke:var(--noite);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.jn-foot{display:flex;align-items:center;gap:calc(var(--du)*1.6);margin-top:calc(var(--du)*2.4);font-size:calc(var(--du)*2.1);font-weight:750;line-height:1.3}
.jn-foot::before{content:"";flex:none;width:calc(var(--du)*3.4);height:calc(var(--du)*.8);border-radius:999px;background:var(--sol)}

/* ---------- Cards: "before" and "now" instead of a feature list ---------- */
.ba{display:grid;margin:0}
.ba-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-top:1px solid rgba(127,127,127,.4);border-top-color:color-mix(in srgb,currentColor 26%,transparent)}
.ba-row:last-child{border-bottom:1px solid rgba(127,127,127,.4);border-bottom-color:color-mix(in srgb,currentColor 26%,transparent)}
@media (min-width:560px){.ba-row{grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline}}
.ba dt{font-size:.76rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.ba dd{margin:0;font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.45;font-weight:480;max-width:42ch}
.ba-before{opacity:.74}
.ba-now dd{font-weight:650}
/* The last card of A's track asks about the visitor's own business. */
.prod--cta{background:var(--sol);color:var(--washi);--tile:var(--sol);--glyph:var(--washi);align-content:center}
.prod--cta .prod-copy{gap:22px}
.prod--cta .btn{justify-self:start;--sweep:var(--noite)}
@media (min-width:760px){.prod--cta{grid-template-columns:minmax(0,1fr)}}
.track-outer.is-h .prod--cta{width:min(52vw,600px);grid-template-columns:minmax(0,1fr)}
/* Card colors for B's steps, by color (steps 1 and 5 keep the colors of their own pieces). */
.prod--mata{background:var(--mata);color:var(--noite);--tile:var(--mata);--glyph:var(--washi)}
.prod--paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.prod--paper .mo-dash{box-shadow:inset 0 0 0 1px var(--line-strong)}
.prod--sol{background:var(--sol);color:var(--washi);--tile:var(--sol);--glyph:var(--washi)}
.prod--sol .mo-packet{background:var(--washi)}

/* ---------- One line about languages (A, C) ---------- */
.oneline{border-block:1px solid var(--line);padding-block:clamp(32px,4.4vw,64px)}
.oneline .wrap{display:grid;gap:clamp(12px,1.4vw,20px)}
.oneline-hi{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(14px,1.8vw,26px);font-size:.95rem;font-weight:700;color:var(--muted)}
.oneline-hi span{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.oneline-hi span + span::before{content:"";width:18px;height:4px;border-radius:3px;background:var(--sol)}
.oneline-text{font-size:clamp(1.6rem,1rem + 2.3vw,3.2rem);line-height:1.12;letter-spacing:-.035em;font-weight:620;max-width:24ch}

/* ---------- How it works: one line under the steps ---------- */
.how-note{display:flex;align-items:center;gap:12px;margin-top:clamp(36px,4.5vw,64px);font-weight:750;font-size:clamp(1.05rem,1rem + .35vw,1.3rem);line-height:1.3}
.how-note::before{content:"";flex:none;width:30px;height:4px;border-radius:3px;background:var(--sol)}

/* ---------- Story without the promises: the title on one side, the text on the other ---------- */
.story-grid--split{align-items:start}
@media (min-width:1024px){.story-grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* The story now runs into the navy trust section, so the three bars arrive in its color. */
.nightfall--noite i{background:var(--noite)}

/* ---------- B: the journey ---------- */
.prod-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-weight:750}
.prod-when span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;opacity:.78}
.prod-when time{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:.86rem;font-variant-numeric:tabular-nums}
.journey{gap:0}
/* Between two steps: a red thread through the note that says what happened in between. */
.jr-link{display:grid;justify-items:start;gap:12px;padding-left:clamp(24px,4vw,56px)}
.jr-line{display:block;width:5px;height:clamp(30px,3.6vw,48px);border-radius:3px;background:var(--sol);transform-origin:50% 0}
.jr-line:first-child{border-top-left-radius:0;border-top-right-radius:0}
.jr-line:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}
.jr-text{font-weight:700;font-size:clamp(1rem,.95rem + .35vw,1.25rem);line-height:1.35;max-width:46ch;font-variant-numeric:tabular-nums}
.jr-end .jr-text{display:flex;align-items:center;gap:12px}
.jr-done{flex:none;width:30px;height:30px}
.jr-done circle{fill:var(--mata)}
.jr-done path{fill:none;stroke:var(--noite);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Integração (step 2): the worker picks a language, reads the guide and confirms; the agency sees who read it. */
.ob-layers{flex:1;min-height:0;display:grid}
.ob-pick,.ob-guide{grid-area:1/1;display:flex;flex-direction:column;min-height:0;min-width:0}
/* At rest the guide shows, finished: the last frame. */
.ob-pick{opacity:0}
.ob-sub{margin-top:calc(var(--pu)*.8);font-size:calc(var(--pu)*1.75);font-weight:600;color:var(--muted)}
.ob-langs{display:grid;gap:calc(var(--pu)*1.1);margin-top:calc(var(--pu)*2.6)}
.ob-lang{position:relative;display:block;padding:calc(var(--pu)*1.5) calc(var(--pu)*2);border-radius:calc(var(--pu)*2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);font-style:normal;font-weight:750;font-size:calc(var(--pu)*2.1);line-height:1.2}
.ob-lang-pick{--touch:rgba(248,246,241,.38);--ripple:rgba(14,23,38,.45);background:var(--noite);color:var(--washi);box-shadow:none}
.ob-progress{display:flex;align-items:center;gap:calc(var(--pu)*1.2);margin-top:calc(var(--pu)*2)}
.ob-track{flex:1;height:calc(var(--pu)*1);border-radius:999px;background:var(--line);overflow:hidden}
.ob-fill{display:block;height:100%;border-radius:inherit;background:var(--sol);transform-origin:0 50%}
.ob-n{font-size:calc(var(--pu)*1.7);font-weight:750;font-variant-numeric:tabular-nums}
.ob-deck{display:grid}
.ob-slide{grid-area:1/1}
.ob-slide:not(:last-child){opacity:0}

/* Assinatura (step 3): the contract on the worker's phone, signed with a finger, with the two document photos. */
.sg-id{display:flex;align-items:center;gap:calc(var(--pu)*.8);margin-top:calc(var(--pu)*1.1);font-size:calc(var(--pu)*1.45);font-weight:700;color:var(--muted);line-height:1.25}
.sg-id .mo-check{width:calc(var(--pu)*2);height:calc(var(--pu)*2)}
.sg-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--pu)*1);margin-top:calc(var(--pu)*1.4)}
.sg-doc{display:flex;align-items:center;gap:calc(var(--pu)*.7);min-width:0;padding:calc(var(--pu)*1.1) calc(var(--pu)*1.1);border-radius:calc(var(--pu)*1.6);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:calc(var(--pu)*1.45);font-weight:700;line-height:1.2}
.sg-doc .mo-check{width:calc(var(--pu)*2.1);height:calc(var(--pu)*2.1)}
.sg-doc span{min-width:0}

/* 個別契約書 (step 4): the coordinator's one click, and the window where the four documents write themselves. */
.kb-list{display:grid;gap:calc(var(--pu)*.5);margin-top:calc(var(--pu)*.6)}
.ag-card > .kb-list span{display:flex;justify-content:space-between;gap:calc(var(--pu)*1);font-size:calc(var(--pu)*1.5);font-weight:600;color:var(--muted)}
.ag-card > .kb-list b{font-size:inherit;font-weight:750;color:var(--ink);text-align:right}
.kb-doc{position:relative;min-height:calc(var(--du)*15)}
.ui-kobetsu .mo-clock,.ui-hero .mo-clock{flex:none;white-space:nowrap}
.kb-doc > b{letter-spacing:0}
.kb-to{font-size:calc(var(--du)*1.7);font-weight:650;color:var(--muted);line-height:1.25}
.kb-rows li{grid-template-columns:minmax(0,1fr) auto}
.kb-rows li > span:first-child{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-rows [data-state="ok"] .st{background:var(--mata);color:var(--noite)}
.kb-rows [data-state="cal"] .st{background:var(--noite);color:var(--washi)}

/* ---------- C: the first screen's question is a real conversation on the hero phone ---------- */
/* A new conversation starts at the top of the screen, as in the app, so the six answers sit high on the page.
   Once it is longer than the screen the newest messages stay in view (Picker sets is-full). */
#pick-list{top:0;bottom:auto}
#pick-list.is-full{top:auto;bottom:0}
.msg--pick{max-width:100%}
.pick-opts{gap:7px}
button.slot{border:0;margin:0;font:inherit;font-size:.78rem;font-weight:750;line-height:1.2;min-height:34px;padding:7px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone-screen[data-app] button.slot{font-weight:600}
@media (hover:hover){.phone-screen[data-app] button.slot:not(:disabled):hover{background:var(--accent);color:#FFF;box-shadow:none}}
button.slot:focus-visible{outline:3px solid var(--sol);outline-offset:2px}
button.slot:disabled{cursor:default}
button.slot:disabled:not(.is-picked){opacity:.5}

/* ---------- D: what the owner wants (2026-11-14). Results first; systems only as one short example each. ---------- */
/* The hero window: one owner's week. Each row is something that takes time; one at a time a row turns automatic
   and its hours come back. At rest every row is automatic: the last frame. */
.gg-kpi{display:flex;align-items:baseline;gap:calc(var(--du)*1.8);margin-top:calc(var(--du)*2.4);padding:calc(var(--du)*2.2) calc(var(--du)*2.4);border-radius:calc(var(--du)*2.2);background:var(--washi);box-shadow:inset 0 0 0 1px var(--line)}
.gg-back{flex:none;font-size:calc(var(--du)*5.8);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.gg-kpi span{font-size:calc(var(--du)*2.1);font-weight:650;color:var(--muted);line-height:1.3}
.gg-rows li{grid-template-columns:minmax(0,1fr) auto}
.gg-state{display:grid}
.gg-state small{grid-area:1/1}
.jn-what .gg-was{color:var(--sol);font-weight:750;opacity:0}
.ui-hero .gg-count{font-variant-numeric:tabular-nums}

/* Four results. Each card: the wish in big type, one sentence, then one example as "before" and "now". */
.wants{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(72px,10vw,150px)}
.want-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.want-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.want{display:grid;grid-template-rows:auto 1fr;gap:clamp(28px,3.4vw,52px);border-radius:var(--radius);padding:clamp(24px,3.4vw,48px);min-width:0}
.want-head{display:grid;gap:14px;align-content:start;min-width:0}
.want h3{font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);line-height:1.02;letter-spacing:-.04em;max-width:13ch}
.want-body{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.42;font-weight:520;max-width:30ch}
.want-proof{display:grid;gap:12px;align-content:end;min-width:0}
.want-ex{display:flex;align-items:center;gap:12px;font-size:.88rem;font-weight:750;line-height:1.3}
.want-bar{flex:none;width:30px;height:4px;border-radius:3px;background:currentColor;transform-origin:0 50%}
.want--noite{background:var(--noite);color:var(--washi)}
.want--sol{background:var(--sol);color:var(--washi)}
.want--paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.want--mata{background:var(--mata);color:var(--noite)}
.want--noite .want-bar,.want--paper .want-bar{background:var(--sol)}
.want .ba-before{opacity:.82}

/* Under the "nothing new to learn" line: the languages, small. */
.oneline-sub{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.5;color:var(--muted);font-weight:520;max-width:44ch}
/* The row of tools wraps on a phone. There the red dashes between the names go, so no row starts with one. */
@media (max-width:599px){.oneline-hi--wrap{gap:6px 18px}.oneline-hi--wrap span + span::before{content:none}}

/* ---------- D, second round (2026-11-14): the note under the hero buttons, and one automation on three apps ---------- */
.cta-note{margin-top:14px;font-size:.92rem;font-weight:600;color:var(--muted)}

/* A stage with one phone and nothing else: the phone is as big as its column lets it be. */
.mo-scene--phone{--pu:min(1.95cqw,8.6px);grid-template-columns:minmax(0,1fr);justify-items:center;padding:0}
.mo-scene--phone > .mo-phone{grid-row:1;grid-column:1}
.prod--noite{background:var(--noite);color:var(--washi);--tile:var(--noite);--glyph:var(--washi)}
.prod--noite .want-bar{background:var(--sol)}
.prod--paper .want-bar{background:var(--sol)}
.demo .prod .want-ex{font-variant-numeric:tabular-nums}
/* Stacked page: copy over the phone on narrow cards; side by side from 760 px, the phone in the narrower column. */
@media (min-width:760px){.demo .track-outer:not(.is-h) .prod--chan{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
.demo .track-outer:not(.is-h) .mo-scene--phone{--pu:min(1.95cqw,7.4px)}
/* Sideways: small cards, so the next one shows at the edge. Sizes come from the height of the screen, so the
   whole card fits from 500 px of height up (his notebook gives the page 550). */
.demo .track-outer.is-h .track{padding-top:calc(var(--header-h) * .5)}
.demo .track-outer.is-h .prod{--card-h:min(calc(100svh - var(--header-h) - 24px),720px);height:var(--card-h);padding-block:clamp(18px,3vh,32px)}
.demo .track-outer.is-h .prod--chan{width:min(72vw,880px);grid-template-columns:minmax(0,1fr) auto}
.demo .track-outer.is-h .prod--chan .ui-story{width:calc(var(--card-h) * .9 / 72 * 34)}
.demo .track-outer.is-h .mo-scene--phone{--pu:calc(var(--card-h) * .9 / 72)}
.demo .track-outer.is-h .prod--sum{width:min(80vw,1000px);grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.demo .prod h3{max-width:13ch}

/* The client's first message is a normal sentence, not a picked time. */
.ch-ask{font-weight:500}
.ch-ctx{align-self:flex-end;font-size:calc(var(--pu)*1.8);font-weight:600;color:#737373}
/* Instagram and Messenger looks for the motion chat (WhatsApp is the plain look, LINE is in site.css). Inside the
   phone the colours are each app's own; the frame and the card stay Sebalo's. */
.mo-chat--ig,.mo-chat--ms{background:#FFF}
.mo-chat--ig .mo-status,.mo-chat--ig .mo-chat-head,.mo-chat--ms .mo-status,.mo-chat--ms .mo-chat-head{background:#FFF}
.mo-chat--ig .mo-chat-head,.mo-chat--ms .mo-chat-head{border-bottom-color:#EFEFEF}
.mo-chat--ig .mo-chat-head small{color:#737373}
.mo-chat--ms .mo-chat-head small{color:#65676B}
.mo-chat--ig .mo-msg,.mo-chat--ms .mo-msg{border-radius:calc(var(--pu)*2.4);box-shadow:none;background:#EFEFEF;color:#050505}
.mo-chat--ig .mo-out{background:linear-gradient(135deg,#9B3BFF,#5B51F8 55%,#3B82F6);color:#FFF}
.mo-chat--ms .mo-out{background:#0A7CFF;color:#FFF}
.mo-chat--ig .mo-done .mo-check circle{fill:#5B51F8}
.mo-chat--ms .mo-done .mo-check circle{fill:#0A7CFF}
.mo-chat--ig .rs-slots i{color:#5B51F8;box-shadow:inset 0 0 0 1px #DBDBDB}
.mo-chat--ms .rs-slots i{color:#0A7CFF;box-shadow:inset 0 0 0 1px #DBDBDB}
.mo-chat--ig .rs-slots .rs-pick{background:#5B51F8;color:#FFF;box-shadow:none}
.mo-chat--ms .rs-slots .rs-pick{background:#0A7CFF;color:#FFF;box-shadow:none}
.mo-chat--ig .mo-chat-input,.mo-chat--ms .mo-chat-input{background:#F0F0F0;color:#65676B}
.mo-chat--ms .mo-avatar{position:relative}
.mo-chat--ms .mo-avatar::after{content:"";position:absolute;right:0;bottom:0;width:calc(var(--pu)*1.3);height:calc(var(--pu)*1.3);border-radius:50%;background:#31A24C;box-shadow:0 0 0 calc(var(--pu)*.3) #FFF}

/* The salon's agenda: what was booked, when, and the app it came from. */
.na-rows .st{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.prod--mata .mo-dash{box-shadow:none}
/* The three free times stay on one row, so the whole conversation fits the screen. */
.ch-offer{max-width:100%}
.ch-offer .rs-slots{flex-wrap:nowrap}
.ch-offer .rs-slots i{padding:calc(var(--pu)*.6) calc(var(--pu)*1.1);white-space:nowrap}