:root{
  --coral:#FF6D5A; --coral-deep:#E14C38; --wash:#FFF0ED;
  --ink:#111317; --body:#596070; --faint:#8C93A2;
  --paper:#FFFFFF; --band:#F1F4F6; --fill:#EFF1F4; --line:#E4E7EB; --hair:#EBEEF1; --card:#FFFFFF;
  --green:#15854A; --green-bg:#E4F4EA;
  --amber:#9A5E02; --amber-bg:#FCF1DF;
  --red:#C02A24; --red-bg:#FBE9E7;
  --user:#DBE6FB;
  --lift:0 1px 2px rgba(22,24,30,.05), 0 22px 48px -20px rgba(22,24,30,.22);
  --lift-sm:0 1px 2px rgba(22,24,30,.05), 0 8px 20px -12px rgba(22,24,30,.2);
  --sans:"Google Sans","Google Sans Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --brand:"JorttyBrand",var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,5vw,48px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ink:#F3F4F7; --body:#A4AAB8; --faint:#767D8C;
  --paper:#0D0F12; --band:#13161A; --fill:#20232A; --line:#262A31; --hair:#22262C; --card:#181B20;
  --wash:#2A1612;
  --green:#55C788; --green-bg:#122C1D; --amber:#E8AC55; --amber-bg:#2A2111;
  --red:#FF8679; --red-bg:#2C1816; --user:#212F49;
  --lift:0 1px 2px rgba(0,0,0,.5), 0 22px 48px -20px rgba(0,0,0,.85);
  --lift-sm:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --ink:#F3F4F7; --body:#A4AAB8; --faint:#767D8C;
  --paper:#0D0F12; --band:#13161A; --fill:#20232A; --line:#262A31; --hair:#22262C; --card:#181B20;
  --wash:#2A1612;
  --green:#55C788; --green-bg:#122C1D; --amber:#E8AC55; --amber-bg:#2A2111;
  --red:#FF8679; --red-bg:#2C1816; --user:#212F49;
  --lift:0 1px 2px rgba(0,0,0,.5), 0 22px 48px -20px rgba(0,0,0,.85);
  --lift-sm:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.7);
}

@font-face{font-family:"JorttyBrand"; font-style:normal; font-weight:400; font-display:swap;
  src:url(data:font/woff2;base64,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) format("woff2")}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,ul{margin:0}
a{color:inherit; text-decoration:none}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--coral); outline-offset:3px; border-radius:10px}
.wrap{max-width:1160px; margin:0 auto; padding-inline:var(--gut)}

h1{font-size:clamp(2.45rem,6vw,4.3rem); font-weight:700; line-height:1.04;
  letter-spacing:-.042em; text-wrap:balance}
h2{font-size:clamp(1.66rem,3.1vw,2.5rem); font-weight:600; line-height:1.13;
  letter-spacing:-.033em; text-wrap:balance}
.lede{font-size:clamp(1.04rem,1.4vw,1.17rem); color:var(--body); line-height:1.58; max-width:49ch}
.para{color:var(--body); line-height:1.66; max-width:45ch; font-size:1.0625rem}
.tiny{font-size:.84rem; color:var(--faint); line-height:1.5}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink);
  font-weight:500; font-size:1rem; padding:13px 26px; border-radius:999px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), opacity .18s, background .18s}
.btn:hover{transform:translateY(-1.5px); opacity:.9}
.btn.coral{background:var(--coral); border-color:var(--coral); color:#fff}
.btn.coral:hover{background:var(--coral-deep); border-color:var(--coral-deep); opacity:1}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--fill); opacity:1}
.btn.sm{padding:9px 18px; font-size:.94rem}

.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:80;
  background:color-mix(in srgb,var(--paper) 85%,transparent); backdrop-filter:blur(18px) saturate(1.6)}
.nav .wrap{display:flex; align-items:center; height:66px; gap:10px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--brand);
  font-weight:400; font-size:1.62rem; letter-spacing:0; line-height:1}
.mark{width:34px; height:34px; display:block; flex:none}
.jm-disc{transform-box:fill-box; transform-origin:center}
.jm-bar,.jm-smile{transform-box:fill-box; transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .jmark .jm-disc{animation:jmPop .6s cubic-bezier(.2,1.25,.4,1) both}
  .jmark .jm-bar{animation:jmBar .5s cubic-bezier(.2,1.35,.4,1) .16s both}
  .jmark .jm-smile{stroke-dasharray:50; stroke-dashoffset:50;
    animation:jmDraw .74s cubic-bezier(.33,.8,.3,1) .28s forwards}
  .logo:hover .jm-smile{animation:jmGrin .55s cubic-bezier(.3,1.2,.4,1)}
  .logo:hover .jm-bar{animation:jmNod .55s cubic-bezier(.3,1.2,.4,1)}
}
@keyframes jmPop{from{transform:scale(.55); opacity:0}to{transform:none; opacity:1}}
@keyframes jmBar{from{transform:translateY(-6px) scaleY(.2); opacity:0}to{transform:none; opacity:1}}
@keyframes jmDraw{to{stroke-dashoffset:0}}
@keyframes jmGrin{45%{transform:translateY(1.1px) scaleX(1.07)}}
@keyframes jmNod{45%{transform:translateY(1.4px)}}
.nav .sp{margin-left:auto}

/* ───────────── hero ───────────── */
.hero{text-align:center; padding-block:clamp(44px,6.5vw,92px) 0}
.hero h1{margin-bottom:22px}
.hero h1 span{display:block; color:var(--body)}
.hero .lede{margin:0 auto}

/* ───────────── the live console ───────────── */
.face{width:32px; height:32px; border-radius:50%; flex:none}
.face svg{width:100%; height:100%; display:block}
.wcard{background:var(--card); border-radius:14px; box-shadow:var(--lift-sm); padding:14px}
.verdict{display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:600;
  padding:5px 11px; border-radius:999px; margin-bottom:10px}
.verdict svg{width:13px; height:13px}
.v-bad{background:var(--red-bg); color:var(--red)}
.v-hm{background:var(--amber-bg); color:var(--amber)}
.v-ok{background:var(--green-bg); color:var(--green)}
.wcard h4{font-size:1.02rem; font-weight:600; letter-spacing:-.016em; line-height:1.3; margin-bottom:11px}
.why{display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--hair); font-size:.875rem; line-height:1.45}
.why:first-of-type{border-top:0; padding-top:2px}
.why .dot{width:6px; height:6px; border-radius:50%; margin-top:7px; flex:none; background:var(--coral)}
.why b{font-weight:600; display:block}
.why em{font-style:normal; color:var(--body); display:block}
.ev{font-family:var(--mono); font-size:.78rem; background:var(--fill); padding:1px 5px;
  border-radius:4px; word-break:break-all; color:var(--ink)}
.limit{margin-top:11px; padding-top:11px; border-top:1px solid var(--hair);
  font-size:.82rem; color:var(--faint); line-height:1.5}
.limit b{color:var(--body); font-weight:600}
.steps{counter-reset:s; display:flex; flex-direction:column; gap:10px; margin-top:4px}
.steps li{counter-increment:s; list-style:none; display:flex; gap:11px; font-size:.9rem; line-height:1.45}
.steps li::before{content:counter(s); flex:none; width:21px; height:21px; border-radius:50%;
  background:var(--coral); color:#fff; font-size:.72rem; font-weight:600;
  display:grid; place-items:center; margin-top:2px}
.dots{align-self:flex-start; display:inline-flex; gap:5px; padding:13px 15px;
  background:var(--fill); border-radius:18px 18px 18px 5px}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--faint); display:block}

.chip{border:1.5px solid var(--line); background:var(--card); border-radius:999px;
  padding:8px 14px; font-size:.87rem; font-weight:500; cursor:pointer;
  transition:border-color .16s, background .16s}
.chip:hover{border-color:var(--ink)}
.chip.key{border-color:color-mix(in srgb,var(--coral) 55%,transparent); color:var(--coral-deep)}
.undercon{margin:12px 2px 0; font-size:.82rem; color:var(--faint); line-height:1.5; text-align:center}

