:root{--i-bar:url("assets/bar.jpg");--i-bed:url("assets/bed.jpg");--i-brickbar:url("assets/brickbar.jpg");--i-brickchair:url("assets/brickchair.jpg");--i-dine:url("assets/dine.jpg");--i-dining5:url("assets/dining5.jpg");--i-ext:url("assets/ext.jpg");--i-garden:url("assets/garden.jpg");--i-hero:url("assets/hero.jpg");--i-lobby:url("assets/lobby.jpg");--i-plan1:url("assets/plan1.jpg");--i-plan2:url("assets/plan2.jpg");--i-planS:url("assets/planS.jpg");--i-pool8:url("assets/pool8.jpg");--i-sculpt:url("assets/sculpt.jpg");--i-shelf:url("assets/shelf.jpg");--i-speaker:url("assets/speaker.jpg");--i-suite:url("assets/suite.jpg");--i-sunV:url("assets/sunV.jpg");--i-sunW:url("assets/sunW.jpg");--i-surf1:url("assets/surf1.jpg");--i-twin:url("assets/twin.jpg");--i-wave:url("assets/wave.jpg");}
:root{--stone:#f6f3ee;--sheet:#fff;--ink:#1c1712;--mut:#756c61;--soft:#f3f0ea;--line:#1c171220;--green:#1f3a31;--e:cubic-bezier(.2,.7,.2,1);--sans:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;--serif:"Instrument Serif",Georgia,"Times New Roman",serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--stone:#0f0c09;--sheet:#1a1612;--ink:#f2ece2;--mut:#a39a8d;--soft:#252019;--line:#f2ece228}}
:root[data-theme="dark"]{--stone:#0f0c09;--sheet:#1a1612;--ink:#f2ece2;--mut:#a39a8d;--soft:#252019;--line:#f2ece228}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--stone);color:var(--ink);font:300 15px/1.55 var(--sans);letter-spacing:-.015em;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid #6aa392;outline-offset:3px}
.sheet{box-shadow:0 0 0 1px #1c17120f;max-width:1440px;margin:14px auto;background:var(--sheet);border-radius:32px;padding:12px;overflow:hidden}
.ph{position:relative;overflow:hidden;isolation:isolate;border-radius:22px}
.ph::before,.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--p) var(--pos,center)/cover no-repeat;transform:scale(1.001);transition:transform 1.3s var(--e)}
.rv.ph::before{transform:scale(1.14)}.rv.ph.in::before{transform:scale(1.001)}
.tile::after,.soc .ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0000 42%,#0009)}

.pill{transition:transform .4s var(--e),background-color .3s,box-shadow .4s var(--e),opacity .3s}.pill:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000002e}.pill:active{transform:none}
.mode{transition:transform .5s var(--e),background-color .3s}.mode:hover{transform:rotate(25deg)}
.mail{position:relative}.hv{transition:transform .7s var(--e),box-shadow .7s var(--e)}.hv.hv:hover{transform:scale(1.035);z-index:4;box-shadow:0 26px 50px -20px #00000070}.rv.done{transition:transform .7s var(--e),box-shadow .7s var(--e),opacity .3s}
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e) var(--d,0ms),transform 1.1s var(--e) var(--d,0ms)}.rv.in{opacity:1;transform:none}
.tile .pill{transition:background-color .3s,transform .4s var(--e)}.tile:hover .pill{background:#fff}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--i-hero) center 40%/cover;animation:kb 2.8s var(--e) both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0007,#0000 28%,#000b 100%)}
.hero{isolation:isolate}
.ln{display:block;overflow:hidden;padding:0 .1em .14em 0;margin-bottom:-.14em}.ln>span{display:block;animation:up 1.3s var(--e) .4s both}.ln+.ln>span{animation-delay:.58s}
nav{animation:drop 1s var(--e) .2s both}.sel{animation:rise 1s var(--e) 1s both}.lede{animation:rise 1s var(--e) 1.05s both}.card{animation:rise 1.1s var(--e) 1.15s both}.bar{animation:rise 1.1s var(--e) 1.3s both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
nav .links a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--e)}nav .links a:hover{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}
h1,h2,h3{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.035em;line-height:.96}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 20px;border-radius:99px;background:#fff;color:#1c1712;font:400 13px var(--sans);text-decoration:none;white-space:nowrap;border:1px solid transparent}
.pill.dk{background:var(--ink);color:var(--sheet)}
.pill.ol{background:transparent;color:inherit;border-color:currentColor}
.pill.sm{height:30px;padding:0 14px;font-size:12px;background:#ffffffd9}
/* hero */
.hero{position:relative;min-height:min(86vh,800px);border-radius:24px;overflow:hidden;color:#fff}
nav{position:absolute;inset:18px 22px auto;display:flex;align-items:center;justify-content:space-between;font-size:13px;z-index:2}
nav b{font:italic 400 28px var(--serif);letter-spacing:-.03em}
nav .links{display:flex;gap:34px}nav .links a{text-decoration:none;opacity:.9;padding-bottom:2px}
nav .r{display:flex;gap:8px;align-items:center}.mode{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}.mode svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}.mode .s{display:none}[data-theme="dark"] .mode .s{display:block}[data-theme="dark"] .mode .m{display:none}nav .mode{width:38px;height:38px;border-radius:50%;background:#ffffff26;border:1px solid #ffffff55;color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}footer .mode{height:30px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:none;color:var(--ink);font-size:12px}
.sel{position:absolute;left:22px;top:84px;background:#fff;color:#1c1712;border-radius:18px;padding:12px 18px;display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.25}
.sel small{display:block;color:#7a7066;font-size:11px}
.ic{width:34px;height:34px;border-radius:50%;border:1px solid #1c171230;display:grid;place-items:center}
.ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
.hero h1{position:absolute;left:34px;bottom:112px;font-size:clamp(58px,9.4vw,138px);max-width:9em}
.lede{position:absolute;left:36px;bottom:40px;max-width:380px;font-size:14px;opacity:.9}
.bar{position:absolute;right:22px;bottom:30px;display:flex;align-items:center;gap:4px;padding:8px 8px 8px 12px;border-radius:99px;background:#ffffff26;border:1px solid #ffffff55;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 0 #ffffff55;font-size:13px}.bar div{padding:6px 20px;border-right:1px solid #ffffff40;line-height:1.3}.bar div:nth-child(3){border:0}.bar small{display:block;font-size:11px;opacity:.75}.bar .pill{height:46px;margin-left:4px}
.card{position:absolute;right:22px;top:84px;width:276px;background:#fff;color:#1c1712;border-radius:22px;padding:16px;font-size:13px}
.card .top{display:flex;gap:12px;justify-content:space-between;align-items:flex-end}
.card .top div:first-child{font:italic 400 24px/1 var(--serif);letter-spacing:-.03em}
.card .top .ph{width:84px;height:84px;border-radius:14px;flex:none}
.rows{margin-top:14px;background:#f2efe9;border-radius:14px;padding:6px 14px}
.rows p{display:flex;justify-content:space-between;padding:7px 0;color:#7a7066}.rows p span{color:#1c1712}
.card .pill{margin-top:10px;width:100%;justify-content:center}
/* sections */
.row{display:grid;grid-template-columns:2fr 1fr;gap:28px;padding:12px 0 0;align-items:end}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{height:150px;position:relative;display:flex;align-items:flex-end;padding:14px;color:#fff;font:italic 400 24px var(--serif);letter-spacing:-.03em;border-radius:20px;overflow:hidden;isolation:isolate}
.tile .pill{position:absolute;top:12px;right:12px}
.side{font-size:14px;color:var(--mut);max-width:340px}
.sec{padding:96px clamp(14px,4vw,56px) 0}
.sec h2{font-size:clamp(40px,6vw,86px);max-width:12em}
.sec>p.lead{max-width:460px;margin-top:22px;color:var(--mut);font-size:16px}
.collage{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;margin-top:48px;align-items:start}
.collage .ph{aspect-ratio:3/4}.collage .ph:nth-child(2){margin-top:60px}.collage .ph:nth-child(3){margin-top:24px}
.room{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-top:14px}
.room:nth-child(even){grid-template-columns:1fr 1.25fr}.room:nth-child(even) .ph{order:2}
.room>.ph{min-height:520px}.room>*,.sys>*,.menu>*{min-width:0}
.info{background:var(--soft);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px}
.info h3{font-size:54px}.info .m{color:var(--mut);font-size:13px}
.info .plan{margin-top:auto;aspect-ratio:3/2;border-radius:14px;background-size:cover}
.info .act{display:flex;justify-content:space-between;align-items:center}
.bento{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:repeat(2,300px);gap:14px;margin-top:44px}.bento .ph:first-child{grid-row:span 2}
.mos{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,300px);gap:14px;margin-top:44px}.mos .tall{grid-row:span 2}.mos .wide{grid-column:span 2}
.menu{margin:96px 0 0;background:var(--green);color:#f2ece2;border-radius:24px;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,64px);padding:14px}
.menu .ph{min-height:560px}
.menu .t{padding:clamp(14px,3vw,40px) clamp(0px,2vw,30px) 20px}
.menu h2{font-size:clamp(48px,7vw,104px);margin-bottom:34px}
.menu .it{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.menu p{padding:14px 0;border-top:1px solid #f2ece230;font-size:15px;font-weight:400}
.menu p span{display:block;font-weight:300;opacity:.65;font-size:13px}
.sys{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:start;margin-top:44px}
.mail{width:340px;background:#fff;color:#1c1712;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px #1c171214}
.mail .ph{height:170px;border-radius:0}
.mail div.b{padding:22px;font-size:13px}.mail h3{font-size:40px;margin-bottom:10px}.mail .pill{margin-top:16px}
.mail small{display:block;padding:12px 22px;background:#f2efe9;color:#7a7066;font-size:11px}
.soc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.soc .ph{aspect-ratio:4/5;display:flex;align-items:flex-end;padding:16px;color:#fff;font:italic 400 clamp(22px,2.6vw,34px)/1 var(--serif);letter-spacing:-.03em}
.kit{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.kit i{width:30px;height:30px;border-radius:50%;border:1px solid var(--line)}
.cta{margin-top:96px;min-height:420px;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:clamp(22px,4vw,54px);color:var(--ink);background:var(--soft)}
.cta h2{font-size:clamp(46px,8vw,118px);max-width:10em}.cta p{max-width:470px;color:var(--mut);font-size:16px}
.cta div{display:flex;gap:10px;flex-wrap:wrap}
footer{padding:26px clamp(14px,4vw,56px) 16px;color:var(--mut);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:900px){.card{display:none}.lede{display:none}.bar{left:14px;right:14px;bottom:14px;flex-wrap:wrap}.bar div{padding:6px 10px;flex:1;min-width:30%}.bar div:nth-child(3){border-right:0}.bar .pill{width:100%;justify-content:center;margin:0}.bento{grid-template-columns:1fr;grid-template-rows:none}.bento .ph{height:260px}.bento .ph:first-child{grid-row:auto}nav .links{display:none}.row,.room,.room:nth-child(even),.menu,.sys{grid-template-columns:1fr}.room:nth-child(even) .ph{order:0}.room>.ph{min-height:340px}.mos{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:240px}.mos .tall{grid-row:auto}.collage{grid-template-columns:1fr 1fr}.collage .ph:nth-child(3){display:none}.hero h1{bottom:150px}.menu .ph{min-height:340px}.menu .it{grid-template-columns:1fr}.mail{width:100%}.tiles{grid-template-columns:1fr 1fr 1fr}.tile{height:110px;font-size:18px}.soc .ph{font-size:20px}.sec{padding-top:64px}.menu{margin-top:56px}.sys{gap:32px}.cta{margin-top:64px;min-height:0;padding:40px 22px;gap:18px}.mos{grid-auto-flow:dense}footer{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---- brand system: each hotel is a token set over the same template ---- */
.ph::before,.tile::before{filter:var(--grade,none);transition:transform 1.3s var(--e),filter .9s var(--e)}
:root[data-brand=hollow]{--stone:#e9e5d8;--sheet:#f6f3e8;--ink:#16221a;--mut:#5d6a5c;--soft:#e4dfcc;--line:#16221a22;--green:#2c4733;--serif:"Newsreader","Instrument Serif",Georgia,serif;--grade:saturate(.8) sepia(.14) hue-rotate(-10deg) contrast(1.02)}
:root[data-brand=hollow][data-theme=dark]{--stone:#0b110d;--sheet:#131b15;--ink:#ece9da;--mut:#9aa595;--soft:#1c261f;--line:#ece9da26}
:root[data-brand=casa]{--stone:#f1e2d2;--sheet:#fbf2e8;--ink:#2b1610;--mut:#8a6657;--soft:#f3dfcb;--line:#2b161022;--green:#8a3a22;--serif:"Fraunces","Instrument Serif",Georgia,serif;--grade:sepia(.22) saturate(1.12) hue-rotate(-6deg)}
:root[data-brand=casa][data-theme=dark]{--stone:#140b08;--sheet:#1e1310;--ink:#f6e8da;--mut:#b99a88;--soft:#2a1b15;--line:#f6e8da26}
:root[data-brand=casa] :is(h1,h2,h3,nav b){font-weight:300}
:root[data-brand=hollow] .pill{border-radius:8px}
:root[data-brand=hollow] :is(.sheet,.cta,.mail){border-radius:14px}
:root[data-brand=hollow] .mail{background:#fbf9f1;color:#16221a}
:root[data-brand=hollow] .mail small{background:#ebe7d6;color:#6b765f}
:root[data-brand=casa] .mail{background:#fffaf4;color:#2b1610}
:root[data-brand=casa] .mail small{background:#f6e6d4;color:#94705f}


/* switcher */
.brands{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;transform:translate(-50%,24px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:2px;padding:5px;border-radius:99px;color:var(--ink);background:color-mix(in srgb,var(--sheet) 78%,transparent);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 40px -14px #00000055;transition:opacity .5s var(--e),transform .6s var(--e),background-color .6s var(--e)}
.brands.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.brands b{font:400 10px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);padding:0 10px 0 14px;white-space:nowrap}
.brands button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border:0;border-radius:99px;background:transparent;color:inherit;font:400 13px var(--sans);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background-color .35s var(--e),color .35s var(--e)}
.brands button:hover{background:var(--soft)}
.brands button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
.brands button i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px #00000026}
@media(max-width:600px){.brands b{display:none}.brands button{padding:0 11px}.brands button span{display:none}.brands button[aria-pressed=true] span{display:inline}}

.mailview{border:1px solid var(--line);border-radius:24px;padding:14px;background:var(--sheet);color:var(--ink);width:min(720px,94vw);max-width:none;max-height:92vh;box-shadow:0 40px 90px -30px #000a}
.mailview::backdrop{background:#0008;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mailview .mv{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 6px 14px}
.mailview .t{font-size:14px}.mailview .t small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.mailview .act{display:flex;gap:8px}
.mailview .pill.ol{color:var(--ink)}.mailview .pill.sm{background:transparent}.mailview .pill.dk.sm{background:var(--ink);color:var(--sheet)}
.mailview iframe{display:block;margin:0 auto;width:100%;height:min(72vh,760px);border:0;border-radius:14px;background:#fff;transition:width .5s var(--e)}
.mailview.ph1 iframe{width:375px;max-width:100%}

.mailview{margin:auto;scrollbar-width:none}
.mailview::-webkit-scrollbar{display:none}
.mailview iframe{scrollbar-width:none}

/* product prototype */
#product,#how{text-align:center}#product h2,#product>p.lead,#how h2,#how>p.lead{margin-left:auto;margin-right:auto}
.app{text-align:left;margin:52px auto 0;max-width:1180px;border:1px solid var(--line);border-radius:28px;background:var(--sheet);overflow:hidden;box-shadow:0 1px 2px #0000000a,0 24px 48px -38px #0000002e}
.ah{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 26px;border-bottom:1px solid var(--line)}
.hl{display:flex;align-items:center;gap:12px}.hl b{display:block;font-weight:500;font-size:14px;line-height:1.2}.hl small{display:block;color:var(--mut);font-size:12px}
.aic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--ink);color:var(--sheet)}.aic svg{width:16px;height:16px;fill:currentColor}
.tag{margin-left:4px;padding:4px 11px;border-radius:99px;background:var(--soft);font-size:11px;letter-spacing:.02em;transition:background-color .4s var(--e),color .4s}
.app[data-s=failed] .tag{background:#b4532e;color:#fff}.app[data-s=sent] .tag{background:#2f7d5b;color:#fff}
.seg{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mut)}.seg .tr{display:flex;padding:3px;border-radius:99px;background:var(--soft)}
.seg button{border:0;background:transparent;color:var(--mut);border-radius:99px;padding:6px 14px;font:inherit;font-size:12px;cursor:pointer;transition:background-color .3s,color .3s,box-shadow .3s}
.seg button[aria-pressed=true]{background:var(--sheet);color:var(--ink);box-shadow:0 1px 3px #00000030}
.ab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ac{padding:30px 32px 32px}
.ap{display:grid;place-items:center;padding:36px 28px;border-left:1px solid var(--line);background:radial-gradient(color-mix(in srgb,var(--ink) 11%,transparent) 1px,transparent 1.3px) 0 0/18px 18px,var(--stone)}
.pw{width:min(350px,100%);display:grid;gap:12px}.pw small{color:var(--mut);font-size:12px}
.why{padding:16px 18px;border-radius:18px;background:var(--soft);font-size:13px}.why b{display:block;font-weight:500;color:var(--mut);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}.why p{line-height:1.5}
.f{display:grid;gap:7px;margin-top:20px}.f>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.f input,.f textarea{width:100%;font:inherit;font-size:14px;line-height:1.5;color:var(--ink);background:var(--stone);border:1px solid transparent;border-radius:14px;padding:12px 15px;resize:vertical;transition:border-color .3s,background-color .3s}
.f input:hover,.f textarea:hover{border-color:var(--line)}.f input:focus,.f textarea:focus{border-color:var(--ink);outline:0}.f input:disabled,.f textarea:disabled{opacity:.55}
.chip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 7px;border-radius:99px;background:var(--stone);font-size:13px;width:fit-content}
.avs{display:inline-flex}.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:500 9px var(--sans);font-style:normal;color:#fff;border:2px solid var(--stone);margin-left:-7px}.avs .av:first-child{margin-left:0}
.ck{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.ck span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:var(--soft);font-size:12px;color:var(--mut)}.ck i{font-style:normal;color:#2f7d5b}
.acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}.acts small{color:var(--mut);font-size:12px}
.app .pill:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.app button.pill{cursor:pointer}.app .pill.ol.sm{background:transparent;color:var(--ink)}
.pv{background:#fff;color:#1c1712;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px -24px #00000040,0 0 0 1px #1c171214}.pv .ph{height:150px;border-radius:0}
.pvb{padding:22px}.pvb h4{font:italic 400 40px/1 var(--serif);letter-spacing:-.03em;margin-bottom:10px}.pvb p{font-size:13px;margin-bottom:16px;white-space:pre-line}
.as{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:16px 26px;border-top:1px solid var(--line);background:var(--soft);font-size:13px;transition:background-color .5s var(--e)}
.as::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none;transition:background-color .4s}
.app[data-s=undo] .as::before,.app[data-s=sending] .as::before{background:var(--ink)}.app[data-s=sent] .as::before{background:#2f7d5b}.app[data-s=failed] .as::before{display:none}
.app[data-s=failed] .as{background:color-mix(in srgb,#c2410c 11%,var(--sheet))}.app[data-s=sent] .as{background:color-mix(in srgb,#2f7d5b 13%,var(--sheet))}
.as>span{flex:1;min-width:200px}
.pb{display:block;flex-basis:100%;height:3px;border-radius:3px;background:var(--line);overflow:hidden}.pb u{display:block;height:100%;background:var(--ink);transform-origin:left;animation:pb 5s linear forwards}.pb.ind u{animation-duration:1.4s}
@keyframes pb{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fx{flex-basis:100%}.fx ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:8px}
.fx li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:var(--sheet);border:1px solid var(--line)}
.fx li b{display:block;font-weight:500}.fx li span{font-size:13px}.fx em{font-style:normal;font-size:12px;color:var(--mut);white-space:nowrap}.fx li.ok em{color:#2f7d5b}
@media(max-width:900px){.ab{grid-template-columns:1fr}.ac{padding:22px 20px}.ap{border-left:0;border-top:1px solid var(--line);padding:28px 18px}.ah,.as{padding:14px 18px}.app{margin-top:36px;border-radius:24px}}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:48px auto 0;max-width:1180px;text-align:left}
.how>div{padding:28px;border-radius:24px;background:var(--soft)}
.how small{display:block;color:var(--mut);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.how b{display:block;font:italic 400 34px/1.02 var(--serif);letter-spacing:-.03em;margin-bottom:12px}
.how p{font-size:14px;line-height:1.55;color:var(--mut)}#how .lead a{color:var(--ink)}
@media(max-width:900px){.how{grid-template-columns:1fr;margin-top:36px}.how>div{padding:22px}}

@media(max-width:900px){.bar{border-radius:30px;padding:8px}}
/* smooth theme/brand swap: one crossfade instead of many element transitions */
.sw *,.sw *::before,.sw *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1)}