/* PalShade site. Self-hosted fonts, no external requests. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-400-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/instrument-sans-var.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/dm-mono-400.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/dm-mono-500.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --ink0:#06090E;--ink1:#0A0E14;--ink2:#0F141C;--ink3:#151B25;
  --bone:#F1EDE4;--t2:#A7B0BC;--t3:#7C8694;
  --line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.22);
  --accent:#9ADCEF;--accent-soft:rgba(154,220,239,.14);--accent-line:rgba(154,220,239,.40);
  --paper:#ECE7DC;--paper-ink:#10151B;--paper-2:#4A5460;--paper-accent:#1B6B82;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono","Cascadia Mono",ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-soft:cubic-bezier(.45,0,.55,1);
  --rise:18px;--bar-h:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink1);color:var(--bone);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
button{font:inherit;color:inherit}
::selection{background:rgba(154,220,239,.32)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-100px;background:var(--bone);color:var(--ink1);padding:12px;z-index:50;border-radius:6px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}
em{font-style:italic;color:var(--accent)}

/* ---------- announcement + header ---------- */
.preview-notice{display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding:8px 20px;background:var(--ink0);border-bottom:1px solid rgba(255,255,255,.06);font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2);text-align:center}
.preview-notice::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;padding-block:20px}
.brand{display:flex;align-items:center;gap:14px}
.brand svg,.brand img{width:40px;height:40px;flex:none}
.brand-name{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);line-height:1}
.brand-name b{font-weight:400;font-size:32px;letter-spacing:-.4px;color:var(--bone)}
.brand-name i{font-size:22px;color:var(--accent)}
.site-header nav{display:flex;align-items:center;gap:40px;font-size:15px;color:var(--t2)}
.site-header nav a:hover{color:var(--bone)}
.header-cta,.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:1px solid var(--line2);border-radius:22px;font-size:14.5px;font-weight:500;color:var(--bone);white-space:nowrap;background:transparent;cursor:pointer}
.header-cta:hover,.btn-ghost:hover{background:rgba(255,255,255,.07)}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- section bar (slides in once the header scrolls away) ---------- */
.minibar{position:fixed;inset:0 0 auto;z-index:40;height:var(--bar-h);background:var(--ink1);border-bottom:1px solid var(--line);visibility:hidden;transform:translate3d(0,-100%,0)}
.minibar.is-on{visibility:visible;transform:none}
.minibar-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.brand-mini{gap:10px}
.brand-mini svg{width:28px;height:28px}
.brand-mini .brand-name b{font-size:24px}
.minibar nav{display:flex;align-items:center;gap:32px;font-size:14.5px;color:var(--t2)}
.minibar nav a:hover{color:var(--bone)}
.minibar .header-cta{height:38px;padding:0 16px;font-size:14px}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 26px;border-radius:28px;font-size:16px;font-weight:600;border:0;cursor:pointer;white-space:nowrap}
.button.primary{background:var(--accent);color:#07121A;transition:filter .15s ease,transform .15s ease,box-shadow .25s ease}
.button.primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 32px -12px rgba(154,220,239,.6)}
.button:active,.button.primary:active{transform:translateY(0) scale(.985)}
.button[disabled]{cursor:not-allowed;opacity:.6}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.35)}
.text-link:hover{border-color:var(--bone)}