/* ───────────── bands & sections ───────────── */
.band{padding-block:clamp(74px,10vw,142px)}
.band.tint{background:var(--band)}
.mid{text-align:center; max-width:690px; margin:0 auto}
.mid h2{margin-bottom:17px}
.mid .lede{margin-inline:auto}
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,6vw,96px); align-items:center}
.duo.flip .say{order:2}
@media (max-width:940px){ .duo{grid-template-columns:1fr; gap:46px} .duo.flip .say{order:0} }
.say h2{margin-bottom:16px}

/* the ghost-phone rig: pale phone behind, real cards floating off its edge */
.viz{display:flex; justify-content:center; position:relative; isolation:isolate}
.rig{position:relative; width:min(322px,100%)}
.rig .slab{position:absolute; inset:30px -42px -26px 54px; background:var(--band);
  border:1px solid var(--line); border-radius:40px; box-shadow:var(--lift); z-index:0}
.band.tint .rig .slab{background:var(--paper)}
.rig.rev .slab{inset:30px 54px -26px -42px}
@media (max-width:420px){ .rig .slab, .rig.rev .slab{inset:26px -10px -18px 22px} }
.plate{position:relative; z-index:2; display:flex; flex-direction:column; gap:11px}
.pc{background:var(--card); border-radius:15px; box-shadow:var(--lift); padding:13px; font-size:.87rem}
.pc .hd{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.pc .ico{width:34px; height:34px; border-radius:9px; background:var(--wash); color:var(--coral-deep);
  display:grid; place-items:center; flex:none; font-size:1rem}
.pc .ico svg{width:17px; height:17px}
.pc .hd b{font-size:.91rem; font-weight:600; display:block; line-height:1.25}
.pc .hd em{font-style:normal; font-size:.82rem; color:var(--faint)}
.pc.flat{box-shadow:var(--lift-sm)}
.pc h4{font-size:.97rem; font-weight:600; letter-spacing:-.016em; line-height:1.3; margin-bottom:9px}
.pc .sub{font-size:.8rem; color:var(--faint); line-height:1.45}
.kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-top:1px solid var(--hair); font-size:.84rem}
.kv:first-of-type{border-top:0}
.kv i{font-style:normal; color:var(--faint)}
.kv b{font-weight:600; text-align:right}
.row2{display:flex; gap:8px; margin-top:11px}
.row2 span{flex:1; text-align:center; border-radius:999px; padding:10px 8px; font-size:.85rem;
  font-weight:500; background:var(--fill); color:var(--ink)}
.row2 span.go{background:var(--coral); color:#fff; font-weight:600}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600;
  padding:4px 9px; border-radius:999px}
.pill.bad{background:var(--red-bg); color:var(--red)}
.pill.ok{background:var(--green-bg); color:var(--green)}
.pill.hm{background:var(--amber-bg); color:var(--amber)}
.pill svg{width:11px; height:11px}
.mono{font-family:var(--mono); font-size:.72rem; color:var(--faint); line-height:1.45;
  display:flex; gap:5px; align-items:flex-start}
.mono svg{width:11px; height:11px; color:var(--green); flex:none; margin-top:3px}
.bub{background:var(--fill); border-radius:15px; padding:9px 13px; font-size:.845rem;
  line-height:1.45; box-shadow:var(--lift-sm)}
.bub.me{background:var(--user); box-shadow:none; margin-left:46px}
.bar{display:flex; align-items:center; gap:7px; background:#191B1F; color:#fff;
  padding:8px 12px; font-family:var(--mono); font-size:.705rem; border-radius:12px 12px 0 0}
.bar svg{width:11px; height:11px; flex:none}
.sk{height:6px; background:var(--fill); border-radius:4px}

