/* TabHalo site — page styles on top of the Modernist design system (styles.css). */
:root { --th-kicker: var(--color-accent-700); --th-muted: color-mix(in srgb, var(--color-text) 74%, transparent);
  --th-tab: #e3e1e0; --th-window: #ffffff; --th-paper: #f8f4f4; }
:root[data-theme="dark"] { --color-bg: #141312; --color-surface: #1e1c1b; --color-text: #f2f0ef; --color-divider: color-mix(in srgb, #f2f0ef 30%, transparent);
  --th-kicker: var(--color-accent-400); --th-tab: #262422; --th-window: #1b1a19; --shadow-lg: 0 14px 40px rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --color-bg: #141312; --color-surface: #1e1c1b; --color-text: #f2f0ef; --color-divider: color-mix(in srgb, #f2f0ef 30%, transparent);
    --th-kicker: var(--color-accent-400); --th-tab: #262422; --th-window: #1b1a19; --shadow-lg: 0 14px 40px rgba(0,0,0,.55); color-scheme: dark; }
}
html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; -webkit-font-smoothing: antialiased; background: var(--color-bg); color: var(--color-text); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
a { color: var(--th-kicker); } a:hover { color: var(--color-accent); }
summary { list-style: none; } summary::-webkit-details-marker { display: none; }
details[open] > summary svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } html { scroll-behavior: auto; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--color-text); color: var(--color-bg); padding: 10px 14px; z-index: 50; } .skip:focus { left: 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px,5vw,72px); padding-right: clamp(20px,5vw,72px); }
.sec { padding-top: clamp(64px,9vw,120px); scroll-margin-top: 80px; }
.sec-head { border-top: 2px solid var(--color-divider); padding-top: clamp(40px,5vw,64px); }
.kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--th-kicker); }
.kicker::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); flex: none; }
.h2 { font-size: clamp(34px,4.6vw,60px); font-stretch: 112%; font-weight: 800; line-height: 1.02; letter-spacing: -.03em; margin: 18px 0 0; max-width: 16ch; }
.muted { color: var(--th-muted); }
.label { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.top nav { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px); height: 68px; display: flex; align-items: center; gap: clamp(16px,3vw,40px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; flex: none; }
.brand:hover { color: var(--color-text); }
.logo { position: relative; width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.logo i { position: absolute; background: conic-gradient(from 200deg,#FF5F6D,#FFC371,#6DD5ED,#2193B0,#845EC2,#00C9A7,#FF5F6D); }
.logo .g { inset: -3px; filter: blur(5px); opacity: .8; } .logo .s { inset: 0; }
.logo b { position: relative; width: 12px; height: 12px; background: var(--color-text); }
.brand span.name { font-weight: 800; font-size: 20px; font-stretch: 115%; letter-spacing: -.02em; }
.links { flex: 1 1 0; min-width: 0; height: 24px; overflow: hidden; display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; line-height: 24px; }
.links a { color: var(--color-text); text-decoration: none; } .links a:hover { color: var(--color-accent); }

/* hero */
.hero { padding-top: clamp(48px,8vw,112px); padding-bottom: clamp(56px,8vw,112px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(48px,6vw,96px); }
.hero h1 { font-size: clamp(44px,6vw,80px); font-stretch: 118%; font-weight: 800; line-height: .98; letter-spacing: -.035em; margin: 0; max-width: 11ch; text-wrap: balance; }
.hero .lead { font-size: clamp(18px,1.6vw,21px); line-height: 1.5; color: var(--th-muted); margin: 28px 0 0; max-width: 34ch; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.cta .btn-primary { min-height: 56px; padding: 0 22px; font-size: 17px; gap: 12px; }
.nopitch { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 15px; font-weight: 600; }
.nopitch::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); flex: none; }
.stage { position: relative; flex: 1 1 480px; min-width: 0; }
.ring { position: absolute; left: 50%; top: 46%; width: min(620px,120%); aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg,#FF5F6D,#FFC371,#6DD5ED,#2193B0,#845EC2,#00C9A7,#FF5F6D); opacity: .28; filter: blur(2px);
  -webkit-mask: radial-gradient(circle closest-side, transparent 64%, #000 65%, #000 100%); mask: radial-gradient(circle closest-side, transparent 64%, #000 65%, #000 100%); }
.win { position: relative; margin: 0; background: var(--th-window); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); }
.strip { display: flex; overflow: hidden; background: var(--th-tab); border-bottom: 1px solid var(--color-divider); }
.htab { position: relative; flex: 1 0 24px; height: 42px; display: grid; place-items: center; border-right: 1px solid var(--color-divider); transition: background .3s, box-shadow .3s; }
.htab .glow { position: absolute; width: 24px; height: 24px; filter: blur(8px); transition: opacity .6s; }
.htab .mk { position: absolute; width: 20px; height: 20px; transition: opacity .35s, transform .5s cubic-bezier(.2,1.5,.4,1); }
.fav { position: relative; width: 12px; height: 12px; display: grid; place-items: center; font-size: 8px; font-weight: 800; line-height: 1; }
.titlebar { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.titlebar small, .fulltitle small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--th-muted); flex: none; }
.titlebar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.steps-row { display: flex; flex-wrap: wrap; gap: 24px 32px; padding: 24px 18px 22px; align-items: flex-end; }
.steps { flex: 1 1 240px; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: baseline; font-size: 15px; line-height: 1.4; color: var(--th-muted); transition: color .3s; }
.steps li.on { color: var(--color-text); font-weight: 700; } .steps li b { font-weight: 800; font-variant-numeric: tabular-nums; }
.keys { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; }
.keys .k { display: grid; place-items: center; height: 42px; padding: 0 10px; border: 2px solid var(--color-text); transition: all .12s; }
.keys .k.on, .key-m { background: var(--color-text); color: var(--color-bg); } .keys .k.on { transform: translateY(2px); }
.pause { position: relative; margin-top: 12px; min-height: 44px; padding: 0 4px; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--th-muted); font: inherit; font-size: 14px; cursor: pointer; }
.pause:hover { color: var(--color-text); } .pause i { width: 10px; height: 10px; border: 2px solid currentColor; }

/* problem */
.ba { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); gap: 2px; margin-top: 48px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.ba figure { margin: 0; background: var(--color-bg); padding: clamp(20px,3vw,32px); }
.ba figcaption { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--th-muted); }
.ba figure.after figcaption { color: var(--th-kicker); }
.bastrip { display: grid; grid-template-columns: repeat(auto-fill,minmax(24px,1fr)); background: var(--th-tab); border: 1px solid var(--color-divider); }
.bastrip div { position: relative; height: 38px; display: grid; place-items: center; border-right: 1px solid var(--color-divider); }
.bastrip .glow { position: absolute; width: 22px; height: 22px; filter: blur(7px); opacity: .5; } .bastrip .mk { position: absolute; width: 19px; height: 19px; }
.ba p { margin: 20px 0 0; font-size: 18px; font-weight: 600; }

/* demo */
.demo-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; }
.demo-intro p { margin: 0; max-width: 40ch; }
.demo { margin-top: 48px; background: var(--th-window); border: 2px solid var(--color-text); }
.dtabs { display: flex; overflow: hidden; background: var(--th-tab); border-bottom: 1px solid var(--color-divider); }
.dtab { flex: 1 1 0; min-width: 48px; max-width: 240px; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-right: 1px solid var(--color-divider);
  background: var(--th-tab); color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; box-shadow: inset 0 2px 0 transparent; }
.dtab[aria-selected="true"] { background: var(--th-window); box-shadow: inset 0 2px 0 var(--color-text); }
.dtab .ic { position: relative; flex: none; width: 16px; height: 16px; display: grid; place-items: center; }
.dtab .ic > span { position: absolute; transition: opacity .2s; }
.dtab .ic .glow { inset: -5px; filter: blur(6px); } .dtab .ic .plate { inset: -3px; } .dtab .ic .sym { inset: 0; } .dtab .ic .bdg { right: -4px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; }
.dtab .ic .fav { width: 16px; height: 16px; font-size: 9px; }
.dtab .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fulltitle { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; font-size: 16px; }
.fulltitle span { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); border-top: 0; }
.controls > div { background: var(--color-bg); padding: 24px; display: grid; gap: 14px; align-content: start; }
.controls .row { display: flex; justify-content: space-between; gap: 12px; }
.swatches { display: grid; grid-template-columns: repeat(6,44px); gap: 8px; }
.swatches button { width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; outline: 0 solid transparent; outline-offset: 2px; }
.swatches button[aria-pressed="true"] { outline: 3px solid var(--color-text); }
.opt { min-height: 44px; padding: 0 14px; border: 2px solid var(--color-divider); background: transparent; font: inherit; font-size: 14px; color: var(--color-text); text-align: left; cursor: pointer; }
.opt:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.opt[aria-pressed="true"] { border-color: var(--color-text); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; } .opts.g2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .opts.g3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.symbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--color-divider); background: transparent; cursor: pointer; padding: 0; }
.symbtn[aria-pressed="true"] { border-color: var(--color-text); } .symbtn i { width: 16px; height: 16px; background: var(--color-text); }
[hidden] { display: none !important; }

