/* Layout: a day in one scroll. Night opening, morning page on Washi, night again at the contact.
   The logo's three bars are the only motion and the only ornament. Flat color, no gradients, glows or glass. */
:root{
  --washi:#F8F6F1;
  --paper:#FFFDF9;
  --sol:#C8102E;
  --noite:#0E1726;
  --madrugada:#0A0D22;
  --ouro:#FEDD00;
  --mata:#009C3B;

  --ink:#0E1726;
  --muted:#59627A;
  --line:#E2DCCF;
  --line-strong:#CFC7B7;
  --night-ink:#F8F6F1;
  --night-muted:#A9AECB;
  --night-line:#2A3157;
  --night-raise:#121736;
  --ponto-raise:#17213B;

  --font:"Plus Jakarta Sans","Zen Maru Gothic","Hiragino Sans","Yu Gothic UI","Yu Gothic",system-ui,sans-serif;

  --gutter:clamp(16px,4.2vw,64px);
  --maxw:1320px;
  --header-h:64px;
  --radius:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (min-width:1024px){:root{--header-h:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--washi);overflow-anchor:none}
/* No scroll anchoring: the chats grow upward and the language switch keeps the reader in place on its own,
   so the browser must not shift the page to "help". */
body{margin:0;background:var(--washi);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-weight:430;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
html[lang="ja"] body{line-height:1.85;letter-spacing:.02em;font-weight:500}
html[lang="ja"] :is(h1,h2,h3,p,li,.lead){line-break:strict;word-break:auto-phrase}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:650;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--sol);color:var(--washi)}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:8px}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Smooth scroll (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html.is-locked{overflow:hidden}

.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

.skip{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 12px);z-index:400;background:var(--noite);color:var(--washi);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:650;transform:translateY(-220%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}

/* ---------- Type ---------- */
.hero-title{font-size:clamp(2.75rem,1.15rem + 5.1vw,6.25rem);line-height:.98;letter-spacing:-.045em;font-weight:660}
h2{font-size:clamp(2.2rem,1.25rem + 3.3vw,4.5rem);line-height:1.02;letter-spacing:-.04em}
h3{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.35rem);line-height:1.08;letter-spacing:-.03em}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.32rem);line-height:1.55;color:var(--muted);max-width:42ch}
html[lang="ja"] .hero-title{font-size:clamp(2.15rem,1.15rem + 3.7vw,4.6rem);line-height:1.24;letter-spacing:.01em;font-weight:700}
html[lang="ja"] h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.3rem);line-height:1.32;letter-spacing:.01em;font-weight:700}
html[lang="ja"] h3{font-size:clamp(1.3rem,1.1rem + .85vw,1.85rem);line-height:1.42;letter-spacing:.02em;font-weight:700}
html[lang="ja"] .lead{line-height:1.9;max-width:32em}
.line-mask{padding-bottom:.14em;margin-bottom:-.14em}
.section-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,72px)}

/* ---------- Buttons ---------- */
.btn{--bg:var(--noite);--fg:var(--washi);--sweep:var(--sol);--fg-hover:var(--washi);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:0;background:var(--bg);color:var(--fg);font-weight:650;font-size:1rem;line-height:1.2;letter-spacing:-.005em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .45s var(--ease);will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep);transform:translateX(-101%);transition:transform .6s var(--ease)}
@media (hover:hover){.btn:hover{color:var(--fg-hover)}.btn:hover::before{transform:none}}
.btn:active{transform:scale(.98)}
.btn-label{position:relative;white-space:nowrap}
.btn-arrow,.btn-ico{width:20px;height:20px;flex:none;transition:transform .45s var(--ease)}
@media (hover:hover){.btn:hover .btn-arrow{transform:translateX(4px)}}
.btn-sm{min-height:42px;padding:0 18px;font-size:.92rem}
.btn-sol{--bg:var(--sol);--fg:var(--washi);--sweep:var(--noite)}
.btn-ink{--bg:var(--noite);--fg:var(--washi);--sweep:var(--sol)}
.btn-line{--bg:transparent;--fg:var(--ink);--sweep:var(--noite);--fg-hover:var(--washi);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-gold{--bg:var(--ouro);--fg:var(--noite);--sweep:var(--washi);--fg-hover:var(--noite)}
.btn-ghost-night{--bg:transparent;--fg:var(--washi);--sweep:var(--washi);--fg-hover:var(--noite);box-shadow:inset 0 0 0 1.5px rgba(248,246,241,.42)}
.btn-light{--bg:var(--washi);--fg:var(--noite);--sweep:var(--sol);--fg-hover:var(--washi)}
.contact :focus-visible,.footer :focus-visible,.endcard :focus-visible,.menu :focus-visible,html.menu-open .site-header :focus-visible{outline-color:var(--washi)}

/* ---------- Header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:101;background:var(--washi);transition:background-color .4s}
html.header-night body::before{background:var(--madrugada)}
html.menu-open body::before{background:var(--sol)}
.site-header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:100;background:var(--washi);color:var(--ink);transition:transform .6s var(--ease),background-color .4s,color .4s}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .3s}
.site-header.is-scrolled::after{opacity:1}
.site-header.is-hidden:not(:focus-within){transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 4px))}
html.header-night .site-header{background:var(--madrugada);color:var(--washi)}
html.header-night .site-header::after{background:var(--night-line)}
html.menu-open .site-header{background:transparent;color:var(--washi);transform:none}
/* The menu moves focus to its first link, out of the header: keep the header and its close button on screen
   even when scrolling down had hidden it (this beats the :not(:focus-within) rule above). */
html.menu-open .site-header.is-hidden{transform:none}
html.menu-open .site-header::after{opacity:0}
.header-inner{position:relative;height:var(--header-h);display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.brand{display:block;margin-right:auto;padding:10px 0;color:inherit}
.brand .wm{height:16px;width:auto;overflow:visible}
@media (min-width:1024px){.brand .wm{height:19px}}
/* The E is the three red bars, as in the footer; over the red menu it turns white. */
.brand .hb{stroke:var(--sol);transition:transform .6s var(--ease),stroke .4s}
html.menu-open .brand .hb{stroke:currentColor}
@media (hover:hover){.brand:hover .hb1{transform:translateX(-26px)}.brand:hover .hb2{transform:translateX(34px)}.brand:hover .hb3{transform:translateX(-26px)}}

.nav{display:none;gap:clamp(18px,2vw,34px)}
.nav a,.footer-nav a{font-size:.95rem;font-weight:600;text-decoration:none;padding:8px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 2px no-repeat;transition:background-size .5s var(--ease)}
@media (hover:hover){.nav a:hover,.footer-nav a:hover{background-size:100% 2px}}
.nav a{white-space:nowrap}
@media (min-width:1280px){.nav{display:flex}}

.lang-inline{display:none;align-items:center;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong)}
html.header-night .site-header .lang-inline{box-shadow:inset 0 0 0 1px var(--night-line)}
.lang-inline button{min-width:40px;height:34px;padding:0 10px;border:0;border-radius:999px;background:transparent;font-size:.8rem;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:background-color .3s,color .3s}
.lang-inline button[lang="ja"]{letter-spacing:0}
.lang-inline button[aria-pressed="true"]{background:var(--noite);color:var(--washi)}
html.header-night .site-header .lang-inline button[aria-pressed="true"],.lang-inline--night button[aria-pressed="true"]{background:var(--washi);color:var(--noite)}
@media (min-width:760px){.lang-inline{display:flex}}
html.menu-open .site-header .lang-inline,html.menu-open .header-cta{visibility:hidden}

.header-cta{display:none}
html.header-night .header-cta{--bg:var(--washi);--fg:var(--noite);--sweep:var(--sol);--fg-hover:var(--washi)}
@media (min-width:760px){.header-cta{display:inline-flex}}

.menu-btn{width:46px;height:46px;margin-right:-8px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit;border-radius:12px}
.menu-bars{display:grid;gap:5px;width:24px}
.menu-bars i{display:block;height:2.5px;border-radius:2px;background:currentColor;transition:transform .55s var(--ease),opacity .3s}
.menu-bars i:nth-child(2){width:78%;justify-self:end}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2){transform:scaleX(0);opacity:0}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (min-width:1280px){.menu-btn{display:none}}

.progress{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--sol);transform-origin:0 50%;transform:scaleX(0)}
html.menu-open .progress{opacity:0}

/* ---------- Menu ---------- */
.menu{position:fixed;inset:0;z-index:90;color:var(--washi)}
.menu[hidden]{display:none}
.menu-bands{position:absolute;inset:0;display:grid;grid-template-rows:repeat(3,1fr)}
.menu-bands i{background:var(--sol)}
.menu-inner{position:relative;height:100%;overflow-y:auto;display:grid;align-content:center;gap:clamp(28px,6vh,48px);padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px);padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.menu-links{display:grid;gap:2px}
.menu-links a{display:block;overflow:hidden;font-size:clamp(2.1rem,1.3rem + 4.2vw,3.8rem);font-weight:650;letter-spacing:-.04em;line-height:1.18;text-decoration:none;padding-block:2px}
html[lang="ja"] .menu-links a{letter-spacing:.01em;font-weight:700;font-size:clamp(1.8rem,1.2rem + 3vw,3rem)}
.menu-links a span{display:inline-block}
.menu-langs{display:flex;flex-wrap:wrap;gap:8px}
.menu-langs button{min-height:46px;padding:0 18px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(248,246,241,.55);color:var(--washi);font-weight:650;cursor:pointer}
.menu-langs button[aria-pressed="true"]{background:var(--washi);color:var(--sol);box-shadow:none}