/* viewfinder (camera / printer) */
.lens{position:relative; border-radius:14px; overflow:hidden; background:#15171B; padding:16px}
.lens .br{position:absolute; width:17px; height:17px; border:2.5px solid rgba(255,255,255,.85)}
.lens .br.tl{top:9px; left:9px; border-right:0; border-bottom:0; border-radius:5px 0 0 0}
.lens .br.tr{top:9px; right:9px; border-left:0; border-bottom:0; border-radius:0 5px 0 0}
.lens .br.bl{bottom:9px; left:9px; border-right:0; border-top:0; border-radius:0 0 0 5px}
.lens .br.br2{bottom:9px; right:9px; border-left:0; border-top:0; border-radius:0 0 5px 0}
.prn{background:linear-gradient(165deg,#56595F,#3A3C42); border-radius:7px; padding:11px;
  margin:6px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.prn .lcd{background:#0D1A12; border-radius:4px; padding:7px 9px; font-family:var(--mono);
  font-size:.72rem; color:#5CE08E; display:flex; justify-content:space-between; align-items:center}
.prn .slot{height:7px; background:#23252A; border-radius:3px; margin-top:9px}
.prn .leds{display:flex; gap:5px; margin-top:8px}
.prn .leds i{width:6px; height:6px; border-radius:50%; background:#3E4046}
.prn .leds i.amb{background:#F5A524; box-shadow:0 0 7px #F5A524}
.shot{position:absolute; left:14px; bottom:12px; font-family:var(--mono); font-size:.64rem;
  color:rgba(255,255,255,.72); letter-spacing:.06em}

/* guided spotlight */
.list{border-radius:12px; overflow:hidden; border:1px solid var(--hair)}
.list div{display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:.86rem;
  border-top:1px solid var(--hair); background:var(--card)}
.list div:first-child{border-top:0}
.list div.hit{position:relative; box-shadow:inset 0 0 0 2.5px var(--coral); border-radius:10px; z-index:2}
.list div em{margin-left:auto; font-style:normal; color:var(--faint); font-size:.79rem}
.list .ico{width:21px; height:21px; border-radius:6px; background:var(--fill); flex:none;
  display:grid; place-items:center; font-size:.7rem}
.prog{display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--faint); margin-top:4px}
.prog .track{flex:1; height:4px; background:var(--fill); border-radius:3px; overflow:hidden}
.prog .track i{display:block; height:100%; background:var(--coral); border-radius:3px}

/* document preview */
.doc{border:1px solid var(--hair); border-radius:10px; padding:11px; background:var(--card)}
.doc .seal{display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.doc .seal span{width:12px; height:12px; border-radius:3px; background:var(--coral)}
.doc .t{font-size:.78rem; font-weight:600; margin-bottom:8px}
.fld{display:flex; gap:8px; align-items:baseline; margin-top:6px; font-size:.67rem}
.fld i{font-style:normal; color:var(--faint); width:58px; flex:none}
.fld u{text-decoration:none; flex:1; border-bottom:1px solid var(--hair); padding-bottom:1px;
  font-size:.7rem}
.fileline{display:flex; align-items:center; gap:9px; margin-top:11px; padding-top:10px;
  border-top:1px solid var(--hair)}
.fileline .pdf{width:25px; height:30px; border-radius:4px; background:var(--red-bg); color:var(--red);
  font-size:.52rem; font-weight:700; display:grid; place-items:center; flex:none}
.fileline b{font-size:.79rem; font-weight:500; display:block; line-height:1.25}
.fileline em{font-style:normal; font-size:.71rem; color:var(--faint)}

/* photo grid */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:10px}
.ph{aspect-ratio:1; border-radius:7px; position:relative; overflow:hidden}
.ph svg{width:100%; height:100%; display:block}
.ph::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, transparent 56%, rgba(20,16,12,.2))}
.ph.on{box-shadow:0 0 0 2.5px var(--coral)}
.ph.on::before{content:"\2713"; position:absolute; z-index:2; right:3px; top:2px; font-size:.6rem;
  color:#fff; background:var(--coral); width:13px; height:13px; border-radius:50%;
  display:grid; place-items:center; line-height:1}
/* photo scenes live in the <symbol> sheet at the top of the page */

/* confetti, clustered on one side like Muse */
.conf{position:absolute; inset:-18px -34px -10px -34px; pointer-events:none; z-index:3}
.conf i{position:absolute; font-style:normal; filter:drop-shadow(0 7px 10px rgba(22,24,30,.2))}

/* voice */
.micbig{position:relative; width:64px; height:64px; border-radius:50%; background:var(--coral);
  display:grid; place-items:center; margin:2px auto 0; box-shadow:0 10px 24px -8px rgba(232,80,60,.95)}
.micbig > svg{width:27px; height:27px; color:#fff; position:relative; z-index:2}
.micbig i{position:absolute; inset:0; border-radius:50%; border:2px solid var(--coral); opacity:0}
.wave{display:flex; align-items:center; justify-content:center; gap:3px; height:36px; margin-top:15px}
.wave span{width:3px; border-radius:2px; background:var(--coral); height:24%}
.hear{text-align:center; font-size:.76rem; color:var(--coral-deep); font-weight:500; margin-top:9px}
@media (prefers-reduced-motion:no-preference){
  .micbig i{animation:ripple 2.6s ease-out infinite}
  .micbig i:nth-child(2){animation-delay:.85s}
  .micbig i:nth-child(3){animation-delay:1.7s}
  .wave span{animation:vbar 1.15s ease-in-out infinite}
}
@keyframes ripple{0%{transform:scale(1); opacity:.5}100%{transform:scale(2.2); opacity:0}}
@keyframes vbar{0%,100%{height:20%}50%{height:var(--h,78%)}}

/* desktop window: a scare page, and Jortty standing on top of it */
.win{position:relative; border-radius:15px; overflow:hidden; background:var(--card); box-shadow:var(--lift)}
.win .tb{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--fill);
  border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:.68rem; color:var(--faint)}
.win .tb u{width:8px; height:8px; border-radius:50%; background:var(--line); text-decoration:none; flex:none}
.win .tb span{margin-left:6px}
.scare{padding:15px 14px 96px; filter:saturate(.45); opacity:.5}
.scare .alarm{background:var(--red-bg); color:var(--red); border-radius:6px; padding:7px;
  font-size:.7rem; font-weight:700; text-align:center; letter-spacing:.04em}
.scare .big{font-size:.86rem; font-weight:600; text-align:center; margin:9px 0 4px}
.scare .tel{font-size:.95rem; font-weight:700; text-align:center; color:var(--red)}
.scare .sm{font-size:.64rem; text-align:center; color:var(--faint); margin-top:5px}
.block{position:absolute; left:11px; right:11px; bottom:11px; background:var(--card);
  border:2px solid var(--coral); border-radius:13px; padding:14px; box-shadow:var(--lift)}
.block p{font-size:.9rem; line-height:1.4; font-weight:500}
.block .flags{display:flex; gap:6px; flex-wrap:wrap; margin-top:11px}
.block .flags span{font-size:.68rem; font-weight:600; padding:4px 9px; border-radius:999px;
  background:var(--green-bg); color:var(--green); display:inline-flex; align-items:center; gap:5px}

.rig.wide{width:min(400px,100%)}
.rig.wide .slab{inset:48px -34px -24px 40px; border-radius:26px}

/* the live caption above the phone */
.nowpill{display:inline-flex; align-items:center; gap:9px; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:8px 18px 8px 14px;
  font-size:.93rem; color:var(--body); box-shadow:var(--lift-sm);
  margin-top:clamp(26px,3.2vw,38px)}
.nowpill .dot{width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none}
.nowpill b{font-weight:600; color:var(--coral-deep);
  transition:opacity .16s ease, transform .16s ease}
.nowpill b.out{opacity:0; transform:translateY(-.2em)}
@media (prefers-reduced-motion:no-preference){
  .nowpill .dot{animation:nowBlink 2.1s ease-in-out infinite}
}
@keyframes nowBlink{0%,100%{opacity:1}50%{opacity:.35}}
.herocta{display:flex; gap:11px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(24px,3vw,34px)}

/* ---- the product slider ---- */
.sliderwrap{position:relative; margin-top:clamp(36px,4.4vw,56px)}
.slider{display:flex; gap:clamp(14px,1.8vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 18px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 clamp(268px,30vw,340px); scroll-snap-align:center; background:var(--card);
  border:1px solid var(--line); border-radius:24px; padding:clamp(18px,2vw,24px);
  display:flex; flex-direction:column; gap:15px}
.slide .art{height:clamp(150px,17vw,186px); border-radius:16px; background:var(--band);
  position:relative; overflow:hidden; display:grid; place-items:center; flex:none}
.slide h3{font-size:1.12rem; font-weight:600; letter-spacing:-.024em; display:flex;
  align-items:center; gap:9px; flex-wrap:wrap}
.slide p{font-size:.93rem; color:var(--body); line-height:1.55; flex:1}
.slide .tag{font-size:.63rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px}
.slide .tag.now{background:var(--green-bg); color:var(--green)}
.slide .tag.soon{background:var(--wash); color:var(--coral-deep)}
.slide .where{font-size:.8rem; color:var(--faint); display:flex; align-items:center; gap:7px}
.slide .where svg{width:14px; height:14px}
.sarrows{display:flex; gap:9px; justify-content:center; margin-top:4px}
.sarrows button{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--card); cursor:pointer; display:grid; place-items:center; color:var(--ink);
  transition:background .18s, border-color .18s}
.sarrows button:hover{background:var(--fill); border-color:var(--ink)}
.sarrows button:disabled{opacity:.35; cursor:default}
.sarrows svg{width:17px; height:17px}
.sdots{display:flex; gap:7px; justify-content:center; margin-top:14px}
.sdots i{width:7px; height:7px; border-radius:50%; background:var(--line); display:block;
  transition:background .2s, width .2s}
.sdots i.on{background:var(--coral); width:21px; border-radius:4px}

/* little device drawings inside the slides */
.mini{position:relative}
.mini .ph2{width:78px; height:146px; border-radius:15px; background:var(--card);
  border:2.5px solid var(--ink); box-shadow:var(--lift-sm); padding:7px 6px; display:flex;
  flex-direction:column; gap:4px}
.mini .win2{width:min(224px,92%); border-radius:11px; background:var(--card);
  box-shadow:var(--lift-sm); overflow:hidden}
.mini .bar2{display:flex; align-items:center; gap:4px; padding:6px 8px; background:#1A1C21}
.mini .bar2 u{width:5px; height:5px; border-radius:50%; background:#4A4D55; text-decoration:none}
.mini .bar2 span{font-family:var(--mono); font-size:.52rem; color:#9AA0AA; margin-left:4px}
.mini .ln{height:5px; border-radius:3px; background:var(--fill)}
.mini .ln.c{background:var(--coral); opacity:.85}
.mini .body2{padding:9px}
.mini .chipmini{display:inline-block; font-size:.5rem; font-weight:600; padding:3px 7px;
  border-radius:999px; background:var(--wash); color:var(--coral-deep)}
.mini .badge{position:absolute; right:-6px; bottom:-4px; background:var(--card);
  border-radius:11px; box-shadow:var(--lift-sm); padding:6px 9px; font-size:.6rem;
  font-weight:600; display:flex; align-items:center; gap:5px}
.mini .badge svg{width:11px; height:11px; color:var(--green)}

/* ---- the real app, in a real phone ---- */
.stagewrap{display:flex; justify-content:center; margin-top:clamp(34px,4.4vw,56px); position:relative}
.stagewrap::before{content:""; position:absolute; z-index:0; width:min(900px,120%); aspect-ratio:1.6;
  left:50%; top:-4%; translate:-50% 0; border-radius:50%;
  background:radial-gradient(ellipse at center, var(--wash) 0%, transparent 68%)}
.device{position:relative; z-index:2; width:min(374px,100%); background:#0C0D10;
  border-radius:clamp(40px,11vw,56px); padding:clamp(8px,2.2vw,11px);
  box-shadow:0 2px 4px rgba(16,14,20,.3), 0 44px 90px -34px rgba(16,14,20,.55),
             inset 0 0 0 1.5px rgba(255,255,255,.12)}
.screen{position:relative; background:var(--card); border-radius:clamp(33px,9vw,46px);
  overflow:hidden; display:flex; flex-direction:column; height:clamp(620px,96vw,712px); text-align:left}
.island{position:absolute; top:9px; left:50%; translate:-50% 0; width:98px; height:27px;
  background:#0C0D10; border-radius:16px; z-index:9}
.sbar{display:flex; align-items:center; justify-content:space-between; padding:13px 24px 2px;
  font-size:.78rem; font-weight:600; letter-spacing:-.01em; flex:none}
.sbar .batt{width:22px; height:11px; border:1.4px solid var(--ink); border-radius:3px; position:relative;
  opacity:.85}
.sbar .batt::before{content:""; position:absolute; inset:1.4px; background:var(--ink); border-radius:1px}
.sbar .batt::after{content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px;
  background:var(--ink); border-radius:0 1px 1px 0; opacity:.6}
.atop{display:flex; align-items:flex-start; justify-content:space-between; padding:10px 15px 0; flex:none}
.rnd{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--card);
  display:grid; place-items:center; color:var(--ink); flex:none}
.rnd svg{width:15px; height:15px}
.whoblock{display:flex; flex-direction:column; align-items:center; gap:0; margin-top:-2px}
.whoblock .av{width:52px; height:52px; border-radius:50%; box-shadow:0 7px 16px -7px rgba(232,80,60,.85)}
.whoblock .av svg{width:100%; height:100%; display:block}
.npill{margin-top:-4px; background:var(--card); border-radius:13px; padding:7px 14px; text-align:center;
  box-shadow:0 1px 2px rgba(22,24,30,.06), 0 6px 18px -10px rgba(22,24,30,.3); transition:background .3s}
.npill.busy{background:var(--card)}
.npill b{display:block; font-size:.9rem; font-weight:600; line-height:1.2}
.npill i{display:block; font-style:normal; font-size:.8rem; color:var(--faint); line-height:1.3;
  white-space:nowrap}
.npill.busy i{color:var(--coral-deep)}

.turns{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 15px 4px; display:flex; flex-direction:column; gap:9px}
.acts-row{display:flex; gap:17px; padding:4px 19px 0; color:var(--faint); flex:none}
.acts-row svg{width:16px; height:16px}
.chips{display:flex; gap:7px; flex-wrap:wrap; padding:11px 15px 0; flex:none}
.cbot{display:flex; align-items:center; gap:10px; margin:11px 13px 0; padding:11px 15px; flex:none;
  background:var(--card); border:1.5px solid var(--line); border-radius:999px}
.cbot .plus{width:17px; height:17px; color:var(--faint); flex:none}
.cbot .mic{width:16px; height:16px; color:var(--faint); flex:none}
#paste{flex:1; resize:none; border:0; background:transparent; outline:none; font-size:.93rem;
  line-height:1.4; max-height:84px; padding:0}
#paste::placeholder{color:var(--faint)}
.send{flex:none; width:30px; height:30px; border-radius:50%; border:0; background:var(--coral);
  color:#fff; cursor:pointer; display:none; place-items:center}
.send:not(:disabled){display:grid}
.send svg{width:14px; height:14px}
.tabs{display:flex; justify-content:space-between; gap:4px; margin:11px 13px 9px; padding:7px 10px;
  background:var(--card); border:1.5px solid var(--line); border-radius:999px; flex:none}
.tabs span{width:38px; height:30px; border-radius:999px; display:grid; place-items:center; color:var(--ink)}
.tabs span:first-child{background:var(--fill)}
.tabs svg{width:18px; height:18px}
.homebar{position:absolute; left:50%; bottom:7px; translate:-50% 0; width:120px; height:4px;
  border-radius:3px; background:var(--ink); opacity:.22}

/* message styles inside the phone */
.u{align-self:flex-end; max-width:86%; background:var(--user); border-radius:17px;
  padding:9px 13px; font-size:.9rem; line-height:1.4; white-space:pre-wrap; word-break:break-word}
.u .from{display:block; font-size:.76rem; color:var(--faint); margin-bottom:3px; white-space:normal}
.j{align-self:flex-start; max-width:94%; background:var(--fill); border-radius:17px;
  padding:10px 13px; font-size:.9rem; line-height:1.45}
.j.holder{padding:10px; background:var(--fill)}
.j.bare{background:transparent; padding:2px 1px; max-width:100%}
.alert{background:var(--wash); border-radius:16px; padding:13px}
.alert h4{color:var(--red); font-size:.95rem; font-weight:600; display:flex; align-items:center;
  gap:7px; margin-bottom:8px}
.alert h4 svg{width:16px; height:16px; flex:none}
.alert p{font-size:.88rem; line-height:1.45}
.alert .two{display:flex; gap:9px; margin-top:12px}
.alert .two span{flex:1; text-align:center; background:var(--card); border-radius:999px; padding:10px;
  font-size:.86rem; font-weight:600}
.rescard{background:var(--card); border-radius:14px; padding:12px}
.rescard .hd{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.rescard .ico{width:34px; height:34px; border-radius:9px; background:var(--wash); color:var(--coral-deep);
  display:grid; place-items:center; flex:none}
.rescard .ico svg{width:17px; height:17px}
.rescard .ico.ok{background:var(--wash); color:var(--coral-deep); font-size:1rem}
.rescard b{font-size:.91rem; font-weight:600; display:block; line-height:1.25}
.rescard em{font-style:normal; font-size:.82rem; color:var(--faint)}
.rescard .kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-top:1px solid var(--hair); font-size:.84rem}
.rescard .kv i{font-style:normal; color:var(--faint)}
.rescard .kv b{display:inline; font-weight:600; text-align:right; font-size:.84rem}
.rescard .two{display:flex; gap:8px; margin-top:11px}
.rescard .two span{flex:1; text-align:center; background:var(--fill); border-radius:999px; padding:10px;
  font-size:.85rem; font-weight:500}
.rescard .two span.go{background:var(--coral); color:#fff}
.draft{background:var(--card); border-radius:14px; padding:13px}
.draft .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px}
.draft .top b{font-size:.9rem; font-weight:600}
.draft .top em{font-style:normal; font-size:.78rem; color:var(--faint)}
.draft h5{font-size:.88rem; font-weight:600; margin-bottom:6px}
.draft p{font-size:.85rem; line-height:1.45; color:var(--body)}

/* the line that names what you are watching */
.watch{margin-top:clamp(20px,2.4vw,28px); font-size:clamp(1rem,1.3vw,1.1rem); color:var(--body)}
.watch b{font-weight:600; color:var(--coral-deep); display:inline-block;
  transition:opacity .18s ease, transform .18s ease}
.watch b.out{opacity:0; transform:translateY(-.22em)}

.tryrow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(18px,2.2vw,26px)}

/* the shared photo in a message */
.shot-th{width:148px; border-radius:11px; overflow:hidden; display:block; margin-bottom:8px}
.shot-th .lens{padding:11px}
.shot-th .prn{margin:2px 7px; padding:8px}
.shot-th .prn .lcd{font-size:.58rem; padding:5px 6px}
.shot-th .prn .slot{height:5px; margin-top:6px}
.shot-th .prn .leds i{width:4px; height:4px}
.shot-th .br{width:12px; height:12px; border-width:2px}

/* where it runs, stated honestly, under the hero */
.plat{display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,26px);
  flex-wrap:wrap; margin-top:clamp(22px,2.6vw,32px); font-size:.9rem; color:var(--body)}
.plat span{display:inline-flex; align-items:center; gap:7px}
.plat svg{width:15px; height:15px; color:var(--faint)}
.plat b{font-weight:500; color:var(--ink)}
.plat .next{font-size:.63rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--coral-deep); background:var(--wash); padding:3px 7px; border-radius:999px}
.plat em{font-style:normal; color:var(--faint)}
.plat .next.now{color:#1E7A47; background:#E6F6EC}

/* download panel */
.dl{position:relative}
.dlbtn{display:inline-flex; align-items:center; gap:7px; background:var(--card); cursor:pointer;
  border:1.5px solid var(--line); border-radius:999px; padding:9px 17px; font-size:.94rem; font-weight:500}
.dlbtn:hover{background:var(--fill)}
.dlbtn svg{width:15px; height:15px}
.dlpanel{position:absolute; right:0; top:calc(100% + 11px); width:296px; z-index:90;
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:14px;
  box-shadow:var(--lift); opacity:0; transform:translateY(-7px) scale(.98);
  pointer-events:none; transition:opacity .2s ease, transform .2s cubic-bezier(.2,.9,.3,1)}
.dlpanel[data-open="1"]{opacity:1; transform:none; pointer-events:auto}
.dltabs{display:flex; background:var(--fill); border-radius:999px; padding:3px; gap:2px; margin-bottom:14px}
.dltabs button{flex:1; border:0; background:transparent; border-radius:999px; padding:7px 4px;
  font-size:.8rem; font-weight:500; cursor:pointer; color:var(--body); transition:background .18s, color .18s}
.dltabs button[aria-selected="true"]{background:var(--card); color:var(--ink); font-weight:600;
  box-shadow:var(--lift-sm)}
.dlpane{display:none; text-align:center}
.dlpane[data-on="1"]{display:block}
.qr{width:150px; height:150px; margin:4px auto 12px; color:var(--ink); display:block}
.qr svg{width:100%; height:100%; display:block}
.dlpane p{font-size:.82rem; color:var(--body); line-height:1.45; margin-bottom:12px}
.dlpane .btn{width:100%; padding:11px; font-size:.92rem}
.dlsoon{width:150px; height:150px; margin:4px auto 12px; border-radius:18px; background:var(--fill);
  display:grid; place-items:center; font-size:2rem}
@media (max-width:560px){ .dlpanel{right:auto; left:50%; translate:-50% 0; width:min(296px,92vw)} }

/* faq */
.faq{max-width:760px; margin:clamp(34px,4vw,50px) auto 0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:19px 34px 19px 0; position:relative;
  font-size:1.04rem; font-weight:500; letter-spacing:-.016em; line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:4px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg); transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq .ans{padding:0 20px 20px 0; color:var(--body); font-size:.98rem; line-height:1.62}
.faq .ans a{color:var(--coral-deep); text-decoration:underline; text-underline-offset:2px}

/* what people hand over */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px);
  margin-top:clamp(40px,5vw,62px)}
@media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cards{grid-template-columns:1fr} }
.uc{background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:13px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s}
.uc:hover{transform:translateY(-3px); box-shadow:var(--lift)}
/* People on the "jobs" cards (11-12): a real person at the top of each card. Photos go in people/. */
.uc{overflow:hidden}
.uc .who{margin:calc(-1 * clamp(18px,2vw,24px)) calc(-1 * clamp(18px,2vw,24px)) 2px; height:clamp(150px,13vw,190px); flex:none; background:linear-gradient(160deg,#EDE6DF,#D9CFC4);
  display:flex; align-items:flex-end; justify-content:flex-start; padding:10px; position:relative}
.uc .who img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.uc .who em{position:relative; font-style:normal; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(17,19,24,.45); padding:4px 9px; border-radius:999px}

.uc .ask{font-size:1rem; line-height:1.4; letter-spacing:-.012em; font-weight:500}
.uc .arrow{display:block; width:18px; height:18px; color:var(--coral)}
.uc .got{background:var(--band); border-radius:13px; padding:12px 13px; font-size:.87rem;
  line-height:1.45; color:var(--body)}
.uc .got b{color:var(--ink); font-weight:600}
.uc .tagrow{display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:3px}
.uc .mini{font-size:.69rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint)}
@media (prefers-reduced-motion:no-preference){
  .uc .got{animation:gotIn .55s cubic-bezier(.2,.9,.3,1) both}
  .uc .arrow{animation:arrowIn .45s ease both}
}
@keyframes gotIn{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
@keyframes arrowIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

/* the headline word that changes */
.cyc{display:inline-block; position:relative; vertical-align:baseline; font-style:normal;
  transition:width .4s cubic-bezier(.3,.8,.3,1)}
.cyc i{font-style:normal; display:inline-block; white-space:nowrap;
  color:var(--coral-deep); transition:opacity .16s ease, transform .16s ease}
.cyc i.out{opacity:0; transform:translateY(-.2em)}
.cyc i.in{opacity:0; transform:translateY(.2em)}
.cyc-measure{position:absolute; visibility:hidden; white-space:nowrap; pointer-events:none;
  left:-9999px; top:0}

/* the locked box */
.vrow{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--hair)}
.vrow:first-of-type{border-top:0}
.vrow .lk{width:26px; height:26px; border-radius:8px; background:var(--green-bg); color:var(--green);
  display:grid; place-items:center; flex:none}
.vrow .lk svg{width:13px; height:13px}
.vrow b{font-size:.84rem; font-weight:500; display:block; line-height:1.25}
.vrow em{font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--faint)}
.vrow .dots{margin-left:auto; letter-spacing:.14em; color:var(--faint); font-size:.78rem}
.refuse{border:2px solid var(--red); border-radius:15px; padding:13px; background:var(--card)}
.refuse p{font-size:.86rem; line-height:1.45}

/* the sites it works on */
.appwrap{position:relative}
.appgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(7px,1vw,13px);
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 34%,rgba(0,0,0,.35) 64%,transparent 88%);
  mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 34%,rgba(0,0,0,.35) 64%,transparent 88%)}