/* feature cells */
.cells { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 2px; margin-top: 48px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.cell { background: var(--color-bg); padding: clamp(24px,3vw,36px); display: flex; flex-direction: column; gap: 14px; }
.cell h3 { font-size: 23px; font-stretch: 110%; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.cell p { margin: 0; font-size: 16px; color: var(--th-muted); }
.cell .num { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--th-muted); }
.cell .top2 { display: flex; justify-content: space-between; align-items: center; }
.cell .vis { min-height: 72px; display: flex; align-items: center; gap: 6px; }
.kb { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 2px solid var(--color-text); font-weight: 800; font-size: 14px; }
.mini { display: flex; background: var(--th-tab); border: 1px solid var(--color-divider); }
.mini > span { position: relative; width: 30px; height: 36px; display: grid; place-items: center; border-right: 1px solid var(--color-divider); }
.mini > span:last-child { border-right: 0; } .mini .f { position: relative; width: 12px; height: 12px; } .mini .m { position: absolute; width: 19px; height: 19px; background: #0090FF; }
.mini .cur { background: var(--th-window); box-shadow: inset 0 2px 0 var(--color-text); } .mini .cur .m { width: 19px; height: 19px; } .mini .glow { position: absolute; width: 24px; height: 24px; background: #0090FF; filter: blur(7px); opacity: .6; }
.pill { padding: 7px 10px; border: 1px solid var(--color-divider); background: var(--th-window); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px,4vw,48px); margin-top: clamp(48px,6vw,80px); }
.shots figure { margin: 0; min-width: 0; } .shots img { width: 100%; height: auto; border: 2px solid var(--color-text); display: block; }
.shots figcaption { margin-top: 12px; font-size: 14px; color: var(--th-muted); }

/* sections */
.privcells { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 2px; margin-top: 48px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.privcells > div { background: var(--color-bg); padding: clamp(24px,3vw,36px); display: grid; gap: 12px; align-content: start; }
.privcells h3 { font-size: 22px; font-stretch: 110%; font-weight: 800; letter-spacing: -.02em; margin: 0; } .privcells p { margin: 0; font-size: 16px; color: var(--th-muted); }
.price { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: 2px; margin-top: 48px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.price > div { background: var(--color-bg); padding: clamp(24px,3.5vw,44px); display: flex; flex-direction: column; gap: 20px; } .price > div.pro { background: var(--color-surface); }
.price h3 { font-size: 28px; font-stretch: 115%; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; flex: 1; } .price li { display: flex; gap: 12px; } .price li svg { flex: none; margin-top: 4px; }
.price .btn { min-height: 52px; padding: 0 20px; font-size: 16px; align-self: flex-start; }
.faq { display: flex; flex-wrap: wrap; gap: 32px clamp(32px,6vw,96px); padding-bottom: clamp(64px,9vw,120px); }
.faq > .sec-head { flex: 1 1 300px; } .faq-list { flex: 2 1 520px; min-width: 0; border-top: 2px solid var(--color-divider); }
.faq details { border-bottom: 2px solid var(--color-divider); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding: 16px 0; cursor: pointer; font-size: clamp(18px,1.6vw,21px); font-weight: 800; font-stretch: 105%; }
.faq summary svg { flex: none; transition: transform .2s; } .faq details p { margin: 0 0 24px; max-width: 60ch; color: var(--th-muted); }
.close { background: var(--color-accent); color: var(--th-paper); }
.close .wrap { padding-top: clamp(64px,9vw,128px); padding-bottom: clamp(64px,9vw,128px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; }
.close h2 { font-size: clamp(44px,7vw,104px); font-stretch: 120%; font-weight: 800; line-height: .95; letter-spacing: -.04em; margin: 0; max-width: 10ch; }
.close a.big { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 24px; background: var(--th-paper); color: var(--color-accent-700); font-weight: 800; font-size: 18px; text-decoration: none; }
.close a.big:hover { background: #fff; color: var(--color-accent-800); }
footer.foot { max-width: 1200px; margin: 0 auto; padding: 36px clamp(20px,5vw,72px) 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 14px; color: var(--th-muted); }
footer.foot a { color: var(--color-text); }

/* text pages (privacy, 404) */
.prose { max-width: 760px; padding-top: clamp(48px,7vw,96px); padding-bottom: clamp(64px,9vw,120px); }
.prose h1 { font-size: clamp(40px,5.5vw,64px); font-stretch: 116%; font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 18px 0 0; }
.prose h2 { font-size: 24px; font-stretch: 110%; font-weight: 800; letter-spacing: -.02em; margin: 48px 0 0; padding-top: 24px; border-top: 2px solid var(--color-divider); }
.prose p, .prose li { color: var(--th-muted); } .prose strong { color: var(--color-text); } .prose li { margin: 6px 0; }
.prose .meta { color: var(--th-muted); margin: 12px 0 0; }
main { overflow-x: clip; }