/* ---------- Opening ---------- */
.intro{display:none}
.js .intro{display:block;position:fixed;inset:0;z-index:300;overflow:hidden;color:var(--washi);animation:intro-failsafe .01s linear 7s forwards}
.js.no-intro .intro{display:none}
@keyframes intro-failsafe{to{visibility:hidden;opacity:0;pointer-events:none}}
.intro-bands{position:absolute;inset:0;display:grid;grid-template-rows:repeat(3,1fr)}
.intro-bands i{background:var(--madrugada);margin-block:-1px}
.intro-stage{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;padding-inline:24px;pointer-events:none}
.intro-wm{width:min(76vw,780px);height:auto;overflow:visible;color:var(--washi)}
.ib1,.ib3{stroke:var(--sol)}
.ib2{stroke:var(--washi)}
.intro .wm-e{stroke:var(--sol)}
.js .intro .wm-g path{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0}
.intro-skip{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 18px);border:0;background:transparent;color:var(--night-muted);font-weight:650;font-size:.92rem;padding:12px 16px;cursor:pointer;border-radius:999px}
@media (hover:hover){.intro-skip:hover{color:var(--washi)}}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--header-h) + clamp(28px,6vw,72px));padding-bottom:clamp(56px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.hero-copy,.hero-stage{min-width:0}
.js .hero-copy,.js .hero-stage{visibility:hidden;animation:failsafe-show .01s linear 4s forwards}
.js.hero-ready .hero-copy,.js.hero-ready .hero-stage{visibility:visible;animation:none}
@keyframes failsafe-show{to{visibility:visible}}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:650;color:var(--muted);margin-bottom:clamp(18px,2.4vw,30px)}
.eyebrow-s{width:24px;height:24px;flex:none;color:var(--sol)}
.hero-lead{margin-top:clamp(22px,2.6vw,34px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.2vw,44px)}
@media (max-width:420px){.cta-row .btn{flex:1 1 100%}}