.app{aspect-ratio:1; border-radius:24%; display:grid; place-items:center; text-align:center;
  padding:5px; color:#fff; font-size:clamp(.52rem,.85vw,.72rem); font-weight:600;
  letter-spacing:-.01em; line-height:1.12; box-shadow:var(--lift-sm); overflow:hidden}
.app.b1{filter:blur(2px); opacity:.5}
.app.b2{filter:blur(4.5px); opacity:.28}
@media (prefers-reduced-motion:no-preference){
  .app.b0{animation:appIn .6s cubic-bezier(.2,.9,.3,1) both}
}
@keyframes appIn{from{opacity:0; transform:scale(.82)}to{opacity:1; transform:none}}

/* the three devices, and a hand */
.rig.trioset{width:min(452px,100%)}
.rig.trioset .slab{display:none}
.devices{width:100%; height:auto; display:block; overflow:visible}
.dv-body{fill:var(--card); stroke:var(--line); stroke-width:2}
.dv-screen{fill:var(--band)}
.dv-bar{fill:var(--line)}
.dv-base{fill:var(--line)}
.dv-hand{fill:#E6D3C3; stroke:none}
.dv-hand ellipse{filter:drop-shadow(0 -4px 10px rgba(30,24,20,.1))}
.sy-ring{fill:none; stroke:var(--coral); stroke-width:3; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .sy-mark{transform-box:fill-box; transform-origin:center; animation:syPop 4.8s ease-in-out infinite}
  .sy-ring{animation:syRing 4.8s ease-out infinite}
  .d-pad .sy-mark,.d-pad .sy-ring{animation-delay:1.05s}
  .d-mac .sy-mark,.d-mac .sy-ring{animation-delay:2.1s}
  .dv-hand{transform-box:fill-box; transform-origin:center; animation:syTap 4.8s ease-in-out infinite}
}
@keyframes syPop{0%,84%,100%{transform:scale(1)}6%{transform:scale(1.32)}16%{transform:scale(1)}}
@keyframes syRing{0%{transform:scale(.6); opacity:.75}22%{transform:scale(2.6); opacity:0}100%{opacity:0}}
@keyframes syTap{0%,88%,100%{transform:translate(0,0)}5%{transform:translate(-2px,4px)}13%{transform:translate(0,0)}}
.pill.no{background:var(--fill); color:var(--faint)}

/* where Jortty runs */
.quad{border-top:1px solid var(--line); margin-top:0 !important; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(32px,4vw,50px)}
.quad > div{padding:clamp(24px,2.8vw,34px) clamp(14px,1.9vw,28px) clamp(24px,2.8vw,34px) 0}
.quad > div + div{border-left:1px solid var(--line); padding-left:clamp(16px,1.9vw,28px)}
@media (max-width:900px){ .quad{grid-template-columns:repeat(2,1fr)}
  .quad > div:nth-child(3){border-left:0; padding-left:0}
  .quad > div:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:520px){ .quad{grid-template-columns:1fr}
  .quad > div + div{border-left:0; border-top:1px solid var(--line); padding-left:0}
  .quad > div{padding:20px 0} }
.quad b{display:block; font-size:1.02rem; font-weight:600; letter-spacing:-.022em; margin-bottom:7px}
.quad p{color:var(--body); font-size:.92rem; line-height:1.55}
.quad .soon{display:inline-block; font-size:.64rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--coral-deep); background:var(--wash);
  padding:3px 8px; border-radius:999px; margin-left:8px; vertical-align:2px}