/* ---------- typography ---------- */
h1.display{font-family:var(--serif);font-size:clamp(3rem,7.4vw,5.75rem);line-height:.95;letter-spacing:-.02em}
h2.title{font-family:var(--serif);font-size:clamp(2.5rem,5.3vw,4.75rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.eyebrow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:34px;padding:0 18px 0 14px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:17px;font:400 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.folio{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font:400 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.lead{font-size:19px;line-height:1.55;color:var(--t2)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:36px 0 64px;background:radial-gradient(900px 620px at 50% 30%,rgba(154,220,239,.1),rgba(10,14,20,0) 70%),var(--ink1);--k:1;--oy:500px;--oh:1000px}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{align-self:center}
.hero h1{margin-top:24px;text-align:center}
.hero-sub{margin-top:20px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.15;letter-spacing:-.2px}
.hero-row{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-top:40px}
.hero-copy{max-width:640px}
.hero-body{max-width:540px;font-size:18px;line-height:1.6;color:var(--t2)}
.hero-body strong{font-weight:600;color:var(--bone)}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:460px;flex:none}
.hero-actions .row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-note{font-size:13.5px;line-height:1.5;color:var(--t3)}
.compare-title{margin:72px 0 32px;text-align:center}
.compare-title+.compare{margin-top:0}

/* ---------- orbits: rings that turn behind the hero, always on. The layer ends just below the demo window and fades out, so satellites never cross the text under it. ---------- */
.orbit-layer{position:absolute;left:0;right:0;top:0;height:var(--oh);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 120px),transparent);mask-image:linear-gradient(#000 calc(100% - 120px),transparent)}
.aurora{position:absolute;left:50%;top:var(--oy);width:calc(1760px*var(--k));height:calc(1760px*var(--k));margin:calc(-880px*var(--k)) 0 0 calc(-880px*var(--k));border-radius:50%;background:conic-gradient(from 0deg,rgba(154,220,239,0),rgba(154,220,239,.16),rgba(240,120,126,.07),rgba(246,200,95,.06),rgba(154,220,239,0));-webkit-mask-image:radial-gradient(circle,transparent 40%,#000 52%,transparent 72%);mask-image:radial-gradient(circle,transparent 40%,#000 52%,transparent 72%);pointer-events:none}
.orbits{position:absolute;left:50%;top:var(--oy);width:0;height:0;transform:scale(var(--k));pointer-events:none}
.ring{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);border-radius:50%;border:1px solid rgba(154,220,239,.16)}
/* Rings are drawn once, below everything that moves. Only the zero-size arms turn, so no large layer is ever rotated. */
.ring1{--s:920px}
.ring2{--s:1320px}
.ring3{--s:1800px}
.arm{position:absolute;left:0;top:0;width:0;height:0}
.arm1{--d:70s}
.arm2{--d:96s}
.arm3{--d:130s}
/* Satellites sit at fixed offsets from the ring centre; each also turns the opposite way so it stays upright. */
.sat{position:absolute;width:var(--w,84px);height:var(--w,84px);margin:calc(var(--w,84px)/-2) 0 0 calc(var(--w,84px)/-2)}
.sat-in{display:block;width:100%;height:100%}
.sat svg{width:100%;height:100%}
.s-heart{left:352.4px;top:-295.3px;--w:92px}
.s-cam{left:-398.4px;top:230.0px;--w:100px}
.s-chat{left:571.6px;top:330.0px;--w:86px}
.s-moon{left:-620.4px;top:-225.7px;--w:80px}
.s-phones{left:-114.8px;top:640.2px;--w:52px}
.s-star{left:450.0px;top:-779.4px;--w:84px}
.s-spark{left:-450.0px;top:779.4px;--w:40px}

/* ---------- demo room: an illustration of a Paltalk room; nothing here is sent anywhere ---------- */
.flip{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:28px;visibility:hidden}
.has-room .flip{visibility:visible}
.flip .mono{font-size:12.5px;color:var(--t2)}
.seg{display:flex;padding:4px;border-radius:26px;border:1px solid var(--line2);background:rgba(10,14,20,.7)}
.seg-btn{height:38px;padding:0 20px;border:0;border-radius:20px;background:transparent;color:var(--t2);font-size:14.5px;font-weight:600;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.seg-btn:hover{color:var(--bone)}
.seg-btn[aria-pressed="true"]{background:var(--bone);color:var(--ink1)}
.room{--r-hdr:#1693D3;--r-side:#1B1F25;--r-chat:#202328;--r-panel:#2A2F37;--r-sel:#2B3038;--r-line:rgba(255,255,255,.08);--r-text:#F1F1F1;--r-text2:#A8AFB8;--r-input:#2A2E35;--r-inputline:rgba(255,255,255,.1);--r-me:rgba(154,220,239,.13);--r-meline:rgba(154,220,239,.34);--r-link:#86C8F2;--r-c1:#86D15A;--r-c2:#5BA9F7;--r-c3:#BC82EE;--r-c4:#F27AA5;--r-c5:#F5A54E;--r-c6:#E4E7EB;
  position:relative;width:100%;max-width:1120px;height:560px;margin-top:20px;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--r-chat);color:var(--r-text);text-align:left;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 120px -30px rgba(0,0,0,.8),0 0 160px -30px rgba(154,220,239,.3)}
.room.is-original{--r-side:#F2F3F5;--r-chat:#FFFFFF;--r-panel:#E9ECF0;--r-sel:#E1ECF6;--r-line:rgba(0,0,0,.09);--r-text:#20252B;--r-text2:#68717C;--r-input:#FFFFFF;--r-inputline:rgba(0,0,0,.14);--r-me:rgba(22,147,211,.1);--r-meline:rgba(22,147,211,.3);--r-link:#1B72CF;--r-c1:#367F16;--r-c2:#1B72CF;--r-c3:#8534C2;--r-c4:#C93571;--r-c5:#A65A08;--r-c6:#39424C}
.room *{transition:background-color .7s ease,color .7s ease,border-color .7s ease,box-shadow .7s ease}
.room.is-original :focus-visible{outline-color:#1B72CF}
.room .c1{color:var(--r-c1)}.room .c2{color:var(--r-c2)}.room .c3{color:var(--r-c3)}.room .c4{color:var(--r-c4)}.room .c5{color:var(--r-c5)}.room .c6{color:var(--r-c6)}
.bg-a{background:#B9A6EE}.bg-b{background:#E7CF7E}.bg-c{background:#97D9A0}.bg-d{background:#F0B48A}.bg-e{background:#F0A0A8}.bg-f{background:#9CC7E8}.bg-g{background:#C9B08E}.bg-h{background:#E8A6D0}.bg-i{background:#8FD3C4}.bg-j{background:#F3A6C8}.bg-k{background:#A8DDA0}.bg-l{background:#C9A8EE}.bg-m{background:#F0C48A}.bg-n{background:#D5CBB8}.bg-me{background:#9DB8E0}
.icon.fill{fill:currentColor;stroke:none}
.heart{color:#F0787E}.star{color:#F6C85F}.spark{color:#5BB8DA}

.room-head{flex:none;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;background:var(--r-hdr);color:#fff}
.rh-user{flex:none;width:240px;display:flex;align-items:center;gap:12px}
.rh-av{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#F0B48A;color:#3a2418;font-size:16px;font-weight:600;box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.rh-name{display:flex;flex-direction:column;line-height:1.25}
.rh-name b{font-size:16px;font-weight:600}
.rh-name small,.rh-meta small{font-size:12.5px;opacity:.88}
.rh-room{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px}
.rh-code{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff}
.rh-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.rh-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-title{display:flex;align-items:center;gap:10px}
.rh-title b{font-size:19px;font-weight:600;white-space:nowrap}
.chip-follow{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:11px;background:rgba(255,255,255,.22);font-size:12px;font-weight:600}
.chip-follow .icon{width:11px;height:11px;color:#fff}
.rh-tools{flex:none;width:240px;display:flex;justify-content:flex-end;gap:10px}
.rh-tools span{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16)}
.rh-tools .icon{width:18px;height:18px;color:#fff}

.room-body{flex:1;min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr) 264px}
.room-side{padding:18px 10px;display:flex;flex-direction:column;gap:4px;overflow:hidden;background:var(--r-side);border-right:1px solid var(--r-line)}
.rlbl{padding:6px 6px 4px;font-size:13px;letter-spacing:.02em;color:var(--r-text2)}
.rlbl-gap{margin-top:14px}
.rlbl-flush{padding-left:0}
.rm{width:100%;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:var(--r-text);text-align:left;cursor:pointer}
.rm.is-active{background:var(--r-sel)}
.rm-av{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff}
.rm-a0{background:#5B4FD6}.rm-a1{background:#E0742B}
.rm-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rm-t b{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm.is-active .rm-t b{color:var(--r-link)}
.rm-t small{font-size:12.5px;color:var(--r-text2)}
.badge{flex:none;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#F0787E;color:#fff;font-size:12px;font-weight:600}
.badge[hidden]{display:none}
.on-row{display:flex;align-items:center;gap:12px;padding:6px 10px}
.on-row .rm-t b{font-size:14.5px;font-weight:400}
.av{position:relative;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#1a1d22}
.on-row .av{width:36px;height:36px;font-size:13px}
.av i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:2px solid var(--r-side)}
.dot-on{background:#2FA36B}.dot-away{background:#F5A54E}

.room-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--r-chat)}
.room-bar{display:none}
.log{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:20px 26px 6px;-webkit-mask-image:linear-gradient(transparent 0,#000 80px);mask-image:linear-gradient(transparent 0,#000 80px)}
.msg{flex:none;display:flex;align-items:flex-start;gap:14px;padding:8px 12px;border-radius:14px}
.msg.is-me{background:var(--r-me);box-shadow:inset 0 0 0 1px var(--r-meline)}
.msg .av{width:40px;height:40px;font-size:14px}
.msg-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-meta{display:flex;align-items:baseline;gap:10px}
.msg-meta b{font-size:15px;font-weight:600}
.msg-meta time{font-size:12px;color:var(--r-text2)}
.msg-text{font-size:16px;line-height:1.4;color:var(--r-text);overflow-wrap:anywhere}
.sys{flex:none;align-self:center;display:flex;align-items:center;gap:10px;padding:4px 14px;border-radius:14px;background:var(--r-panel);font-size:13px;color:var(--r-text2)}
.sys i{width:6px;height:6px;border-radius:50%;background:#2FA36B}
.typing{flex:none;height:30px;padding:0 30px;display:flex;align-items:center;font-size:13px;color:var(--r-text2)}
.typing-in{display:flex;align-items:center;gap:10px}
.typing-in[hidden]{display:none}
.tdots{display:flex;gap:4px}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--r-text2)}
.composer{flex:none;height:72px;box-sizing:border-box;padding:12px 20px;display:flex;align-items:center;gap:10px;background:var(--r-side);border-top:1px solid var(--r-line)}
.composer input{flex:1;min-width:0;height:44px;box-sizing:border-box;padding:0 18px;border-radius:22px;border:1px solid var(--r-inputline);background:var(--r-input);color:var(--r-text);font:inherit;font-size:15px}
.composer input::placeholder{color:var(--r-text2);opacity:1}
.composer input:focus-visible{outline:0;border-color:#1693D3;box-shadow:0 0 0 3px rgba(22,147,211,.4)}
.rbtn{flex:none;width:44px;height:44px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--r-panel);cursor:pointer}
.rbtn .icon{width:20px;height:20px}
.rbtn.send{background:#1693D3;color:#fff}
.floats{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.float{position:absolute;bottom:84px;width:30px;height:30px}
.float .icon{width:100%;height:100%}

.room-info{padding:18px 16px;display:flex;flex-direction:column;gap:14px;overflow:hidden;background:var(--r-side);border-left:1px solid var(--r-line)}
.talk{display:flex;align-items:center;gap:10px;height:30px}
.talk .icon,.rb-talk .icon{flex:none;width:16px;height:16px;color:#2FA36B}
.talk b,.rb-talk b{font-size:15px;font-weight:600}
.eq{display:flex;align-items:center;gap:3px;height:18px}
.eq i{width:3px;height:16px;border-radius:2px;background:var(--r-link);transform-origin:50% 100%}
.eq i:nth-child(1){transform:scaleY(.5)}.eq i:nth-child(2){transform:scaleY(.85)}.eq i:nth-child(3){transform:scaleY(.4)}.eq i:nth-child(4){transform:scaleY(.7)}
.cam{position:relative;flex:none;height:126px;border-radius:14px;overflow:hidden;background:linear-gradient(120deg,#EDBB8B,#C4765A,#7A4A55,#C4765A,#EDBB8B);background-size:300% 300%}
.cam-h{position:absolute;left:50%;top:22px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:rgba(40,20,20,.34)}
.cam-b{position:absolute;left:50%;top:64px;width:96px;height:70px;margin-left:-48px;border-radius:48px 48px 0 0;background:rgba(40,20,20,.34)}
.cam-l{position:absolute;left:12px;bottom:9px;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cam-tag{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:#fff}
.cam-tag i{width:7px;height:7px;border-radius:50%;background:#F0787E}
.queue-box{display:flex;flex-direction:column;gap:8px}
.queue-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--r-text2)}
.queue{display:flex;flex-direction:column;gap:2px;min-height:44px}
.q{display:flex;gap:10px;font-size:14px}
.q span:first-child{width:14px;color:var(--r-text2)}
.mic-btn{width:100%;height:40px;border:0;border-radius:20px;background:#1693D3;color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.mic-btn.is-queued{background:var(--r-sel);color:var(--r-text);box-shadow:inset 0 0 0 1px var(--r-inputline)}
.mic-btn.is-onmic{background:#2FA36B;color:#fff}
.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;font-size:14px}
.roster span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-cap{max-width:720px;margin-top:22px;text-align:center;font-size:13.5px;line-height:1.55;color:var(--t3)}
.room-cap .mono{display:block;margin-bottom:6px;font-size:12.5px;color:var(--bone)}

/* ---------- inner pages (how it works, compatibility) ---------- */
.page-head{padding:56px 0 24px}
.page-head .wrap{display:flex;flex-direction:column;align-items:flex-start}
.page-head h1{max-width:16ch;margin:22px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(2.75rem,6vw,5.25rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.page-head .lead{max-width:600px;margin-top:22px}
.page-head+.section:not(.paper){padding-top:40px}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:56px}
.more{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 40px;margin-top:48px}

/* brand assets page */
.assets{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.asset{grid-column:span 2;display:flex;flex-direction:column;background:var(--ink2);border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden}
.asset.wide{grid-column:span 3}
.asset-view{display:flex;align-items:center;justify-content:center;min-height:224px;padding:32px}
.asset-view img{max-width:100%;height:auto}
.asset-view.on-dark{background:var(--ink1)}
.asset-view.on-light{background:var(--paper)}
.asset-view.on-icon{background:var(--ink3)}
.asset-view.on-icon img{border-radius:22%}
.asset-meta{display:flex;flex-direction:column;flex:1;gap:6px;padding:22px 24px 24px;border-top:1px solid rgba(255,255,255,.08)}
.asset-meta h3{font:600 18px/1.3 var(--sans)}
.asset-meta p{font-size:15px;line-height:1.55;color:var(--t2)}
.asset-dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px}
.asset-dl a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line2);border-radius:20px;font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:border-color .15s ease,background-color .15s ease}
.asset-dl a:hover{border-color:var(--bone);background:rgba(255,255,255,.05)}
.swatches{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:520px}
.sw{background:var(--ink2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sw i{display:block;height:72px;border-bottom:1px solid var(--line)}
.sw span{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;font-size:14px;line-height:1.2}
.sw code{font:400 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--t2)}
.sw-ink i{background:#0A0E14}
.sw-cyan i{background:#9ADCEF}
.sw-bone i{background:#F1EDE4}
.sw-deep i{background:#1B6B82}
.steps p a{text-decoration:underline;text-underline-offset:.24em}
.site-header nav a[aria-current="page"]{color:var(--bone)}

/* ---------- compare (before / after) ---------- */
.compare{width:100%;margin-top:64px}
.tabs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.tab{height:40px;padding:0 20px;border-radius:20px;border:1px solid var(--line2);background:transparent;font-size:14.5px;font-weight:500;cursor:pointer}
.tab:hover{background:rgba(255,255,255,.07)}
.tab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#07121A}
.legend{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font:400 12.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.legend span{display:flex;align-items:center;gap:10px}
.legend .hint{color:var(--bone)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--bone);flex:none}
.dot.on{background:var(--accent)}
.win{--pos:38%;position:relative;aspect-ratio:2496/1591;border-radius:20px;overflow:hidden;background:#20242a;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -30px rgba(0,0,0,.75),0 0 140px -30px rgba(154,220,239,.22)}
.win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 0)}
.win .light{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.win input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent;z-index:3}
.win input::-webkit-slider-runnable-track{-webkit-appearance:none;height:100%;background:transparent}
.win input::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:800px;background:transparent}
.win input::-moz-range-track{background:transparent}
.win input::-moz-range-thumb{width:2px;height:800px;border:0;background:transparent}
.handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:4;pointer-events:none}
.handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(241,237,228,.92);box-shadow:0 0 24px rgba(241,237,228,.35)}
.grip{position:absolute;top:50%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--bone);color:var(--ink1);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 6px rgba(241,237,228,.18)}
.grip .icon{width:24px;height:24px;stroke-width:2.2}
.win input:focus-visible ~ .handle .grip{outline:3px solid var(--bone);outline-offset:4px}
.compare-cap{margin-top:20px;max-width:760px;font-size:14px;line-height:1.55;color:var(--t3)}

/* ---------- facts ---------- */
.facts{border-block:1px solid rgba(255,255,255,.08);background:var(--ink1)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:112px;padding:16px 28px}
.fact+.fact{border-left:1px solid rgba(255,255,255,.08)}
.fact:first-child{padding-left:0}
.fact:last-child{padding-right:0}
.fact>span:first-child{font:400 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.fact>span:last-child{font-size:18px;line-height:1.3}
.fact .pal{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1;color:var(--accent)}

/* ---------- sections ---------- */
.section{padding:112px 0 120px}
.section.raised{background:var(--ink2)}
.section.paper{background:var(--paper);color:var(--paper-ink)}
.section.paper .folio{border-top-color:rgba(16,21,27,.24);color:var(--paper-2)}
.section.paper em{color:var(--paper-accent)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:80px;margin-top:56px}
.section-body{margin-top:56px}

/* benefits */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.card{display:flex;flex-direction:column;background:var(--ink2);border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden}
.card-visual{position:relative;height:280px;background:#111821;border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
.card-text{display:flex;flex-direction:column;gap:14px;padding:30px 30px 36px}
.card-text .mono{font-size:11.5px;color:var(--t3)}
.card-text h3{font-family:var(--serif);font-size:40px;line-height:1.05;letter-spacing:-.6px}
.card-text p{font-size:17px;line-height:1.6;color:var(--t2)}
.av{display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:600;flex:none}
.bubble{padding:10px 14px;background:#1C2530;color:#DDE2E8;font-size:14px;line-height:1.3;border-radius:16px 16px 16px 4px}
.bubble.me{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--bone);border-radius:16px 16px 4px 16px}
.v1-a .av,.v1-b .av{width:30px;height:30px;font-size:12px}
.av-m{background:#B4531F}
.av-k{background:#8C6A12}
.v1-a{position:absolute;left:24px;top:26px;display:flex;align-items:flex-end;gap:10px}
.v1-cam{position:absolute;left:64px;top:86px;width:176px;height:104px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#EDBB8B,#C4765A 55%,#5F3C42)}
.v1-cam::before{content:"";position:absolute;left:64px;top:20px;width:48px;height:48px;border-radius:50%;background:rgba(40,20,20,.32)}
.v1-cam::after{content:"";position:absolute;left:38px;top:66px;width:100px;height:70px;border-radius:50px 50px 0 0;background:rgba(40,20,20,.32)}
.v1-cam span{position:absolute;left:12px;bottom:9px;z-index:1;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.v1-b{position:absolute;right:24px;top:212px;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:10px}
.v1-typing{position:absolute;right:64px;top:212px;display:flex;align-items:center;gap:5px;height:38px;padding:0 15px;border:1px solid var(--accent-line);border-radius:16px 16px 4px 16px;background:var(--accent-soft);opacity:0}
.v1-typing i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.v2{display:flex;align-items:center;justify-content:center;gap:22px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:150px;height:184px;border-radius:22px}
.tile .ic{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:18px}
.tile .ic svg{width:40px;height:40px}
.tile b{display:block;font-size:14px;font-weight:600;text-align:center}
.tile small{display:block;font-size:13px;text-align:center}
.tile.norm{background:#ECE7DC;color:#10151B}
.tile.norm .ic{background:#fff;border:1px solid #D4CDBE}
.tile.norm small{color:#4A5460}
.tile.dark{background:#1B2430;border:1px solid var(--accent-line);box-shadow:0 0 44px -10px rgba(154,220,239,.22)}
.tile.dark .ic{background:#0A0E14;border:1px solid rgba(255,255,255,.14)}
.tile.dark small{color:var(--t2)}
.v3{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 24px}
.v3-row{display:flex;align-items:center;gap:14px;height:92px;padding:0 18px;border-radius:18px;background:#171E28;border:1px solid rgba(255,255,255,.07)}
.v3-row .ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:#232C39;color:var(--t2);flex:none}
.v3-row .ic svg{width:24px;height:24px}
.v3-row .ic.mark{background:#0A0E14}
.v3-row .ic.mark svg{width:28px;height:28px}
.v3-row div.t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.v3-row b{font-size:15.5px;font-weight:600}
.v3-row small{font-size:13px;line-height:1.3;color:var(--t2)}
.v3-row .ok{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);flex:none}
.v3-row .ok .icon{width:16px;height:16px;stroke-width:2.4}
.v3-row .pill{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.26);border-radius:17px;font-size:13px;font-weight:500;flex:none}

/* how */
.steps{position:relative;list-style:none;margin:88px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps::before{content:"";position:absolute;left:0;right:0;top:28px;height:1px;background:rgba(16,21,27,.3)}
.steps li{position:relative;display:flex;flex-direction:column}
.phase{position:relative;overflow:hidden;width:56px;height:56px;border-radius:50%;border:2px solid var(--paper-ink);background:var(--paper)}
.phase.half::after,.phase.full::after{content:"";position:absolute;inset:0;background:var(--paper-ink)}
.phase.half::after{right:50%}
.steps .mono{margin-top:28px;font-size:12px;color:var(--paper-2)}
.steps h3{margin-top:10px;font-family:var(--serif);font-size:40px;line-height:1.05;letter-spacing:-.6px}
.steps p{margin-top:14px;max-width:330px;font-size:17px;line-height:1.6;color:var(--paper-2)}
.paper .lead{max-width:400px;color:var(--paper-2)}

/* compatibility */
.split{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;margin-top:56px}
.split .left{width:440px;flex:none;display:flex;flex-direction:column;gap:24px}
.spec{width:680px;max-width:100%}
.spec-table{border-block:1px solid rgba(255,255,255,.12)}
.spec-row{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:24px;padding:28px 0}
.spec-row+.spec-row{border-top:1px solid rgba(255,255,255,.12)}
.spec-row .label{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px;font-weight:500;line-height:1.35;color:var(--t2)}
.spec-row .vals{display:flex;flex-direction:column;gap:6px;font-size:20px;line-height:1.4}
.spec-row .vals.mono2{font-family:var(--mono);font-size:18px;gap:8px;text-transform:none;letter-spacing:0}
.chip{display:inline-flex;padding:5px 11px;border:1px solid rgba(255,255,255,.26);border-radius:999px;font:400 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.chip.target{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.chip.wip{border-style:dashed;border-color:rgba(255,255,255,.34)}
.fine{margin-top:24px;max-width:600px;font-size:14px;line-height:1.6;color:var(--t3)}
.trust{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.trust .mono{font-size:12px;color:var(--t3)}
.trust-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.trust-list li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px;line-height:1.4}
.trust-list .ok{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.trust-list .ok .icon{width:14px;height:14px;stroke-width:2.4}
.trust .fine{margin-top:0}

/* pricing */
.pricing{display:flex;justify-content:space-between;align-items:stretch;gap:60px;margin-top:56px}
.pricing-left{width:520px;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.terms{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(255,255,255,.12)}
.terms li{display:flex;gap:18px;padding:24px 0;border-top:1px solid rgba(255,255,255,.12)}
.terms .ok{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.terms .ok .icon{width:16px;height:16px;stroke-width:2.4}
.terms h3{font:600 20px/1.3 var(--sans)}
.terms p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--t2)}
.ticket{position:relative;width:560px;flex:none;display:flex;flex-direction:column;background:var(--paper);color:var(--paper-ink);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.ticket-top{padding:38px 44px 26px}
.ticket-top .bar{display:flex;align-items:center;justify-content:space-between}
.ticket .mono{font-size:12px;color:var(--paper-2)}
.badge{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--paper-ink);font:400 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.price-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.price{font-family:var(--serif);font-size:clamp(112px,12vw,160px);line-height:.8;letter-spacing:-.03em}
.price-term{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
.price-term em{font-family:var(--serif);font-size:44px;line-height:1;color:var(--paper-accent)}
.price-term span{font-size:16px;line-height:1.4;color:var(--paper-2)}
.ticket-top .desc{margin-top:18px;max-width:400px;font-size:17px;line-height:1.55}
.perf{position:relative;height:32px;flex:none}
.perf::before{content:"";position:absolute;left:28px;right:28px;top:15px;border-top:2px dashed rgba(16,21,27,.28)}
.perf::after,.perf i{content:"";position:absolute;top:0;width:32px;height:32px;border-radius:50%;background:var(--ink2)}
.perf::after{right:-16px}
.perf i{left:-16px}
.ticket-bottom{padding:24px 44px 38px}
.renew{display:flex;align-items:baseline;justify-content:space-between}
.renew b{font-size:16px;font-weight:600}
.renew span{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-1px}
.ticket-bottom p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--paper-2)}
.ticket-bottom .btn-off{margin-top:24px;width:100%;height:60px;border:0;border-radius:30px;background:#D8D2C4;color:var(--paper-2);font-size:16px;font-weight:600;cursor:not-allowed}
.ticket-bottom .note{margin-top:14px;font-size:13.5px}
.ticket-bottom .note+.note{margin-top:8px}
.ticket :focus-visible{outline-color:var(--paper-ink)}
.ticket .ticket-cta{display:none;width:100%;height:60px;margin-top:24px;border-radius:30px;background:var(--paper-ink);color:var(--paper)}
.ticket .ticket-cta:hover{background:#1B242E}
.signup-open .ticket .ticket-cta{display:flex}
.signup-open .ticket .btn-off{display:none}
.assure{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;line-height:1.4;color:var(--paper-2)}
.assure li{display:flex;align-items:center;gap:8px}
.assure li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--paper-accent)}

/* faq */
.faq-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;margin-top:56px}
.faq-grid h2{width:420px;flex:none}
.faq{width:720px;max-width:100%;border-bottom:1px solid rgba(255,255,255,.12)}
.faq details{border-top:1px solid rgba(255,255,255,.12)}
.faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;list-style:none;cursor:pointer;font-family:var(--serif);font-size:32px;line-height:1.1;letter-spacing:-.3px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EDE4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.faq summary::before{content:"";position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EDE4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E")}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq summary:hover{color:#fff}
.faq details p{max-width:600px;margin:0;padding-bottom:30px;font-size:17px;line-height:1.65;color:var(--t2)}

/* updates */
.updates{position:relative;overflow:hidden;padding:112px 0 128px;background:var(--ink2)}
.updates .scene-bg{position:absolute;right:-120px;top:40px;width:640px;opacity:.75;pointer-events:none}
.updates .wrap{position:relative}
.updates-row{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;margin-top:56px}
.updates-row .left{width:600px;display:flex;flex-direction:column;gap:24px}
.updates-row .left .lead{max-width:520px}
.signup-form{width:520px;flex:none;display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:24px;background:var(--ink3);border:1px solid rgba(255,255,255,.1)}
.signup-form label{font-size:14px;font-weight:600}
.signup-controls{display:flex;gap:10px}
.signup-controls input{flex:1;min-width:0;height:52px;padding:0 18px;border-radius:26px;border:1px solid rgba(255,255,255,.16);background:var(--ink1);color:var(--bone);font:inherit;font-size:16px}
.signup-controls input::placeholder{color:var(--t3);opacity:1}
.signup-controls button{height:52px;padding:0 24px;border-radius:26px;border:1px dashed rgba(255,255,255,.3);background:transparent;color:var(--t2);font-size:15px;font-weight:600;white-space:nowrap;cursor:not-allowed}
.signup-controls button:not(:disabled){border:0;background:var(--accent);color:#07121A;cursor:pointer}
.signup-form .consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:400;line-height:1.5;color:var(--t2)}
.consent input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.consent a{text-decoration:underline;color:var(--bone)}
.signup-form #signup-status,.signup-form p{font-size:13.5px;line-height:1.5;color:var(--t3)}
.signup-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#turnstile{min-height:0}

/* footer */
.site-footer{background:var(--ink0);border-top:1px solid rgba(255,255,255,.06);padding:88px 0 56px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
.foot-brand{display:flex;flex-direction:column;gap:20px;max-width:420px}
.foot-brand .brand-name b{font-size:40px}
.foot-brand .brand-name i{font-size:26px}
.foot-brand .brand svg{width:44px;height:44px}
.foot-brand .tag{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.15}
.foot-brand p:last-child{font-size:16px;line-height:1.55;color:var(--t2)}
.foot-links{display:flex;gap:96px}
.foot-links nav{display:flex;flex-direction:column;gap:14px;font-size:15px;color:var(--t2)}
.foot-links nav span{font:400 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.foot-links a:hover{color:var(--bone)}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:80px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.foot-bottom p{max-width:720px;font-size:14px;line-height:1.6;color:var(--t3)}
.foot-bottom a{text-decoration:underline}
.foot-bottom span{flex:none;font:400 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--t3)}
/* legacy footer used by the secondary pages */
footer.wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:35px;border-top:1px solid var(--line);font-size:.82rem;color:var(--t3)}
footer.wrap p{max-width:64ch;font-size:.77rem}
footer.wrap a{text-decoration:underline}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:1rem;color:var(--bone);white-space:nowrap}
.footer-brand img{width:28px;height:28px}

/* secondary pages (privacy, source, confirm, unsubscribe) */
.privacy-main{padding-block:95px 110px;max-width:780px}
.privacy-main .eyebrow{margin-bottom:22px}
.privacy-main h1{font-family:var(--serif);font-size:clamp(2.8rem,5vw,4.6rem);line-height:1;letter-spacing:-.02em;max-width:15ch;margin-bottom:24px}
.privacy-main h2{font-family:var(--serif);font-size:1.9rem;margin-top:38px;margin-bottom:12px}
.privacy-main p,.privacy-main li{color:var(--t2);max-width:65ch;margin-bottom:20px}
.privacy-main ul{padding-left:1.4rem}
.privacy-main .updated{margin-bottom:8px}
.privacy-main .fine{margin-top:0;font-size:.85rem;color:var(--t3)}
.privacy-main .pull{margin-block:36px;font:400 clamp(1.9rem,4vw,2.6rem)/1.15 var(--serif);letter-spacing:-.01em;color:var(--bone)}
.privacy-main a{text-decoration:underline;text-underline-offset:.24em;color:var(--bone)}
.privacy-main button{height:48px;padding:0 24px;border-radius:24px;border:0;background:var(--accent);color:#07121A;font-weight:600;cursor:pointer;margin-bottom:20px}
.privacy-main button[disabled]{opacity:.6;cursor:not-allowed}
.privacy-main code{font-family:var(--mono);font-size:.85em;color:var(--bone);word-break:break-all}
.small{font-size:.88rem;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-row{flex-direction:column;align-items:flex-start;gap:32px}
  .hero-actions{width:auto}
  .section-head,.split,.pricing,.faq-grid,.updates-row{flex-direction:column;align-items:stretch;gap:40px}
  .split .left,.pricing-left,.faq-grid h2,.updates-row .left,.signup-form,.ticket,.spec,.faq{width:100%}
  .foot-top{flex-direction:column}
  .updates .scene-bg{width:560px;right:-160px;opacity:.5}
}
@media (max-width:900px){
  .site-header nav{display:none}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:28px;margin-top:32px}
  .steps::before{left:27px;right:auto;top:28px;bottom:28px;width:1px;height:auto}
  .steps li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;align-content:start}
  .steps .phase{grid-row:1 / span 3;grid-column:1}
  .steps li>*:not(.phase){grid-column:2}
  .steps .mono{margin-top:4px}
  .facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact,.fact:first-child,.fact:last-child{padding:20px 14px}
  .fact+.fact{border-left:0}
  .fact:nth-child(even){border-left:1px solid rgba(255,255,255,.08)}
  .fact:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  .win{aspect-ratio:358/400}
  .win .grip{width:48px;height:48px;margin:-24px 0 0 -24px}
  .brand-name b{font-size:28px}
  .brand-name i{font-size:18px}
  .brand-name{flex-direction:column;align-items:flex-start;gap:2px}
  .brand svg{width:34px;height:34px}
  .minibar nav{display:none}
  .ticket-top{padding:26px 26px 20px}
  .ticket-bottom{padding:20px 26px 28px}
  .faq summary{font-size:26px;gap:16px;padding:20px 0}
  .faq summary::after{width:40px;height:40px}
  .faq summary::before{right:10px}
  .foot-links{gap:56px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .spec-row{grid-template-columns:1fr;row-gap:12px;padding:20px 0}
  .spec-row .label{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .spec-row .vals{font-size:18px}
  .spec-row .vals.mono2{font-size:16px}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .section{padding:44px 0 48px}
  .section-head,.section-body,.cards,.split,.pricing,.faq-grid,.updates-row{margin-top:24px}
  .hero{padding:24px 0 48px}
  .v1-typing{right:58px;top:158px}
  .price-term em{font-size:32px}
  .trust-list li{font-size:15px}
  .hero-sub{font-size:26px}
  .hero-body{font-size:16px}
  .hero-actions .row{flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .hero-actions{width:100%}
  .hero .button{width:100%}
  .hero .text-link{align-self:center;border:0;height:48px;padding:0}
  .site-header{min-height:72px;padding-block:14px}
  .header-cta{padding:0 16px;font-size:14px}
  .compare{margin-top:40px}
  .tab{padding:0 15px;font-size:13.5px}
  .tabs{gap:8px;margin-bottom:16px}
  .legend{font-size:10.5px;letter-spacing:.08em;margin-bottom:12px}
  .legend .hint{display:none}
  .card-text{padding:22px 22px 26px}
  .card-text h3{font-size:34px}
  .card-text p{font-size:15.5px}
  .card-visual{height:200px}
  .v1-a{left:18px;top:18px}
  .v1-cam{left:54px;top:62px;width:150px;height:84px}
  .v1-cam::before{left:55px;top:12px;width:40px;height:40px}
  .v1-cam::after{left:30px;top:52px;width:90px;height:60px}
  .v1-b{right:18px;top:158px}
  .tile{width:140px;height:164px}
  .tile .ic{width:60px;height:60px}
  .v3{padding:0 18px;gap:14px}
  .v3-row{height:80px;padding:0 16px}
  h2.title{font-size:2.5rem}
  .lead{font-size:16.5px}
  .updates .scene-bg{opacity:.22;top:120px}
  .steps h3{font-size:30px}
  .steps p{font-size:16px}
  .faq details p{font-size:16px}
  .signup-form{padding:24px;border-radius:22px}
  .signup-controls{flex-direction:column}
  .signup-controls button{width:100%}
  .site-footer{padding:52px 0 40px}
  .foot-brand .brand-name{flex-direction:row;align-items:baseline;gap:10px}
  .foot-brand .brand-name b{font-size:36px}
  .foot-brand .brand-name i{font-size:22px}
  .foot-brand .tag{font-size:26px}
  .foot-links{gap:48px}
  footer.wrap{display:block}
  footer.wrap p{margin-block:16px}
}
/* ---------- hero and demo room, responsive ---------- */
@media (max-width:1180px){
  .hero{--k:.82;--oy:470px}
}
@media (max-width:1100px){
  .hero{--oh:930px}
  .room{height:540px}
  .room-body{grid-template-columns:minmax(0,1fr)}
  .room-side,.room-info{display:none}
  .rh-user{width:auto}
  .rh-room{justify-content:flex-end}
  .rh-tools{display:none}
  .room-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--r-side);border-bottom:1px solid var(--r-line)}
  .rb-rooms,.rb-mic{display:flex;align-items:center;gap:8px}
  .rb-mic{gap:12px}
  .rb-chip{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px 0 6px;border:1px solid var(--r-inputline);border-radius:20px;background:transparent;color:var(--r-text);font-size:14px;cursor:pointer}
  .rb-chip.is-active{background:var(--r-sel);border-color:transparent}
  .rb-chip .rm-av{width:28px;height:28px;border-radius:8px;font-size:11px}
  .rb-talk{display:flex;align-items:center;gap:8px}
  .mic-btn.sm{width:auto;height:36px;padding:0 16px;font-size:13px}
}
@media (max-width:900px){
  .hero{--k:.62;--oy:420px;--oh:890px}
  .assets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .asset,.asset.wide{grid-column:span 1}
  .asset:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:640px){
  .page-head{padding:32px 0 8px}
  .assets{grid-template-columns:minmax(0,1fr)}
  .asset-view{min-height:180px;padding:24px}
  .cta-row{margin-top:40px}
  .hero{--k:.46;--oy:380px;--oh:890px}
  .flip{flex-direction:column;gap:12px;margin-top:28px}
  .room{height:520px;border-radius:16px}
  .room-head{height:64px;padding:0 14px}
  .rh-av{width:38px;height:38px;font-size:14px}
  .rh-name small,.rh-meta small,.rh-code{display:none}
  .rh-title b{font-size:16px}
  .room-bar{padding:8px 12px}
  .rb-name,.rb-talk{display:none}
  .rb-chip{padding:0 8px 0 6px}
  .log{gap:6px;padding:14px 12px 4px}
  .msg{gap:10px;padding:6px 8px}
  .msg .av{width:34px;height:34px;font-size:12px}
  .msg-text{font-size:15px}
  .typing{padding:0 16px}
  .composer{gap:8px;padding:10px 12px}
  .rbtn{width:40px;height:40px}
  .rbtn.react:not([data-react="heart"]){display:none}
  .compare-title{margin:56px 0 24px}
}

/* ---------- motion ---------- */
/* Calm by design: slow eases, small distances, one-shot entrances and the hero orbits.
   Everything sits behind no-preference. The hidden "before reveal" states also need html.has-motion,
   which motion.js adds only after revealing what is already on screen, so a page whose script never
   runs is never left hidden. The orbits and the demo room's small loops are plain CSS, always on, and
   only rest while the hero is scrolled out of view. One-shots stay under five seconds. */
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes ps-rise{from{opacity:0;transform:translate3d(0,var(--rise),0)}}
  @keyframes ps-settle{from{transform:translate3d(0,14px,0)}}
  @keyframes ps-fade{from{opacity:0}}
  @keyframes ps-dim{from{color:var(--em-from,var(--bone))}}
  @keyframes ps-pop{from{opacity:0;transform:translate3d(0,10px,0) scale(.96)}}
  @keyframes ps-ticket{from{opacity:0;transform:translate3d(0,32px,0)}}
  @keyframes ps-draw-x{from{transform:scaleX(0)}}
  @keyframes ps-draw-y{from{transform:scaleY(0)}}
  @keyframes ps-wax{from{transform:translateX(-101%)}}
  @keyframes ps-beacon{from{box-shadow:0 0 0 0 rgba(154,220,239,.55)}to{box-shadow:0 0 0 10px rgba(154,220,239,0)}}
  @keyframes ps-typing{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
  @keyframes ps-dot{0%,100%{opacity:.35;transform:translate3d(0,0,0)}40%{opacity:1;transform:translate3d(0,-3px,0)}}
  @keyframes ps-ring{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
  @keyframes ps-check{from{stroke-dashoffset:1}}
  @keyframes ps-grip{50%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 16px rgba(241,237,228,0)}}

  /* hero entrance: pure CSS, ends visible. The headline, sub and body only settle (no opacity), so nothing waits on a fade to count as painted. */
  .hero .eyebrow{animation:ps-rise .8s var(--ease-out) backwards}
  .hero h1 :is(.l1,.l2){display:inline-block}
  .hero h1 .l1{animation:ps-settle .9s var(--ease-out) .04s backwards}
  .hero h1 .l2{animation:ps-settle .9s var(--ease-out) .12s backwards}
  .hero h1 em{animation:ps-dim 1.6s ease .5s backwards}
  .hero-sub{animation:ps-settle .9s var(--ease-out) .18s backwards}
  .hero-body{animation:ps-settle .9s var(--ease-out) .24s backwards}
  .hero-actions{animation:ps-rise .8s var(--ease-out) .3s backwards}
  .preview-notice::before,.hero .eyebrow::before{animation:ps-beacon 1.4s ease-out .8s 3}

  /* orbits: always turning, with no control to stop them. They only rest while the hero is scrolled out of view. */
  @keyframes orbit{to{transform:rotate(360deg)}}
  @keyframes orbit-r{to{transform:rotate(-360deg)}}
  .arm{animation:orbit var(--d) linear infinite}
  .arm2{animation-name:orbit-r}
  .sat-in{animation:orbit-r var(--d) linear infinite}
  .arm2 .sat-in{animation-name:orbit}
  .aurora{animation:orbit 90s linear infinite}
  .hero.is-away :is(.arm,.sat-in,.aurora){animation-play-state:paused}

  /* demo room */
  @keyframes msg-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
  @keyframes tdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  @keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
  @keyframes room-float{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0px),-280px) scale(1.2)}}
  @keyframes live{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes cam{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .msg.is-new,.sys.is-new{animation:msg-in .55s var(--ease-out) both}
  .tdot{animation:tdot 1s ease-in-out infinite}
  .tdot:nth-child(2){animation-delay:.15s}
  .tdot:nth-child(3){animation-delay:.3s}
  .eq i{animation:eq .9s ease-in-out infinite}
  .eq i:nth-child(2){animation-delay:.18s}
  .eq i:nth-child(3){animation-delay:.36s}
  .eq i:nth-child(4){animation-delay:.09s}
  .float{animation:room-float 2.4s ease-out both}
  .cam{animation:cam 12s ease-in-out infinite}
  .cam-tag i{animation:live 1.6s ease-in-out infinite}
  .q,.badge:not([hidden]){animation:ps-pop .4s var(--ease-out) both}

  /* scroll reveals: fill-mode is backwards so the resting state stays free for hover transforms */
  .has-motion [data-reveal=""]:not(.is-in),
  .has-motion [data-reveal=ticket]:not(.is-in),
  .has-motion [data-reveal=stagger]:not(.is-in)>*{opacity:0;transform:translate3d(0,var(--rise),0)}
  .has-motion [data-reveal=""].is-in{animation:ps-rise .8s var(--ease-out) backwards}
  .has-motion [data-reveal=stagger].is-in>*{animation:ps-rise .8s var(--ease-out) backwards}
  .has-motion [data-reveal=stagger].is-in>:nth-child(2){animation-delay:.08s}
  .has-motion [data-reveal=stagger].is-in>:nth-child(3){animation-delay:.16s}
  .has-motion [data-reveal=stagger].is-in>:nth-child(4){animation-delay:.24s}
  .has-motion [data-reveal=stagger].is-in>:nth-child(n+5){animation-delay:.32s}
  .has-motion [data-reveal=ticket].is-in{animation:ps-ticket 1.1s var(--ease-out) backwards}
  .has-motion [data-reveal].is-in em{animation:ps-dim 1.4s ease .3s backwards}
  .section.paper,.ticket{--em-from:var(--paper-ink)}

  /* how it works: the line draws, then the moon fills */
  .steps::before{transform-origin:left center}
  .has-motion .steps:not(.is-in)::before{transform:scaleX(0)}
  .has-motion .steps.is-in::before{animation:ps-draw-x 1.2s var(--ease-io) .1s backwards}
  .has-motion .steps.is-in .phase::after{animation:ps-wax .9s var(--ease-out) backwards}
  .has-motion .steps.is-in li:nth-child(2) .phase::after{animation-delay:.55s}
  .has-motion .steps.is-in li:nth-child(3) .phase::after{animation-delay:.95s}

  /* card vignettes play once when their card arrives */
  .has-motion .card.is-in .v1-a{animation:ps-pop .6s var(--ease-out) .15s backwards}
  .has-motion .card.is-in .v1-cam{animation:ps-pop .6s var(--ease-out) .55s backwards}
  .has-motion .card.is-in .v1-b .av{animation:ps-pop .5s var(--ease-out) .95s backwards}
  .has-motion .card.is-in .v1-b .bubble{animation:ps-pop .5s var(--ease-out) 2.05s backwards}
  .has-motion .card.is-in .v1-typing{animation:ps-typing 1.1s ease .95s backwards}
  .has-motion .card.is-in .v1-typing i{animation:ps-dot .55s ease-in-out 2 backwards}
  .has-motion .card.is-in .v1-typing i:nth-child(1){animation-delay:.95s}
  .has-motion .card.is-in .v1-typing i:nth-child(2){animation-delay:1.1s}
  .has-motion .card.is-in .v1-typing i:nth-child(3){animation-delay:1.25s}
  .tile{position:relative}
  .tile::before,.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
  .tile::after{box-shadow:0 0 0 3px rgba(154,220,239,.55)}
  .tile.dark::before{box-shadow:0 0 56px 4px rgba(154,220,239,.45)}
  .has-motion .card.is-in .tile.norm::after{animation:ps-ring 1.1s ease .35s backwards}
  .has-motion .card.is-in .tile.dark::after{animation:ps-ring 1.4s ease 1.25s backwards}
  .has-motion .card.is-in .tile.dark::before{animation:ps-ring 1.8s ease 1.25s backwards}
  .v3-row .draw{stroke-dasharray:1}
  .has-motion .card.is-in .v3-row .ok{animation:ps-pop .5s var(--ease-out) .3s backwards}
  .has-motion .card.is-in .v3-row .draw{animation:ps-check .6s ease .6s backwards}


  /* comparison: dip to dark between screens, pulse the grip after the demo */
  .win img{transition:opacity .2s ease}
  .win.is-swapping img{opacity:0}
  .win.is-hinted .grip{animation:ps-grip 1.4s ease-in-out 2}

  /* small touches */
  .button .icon,.text-link .icon,.header-cta .icon{transition:transform .25s var(--ease-out)}
  .button:hover .icon{transform:translateX(3px)}
  .text-link:hover .icon{transform:translateY(3px)}
  .header-cta:hover .icon{transform:translate(2px,-2px)}
  .tab{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  .minibar{transition:transform .35s var(--ease-out),visibility 0s linear .35s}
  .minibar.is-on{transition:transform .35s var(--ease-out),visibility 0s}
  .faq summary::before{transition:transform .35s var(--ease-out)}
  .faq details::details-content{opacity:0;transition:opacity .3s ease,content-visibility .3s allow-discrete}
  .faq details[open]::details-content{opacity:1}
  @media (hover:hover){
    .card{transition:translate .35s var(--ease-out),border-color .35s ease}
    .card:hover{translate:0 -4px;border-color:rgba(255,255,255,.16)}
  }
  @media (min-width:901px){
    .has-motion .cards>.card:nth-child(2).is-in{animation-delay:.09s}
    .has-motion .cards>.card:nth-child(3).is-in{animation-delay:.18s}
  }
  @media (max-width:900px){
    .steps::before{transform-origin:center top}
    .has-motion .steps:not(.is-in)::before{transform:scaleY(0)}
    .has-motion .steps.is-in::before{animation-name:ps-draw-y}
  }
  @media (min-width:1181px){
    @keyframes ps-ticket{from{opacity:0;transform:translate3d(0,32px,0) rotate(-1.5deg)}}
  }
  @supports (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .4s var(--ease-out),opacity .3s ease,content-visibility .4s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
  /* the updates art drifts with the scroll position; overflow:clip keeps .updates from becoming the scroll container the timeline would follow */
  @supports (animation-timeline:view()){
    @keyframes ps-drift{from{transform:translate3d(0,24px,0) rotate(-2deg)}to{transform:translate3d(0,-24px,0) rotate(2deg)}}
    .updates{overflow:clip}
    .updates .scene-bg{animation:ps-drift linear both;animation-timeline:view()}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.minibar{display:none}}