.hero-stage{display:grid;gap:16px}
.panel{position:relative;background:var(--sol);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,1.6vw,20px);padding:20px 10px 28px;min-height:560px}
@media (min-width:640px){.panel{padding:clamp(18px,2.2vw,24px) 24px clamp(24px,3vw,32px);min-height:600px}}
/* The four channels above the phone. The conversation runs on one, then moves to the next. */
.channels{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;padding:4px;border-radius:24px;box-shadow:inset 0 0 0 1.5px rgba(248,246,241,.45)}
.channel{position:relative;z-index:1;min-height:36px;padding:0 clamp(7px,2.5vw,12px);border:0;border-radius:999px;background:transparent;color:var(--washi);font:inherit;font-size:clamp(.72rem,.62rem + .5vw,.8rem);font-weight:700;letter-spacing:.01em;cursor:pointer;transition:color .25s .2s}
.channel[aria-pressed="true"]{color:var(--sol)}
html:not(.js) .channel[aria-pressed="true"]{background:var(--washi)}
.channel:focus-visible{outline-color:var(--washi)}
.channel-thumb{position:absolute;left:0;top:0;border-radius:999px;background:var(--washi);pointer-events:none}
@media (min-width:640px){.channel{padding:0 16px;font-size:.86rem}}
/* The two-column hero leaves the panel narrow until about 1200px wide: keep the four channels on one row. */
@media (min-width:1024px) and (max-width:1199px){.channel{padding:0 11px;font-size:.8rem}}
.phone-tilt{position:relative;z-index:2;transform-style:preserve-3d}
.phone{width:clamp(256px,24vw,296px);height:clamp(520px,40vw,580px);background:var(--noite);border-radius:46px;padding:9px;box-shadow:0 34px 60px -28px rgba(10,13,34,.55)}
.phone-screen{height:100%;border-radius:38px;background:#EFE9DE;overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:13px 24px 6px;font-size:.74rem;font-weight:750;font-variant-numeric:tabular-nums}
.phone-icons{display:flex;gap:4px;align-items:flex-end}
.phone-icons i{display:block;width:4px;border-radius:1px;background:var(--noite)}
.phone-icons i:nth-child(1){height:5px}.phone-icons i:nth-child(2){height:8px}.phone-icons i:nth-child(3){height:11px}
.chat-head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;background:var(--paper);border-bottom:1px solid #E2DBCD}
.chat-avatar{width:34px;height:34px;flex:none;border-radius:50%;background:var(--noite);color:var(--washi);display:grid;place-items:center;font-weight:750;font-size:.9rem}
.chat-who{display:grid;line-height:1.25;min-width:0}
.chat-who b{font-size:.86rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who small{font-size:.7rem;color:var(--muted);font-weight:600}
.chat-body{flex:1;position:relative;overflow:hidden}
.chat-list{position:absolute;left:0;right:0;bottom:0;padding:12px 11px 10px;display:flex;flex-direction:column;gap:7px}
.msg{max-width:86%;padding:8px 12px 6px;border-radius:17px;font-size:.82rem;line-height:1.42;font-weight:500;transform-origin:0 100%}
html[lang="ja"] .msg{font-size:.78rem;line-height:1.6;letter-spacing:.01em}
.msg time{display:block;text-align:right;font-size:.6rem;font-weight:650;opacity:.55;margin-top:1px;font-variant-numeric:tabular-nums;letter-spacing:0}
.msg--in{align-self:flex-start;background:var(--paper);border-bottom-left-radius:6px}
.msg--out{align-self:flex-end;background:var(--noite);color:var(--washi);border-bottom-right-radius:6px;transform-origin:100% 100%}
.msg--ok{padding:7px 16px 5px;font-size:1.05rem;font-weight:800;letter-spacing:.06em;color:var(--ouro)}
.msg--ok time{color:var(--washi)}
.slots{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.slot{padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-strong);font-weight:750;font-size:.75rem;font-variant-numeric:tabular-nums;transition:background-color .35s,color .35s,box-shadow .35s}
.slot.is-picked{background:var(--sol);color:var(--washi);box-shadow:none}
.typing{align-self:flex-start;display:flex;gap:4px;align-items:center;background:var(--paper);border-radius:17px;border-bottom-left-radius:6px;padding:13px 14px}
.typing i{display:block;width:12px;height:3.5px;border-radius:2px;background:var(--muted);animation:tick 1s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tick{0%,100%{transform:scaleX(.45);opacity:.45}45%{transform:scaleX(1);opacity:1}}
.chat-input{margin:6px 10px 12px;height:38px;flex:none;border-radius:999px;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 5px 0 14px;font-size:.78rem;color:#9298AD}
.chat-input i{width:28px;height:28px;border-radius:50%;background:var(--noite)}

/* The booking lands in the chat as a confirmation card, right after the customer's OK. */
.msg--card{width:86%}
.bk{display:grid;gap:1px;margin:2px 0 7px;padding:10px 12px;border-radius:12px;background:var(--washi);box-shadow:inset 0 0 0 1px var(--line)}
.bk-head{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:750;color:var(--muted)}
.bk-check{width:16px;height:16px;flex:none}
.bk-check circle{fill:var(--mata)}
.bk-check path{fill:none;stroke:var(--washi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-when{font-size:1rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bk-what{font-size:.74rem;font-weight:650}
.bk-note{font-size:.68rem;font-weight:600;color:var(--muted)}

/* The hero phone dresses as the app the conversation runs on: WhatsApp, Instagram, Messenger or LINE.
   Each app's own colours, bubbles, header and message bar live inside the phone only (the panel and frame stay Sebalo),
   drawn from scratch with no app logos. data-app on the screen picks the look; [data-for] parts show for their app only. */
.phone-screen [data-for]{display:none}
.phone-screen[data-app="whatsapp"] [data-for~="whatsapp"],.phone-screen[data-app="instagram"] [data-for~="instagram"],
.phone-screen[data-app="messenger"] [data-for~="messenger"],.phone-screen[data-app="line"] [data-for~="line"]{display:flex}
.phone-screen[data-app]{background:var(--app-bg);color:var(--head-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI",Roboto,sans-serif;letter-spacing:0;transform-origin:50% 50%}
.phone-screen[data-app]::after{content:"";flex:none;width:34%;height:4px;margin:2px auto 7px;border-radius:2px;background:#111}
.phone-screen[data-app] .phone-status{font-weight:650}
.phone-screen[data-app] .phone-icons i{background:currentColor}
.phone-screen[data-app] .ic{display:block;width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.phone-screen[data-app] .ic-sm{width:17px;height:17px}
/* Tight enough that a shop name like "Barbearia do Léo" fits whole beside the icons on the smallest phone. */
.phone-screen[data-app] .chat-head{gap:6px;padding:2px 10px 8px 4px;background:var(--app-bg);border-bottom:1px solid var(--head-line);color:var(--head-ink)}
.phone-screen[data-app] .ch-back{width:20px;height:20px;color:var(--icon);stroke-width:2.2}
.phone-screen[data-app] .chat-avatar{position:relative;width:28px;height:28px;font-size:.76rem}
.phone-screen[data-app] .chat-who{flex:1}
.phone-screen[data-app] .chat-who b{font-size:.78rem;font-weight:650}
.phone-screen[data-app] .chat-who small{font-size:.64rem;font-weight:400;color:var(--head-sub)}
.phone-screen[data-app] .ch-icons{align-items:center;gap:12px;color:var(--icon)}
.phone-screen[data-app] .ch-icons .ic{width:18px;height:18px}
.phone-screen[data-app] .chat-body{background:var(--body-bg)}
.phone-screen[data-app] .msg{position:relative;font-size:.8rem;line-height:1.36;font-weight:400;background:var(--in-bg);color:var(--in-ink)}
html[lang="ja"] .phone-screen[data-app] .msg{font-size:.76rem;line-height:1.55}
.phone-screen[data-app] .msg--out{background:var(--out-bg);color:var(--out-ink)}
.phone-screen[data-app] .msg time{color:var(--time,inherit);opacity:1;font-weight:400}
.phone-screen[data-app] .msg--ok{font-size:.9rem;font-weight:600;letter-spacing:.02em;color:var(--out-ink)}
.phone-screen[data-app] .slot{background:var(--slot-bg);color:var(--slot-ink);box-shadow:inset 0 0 0 1px var(--slot-line);font-weight:600}
.phone-screen[data-app] .slot.is-picked{background:var(--accent);color:#FFF;box-shadow:none}
.phone-screen[data-app] .typing{background:var(--in-bg);border-radius:18px;padding:11px 12px}
.phone-screen[data-app] .typing i{width:6px;height:6px;border-radius:50%;background:var(--dots);animation:typing-dot 1.2s ease-in-out infinite}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.phone-screen[data-app] .bk{background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--card-line)}
.phone-screen[data-app] :is(.bk-head,.bk-note){color:var(--head-sub)}
.phone-screen[data-app] .chat-input{height:auto;margin:0;padding:7px 10px 8px;gap:13px;border-radius:0;justify-content:flex-start;background:var(--app-bg);border-top:1px solid var(--bar-line,transparent);color:var(--icon);font-size:.78rem}
.phone-screen[data-app] .ci-field{flex:1;min-width:0;height:32px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px 0 13px;border-radius:18px;background:var(--field-bg);box-shadow:inset 0 0 0 1px var(--field-line,transparent);white-space:nowrap;overflow:hidden}
.phone-screen[data-app] .ci-ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--field-ink)}
/* Instagram, Messenger and LINE put the shop's small round picture next to its messages. */
.phone-screen:is([data-app="instagram"],[data-app="messenger"]) :is(.msg--in,.typing){position:relative;margin-left:30px}
.phone-screen:is([data-app="instagram"],[data-app="messenger"]) :is(.msg--in,.typing)::after,.phone-screen[data-app="line"] .msg--in::after{content:var(--avatar,"");position:absolute;left:-30px;bottom:0;width:24px;height:24px;border-radius:50%;background:var(--noite);color:var(--washi);display:grid;place-items:center;font-size:.6rem;font-weight:700;line-height:1}
/* Instagram and Messenger show the time once, centred above the conversation, not on every message. */
.phone-screen:is([data-app="instagram"],[data-app="messenger"]) .msg time{display:none}
.phone-screen:is([data-app="instagram"],[data-app="messenger"]) .chat-list::before{content:var(--stamp,"");align-self:center;margin:2px 0 4px;font-size:.62rem;font-weight:600;color:var(--head-sub)}

/* WhatsApp: beige doodle wallpaper, light green sent bubbles with a corner tail, time and blue ticks inside the bubble. */
.phone-screen[data-app="whatsapp"]{--app-bg:#F6F6F6;--head-line:#DCDCDC;--head-ink:#111B21;--head-sub:#667781;--icon:#1DAA61;--in-bg:#FFF;--in-ink:#111B21;--out-bg:#D9FDD3;--out-ink:#111B21;--time:#667781;--accent:#1DAA61;--slot-bg:#FFF;--slot-ink:#008069;--slot-line:#D1D7DB;--dots:#8696A0;--card-bg:#F0F2F5;--card-line:transparent;--field-bg:#FFF;--field-line:#E2E2E2;--field-ink:#8696A0;--bar-line:#DCDCDC;
  --body-bg:#EFEAE2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M60 12l3 6.2 6.8 1-4.9 4.8 1.2 6.8L60 27.6l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1z'/%3E%3Cpath d='M94 22c4-6 9-6 13 0s9 6 13 0'/%3E%3Crect x='12' y='66' width='16' height='12' rx='2.5'/%3E%3Cpath d='M16 66v-3h8v3'/%3E%3Cpath d='M66 64c-4-5-12-1-8 5l8 8 8-8c4-6-4-10-8-5z'/%3E%3Cpath d='M104 60l9 15H95z'/%3E%3Ccircle cx='26' cy='110' r='2.4'/%3E%3Ccircle cx='35' cy='106' r='1.5'/%3E%3Cpath d='M66 104h14M73 97v14'/%3E%3Cpath d='M118 100a8 8 0 1 0 4 14'/%3E%3C/g%3E%3C/svg%3E") repeat}
.phone-screen[data-app="whatsapp"] .msg{padding:6px 8px 7px 9px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.phone-screen[data-app="whatsapp"] .msg--in{border-top-left-radius:0}
.phone-screen[data-app="whatsapp"] .msg--out{border-top-right-radius:0}
.phone-screen[data-app="whatsapp"] .msg::before{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}
.phone-screen[data-app="whatsapp"] .msg--in::before{left:-8px;border-width:0 8px 9px 0;border-color:transparent var(--in-bg) transparent transparent}
.phone-screen[data-app="whatsapp"] .msg--out::before{right:-8px;border-width:0 0 9px 8px;border-color:transparent transparent transparent var(--out-bg)}
/* The time sits on the last line of the text, at the bottom right: a spacer after the words keeps room for it. */
.phone-screen[data-app="whatsapp"] .msg > span:not([class])::after{content:"";display:inline-block;width:34px}
.phone-screen[data-app="whatsapp"] .msg--out > span:not([class])::after{width:52px}
.phone-screen[data-app="whatsapp"] .msg time{position:absolute;right:7px;bottom:5px;margin:0;font-size:.58rem;line-height:1}
.phone-screen[data-app="whatsapp"] .msg--out time::after{content:"";display:inline-block;width:15px;height:10px;margin-left:3px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 6.2L3.8 9L10.2 2.6M5.4 7.8L6.6 9L13 2.6' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.phone-screen[data-app="whatsapp"] .slots{margin-bottom:14px}
.phone-screen[data-app="whatsapp"] .typing{border-radius:8px;border-top-left-radius:0}

/* Instagram: white, grey received bubbles, the purple-to-blue sent bubble, the camera button in the message bar. */
.phone-screen[data-app="instagram"]{--app-bg:#FFF;--head-line:#EFEFEF;--head-ink:#000;--head-sub:#737373;--icon:#000;--body-bg:#FFF;--in-bg:#EFEFEF;--in-ink:#000;--out-bg:linear-gradient(135deg,#9B3BFF,#5B51F8 55%,#3B82F6);--out-ink:#FFF;--accent:#6E4BF8;--slot-bg:#FFF;--slot-ink:#000;--slot-line:#DBDBDB;--dots:#8E8E8E;--card-bg:#FFF;--card-line:#DBDBDB;--field-bg:#EFEFEF;--field-ink:#737373}
.phone-screen[data-app="instagram"] .msg{padding:7px 12px;border-radius:19px}
.phone-screen[data-app="instagram"] .ci-field{height:36px;padding-left:4px;gap:11px;color:#000}
.phone-screen[data-app="instagram"] .ci-ph::after{content:"…"}
.phone-screen[data-app="instagram"] .ci-cam{flex:none;width:28px;height:28px;border-radius:50%;background:#3797F0;color:#FFF;display:grid;place-items:center}
.phone-screen[data-app="instagram"] .ci-cam .ic{width:16px;height:16px;stroke-width:2}

/* Messenger: white, blue sent bubbles, the green dot of an active account, "Aa" and the thumbs-up in the bar. */
.phone-screen[data-app="messenger"]{--app-bg:#FFF;--head-line:#EDEDED;--head-ink:#050505;--head-sub:#65676B;--icon:#0A7CFF;--body-bg:#FFF;--in-bg:#F0F0F0;--in-ink:#050505;--out-bg:#0A7CFF;--out-ink:#FFF;--accent:#0A7CFF;--slot-bg:#FFF;--slot-ink:#0A7CFF;--slot-line:#0A7CFF;--dots:#8A8D91;--card-bg:#FFF;--card-line:#E4E6EB;--field-bg:#F0F2F5;--field-ink:#65676B}
.phone-screen[data-app="messenger"] .msg{padding:7px 12px;border-radius:18px}
.phone-screen[data-app="messenger"] .chat-avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#31A24C;box-shadow:0 0 0 2px var(--app-bg)}
.phone-screen[data-app="messenger"] .ci-thumb{fill:currentColor}

/* LINE: blue-grey room, white and light green bubbles with a small tail, the shop's picture at its messages,
   and the time (with "read" on sent ones) outside the bubble. No typing dots: LINE doesn't show them. */
.phone-screen[data-app="line"]{--app-bg:#FFF;--head-line:#EAEAEA;--head-ink:#111;--head-sub:#8A8A8A;--icon:#111;--body-bg:#8DABD8;--in-bg:#FFF;--in-ink:#111;--out-bg:#8DE055;--out-ink:#111;--time:#F4F7FB;--accent:#06C755;--slot-bg:#FFF;--slot-ink:#05A84A;--slot-line:#06C755;--card-bg:#F5F6F8;--card-line:transparent;--field-bg:#F2F3F5;--field-ink:#9AA0A6;--bar-line:#EAEAEA}
.phone-screen[data-app="line"] :is(.chat-avatar,.chat-who small,.typing){display:none}
.phone-screen[data-app="line"] .msg{max-width:70%;padding:7px 11px;border-radius:17px}
/* The booking card takes all the width the shop's picture and the time beside it leave free. */
.phone-screen[data-app="line"] .msg--card{width:calc(100% - 58px);max-width:none;padding:7px 8px}
.phone-screen[data-app="line"] .bk{padding:8px 9px}
.phone-screen[data-app="line"] .bk-head{gap:5px;font-size:.68rem}
.phone-screen[data-app="line"] .bk-check{width:14px;height:14px}
.phone-screen[data-app="line"] .bk-when{font-size:.92rem}
.phone-screen[data-app="line"] .msg--in{margin-left:31px}
.phone-screen[data-app="line"] .msg--in::after{left:-31px;top:0;bottom:auto;width:26px;height:26px;font-size:.64rem}
.phone-screen[data-app="line"] .msg::before{content:"";position:absolute;top:8px;width:0;height:0;border-style:solid}
.phone-screen[data-app="line"] .msg--in::before{left:-6px;border-width:4px 7px 4px 0;border-color:transparent var(--in-bg) transparent transparent}
.phone-screen[data-app="line"] .msg--out::before{right:-6px;border-width:4px 0 4px 7px;border-color:transparent transparent transparent var(--out-bg)}
.phone-screen[data-app="line"] .msg time{position:absolute;bottom:1px;margin:0;font-size:.54rem;line-height:1.3;white-space:nowrap}
.phone-screen[data-app="line"] .msg--out time{right:calc(100% + 5px);text-align:right}
.phone-screen[data-app="line"] .msg--in time{left:calc(100% + 4px);text-align:left}
.phone-screen[data-app="line"] .msg--out time::before{content:var(--read,"");display:block}
.caption{font-size:.92rem;color:var(--muted);font-weight:550;font-variant-numeric:tabular-nums}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(16px,2vw,24px);user-select:none}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-list{display:flex;flex:none}
.marquee-list li{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);padding-right:clamp(20px,2.6vw,40px);font-size:clamp(1.3rem,.95rem + 1.5vw,2.3rem);font-weight:620;letter-spacing:-.03em;white-space:nowrap}
html[lang="ja"] .marquee-list li{letter-spacing:.02em;font-weight:700;font-size:clamp(1.15rem,.9rem + 1.1vw,1.9rem)}
.marquee-list li::after{content:"";flex:none;width:clamp(24px,2.6vw,40px);height:clamp(5px,.55vw,8px);border-radius:6px;background:var(--sol)}

/* ---------- Statement ---------- */
.statement{padding-block:clamp(96px,15vw,220px)}
.statement-text{font-size:clamp(1.7rem,1rem + 2.6vw,3.5rem);line-height:1.16;letter-spacing:-.035em;font-weight:620;max-width:28ch}
html[lang="ja"] .statement-text{font-size:clamp(1.35rem,1rem + 1.8vw,2.45rem);line-height:1.66;letter-spacing:.02em;font-weight:700;max-width:23em}
.statement-text p + p{margin-top:1.16em;margin-top:1lh}

/* ---------- Second example: nail studio ---------- */
.demo{padding-block:clamp(72px,10vw,150px);border-top:1px solid var(--line)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "steps";gap:clamp(32px,4vw,56px)}
@media (min-width:1024px){.demo-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"stage head" "stage steps";column-gap:clamp(48px,6vw,96px);row-gap:36px;align-items:start}.demo-stage{align-self:center}}
.demo-head{grid-area:head;display:grid;gap:18px;min-width:0}
.demo-head h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem)}
html[lang="ja"] .demo-head h2{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.8rem)}
.demo-stage{grid-area:stage;min-width:0}
.panel--night{background:var(--noite)}
.phone--light{background:var(--washi);box-shadow:none}
.chat-avatar--sol{background:var(--sol)}
.demo-steps{grid-area:steps;display:grid;min-width:0}
.demo-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.demo-steps li:last-child{border-bottom:1px solid var(--line)}
/* Each step's bar fills while that part of the conversation happens: red while it runs, ink once it's done. */
.ds-bar{display:block;height:6px;margin-top:.62em;border-radius:4px;background:var(--line);overflow:hidden}
.ds-fill{display:block;height:100%;border-radius:inherit;background:var(--ink);transform-origin:0 50%}
.demo-steps h3{font-size:clamp(1.12rem,1rem + .4vw,1.32rem);line-height:1.25;letter-spacing:-.015em;transition:color .5s}
html[lang="ja"] .demo-steps h3{font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);line-height:1.5;letter-spacing:.02em}
.demo-steps p{color:var(--muted);font-size:.98rem;margin-top:4px;max-width:46ch}
html[lang="ja"] .demo-steps p{max-width:30em}
.demo-steps li[data-state="pending"] h3{color:var(--muted)}

/* ---------- Products ---------- */
.build{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(72px,10vw,150px)}
.track-outer{position:relative}
.track{display:grid;gap:16px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto}
.prod{--tile:var(--washi);--glyph:var(--sol);border-radius:var(--radius);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,56px);align-items:center;min-width:0}
/* Two columns from 760 px, the wider one for the motion piece (the sideways track sets its own split). */
@media (min-width:760px){.prod{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.prod--reservas{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.prod--recrut{background:var(--ouro);color:var(--noite);--tile:var(--ouro);--glyph:var(--sol)}
.prod--vistos{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.prod--ponto{background:var(--noite);color:var(--washi);--tile:var(--noite);--glyph:var(--washi)}
.prod--agenda{background:var(--mata);color:var(--noite);--tile:var(--mata);--glyph:var(--washi)}
.prod--custom{background:var(--sol);color:var(--washi);--tile:var(--sol);--glyph:var(--washi)}
.prod-copy{display:grid;gap:18px;align-content:start;min-width:0}
.prod-tag{display:flex;align-items:center;gap:12px;font-weight:750;font-size:.98rem}
.prod-icon{width:38px;height:38px;flex:none}
.prod-icon rect{fill:var(--tile);stroke:currentColor;stroke-opacity:.3;stroke-width:5}
.prod-icon path{stroke:var(--glyph)}
.prod h3{font-size:clamp(1.9rem,1.3rem + 2.2vw,3.2rem);line-height:1.02;letter-spacing:-.04em;max-width:14ch}
html[lang="ja"] .prod h3{font-size:clamp(1.55rem,1.15rem + 1.6vw,2.4rem);line-height:1.35;letter-spacing:.01em;max-width:none}
.prod-body{font-size:clamp(1rem,.96rem + .25vw,1.12rem);max-width:44ch;font-weight:480}
html[lang="ja"] .prod-body{max-width:30em}
.feats{display:grid;gap:10px 22px;font-weight:600;font-size:.95rem}
@media (min-width:560px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feats li{display:flex;align-items:baseline;gap:10px;min-width:0}
.feats li::before{content:"";flex:none;width:14px;height:3px;border-radius:2px;background:currentColor;transform:translateY(-.3em)}
.prod-ui{min-width:0;display:grid;justify-items:center}

.ui{width:100%;max-width:440px;min-width:0;border-radius:22px;padding:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}

.tag-new{font-style:normal;font-size:.7rem;font-weight:750;color:var(--washi);background:var(--sol);padding:3px 9px;border-radius:999px}

/* The motion pieces in the product cards (Reservas, Ponto, Agenda): the people's phones and the admin window in one
   frame, played by the scroll. Every size is in container units (--du for the admin window, --pu for a phone), so a
   piece scales with its column. What the page holds is the final frame; the scroll plays the way there.
   Side by side on wide columns, stacked on narrow ones. Devices never overlap: two people, two screens. */
/* The motion pieces fill their column at any size (no 440 px cap), so their phones and windows grow with it. */
.ui-story{container-type:inline-size;max-width:none;padding:0;display:block;border-radius:0}
/* A grid: the window on the left fills what the phone leaves (60 units wide), both centred on each other, so the
   taller of the two sets the stage height in every language. The phone is 34 x 72 units of --pu. */
.mo-scene{--pu:1.2cqw;--gap:4cqw;--du:calc((100cqw - var(--pu) * 34 - var(--gap)) / 60);--zoom:1.15;--stack:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--pu) * 34);column-gap:var(--gap);align-items:center;padding:2cqw 0}
.mo-scene > .mo-dash{grid-row:1;grid-column:1}
.mo-scene > .mo-phone{grid-row:1;grid-column:2}
.mo-dash{position:relative;z-index:1;width:calc(var(--du)*60);border-radius:calc(var(--du)*2.6);background:var(--paper);color:var(--ink);overflow:hidden}
.mo-bar{display:flex;align-items:center;gap:calc(var(--du)*2);height:calc(var(--du)*6.6);padding:0 calc(var(--du)*3);background:var(--washi);border-bottom:1px solid var(--line);font-size:calc(var(--du)*2.3)}
.mo-bar b{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-dots{display:flex;gap:calc(var(--du)*.9)}
.mo-dots i{width:calc(var(--du)*1.3);height:calc(var(--du)*1.3);border-radius:50%;background:var(--line-strong)}
.mo-body{padding:calc(var(--du)*3) calc(var(--du)*3) calc(var(--du)*3.4)}
.mo-title{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--du)*2);font-size:calc(var(--du)*2.8);font-weight:750}
.mo-clock{font-variant-numeric:tabular-nums;color:var(--muted)}
.mo-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--du)*2);margin-top:calc(var(--du)*2.6)}
.mo-kpi{display:grid;align-content:start;gap:calc(var(--du)*.8);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)}
.mo-kpi b{font-size:calc(var(--du)*4.8);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;justify-self:start}
.mo-kpi span{font-size:calc(var(--du)*2);font-weight:600;color:var(--muted);line-height:1.3}
.mo-rows{position:relative;display:grid;gap:calc(var(--du)*1.2);margin-top:calc(var(--du)*2.6)}
.mo-rows li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:calc(var(--du)*2);height:calc(var(--du)*7.2);padding:0 calc(var(--du)*2.4);border-radius:calc(var(--du)*2);background:var(--washi);font-size:calc(var(--du)*2.6)}
.mo-rows .who{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-rows time{font-variant-numeric:tabular-nums;font-weight:650;color:var(--muted)}
.mo-rows .st{font-size:calc(var(--du)*2);font-weight:750;padding:calc(var(--du)*.5) calc(var(--du)*1.4);border-radius:999px;white-space:nowrap}
.mo-rows [data-state="in"] .st{background:var(--mata);color:var(--noite)}
.mo-rows [data-state="none"] .st{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* The red bar that lands on a row spreads over it, then fades to show what changed there. */
.mo-dash .mo-flash{position:absolute;z-index:1;inset:0;padding:0;border-radius:inherit;background:var(--sol);opacity:0;transform-origin:0 50%}
.mo-rows > .mo-flash{bottom:auto;height:calc(var(--du)*7.2)}

/* Phones stay flat (no 3D turn, no perspective): small text inside a 3D-transformed layer comes out blurred. */
.mo-phone{position:relative;z-index:2;width:calc(var(--pu)*34);height:calc(var(--pu)*72);padding:calc(var(--pu)*1.2);border-radius:calc(var(--pu)*5.6);background:#05070F;box-shadow:inset 0 0 0 1px rgba(248,246,241,.16),0 calc(var(--pu)*5) calc(var(--pu)*7) calc(var(--pu)*-3) rgba(0,0,0,.55)}
.mo-screen{position:relative;height:100%;display:flex;flex-direction:column;padding:calc(var(--pu)*1.8) calc(var(--pu)*2.6) calc(var(--pu)*2.6);border-radius:calc(var(--pu)*4.6);background:var(--washi);color:var(--ink);overflow:hidden}
.mo-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--pu)*2.2);font-size:calc(var(--pu)*1.9);font-weight:750;font-variant-numeric:tabular-nums}
.mo-status .phone-icons{gap:calc(var(--pu)*.45)}
.mo-status .phone-icons i{width:calc(var(--pu)*.55)}
.mo-status .phone-icons i:nth-child(1){height:calc(var(--pu)*.7)}.mo-status .phone-icons i:nth-child(2){height:calc(var(--pu)*1.1)}.mo-status .phone-icons i:nth-child(3){height:calc(var(--pu)*1.5)}
.mo-btn{position:relative;margin-top:auto;height:calc(var(--pu)*10);border-radius:calc(var(--pu)*2.8);background:var(--mata);overflow:hidden}
.mo-face{position:absolute;inset:0;display:flex;align-items:center;gap:calc(var(--pu)*1.6);padding:0 calc(var(--pu)*2.4)}
.mo-face > span{display:grid;min-width:0;line-height:1.2}
.mo-face b{font-size:calc(var(--pu)*2.3);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-face small{font-size:calc(var(--pu)*1.4);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-face-in{justify-content:space-between;color:var(--washi);opacity:0}
.mo-face-in small{opacity:.7}
.mo-face-in svg{flex:none;width:calc(var(--pu)*2.8);height:calc(var(--pu)*2.8);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mo-face-done{gap:calc(var(--pu)*1.2);padding:0 calc(var(--pu)*1.8);color:var(--noite)}
/* "Entrada registrada" is long for a phone button: it wraps to two lines rather than being cut. */
.mo-face-done b{white-space:normal;line-height:1.08;font-size:calc(var(--pu)*2.1)}
.mo-face-done small{opacity:.75}
.mo-check{flex:none;width:calc(var(--pu)*2.8);height:calc(var(--pu)*2.8)}
.mo-check circle{fill:var(--noite)}
.mo-check path{fill:none;stroke:var(--mata);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}
/* A thumb landing: a soft dot and a ripple, light on dark buttons and dark on light ones (--touch, --ripple). */
.mo-touch,.mo-ripple{position:absolute;left:50%;top:50%;width:calc(var(--pu)*7);height:calc(var(--pu)*7);margin:calc(var(--pu)*-3.5) 0 0 calc(var(--pu)*-3.5);border-radius:50%;opacity:0;pointer-events:none}
.mo-touch{background:var(--touch,rgba(248,246,241,.38))}
.mo-ripple{box-shadow:inset 0 0 0 calc(var(--pu)*.4) var(--ripple,rgba(248,246,241,.85))}
.mo-packet{position:absolute;z-index:3;left:0;top:0;width:calc(var(--du)*9);height:calc(var(--du)*2);border-radius:999px;background:var(--sol);opacity:0;pointer-events:none;transform-origin:0 50%}

/* Ponto: the worker's screen, in the words the real app uses. */
.pt-site{font-size:calc(var(--pu)*1.6);font-weight:650;color:var(--muted)}
.pt-hello{margin-top:calc(var(--pu)*.6);font-size:calc(var(--pu)*2.8);font-weight:750;line-height:1.15;letter-spacing:-.02em}
.pt-shift{margin-top:calc(var(--pu)*.5);font-size:calc(var(--pu)*1.75);font-weight:550;color:var(--muted)}
html[lang="ja"] :is(.pt-hello,.pt-shift,.pt-site){letter-spacing:0}
html[lang="ja"] .pt-hello{font-size:calc(var(--pu)*2.3)}
.pt-ring{position:relative;width:calc(var(--pu)*19);aspect-ratio:1;margin:calc(var(--pu)*3) auto calc(var(--pu)*2);display:grid;place-items:center}
.pt-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pt-ring circle{fill:none;stroke-width:8}
.pt-ring-track{stroke:var(--line)}
.pt-ring-fill{stroke:var(--sol);stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:.94}
.pt-ring-time{margin-top:calc(var(--pu)*-1.8);font-size:calc(var(--pu)*4.2);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pt-ring-sub{position:absolute;left:0;right:0;top:60%;text-align:center;font-size:calc(var(--pu)*1.5);font-weight:650;color:var(--muted);white-space:nowrap}
.pt-ring-now{opacity:0}

/* A WhatsApp-style chat on a phone, shared by the pieces that start in a conversation (Reservas, Sob medida). */
.mo-chat{padding:0;background:#EFEAE2}
.mo-chat .mo-status{margin:0;padding:calc(var(--pu)*1.8) calc(var(--pu)*2.6) calc(var(--pu)*.6);background:#F6F6F6}
.mo-chat-head{display:flex;align-items:center;gap:calc(var(--pu)*1.4);padding:calc(var(--pu)*.6) calc(var(--pu)*2.2) calc(var(--pu)*1.4);background:#F6F6F6;border-bottom:1px solid #DCDCDC}
.mo-avatar{flex:none;display:grid;place-items:center;width:calc(var(--pu)*4.8);height:calc(var(--pu)*4.8);border-radius:50%;background:var(--noite);color:var(--washi);font-size:calc(var(--pu)*2);font-weight:750}
.mo-chat-head > span:last-child{display:grid;min-width:0;line-height:1.2}
.mo-chat-head b{font-size:calc(var(--pu)*2.3);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-chat-head small{font-size:calc(var(--pu)*1.6);color:#667781}
/* Like the app: when the chat is longer than the screen, the oldest messages slide out at the top, never the input. */
.mo-chat-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--pu)*1.2);padding:calc(var(--pu)*2)}
.mo-msg{position:relative;max-width:88%;padding:calc(var(--pu)*1) calc(var(--pu)*1.5);border-radius:calc(var(--pu)*1.4);background:#FFF;color:#111B21;font-size:calc(var(--pu)*2.05);line-height:1.32;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.mo-in{align-self:flex-start;border-top-left-radius:0}
.mo-out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:0;font-weight:650}
.mo-done{display:flex;gap:calc(var(--pu)*.9);align-items:flex-start}
.mo-done .mo-check{width:calc(var(--pu)*2.6);height:calc(var(--pu)*2.6);margin-top:calc(var(--pu)*.1)}
.mo-done .mo-check circle{fill:#1DAA61}
.mo-done .mo-check path{stroke:#FFF}
.mo-chat-input{flex:none;margin:0 calc(var(--pu)*1.6) calc(var(--pu)*2);padding:calc(var(--pu)*1.1) calc(var(--pu)*1.8);border-radius:999px;background:#FFF;color:#8696A0;font-size:calc(var(--pu)*1.8)}

/* Reservas: the customer's chat on the phone, the shop's day in the admin window. */
/* On the light Reservas card the admin window needs an edge. */
.prod--reservas .mo-dash{box-shadow:inset 0 0 0 1px var(--line-strong)}
.rs-slots{display:flex;flex-wrap:wrap;gap:calc(var(--pu)*.8);margin-top:calc(var(--pu)*1)}
.rs-slots i{position:relative;padding:calc(var(--pu)*.6) calc(var(--pu)*1.3);border-radius:999px;background:#FFF;color:#008069;box-shadow:inset 0 0 0 1px #D1D7DB;font-style:normal;font-weight:700;font-size:calc(var(--pu)*1.8);font-variant-numeric:tabular-nums}
.rs-slots .rs-pick,.rs-slots .rc-pick{--touch:rgba(14,23,38,.18);--ripple:rgba(14,23,38,.45);background:#1DAA61;color:#FFF;box-shadow:none}
.rs-rows li{grid-template-columns:calc(var(--du)*7.5) minmax(0,1fr) auto}
.rs-rows time{color:var(--ink);font-weight:750}
.rs-rows li > span{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-rows b{font-weight:700}
.rs-rows .rs-free{color:var(--muted);font-style:italic;opacity:0}
.rs-rows .tag-new{grid-column:3;font-size:calc(var(--du)*1.8);padding:calc(var(--du)*.4) calc(var(--du)*1.2)}

/* Recrutamento: a job seeker writes to the agency's WhatsApp at night; the agency's panel lists its candidates. */
.rc-form{max-width:94%}
.rc-btn{display:block;height:calc(var(--pu)*8);margin-top:calc(var(--pu)*1.2);border-radius:calc(var(--pu)*2.2)}
.rc-rows .city{color:var(--muted);font-weight:600;white-space:nowrap}
.rc-rows [data-state="ok"] .st{background:var(--mata);color:var(--noite)}
.rc-rows [data-state="person"] .st{background:var(--sol);color:var(--washi)}
.rc-rows [data-state="wait"] .st{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* Vistos: the heads-up arrives on LINE, where the people in charge at the factories usually are (the hero's LINE
   colours); the agency's dashboard lists each worker's expiry date. Amber text is darker than the brand gold. */
.prod--vistos .mo-dash{box-shadow:inset 0 0 0 1px var(--line-strong)}
.mo-chat--line{background:#8DABD8}
.mo-chat--line .mo-status,.mo-chat--line .mo-chat-head{background:#FFF}
.mo-chat--line .mo-chat-head{border-bottom-color:#EAEAEA}
.mo-chat--line .mo-msg{border-radius:calc(var(--pu)*2.2);box-shadow:none}
.mo-chat--line .mo-out{background:#8DE055;color:#111;font-weight:600}
.mo-chat--line .mo-done .mo-check circle{fill:#06C755}
.mo-chat--line .mo-chat-input{border-radius:calc(var(--pu)*1.4)}
.vs-card{display:grid;gap:calc(var(--pu)*.7);width:94%;max-width:94%;padding:calc(var(--pu)*1.5) calc(var(--pu)*1.7)}
.vs-head{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--pu)*1);font-size:calc(var(--pu)*2.1);font-weight:800}
.vs-head small,.vs-sub,.vs-foot{font-size:calc(var(--pu)*1.6);font-weight:600;color:#667781}
.vs-head small{flex:none}
.vs-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:calc(var(--pu)*1);padding-left:calc(var(--pu)*1.1);border-left:calc(var(--pu)*.55) solid var(--sol);font-size:calc(var(--pu)*1.85)}
.vs-line[data-state="mid"]{border-left-color:#E8A400}
.vs-line b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750}
.vs-line span{color:#667781;font-variant-numeric:tabular-nums;white-space:nowrap}
.vs-line em{font-style:normal;font-weight:750;color:var(--sol);white-space:nowrap}
.vs-line[data-state="mid"] em{color:#A86F00}
/* LINE's quick replies sit above the input; they are gone once the reply is sent (the last frame). */
.vs-quick{flex:none;display:none;gap:calc(var(--pu)*.5);padding:0 calc(var(--pu)*1.2) calc(var(--pu)*1.2);overflow:hidden}
.vs-quick i{position:relative;flex:none;padding:calc(var(--pu)*.65) calc(var(--pu)*1);border-radius:999px;background:#FFF;color:#06C755;box-shadow:inset 0 0 0 1px #06C755;font-style:normal;font-weight:700;font-size:calc(var(--pu)*1.5);white-space:nowrap}
.vs-quick .vs-pick{--touch:rgba(14,23,38,.18);--ripple:rgba(6,199,85,.5)}
.vs-rows .st{grid-column:3;grid-row:1;justify-self:end}
.vs-rows [data-state="mid"] .st{background:var(--ouro);color:var(--noite)}
.vs-rows [data-state="ok"] .st{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.vs-rows .vs-was{background:var(--sol);color:var(--washi);opacity:0}
.vs-rows .vs-now{background:var(--noite);color:var(--washi)}

/* Agenda: three people, three screens. The teacher sends, a parent signs, the principal sees every class. */
/* Agenda and Sob medida put the phone on the left. In Agenda the teacher's and the parent's phones share that
   slot: the teacher's leaves as the parent's arrives, so the last frame is the parent and the principal. */
.mo-scene--trio,.mo-scene--solo{grid-template-columns:calc(var(--pu) * 34) minmax(0,1fr)}
.mo-scene--trio > .mo-phone,.mo-scene--solo > .mo-phone{grid-column:1}
.mo-scene--trio > .mo-dash,.mo-scene--solo > .mo-dash{grid-column:2}
.mo-scene--trio .ag-teacher{opacity:0}
.ag-role{font-size:calc(var(--pu)*1.5);font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--sol)}
html[lang="ja"] .ag-role{letter-spacing:.04em}
.ag-head{margin-top:calc(var(--pu)*.5);font-size:calc(var(--pu)*2.5);font-weight:750;line-height:1.2;letter-spacing:-.01em}
.ag-card{display:grid;gap:calc(var(--pu)*.6);margin-top:calc(var(--pu)*2.4);padding:calc(var(--pu)*2) calc(var(--pu)*2.2);border-radius:calc(var(--pu)*2.4);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:calc(var(--pu)*1.6);line-height:1.3}
.ag-card b{font-size:calc(var(--pu)*2);font-weight:750;line-height:1.2}
.ag-card small{font-size:calc(var(--pu)*1.35);font-weight:650;color:var(--muted)}
.ag-card > span{color:var(--muted);font-weight:600}
.ag-card > .ag-toggle{display:flex;align-items:center;gap:calc(var(--pu)*1);margin-top:calc(var(--pu)*.8);color:var(--ink)}
.ag-toggle i{position:relative;flex:none;width:calc(var(--pu)*4);height:calc(var(--pu)*2.3);border-radius:999px;background:var(--mata)}
.ag-toggle i::after{content:"";position:absolute;top:calc(var(--pu)*.3);right:calc(var(--pu)*.3);width:calc(var(--pu)*1.7);height:calc(var(--pu)*1.7);border-radius:50%;background:var(--washi)}
.ag-sign{display:block;height:calc(var(--pu)*5.4);margin-top:calc(var(--pu)*.6);border-bottom:1px dashed var(--line-strong)}
.ag-sign svg{width:100%;height:100%;overflow:visible}
.ag-sign path{fill:none;stroke:var(--noite);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.ag-actions{display:flex;gap:calc(var(--pu)*1);margin-top:calc(var(--pu)*.8);opacity:0}
.ag-actions i{position:relative;flex:1;padding:calc(var(--pu)*1) 0;border-radius:calc(var(--pu)*1.6);text-align:center;font-style:normal;font-weight:750;font-size:calc(var(--pu)*1.6);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink)}
.ag-actions .ag-yes{--touch:rgba(248,246,241,.38);background:var(--noite);color:var(--washi);box-shadow:none}
/* The two answer buttons and the signed line share one spot: the buttons give way to the line once signed. */
.ag-actions,.ag-card > .ag-signed{grid-row:5;grid-column:1}
.ag-card > .ag-signed{display:flex;align-items:center;gap:calc(var(--pu)*.9);margin-top:calc(var(--pu)*.8);color:var(--ink);font-weight:750}
.ag-signed .mo-check{width:calc(var(--pu)*2.4);height:calc(var(--pu)*2.4)}
.ag-teacher .mo-face-in{justify-content:center}
.ag-teacher .mo-face b{font-size:calc(var(--pu)*2)}
.ag-sub{margin-top:calc(var(--du)*.6);font-size:calc(var(--du)*2.1);font-weight:650;color:var(--muted)}
.ag-rows li{grid-template-columns:calc(var(--du)*14) minmax(0,1fr) auto}
.ag-rows li > span:first-child{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-meter{height:calc(var(--du)*1.4);border-radius:999px;background:var(--line);overflow:hidden}
.ag-meter i{display:block;height:100%;border-radius:inherit;background:var(--mata);transform-origin:0 50%;transform:scaleX(var(--v,1))}
.ag-rows b{font-variant-numeric:tabular-nums;font-weight:750}

/* Sob medida: the owner explains a weekly task in a voice note; from then on it runs every Monday at 8:00.
   The sheet updates itself, the team gets the reminder, the bottleneck is found and fixed, the report goes out. */
/* On the red card the travelling bar is white; it turns red once it is over the window. */
.prod--custom .mo-packet{background:var(--washi)}
.cs-avatar{background:var(--sol)}
.cs-flip{position:relative}
.mo-chat-foot{flex:none;display:flex;align-items:center;gap:calc(var(--pu)*1);margin:0 calc(var(--pu)*1.6) calc(var(--pu)*2)}
.mo-chat-foot .mo-chat-input{flex:1;margin:0}
.mo-mic{--touch:rgba(14,23,38,.2);--ripple:rgba(14,23,38,.45);position:relative;flex:none;display:grid;place-items:center;width:calc(var(--pu)*4.6);height:calc(var(--pu)*4.6);border-radius:50%;background:#1DAA61;color:#FFF}
.mo-mic svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-voice{display:flex;align-items:center;gap:calc(var(--pu)*1.1);width:calc(var(--pu)*21)}
.cs-play{flex:none;width:0;height:0;border-style:solid;border-width:calc(var(--pu)*.9) 0 calc(var(--pu)*.9) calc(var(--pu)*1.4);border-color:transparent transparent transparent #54656F}
.cs-wave{position:relative;flex:1;height:calc(var(--pu)*3)}
.cs-wave > span{position:absolute;inset:0;display:flex;align-items:center;gap:calc(var(--pu)*.35)}
.cs-wave i{flex:1;height:var(--h,50%);border-radius:999px;background:#B3D4AD}
.cs-wave .cs-played i{background:#1DAA61}
.cs-voice small{flex:none;font-size:calc(var(--pu)*1.5);font-weight:600;color:#667781;font-variant-numeric:tabular-nums}
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--du)*1.8);margin-top:calc(var(--du)*2.2);line-height:1.3}
.cs-panel{display:grid;align-content:start;gap:calc(var(--du)*1.2);min-height:calc(var(--du)*18);padding:calc(var(--du)*1.8) calc(var(--du)*2);border-radius:calc(var(--du)*2);background:var(--washi);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cs-panel > b{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--du)*1);font-size:calc(var(--du)*2.1);font-weight:750}
.cs-ok{flex:none;width:calc(var(--du)*2.5);height:calc(var(--du)*2.5)}
.cs-ok circle{fill:var(--mata)}
.cs-ok path{fill:none;stroke:var(--noite);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.cs-sheet{display:grid;gap:calc(var(--du)*.5);font-size:calc(var(--du)*1.85)}
.cs-sheet p{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(var(--du)*1);padding-bottom:calc(var(--du)*.5);border-bottom:1px solid var(--line)}
.cs-sheet p > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.cs-sheet em{grid-column:2;grid-row:1;justify-self:end;padding:calc(var(--du)*.2) calc(var(--du)*.9);border-radius:999px;background:var(--mata);color:var(--noite);font-style:normal;font-size:calc(var(--du)*1.5);font-weight:750;white-space:nowrap}
.cs-sheet .cs-was{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong);opacity:0}
.cs-sum{display:flex;justify-content:space-between;font-size:calc(var(--du)*1.85);font-weight:800}
.cs-sum b{font-variant-numeric:tabular-nums}
.cs-msg{padding:calc(var(--du)*1.2) calc(var(--du)*1.4);border-radius:calc(var(--du)*1.4);border-top-left-radius:0;background:#FFF;font-size:calc(var(--du)*1.85);line-height:1.3;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.cs-seen{display:flex;align-items:center;gap:calc(var(--du)*.6);font-size:calc(var(--du)*1.75);font-weight:650;color:var(--muted)}
.cs-seen b{color:var(--ink);font-variant-numeric:tabular-nums}
.cs-bars{display:grid;gap:calc(var(--du)*.9)}
.cs-bars p{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(var(--du)*.45) calc(var(--du)*1);font-size:calc(var(--du)*1.7)}
.cs-bars p > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.cs-bars i{grid-column:1/-1;grid-row:2;display:block;height:calc(var(--du)*1.5);border-radius:999px;background:var(--noite);transform-origin:0 50%;transform:scaleX(var(--v,1))}
.cs-bars .cs-slow i{background:var(--mata)}
.cs-bars small{grid-column:2;grid-row:1;text-align:right;font-weight:750;font-size:calc(var(--du)*1.65);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-bars .cs-was{color:var(--sol);opacity:0}
.cs-fixed{justify-self:start;padding:calc(var(--du)*.3) calc(var(--du)*1);border-radius:999px;background:var(--mata);color:var(--noite);font-size:calc(var(--du)*1.55);font-weight:750}
.cs-doc{display:flex;align-items:center;gap:calc(var(--du)*1.6)}
.cs-page{flex:none;display:grid;align-content:start;gap:calc(var(--du)*.8);width:calc(var(--du)*8);height:calc(var(--du)*10.4);padding:calc(var(--du)*1.3);border-radius:calc(var(--du)*.8);background:#FFF;box-shadow:inset 0 0 0 1px var(--line-strong)}
.cs-page i{display:block;height:calc(var(--du)*.7);border-radius:999px;background:var(--line-strong);transform-origin:0 50%}
.cs-page i:first-child{width:70%;background:var(--sol)}
.cs-page i:nth-child(3){width:85%}
.cs-page i:nth-child(5){width:55%}
.cs-sent{display:grid;gap:calc(var(--du)*.4);font-size:calc(var(--du)*1.75);font-weight:650;color:var(--muted)}
.cs-sent b{color:var(--ink);font-size:calc(var(--du)*1.95)}

/* Narrow stages on the stacked page (phones, tablets): one column, the phone on top and bigger than it could be
   side by side, the window under it at full width. The sideways track never gets a stage this narrow. */
@container (max-width:439px){
  .track-outer:not(.is-h) .mo-scene{--pu:1.95cqw;--du:1.667cqw;--zoom:1.12;--stack:1;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:8cqw;padding:0}
  .track-outer:not(.is-h) .mo-scene > .mo-phone{grid-row:1;grid-column:1}
  .track-outer:not(.is-h) .mo-scene > .mo-dash{grid-row:2;grid-column:1}
}


/* Desktop: a pinned sideways track */
.track-outer.is-h{height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.track-outer.is-h .track{display:flex;flex-wrap:nowrap;gap:24px;width:max-content;max-width:none;margin:0;padding-top:calc(var(--header-h) * .5)}
.track-outer.is-h .prod{width:min(86vw,1180px);height:min(calc(100svh - var(--header-h) - 56px),720px);flex:none;grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
@media (max-height:760px){.track-outer.is-h .prod{padding-block:clamp(20px,3vh,36px)}.track-outer.is-h .feats{display:none}}

/* ---------- How it works ---------- */
.how{padding-block:clamp(72px,10vw,150px)}
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,64px)}
.step{display:grid;gap:16px;align-content:start;min-width:0}
/* Three columns share one row grid, so the titles and the paragraphs line up even when a title wraps. */
@media (min-width:880px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:clamp(28px,3.6vw,64px);row-gap:16px}.step{grid-row:span 3;grid-template-rows:subgrid}}
.step-mark{width:80px;height:auto;margin-bottom:10px;overflow:visible}
.sm-ghost{fill:none;stroke:var(--line);stroke-width:12.3;stroke-linecap:round}
.sm-bar{fill:none;stroke:var(--sol);stroke-width:12.3;stroke-linecap:round}
.step h3{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);line-height:1.12}
html[lang="ja"] .step h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);line-height:1.45}
.step p{color:var(--muted);max-width:36ch}
html[lang="ja"] .step p{max-width:24em}

/* ---------- Security ---------- */
.security{background:var(--noite);color:var(--washi);padding-block:clamp(72px,10vw,150px)}
.security-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (min-width:1024px){.security-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.security-head{position:sticky;top:calc(var(--header-h) + 48px)}}
.security-head{display:grid;gap:20px;min-width:0}
.security .lead{color:var(--night-muted)}
.lock{width:clamp(84px,9vw,128px);height:auto;overflow:visible;margin-bottom:8px}
.lock-shackle,.lock-body{fill:none;stroke:var(--washi);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.lock-bar{fill:none;stroke:var(--sol);stroke-width:13;stroke-linecap:round}
.security-list{display:grid;min-width:0}
.security-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--night-line)}
.security-list li:last-child{border-bottom:1px solid var(--night-line)}
/* Each promise carries a small copy of the lock above the title. It closes as its row scrolls up the screen. */
.sec-lock{display:block;width:34px;height:auto;margin-top:.1em;overflow:visible}
.security-list h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);line-height:1.2;letter-spacing:-.02em}
html[lang="ja"] .security-list h3{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.5;letter-spacing:.02em}
.security-list p{color:var(--night-muted);margin-top:6px;max-width:48ch}
html[lang="ja"] .security-list p{max-width:30em}
.security + .langs{border-top:0}

/* ---------- Languages ---------- */
.langs{padding-block:clamp(72px,10vw,150px);border-top:1px solid var(--line)}
.langs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,96px);align-items:center}
@media (min-width:1024px){.langs-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.langs-copy{display:grid;gap:20px;min-width:0}
.detect{display:grid;gap:6px;max-width:46ch;font-size:1.06rem;font-weight:650;min-height:3.2em}
.detect span{font-weight:450;color:var(--muted)}
.lang-big{display:grid;gap:12px;margin-top:6px}
.lang-big-label{font-size:.85rem;font-weight:750;color:var(--muted)}
.lang-big-row{display:flex;flex-wrap:wrap;gap:8px}
.lang-big-row button{min-height:48px;padding:0 20px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);font-weight:650;font-size:1rem;cursor:pointer;transition:background-color .35s,color .35s,box-shadow .35s}
@media (hover:hover){.lang-big-row button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.lang-big-row button[aria-pressed="true"]{background:var(--noite);color:var(--washi);box-shadow:none}
.greet{display:grid;gap:clamp(20px,3vw,32px);justify-items:start;min-width:0}
.greet-window{font-size:clamp(3.6rem,1.8rem + 7.4vw,8.6rem);height:1.16em;overflow:hidden;line-height:1.16;max-width:100%}
.greet-list{will-change:transform}
.greet-list li{height:1.16em;display:flex;align-items:center;font-weight:660;letter-spacing:-.05em;white-space:nowrap}
.greet-list li[lang="ja"]{font-size:.66em;height:1.758em;letter-spacing:0;font-weight:700}
.greet-under{height:clamp(7px,.8vw,11px);width:2.2em;font-size:clamp(3.6rem,1.8rem + 7.4vw,8.6rem);border-radius:8px;background:var(--sol);margin-top:-4px}
.greet-bubble{background:var(--noite);color:var(--washi);border-radius:24px 24px 24px 6px;padding:16px 20px 12px;width:min(440px,100%);font-size:1.05rem;line-height:1.5;font-weight:520}
.greet-text{min-height:3em}
.greet-text[lang="ja"]{line-height:1.7;letter-spacing:.02em}
.greet-meta{display:block;text-align:right;font-size:.72rem;opacity:.6;margin-top:4px;font-variant-numeric:tabular-nums}
.type-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--sol);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ---------- Story ---------- */
.story{position:relative;padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(150px,18vw,240px);border-top:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,96px)}
@media (min-width:1024px){.story-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}}
.story-copy{display:grid;gap:22px;min-width:0}
.story .lead{color:var(--ink);max-width:44ch}
.sign{display:flex;align-items:center;gap:12px;font-weight:750}
.sign::before{content:"";width:30px;height:4px;border-radius:3px;background:var(--sol)}
.promises{display:grid;gap:14px;min-width:0}
.promises-label{font-size:.86rem;font-weight:750;color:var(--muted)}
.promise-list{display:grid}
.promise-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.promise-list li:last-child{border-bottom:1px solid var(--line)}
.pr-bar{display:block;height:6px;margin-top:.72em;border-radius:4px;background:var(--sol);transform-origin:0 50%}
.promise-list h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.15;letter-spacing:-.025em}
html[lang="ja"] .promise-list h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.45;letter-spacing:.02em}
.promise-list p{color:var(--muted);margin-top:6px;max-width:44ch}
html[lang="ja"] .promise-list p{max-width:28em}
.nightfall{position:absolute;left:0;right:0;bottom:-1px;display:grid;pointer-events:none}
.nightfall i{display:block;height:clamp(20px,2.4vw,34px);background:var(--madrugada);transform-origin:0 50%;margin-top:-1px}
.nightfall i:nth-child(2){transform-origin:100% 50%}

/* ---------- Contact ---------- */
.contact{background:var(--madrugada);color:var(--night-ink);padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(96px,12vw,170px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px,6vw,88px)}
@media (min-width:1024px){.contact-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}}
.contact-copy{display:grid;gap:20px;align-content:start;min-width:0}
.contact .lead{color:var(--night-muted)}
.email-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;font-size:.98rem;color:var(--night-muted)}
.email{color:var(--washi);font-weight:700;user-select:all;-webkit-user-select:all}
.link-btn{border:0;background:none;color:var(--washi);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:pointer;padding:8px 2px;font-weight:650;font-size:.92rem;border-radius:6px}
.composer{background:var(--night-raise);border-radius:var(--radius);padding:clamp(20px,3.4vw,40px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px;box-shadow:inset 0 0 0 1px var(--night-line);min-width:0}
.field{display:grid;gap:10px}
.field label,.chips legend,.preview-label{font-size:.86rem;font-weight:750;color:var(--night-muted);padding:0}
.field input{height:54px;width:100%;border-radius:16px;border:0;box-shadow:inset 0 0 0 1.5px var(--night-line);background:var(--madrugada);color:var(--washi);padding:0 18px;font-size:1rem;transition:box-shadow .3s}
.field input::placeholder{color:#737A9E}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--washi)}
.chips{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--night-line);font-weight:620;font-size:.93rem;line-height:1.2;transition:background-color .3s,color .3s,box-shadow .3s,transform .25s var(--ease);pointer-events:none}
.chip span::before{content:"";width:0;height:3px;border-radius:2px;background:var(--sol);transition:width .4s var(--ease);margin-right:-8px}
@media (hover:hover){.chip:hover span{box-shadow:inset 0 0 0 1.5px var(--night-muted)}}
.chip input:checked + span{background:var(--washi);color:var(--noite);box-shadow:none}
.chip input:checked + span::before{width:14px;margin-right:0}
.chip input:focus-visible + span{outline:3px solid var(--washi);outline-offset:3px}
.chip input:active + span{transform:scale(.96)}
.preview{display:grid;gap:10px}
.preview-bubble{justify-self:end;width:fit-content;max-width:min(100%,540px);background:var(--washi);color:var(--noite);border-radius:24px 24px 6px 24px;padding:16px 20px;font-size:1.02rem;line-height:1.55;font-weight:520}
html[lang="ja"] .preview-bubble{line-height:1.8}
.preview-bubble p{min-height:1.55em;white-space:pre-wrap;overflow-wrap:anywhere}
.send-row{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:560px){.send-row .btn{flex:1 1 100%}}

/* ---------- Footer ---------- */
.footer{background:var(--madrugada);color:var(--washi);overflow:hidden;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}
.footer-inner{display:grid;gap:clamp(40px,6vw,72px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--night-line)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 26px}
.footer-nav a{color:var(--night-muted)}
@media (hover:hover){.footer-nav a:hover{color:var(--washi)}}
.lang-inline--night{display:flex;box-shadow:inset 0 0 0 1px var(--night-line)}
.footer-mark{display:grid;gap:clamp(10px,1.6vw,22px)}
.footer-wm{width:100%;height:auto;color:var(--washi);overflow:visible}
/* The E of the closing name is the three red bars, the same ones that opened the page. */
.footer-wm .fb{stroke:var(--sol)}
.footer-base{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;font-size:.88rem;color:var(--night-muted);font-weight:550}
.to-top{margin-left:auto;color:var(--washi);font-weight:700;text-decoration:none;padding:8px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/100% 2px no-repeat}

/* ---------- End card ---------- */
.endcard{position:fixed;inset:0;z-index:260;color:var(--washi);display:grid;place-items:center;overflow-x:hidden;overflow-y:auto}
.endcard[hidden]{display:none}
.endcard-bg{position:absolute;inset:0;background:var(--madrugada)}
.endcard-bands{position:absolute;inset:0;display:grid;grid-template-rows:repeat(3,1fr)}
.endcard-bands i{margin-block:-1px}
.endcard-bands i:nth-child(odd){background:var(--sol)}
.endcard-bands i:nth-child(2){background:var(--washi)}
.endcard-inner{position:relative;display:grid;justify-items:center;text-align:center;gap:clamp(18px,3vw,28px);width:100%;max-width:760px;padding-block:32px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.endcard-wm{width:min(68vw,520px);height:auto;overflow:visible}
.eb1,.eb3{stroke:var(--sol)}
.eb2{stroke:var(--washi)}
.ew-e{stroke:var(--sol)}
.endcard-ok{width:clamp(88px,12vw,124px);height:auto;color:var(--ouro);margin-top:clamp(6px,2vw,18px);overflow:visible}
.endcard-title{font-size:clamp(1.6rem,1.15rem + 2vw,2.6rem);line-height:1.15;letter-spacing:-.03em}
html[lang="ja"] .endcard-title{letter-spacing:.01em;line-height:1.4}
.endcard-body{color:var(--night-muted);max-width:42ch;font-size:1.05rem}
.endcard-demo{display:block;margin-top:8px;font-size:.9rem;color:var(--night-muted)}

/* ---------- Curtain, toast ---------- */
.curtain{position:fixed;inset:0;z-index:250;pointer-events:none;display:grid;grid-template-rows:repeat(3,1fr);visibility:hidden}
.curtain i{background:var(--sol);margin-block:-1px}
.curtain i:nth-child(2){background:var(--noite)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:280;transform:translate(-50%,calc(100% + 40px));max-width:calc(100vw - 32px);background:var(--washi);color:var(--noite);padding:13px 20px;border-radius:999px;font-weight:650;font-size:.94rem;box-shadow:0 0 0 1px var(--line-strong);transition:transform .55s var(--ease);pointer-events:none}
.toast.is-on{transform:translate(-50%,0)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .hero-copy,.js .hero-stage{visibility:visible}
}