/* hairline trio */
.trio{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(34px,4.4vw,54px)}
.trio > div{padding:clamp(28px,3.4vw,44px) clamp(16px,2.4vw,36px) clamp(28px,3.4vw,44px) 0}
.trio > div + div{border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,36px)}
@media (max-width:780px){ .trio{grid-template-columns:1fr}
  .trio > div{padding:24px 0} .trio > div + div{border-left:0; border-top:1px solid var(--line); padding-left:0} }
.trio .w{font-size:clamp(1.3rem,2.3vw,1.85rem); font-weight:600; letter-spacing:-.03em;
  line-height:1.12; margin-bottom:9px; display:flex; align-items:center; gap:9px}
.trio .w svg{width:.76em; height:.76em; flex:none}
.trio p{color:var(--body); font-size:.97rem; line-height:1.6}

/* closing panes */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(36px,4.6vw,56px)}
@media (max-width:840px){ .pair{grid-template-columns:1fr} }
.pane{background:var(--band); border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px,2.8vw,36px); display:flex; flex-direction:column}
.band.tint .pane{background:var(--paper)}
.pane h3{font-size:1.28rem; font-weight:600; letter-spacing:-.028em; margin-bottom:8px}
.pane > p{color:var(--body); font-size:.97rem; line-height:1.55; padding-bottom:18px;
  border-bottom:1px solid var(--line); margin-bottom:18px}
.pane ul{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.pane li{display:flex; gap:10px; font-size:.94rem; color:var(--body); line-height:1.45}
.pane li svg{width:15px; height:15px; color:var(--green); flex:none; margin-top:4px}
.pane .btn{width:100%}

footer{border-top:1px solid var(--line); padding-block:32px; font-size:.89rem; color:var(--faint)}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center}
footer a:hover{color:var(--ink)}
footer .sp{margin-left:auto}

@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0; transform:translateY(18px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
  .js .rise.in{opacity:1; transform:none}
  .js .d1{transition-delay:.08s} .js .d2{transition-delay:.16s}
  .dots i{animation:blink 1.1s infinite}
  .dots i:nth-child(2){animation-delay:.16s} .dots i:nth-child(3){animation-delay:.32s}
  .conf i{animation:drift 7.5s ease-in-out infinite}
  .js .pop{animation:pop .4s cubic-bezier(.2,1.1,.4,1) both}
  .list div.hit{animation:ring 2.4s ease-in-out infinite}
}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-11px) rotate(calc(var(--r,0deg) + 6deg))}}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes ring{0%,100%{box-shadow:inset 0 0 0 2.5px var(--coral)}
  50%{box-shadow:inset 0 0 0 2.5px var(--coral), 0 0 0 5px var(--wash)}}

/* ---- site chrome ---- */
.navlinks{display:flex; gap:clamp(14px,1.8vw,28px); margin-left:clamp(18px,3vw,44px)}
.navlinks a{font-size:.95rem; color:var(--body); font-weight:500; padding:4px 0;
  border-bottom:2px solid transparent; transition:color .16s, border-color .16s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--ink); border-bottom-color:var(--coral)}
.burger{display:none; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; place-items:center; flex:none}
.burger svg{width:17px; height:17px}
.navsheet{display:none; flex-direction:column; gap:2px; padding:4px var(--gut) 16px;
  border-top:1px solid var(--line)}
.navsheet a{padding:13px 2px; font-size:1.02rem; font-weight:500; border-bottom:1px solid var(--hair)}
.navsheet[data-open="1"]{display:flex}
@media (max-width:860px){
  .navlinks{display:none}
  .burger{display:grid}
  .hide-sm{display:none}
}

footer{border-top:1px solid var(--line); padding-block:clamp(44px,5vw,64px) 0; color:var(--body)}
footer .ftop{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);
  gap:clamp(30px,5vw,70px); padding-bottom:clamp(36px,4vw,52px)}
@media (max-width:880px){ footer .ftop{grid-template-columns:1fr; gap:34px} }
.fbrand .logo{margin-bottom:14px}
.fbrand p{font-size:.93rem; line-height:1.6; max-width:40ch}
.fbrand .fplat{margin-top:12px; font-size:.84rem; color:var(--faint)}
.fcols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,38px)}
@media (max-width:620px){ .fcols{grid-template-columns:1fr 1fr; gap:26px} }
.fcol h4{font-size:.74rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); margin-bottom:13px}
.fcol a{display:block; font-size:.93rem; line-height:1.45; padding:5px 0; color:var(--body)}
.fcol a:hover{color:var(--ink)}
.fbar{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:.87rem;
  color:var(--faint); border-top:1px solid var(--line); padding-block:22px}
.fbar a:hover{color:var(--ink)}
.fbar .sp{margin-left:auto}
@media (max-width:700px){ .fbar .sp{margin-left:0; width:100%} }

/* ---- internal pages ---- */
.phead{padding-block:clamp(48px,6vw,86px) clamp(26px,3vw,40px); text-align:center}
.phead h1{font-size:clamp(2.1rem,4.6vw,3.3rem); margin-bottom:16px}
.phead .lede{margin:0 auto}
.prose{max-width:68ch; margin:0 auto}
.prose h2{margin:clamp(34px,4vw,50px) 0 14px; font-size:clamp(1.3rem,2.2vw,1.7rem)}
.prose p{color:var(--body); line-height:1.7; margin-bottom:14px}
.prose ul{color:var(--body); line-height:1.7; padding-left:20px; margin-bottom:14px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink); font-weight:600}

.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(28px,3.4vw,44px); align-items:stretch}
@media (max-width:900px){ .plans{grid-template-columns:1fr; max-width:460px; margin-inline:auto} }
.plan{background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column}
.plan.best{border-color:var(--coral); box-shadow:var(--lift)}
.plan .badge2{position:absolute; top:-11px; left:50%; translate:-50% 0; background:var(--coral);
  color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 13px; border-radius:999px}
.plan{position:relative}
.plan h3{font-size:1.2rem; font-weight:600; letter-spacing:-.024em; margin-bottom:6px}
.plan .blurb{font-size:.92rem; color:var(--body); line-height:1.5; min-height:3em; margin-bottom:16px}
.plan .price{font-size:clamp(2.1rem,3.4vw,2.7rem); font-weight:700; letter-spacing:-.04em;
  line-height:1; display:flex; align-items:baseline; gap:5px}
.plan .price em{font-style:normal; font-size:.95rem; font-weight:500; color:var(--faint)}
.plan .cycle{font-size:.82rem; color:var(--faint); margin:7px 0 20px}
.plan ul{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; flex:1}
.plan li{display:flex; gap:10px; font-size:.93rem; color:var(--body); line-height:1.45}
.plan li svg{width:15px; height:15px; flex:none; margin-top:4px; color:var(--green)}
.plan li.no{color:var(--faint)}
.plan li.no svg{color:var(--faint)}
.plan .btn{width:100%}
.plan .fine2{font-size:.8rem; color:var(--faint); margin-top:11px; text-align:center}

.ftable{width:100%; border-collapse:collapse; margin-top:clamp(28px,3vw,42px); font-size:.94rem}
.ftable th,.ftable td{text-align:left; padding:14px 12px; border-bottom:1px solid var(--line);
  vertical-align:top}
.ftable th{font-weight:600; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint)}
.ftable td:first-child{font-weight:600; color:var(--ink); width:30%}
.ftable td{color:var(--body); line-height:1.55}
.tablewrap{overflow-x:auto}

/* Platforms band (Julius 11-12: real logos, thicker, honest Available / Coming soon) */
.platband{padding-block:clamp(56px,7vw,96px)}
.pl-group{margin-top:clamp(26px,3.5vw,40px)} .pl-h{margin:0 0 12px; text-align:center} .pl-h .st{font-size:.7rem; padding:5px 11px}
.pl-grid{display:grid; gap:14px} .pl-3{grid-template-columns:repeat(3,1fr)} .pl-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .pl-3,.pl-4{grid-template-columns:repeat(2,1fr)} }
.pl-tile{display:flex; align-items:center; gap:14px; padding:18px 18px 18px 16px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; color:var(--ink); text-decoration:none; box-shadow:var(--lift-sm); transition:transform .15s ease, box-shadow .15s ease}
a.pl-tile:hover{transform:translateY(-2px); box-shadow:var(--lift)}
.pl-logo{flex:0 0 48px; height:48px; border-radius:14px; background:var(--fill); display:flex; align-items:center; justify-content:center}
.lg{width:28px; height:28px; display:block; color:var(--ink)}
.pl-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.pl-txt b{font-weight:600; font-size:1rem}
.pl-txt span{font-size:.86rem; color:var(--faint)}
.st{flex:0 0 auto; font-style:normal; font-size:.63rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:4px 8px; border-radius:999px}
.st.now{color:var(--green); background:var(--green-bg)}
.st.soon{color:var(--coral-deep); background:var(--wash)}
.pl-note{text-align:center; margin-top:22px; color:var(--body)}
.pl-note a{color:var(--coral-deep); font-weight:600}
.dllogos{display:flex; flex-direction:row; gap:14px; align-items:center; justify-content:center}
.dllogos .lg{width:30px; height:30px}
.dlpane .st{align-self:flex-start}
.slide .where .lg{width:18px; height:18px; display:inline-block; vertical-align:-3px; margin-right:6px}
@media (max-width:520px){ .pl-grid{grid-template-columns:1fr} }

/* Rich feature sections (Julius 11-12: everything in staging, rich, matching our app) */
.xsoon{display:inline-block; margin-bottom:12px; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--coral-deep); background:var(--wash); padding:5px 10px; border-radius:999px}
.mini.xsoonmini{color:var(--coral-deep); background:var(--wash)}
.xlegend{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.xv{display:inline-flex; align-items:center; font-size:.7rem; font-weight:700; letter-spacing:.04em; padding:4px 9px; border-radius:999px; white-space:nowrap}
.xv.safe{background:var(--green-bg); color:var(--green)}
.xv.clut{background:var(--fill); color:var(--body)}
.xv.sus{background:var(--amber-bg); color:var(--amber)}
.xv.dan{background:var(--red-bg); color:var(--red)}
.xrow{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--hair)}
.xrow:first-of-type{border-top:0}
.xrow .xv{flex:0 0 82px; justify-content:center}
.xs{display:flex; flex-direction:column; min-width:0}
.xs b{font-weight:600; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xs em{font-style:normal; font-size:.76rem; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xalert{border:1.5px solid color-mix(in srgb,var(--red) 35%,transparent)}
.xnote{font-size:.84rem; color:var(--body); line-height:1.5}
.xmuted{font-size:.84rem; color:var(--body); font-style:italic}
.pc .ico.xls{background:#E3F3EA; color:#1E7A47; font-weight:800; font-size:.95rem}
.xpair{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.xprod{display:flex; flex-direction:column; gap:5px; align-items:flex-start}
.xprod b{font-weight:600; font-size:.95rem}
.xprod em{font-style:normal; font-size:.78rem; color:var(--faint); line-height:1.4}
.xprod .xph{font-size:34px; line-height:1; margin:6px 0 2px}
.xpick{outline:2px solid color-mix(in srgb,var(--green) 45%,transparent)}
.xcard{padding:10px}
.xcardart{aspect-ratio:5/3; border-radius:11px; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(circle,#FF6D5A 0 2.2px,transparent 2.6px) 0 0/22px 22px, radial-gradient(circle,#F4B740 0 2px,transparent 2.4px) 11px 11px/22px 22px, #FFF4EC;
  color:var(--coral-deep); font-family:var(--brand); font-size:1.5rem; line-height:1.1; border:6px solid #fff; box-shadow:inset 0 0 0 1px #F6DCCF}
.xcardart span{background:#FFF4EC; padding:8px 14px; border-radius:10px}
.xcardart i{font-style:normal; font-size:1rem; letter-spacing:4px}
.xcard em{display:block; font-style:normal; font-size:.78rem; color:var(--faint); margin-top:8px}
.xrepair{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.xrepair figure{margin:0; position:relative}
.xrepair img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block}
.xrepair img.old{filter:sepia(.85) contrast(.75) brightness(1.08) blur(.6px)}
.xrepair figcaption{position:absolute; left:6px; bottom:6px; font-size:.66rem; font-weight:700; color:#fff; background:rgba(17,19,23,.55); padding:3px 7px; border-radius:999px}
.xvid{display:flex; align-items:center; gap:10px; margin-top:10px}
.xvid b{display:block; font-weight:600; font-size:.88rem}
.xvid em{font-style:normal; font-size:.78rem; color:var(--faint)}
.xplay{width:34px; height:34px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center}
.xplay svg{width:15px; height:15px}
.xtab{width:100%; border-collapse:collapse; font-size:.8rem}
.xtab th{text-align:left; font-weight:600; color:var(--faint); font-size:.72rem; padding:5px 6px; border-bottom:1px solid var(--line)}
.xtab td{padding:6px; border-bottom:1px solid var(--hair)}
.xtrio{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(28px,4vw,44px)}
.xtrio .pc{padding:22px}
.xbig{font-size:30px; display:block; margin-bottom:10px}
@media (max-width:760px){ .xtrio{grid-template-columns:1fr} }

/* Hero phone = the approved app screens (canvas Chat page: Main chat, Jortty is working, Printer help) */
.whoblock .av{width:58px; height:58px}
.npill{box-shadow:0 1px 3px rgba(17,19,24,.06); border:1px solid var(--line)}
.whoblock .npill.busy,.npill.busy{background:var(--card)}
#state{display:inline-flex !important; align-items:center; gap:6px; justify-content:center}
#state svg{width:14px; height:14px; flex:none}
#state.st-work{color:var(--coral-deep)} #state.st-wait{color:#8A5300}
#state .wdot{width:8px; height:8px; border-radius:4px; background:#F2B45B; display:inline-block}
.u,.j{border-radius:20px}
.when{text-align:center; color:var(--faint); font-size:.78rem; margin:0 0 2px}
.j.wide{max-width:100%; align-self:stretch; display:flex; flex-direction:column; gap:9px}
.j.wide p{margin:0}
.tsteps{list-style:none; margin:0; padding:2px 11px; background:var(--card); border-radius:13px}
.tsteps li{display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.8rem}
.tsteps li:last-child{border-bottom:0}
.tsteps li span:nth-child(2){flex:1}
.tsteps .m{width:18px; height:18px; border-radius:9px; border:2px solid var(--line); box-sizing:border-box; flex:none}
.tsteps li.d .m{border:0; background:#E6F6EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%231E7A47' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.tsteps li.n .m{border-color:var(--coral)}
.tsteps li.n span:nth-child(2){font-weight:600}
.tsteps em{font-style:normal; font-size:.72rem; font-weight:600; color:var(--faint)}
.tsteps li.d em{color:#1E7A47} .tsteps li.n em{color:var(--coral-deep)}
.wrow{display:flex; align-items:center; gap:9px; background:var(--card); border-radius:13px; padding:8px 10px}
.wrow b{display:block; font-size:.8rem; font-weight:600} .wrow em{font-style:normal; font-size:.72rem; color:var(--faint)}
.wico{width:30px; height:30px; border-radius:9px; background:var(--fill); display:grid; place-items:center; flex:none}
.wico svg{width:16px; height:16px}
.stopbtn{display:none; flex:none; width:30px; height:30px; border-radius:50%; background:#FFE9E5; place-items:center}
.stopbtn.on{display:grid} .stopbtn i{width:10px; height:10px; background:var(--ink); border-radius:2px; display:block}
.pcard{background:var(--card); border-radius:14px; padding:8px; display:flex; flex-direction:column; gap:8px}
.pcard-art{aspect-ratio:5/3; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  background:radial-gradient(circle,#7FB069 0 2px,transparent 2.4px) 0 0/18px 18px, radial-gradient(circle,#F4B740 0 1.8px,transparent 2.2px) 9px 9px/18px 18px, #FFF8E9;
  color:#3E6B2E; font-family:var(--brand); font-size:1.1rem; line-height:1.1; border:5px solid #fff; box-shadow:inset 0 0 0 1px #EFE2C4}
.pcard .two{display:flex; gap:8px} .pcard .two span{flex:1; text-align:center; background:var(--fill); border-radius:999px; padding:9px; font-size:.82rem; font-weight:500}
.pcard-art span{background:#FFF8E9; padding:4px 10px; border-radius:8px} .pcard-art i{font-style:normal; letter-spacing:3px}

/* Inner pages (Julius 11-12: same look and flows as the home page) */
.xhero{padding-bottom:clamp(30px,4vw,48px)}
.xeyebrow{display:inline-block; margin-bottom:14px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); background:var(--wash); padding:6px 12px; border-radius:999px}
.xhero .herocta{margin-top:26px}
.xgh{text-align:center; max-width:690px; margin:0 auto clamp(26px,3.5vw,40px)}
.xgh h2{margin-bottom:12px}
.xfgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.xfeat{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--lift-sm)}
.band.tint .xfeat{background:var(--paper)}
.xfh{display:flex; align-items:center; justify-content:space-between}
.xfi{width:44px; height:44px; border-radius:13px; background:var(--fill); display:grid; place-items:center; font-size:22px}
.xfeat h3{font-size:1.08rem; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.xfeat p{color:var(--body); font-size:.93rem; line-height:1.55}
.xfeat .xv{align-self:flex-start}
.xmore{margin-top:auto; color:var(--coral-deep); font-weight:600; font-size:.92rem; text-decoration:none}
.xsteps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.xstep{background:var(--card); border-radius:20px; padding:24px; box-shadow:var(--lift-sm)}
.band.tint .xstep{background:var(--paper)}
.xnum{width:34px; height:34px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; font-weight:700; margin-bottom:14px}
.xstep h3{font-size:1.08rem; font-weight:600; margin-bottom:8px}
.xstep p{color:var(--body); font-size:.93rem; line-height:1.55}
.xchk{display:flex; flex-direction:column; gap:2px; padding:9px 0 9px 12px; border-left:3px solid var(--line); margin-top:8px}
.xchk b{font-size:.82rem; font-weight:600} .xchk span{font-size:.82rem; color:var(--body); line-height:1.45}
.xchk.bad{border-left-color:var(--red)} .xchk.ok{border-left-color:var(--green)}
.xbrow{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--fill); font-size:.72rem; color:var(--faint)}
.xbrow u{width:8px; height:8px; border-radius:4px; background:var(--line); display:block}
.xbrow span{margin-left:8px; background:var(--card); border-radius:999px; padding:3px 10px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xblocked{padding:16px; display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,var(--red-bg),var(--card) 60%)}
.xblocked h4{font-size:1rem; font-weight:600}
@media (max-width:760px){ .xsteps{grid-template-columns:1fr} }
.xsplit{text-align:left}
.xsplit .say .lede{margin-inline:0}
.xsplit .herocta{justify-content:flex-start}
.phead.xhero.xsplit{padding-bottom:clamp(40px,6vw,80px)}
.xgh+.xfgrid .xfeat .xfi{margin-bottom:2px}
section.phead+section.band{padding-top:clamp(40px,5vw,72px)}

/* Contact (Julius 11-12: mimic salonsquad.app/contact) */
.chero{padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px)}
.crumb{display:flex; gap:8px; font-size:.86rem; color:var(--faint); margin-bottom:clamp(24px,3vw,40px)}
.crumb a{color:var(--ink); text-decoration:none}
.cgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,80px); align-items:start}
.ceyebrow{display:inline-flex; align-items:center; gap:12px; font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--body)}
.ceyebrow::before{content:""; width:30px; height:3px; border-radius:2px; background:var(--coral)}
.cleft h1{font-size:clamp(2rem,4vw,2.8rem); line-height:1.1; letter-spacing:-.04em; font-weight:500; margin:18px 0 22px}
.cleft h1 em{font-family:var(--brand); font-style:normal; font-weight:400; letter-spacing:-.02em; color:var(--coral-deep)}
.clede{font-size:1.2rem; line-height:1.6; color:var(--body); max-width:30em}
.crows{display:flex; flex-direction:column; gap:18px; margin-top:30px}
.crow{display:flex; gap:16px; align-items:flex-start}
.cico{width:46px; height:46px; border-radius:13px; background:var(--band); display:grid; place-items:center; flex:none; color:var(--ink)}
.cico svg{width:19px; height:19px}
.ctxt{display:flex; flex-direction:column; gap:2px; padding-top:3px}
.ctxt b{font-weight:600; font-size:1.02rem}
.ctxt a,.ctxt span{color:var(--body); text-decoration:none}
.ctxt a:hover{color:var(--coral-deep)}
.cbox{background:var(--card); border:1px solid var(--line); border-radius:26px; box-shadow:var(--lift); overflow:hidden; min-height:540px; display:flex; flex-direction:column}
.chd{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 92% 0,color-mix(in srgb,var(--coral) 14%,transparent),transparent 45%)}
.cav{width:42px; height:42px; border-radius:12px; background:var(--wash); display:grid; place-items:center}
.cav svg{width:26px; height:26px}
.cwho{display:flex; flex-direction:column; flex:1; min-width:0}
.cwho b{font-weight:600}
.cwho em{font-style:normal; font-size:.84rem; color:var(--body); display:flex; align-items:center; gap:6px}
.cwho em i{width:8px; height:8px; border-radius:50%; background:var(--green)}
.ctabs{display:flex; background:var(--fill); border-radius:999px; padding:4px}
.ctabs button{border:0; background:transparent; font:inherit; font-size:.86rem; font-weight:500; padding:7px 14px; border-radius:999px; color:var(--body); cursor:pointer}
.ctabs button[aria-selected="true"]{background:var(--card); color:var(--ink); box-shadow:var(--lift-sm)}
.cpane{flex:1; display:flex; flex-direction:column; padding:20px}
.cpane[hidden]{display:none}
.cmsgs{flex:1; display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:360px}
.cj,.cu{max-width:85%; padding:12px 16px; border-radius:18px; line-height:1.5; font-size:.98rem}
.cj{align-self:flex-start; background:var(--band)}
.cu{align-self:flex-end; background:var(--user)}
.cgo{display:block; margin-top:8px; font-weight:600; color:var(--coral-deep); text-decoration:none}
.cchips{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:14px}
.cchips button{border:1.5px solid var(--ink); background:var(--card); color:var(--ink); border-radius:999px; padding:9px 15px; font:inherit; font-size:.92rem; cursor:pointer}
.cchips button:hover{background:var(--ink); color:var(--paper)}
.cform{gap:14px}
.cform label{display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:500}
.cform input,.cform select,.cform textarea{font:inherit; font-size:1rem; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink)}
.cform .btn{align-self:flex-start}
.cnote{font-size:.82rem; color:var(--faint)}
.ccards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ccard{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:10px}
.ccard h3{font-size:1.2rem; font-weight:600}
.ccard p{color:var(--body); line-height:1.55}
.ccard a{margin-top:auto; color:var(--coral-deep); font-weight:600; text-decoration:none}
@media (max-width:860px){ .cgrid,.ccards{grid-template-columns:1fr} .cbox{min-height:460px} }
.cj.typing{display:inline-flex; gap:5px; padding:14px 16px}
.cj.typing i{width:7px; height:7px; border-radius:50%; background:var(--faint); animation:ctype 1s infinite ease-in-out}
.cj.typing i:nth-child(2){animation-delay:.15s} .cj.typing i:nth-child(3){animation-delay:.3s}
@keyframes ctype{0%,60%,100%{opacity:.35; transform:none} 30%{opacity:1; transform:translateY(-3px)}}
.ctype{display:flex; gap:8px; margin-top:14px; border:1.5px solid var(--line); border-radius:999px; padding:5px 5px 5px 16px; background:var(--paper)}
.ctype[hidden]{display:none}
.ctype input{flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:1rem; color:var(--ink); min-width:0}
.ctype input.bad{color:var(--red)}
.ctype button{width:38px; height:38px; border-radius:50%; border:0; background:var(--coral); color:#fff; display:grid; place-items:center; cursor:pointer}
.ctype button svg{width:16px; height:16px}