/* investwhen design system — "market ink" palette, light + dark. Light is default; dark applies via [data-theme="dark"] on (set by theme.js), and via prefers-color-scheme when the user hasn't chosen. One accent, restrained semantic up/down/neutral, generous reading measure. */ @font-face{ font-family:"InterVariable";src:url("/static/fonts/InterVariable.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; } :root{ --bg:#f6f8fc; --surface:#ffffff; --surface-2:#eef2f8; --border:#e2e8f0; --ink:#0f1e35; --ink-soft:#56657f; --ink-faint:#8a97ad; --accent:#1f5fff; --accent-2:#1749cc; --accent-ink:#ffffff; --accent-wash:#eaf0ff; --up:#0f9d58; --down:#e0453f; --neutral:#c77d20; --radius:12px; --radius-lg:16px; --shadow:0 1px 2px rgba(15,30,53,.06),0 6px 20px rgba(15,30,53,.06); --maxw:1080px; --read:70ch; --font:"InterVariable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* hero / brand atmospherics */ --glow-1:rgba(31,95,255,.20); --glow-2:rgba(120,90,255,.16); --grad-hero:linear-gradient(135deg,#0a1a3f 0%,#1f5fff 55%,#6a5cff 100%); --grad-text:linear-gradient(120deg,var(--accent),#6a5cff); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0a0f1c; --surface:#121a2b; --surface-2:#1a2438; --border:rgba(255,255,255,.10); --ink:#e9eefb; --ink-soft:#9db0d0; --ink-faint:#6b7a97; --accent:#4d82ff; --accent-2:#6f9bff; --accent-ink:#0a0f1c; --accent-wash:rgba(77,130,255,.14); --up:#3ecf8e; --down:#ff6b66; --neutral:#e0a548; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.35); --glow-1:rgba(77,130,255,.28); --glow-2:rgba(120,90,255,.22); }} :root[data-theme="dark"]{ --bg:#0a0f1c; --surface:#121a2b; --surface-2:#1a2438; --border:rgba(255,255,255,.10); --ink:#e9eefb; --ink-soft:#9db0d0; --ink-faint:#6b7a97; --accent:#4d82ff; --accent-2:#6f9bff; --accent-ink:#0a0f1c; --accent-wash:rgba(77,130,255,.14); --up:#3ecf8e; --down:#ff6b66; --neutral:#e0a548; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.35); --glow-1:rgba(77,130,255,.28); --glow-2:rgba(120,90,255,.22); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} /* keyboard a11y: a clear focus ring on every interactive element, no ring on mouse */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} a:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,.dchip:focus-visible, .qchip:focus-visible,.cite:focus-visible,.tabbar a:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* global reduced-motion backstop: kill any animation/transition we didn't gate */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0 0 .4em} h1{font-size:clamp(28px,4vw,42px);font-weight:800} h2{font-size:clamp(22px,2.6vw,30px);font-weight:750} h3{font-size:18px;font-weight:700} p{margin:0 0 1em} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .muted{color:var(--ink-soft)} .measure{max-width:var(--read)} hr{border:none;border-top:1px solid var(--border);margin:22px 0} /* ---------- buttons (links styled as buttons) ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font:inherit;font-weight:650;font-size:15px;line-height:1;cursor:pointer; padding:12px 20px;border-radius:11px;border:1px solid transparent;text-decoration:none; transition:background .15s,border-color .15s,transform .05s;white-space:nowrap} .btn:hover{text-decoration:none} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--border)} .btn.ghost:hover{background:var(--surface-2)} .btn.subtle{background:var(--surface-2);color:var(--ink);border-color:transparent} .btn.subtle:hover{background:var(--border)} .btn.danger{background:var(--down);color:#fff;border-color:var(--down)} .btn.sm{padding:8px 14px;font-size:13.5px;border-radius:9px} .btn.block{display:flex;width:100%} .btn-row{display:flex;gap:10px;flex-wrap:wrap} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px; padding:12px 20px;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)} .nav-logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink)} .nav-logo:hover{text-decoration:none} .logo-mark{flex:0 0 auto;overflow:visible} .logo-word{font-weight:800;font-size:21px;letter-spacing:-.02em} .logo-word .hl{color:var(--accent)} /* "The Turn" — the market line dips then turns up; draws itself once on load */ .lm-path{stroke-dasharray:62;stroke-dashoffset:0} .lm-dot{transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:no-preference){ .lm-path{animation:lm-draw 1.05s cubic-bezier(.22,.61,.36,1) both} .lm-dot{animation:lm-pop .5s ease-out .9s both} } @keyframes lm-draw{from{stroke-dashoffset:62}to{stroke-dashoffset:0}} @keyframes lm-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.55)}100%{transform:scale(1)}} .nav-logo:hover .lm-dot{animation:lm-pop .5s ease-out both} .nav-spacer{flex:1} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{color:var(--ink-soft);font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:9px} .nav-links a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none} .nav-links a.active{color:var(--accent)} .nav-actions{display:flex;align-items:center;gap:8px} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink); cursor:pointer;font-size:16px;padding:0} .icon-btn:hover{background:var(--surface-2)} @media(max-width:760px){ .nav-links{display:none} } /* ---------- language switcher (native
, no JS / CSP-safe) ---------- */ .langpick{position:relative} .langpick>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 10px; border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink); cursor:pointer;font-size:13.5px;font-weight:650;user-select:none} .langpick>summary::-webkit-details-marker{display:none} .langpick>summary:hover,.langpick[open]>summary{background:var(--surface-2)} .langpick .lg-code{letter-spacing:.03em} .lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:190px;padding:6px; background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:2px;max-height:min(70vh,420px);overflow:auto} .lang-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px; color:var(--ink);font-size:14px;font-weight:600} .lang-menu a:hover{background:var(--surface-2);text-decoration:none} .lang-menu a.on{color:var(--accent);background:var(--accent-wash)} .lang-menu .lg-flag{font-size:15px;line-height:1} [dir=rtl] .lang-menu{right:auto;left:0} /* account language chooser */ .acct-lang{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px} .acct-lang .al-label{font-size:13px;font-weight:700;color:var(--ink-soft)} .langchip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px; border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600} .langchip:hover{background:var(--surface-2);text-decoration:none} .langchip.on{color:var(--accent);background:var(--accent-wash);border-color:var(--accent)} /* status card — e.g. "no new reads in the past hour" freshness notice */ .statuscard{display:flex;align-items:flex-start;gap:12px;margin:20px 0 6px;padding:14px 16px; background:var(--surface-2);border:1px solid var(--border);border-radius:12px;line-height:1.5} .statuscard .sc-ic{flex:none;font-size:18px;color:var(--accent);line-height:1.5} .statuscard strong{color:var(--ink)} /* account vertical tabs (native radio-hack — no JS, CSP-safe) */ .acct-tabs{display:flex;gap:24px;margin-top:22px;align-items:flex-start} .acct-tabs .tabin{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .tablist{display:flex;flex-direction:column;gap:4px;flex:0 0 200px;position:sticky;top:74px} .tabbtn{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-weight:650; font-size:14.5px;color:var(--ink-soft);cursor:pointer;border:1px solid transparent;user-select:none} .tabbtn .ti{font-size:15px;width:18px;text-align:center} .tabbtn:hover{background:var(--surface-2);color:var(--ink)} .tabpanels{flex:1;min-width:0} .tabpanel{display:none} #t-account:checked~.tabpanels .p-account, #t-billing:checked~.tabpanels .p-billing, #t-logic:checked~.tabpanels .p-logic{display:block} #t-account:checked~.tablist label[for=t-account], #t-billing:checked~.tablist label[for=t-billing], #t-logic:checked~.tablist label[for=t-logic]{background:var(--accent-wash);color:var(--accent);border-color:var(--border)} #t-account:focus-visible~.tablist label[for=t-account], #t-billing:focus-visible~.tablist label[for=t-billing], #t-logic:focus-visible~.tablist label[for=t-logic]{outline:2px solid var(--accent);outline-offset:2px} .tabpanel h2{font-size:19px;margin:0 0 12px} .tabpanel hr{margin:22px 0} .two-col{display:flex;gap:14px} .two-col>div{flex:1;min-width:0} @media(max-width:680px){ .acct-tabs{flex-direction:column;gap:12px} .tablist{flex-direction:row;flex:none;position:static;overflow-x:auto;gap:6px;padding-bottom:2px} .tabbtn{white-space:nowrap} .two-col{flex-direction:column;gap:0} } /* ---------- cards / layout ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); box-shadow:var(--shadow);padding:26px} .section{padding:34px 0} .section-h{margin:0 0 4px} .badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--accent);background:var(--accent-wash);border:1px solid var(--border);padding:5px 12px;border-radius:99px} .chip{display:inline-block;font-size:12px;color:var(--ink-soft);background:var(--surface-2); border-radius:99px;padding:3px 10px} /* hero */ .hero{padding:56px 0 20px;text-align:center} .hero .lead{font-size:19px;color:var(--ink-soft);max-width:56ch;margin:0 auto 22px} .hero .btn-row{justify-content:center} /* ---------- forms ---------- */ label{display:block;font-size:13.5px;font-weight:650;margin:14px 0 6px;color:var(--ink)} input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{ width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--border); background:var(--surface);color:var(--ink);font:inherit;font-size:15px;-webkit-appearance:none;appearance:none;height:auto;min-height:46px} input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)} .auth-card{max-width:430px;margin:40px auto} .msg{padding:11px 13px;border-radius:10px;font-size:14px;margin:0 0 16px;border:1px solid} .msg.err{background:color-mix(in srgb,var(--down) 12%,transparent);border-color:var(--down)} .msg.ok{background:color-mix(in srgb,var(--up) 12%,transparent);border-color:var(--up)} .alt{text-align:center;font-size:14px;color:var(--ink-soft);margin-top:16px} /* checkbox grids + toggle */ .chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:6px} .chk-grid label{display:flex;align-items:center;gap:8px;font-weight:400;margin:2px 0;cursor:pointer} .chk-grid input{width:auto} .sel-all{font-weight:500;font-size:12px;color:var(--accent);margin-left:8px;cursor:pointer} .row2{display:flex;gap:14px;flex-wrap:wrap}.row2>div{flex:1;min-width:160px} /* ---------- feed ---------- */ /* filter bar — search field + selects + date chips, in the design system */ .filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 10px} .search-field{position:relative;flex:1;min-width:200px;display:flex;align-items:center} .search-field .search-ic{position:absolute;left:12px;font-size:17px;color:var(--ink-faint);pointer-events:none;line-height:1} .search-field input{width:100%;padding-left:36px} .filterbar select{width:auto;flex:0 0 auto;min-width:132px;cursor:pointer} .datechips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 6px} .datechips .dlabel{font-size:12px;color:var(--ink-faint);font-weight:600;margin-right:2px} .dchip{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--surface-2); border:1px solid transparent;border-radius:99px;padding:6px 13px} .dchip:hover{background:var(--border);text-decoration:none;color:var(--ink)} .dchip.on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)} .dchip.clear{background:transparent;border:1px solid var(--border);color:var(--ink-faint)} .dchip.clear:hover{color:var(--down);border-color:var(--down);background:transparent} .dayhead{position:sticky;top:60px;z-index:5;margin:24px 0 4px;font-size:12.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)} /* reads <-> news view switcher */ .viewsw{display:flex;gap:7px;margin:2px 0 10px} /* news headlines — title+source+link rows (bodies are never rendered) */ .newsrow{display:flex;gap:12px;padding:9px 2px;border-bottom:1px solid var(--border);font-size:14.5px} .newsrow .ntime{flex:0 0 auto;color:var(--ink-faint);font-size:12px;padding-top:2px; font-variant-numeric:tabular-nums;min-width:74px} .newsrow .nbody{flex:1;min-width:0} .newsrow .nbody>a{color:var(--ink);font-weight:550} .newsrow .nbody>a:hover{color:var(--accent)} .newsrow .nsnip{display:block;color:var(--ink-soft);font-size:13px;margin-top:2px} .newsrow .nmeta{display:block;color:var(--ink-faint);font-size:12px;margin-top:2px} .srcn{color:var(--accent);font-weight:700;font-size:11px} .update{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:18px 20px;margin:14px 0} /* scroll reveal — reads fade + rise into view. Only active once JS marks the container (.reveal-on), so content stays visible when JS is off. */ .reveal-on .update{opacity:0;transform:translateY(16px); transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1)} .reveal-on .update.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal-on .update{opacity:1;transform:none;transition:none} } .update .meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--accent); font-weight:700;text-transform:uppercase;letter-spacing:.03em} .update .meta .when{color:var(--ink-faint);font-weight:500;text-transform:none;letter-spacing:0;margin-left:auto} .update .body{margin:10px 0 6px;line-height:1.6} .update details summary{cursor:pointer;color:var(--ink-soft);font-size:13px} .update .src{font-size:12px;color:var(--ink-soft);line-height:1.7} .bk{background:none;border:none;cursor:pointer;font-size:17px;line-height:1;color:var(--ink-faint);padding:2px 4px} .bk.on{color:var(--neutral)} .share{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;color:var(--ink-faint);padding:2px 4px} .share:hover{color:var(--accent)} .share:disabled{opacity:.5;cursor:default} /* modal (share link + password) — built by feed.js, CSP-safe */ .modal-ov{position:fixed;inset:0;z-index:100;background:rgba(8,12,22,.55);backdrop-filter:blur(2px); display:flex;align-items:center;justify-content:center;padding:18px;animation:ovin .15s ease} @keyframes ovin{from{opacity:0}to{opacity:1}} .modal{position:relative;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px;animation:modin .18s ease} @keyframes modin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .modal h2{font-size:19px;margin:0 0 4px} .modal-x{position:absolute;top:12px;right:12px;background:none;border:none;font-size:16px; cursor:pointer;color:var(--ink-faint);line-height:1;padding:4px} .modal-x:hover{color:var(--ink)} .copyrow{display:flex;gap:8px;align-items:stretch} .copyrow input{flex:1;min-width:0;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:13.5px} .copyrow .btn{flex:none;white-space:nowrap} /* shared-read public page CTA */ .share-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; margin-top:20px;padding:16px 18px;background:var(--accent-wash);border:1px solid var(--border); border-radius:12px;font-weight:600} /* ---------- service status + legal pages ---------- */ .legal h2{font-size:17px;margin:20px 0 6px} .legal p{margin:0 0 6px;color:var(--ink-soft)} .statusrow{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border)} .dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px} .dot.ok{background:#2fb672}.dot.down{background:var(--down)} .dot.maint{background:#e0a11b}.dot.none{background:var(--ink-faint)} .sr-main{flex:1;min-width:0} .sr-meta{text-align:right;font-size:12px;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px;white-space:nowrap} /* ---------- market chat ---------- */ .chat-shell{display:flex;gap:20px;margin-top:22px;align-items:flex-start} .chat-rail{flex:0 0 210px;position:sticky;top:74px;display:flex;flex-direction:column;gap:10px} .chat-list{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto} .chat-item{display:block;padding:8px 11px;border-radius:9px;color:var(--ink-soft);font-size:13.5px; font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-item:hover{background:var(--surface-2);color:var(--ink);text-decoration:none} .chat-item.on{background:var(--accent-wash);color:var(--accent)} .chat-main{flex:1;min-width:0;display:flex;flex-direction:column} .chat-usage{margin-bottom:14px} .cu-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-soft);margin-bottom:5px} .cu-up{font-weight:700} .cu-bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden} .cu-fill{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease} .cu-fill.warn{background:#e0a11b} .cu-fill.full{background:var(--down)} .chat-thread{display:flex;flex-direction:column;gap:14px;min-height:280px;padding:6px 0 4px} .chat-empty{text-align:center;color:var(--ink-soft);padding:40px 10px} .chat-empty h2{font-size:20px;margin:0 0 6px;color:var(--ink)} .bubble{max-width:82%;padding:12px 15px;border-radius:14px;line-height:1.55;font-size:14.5px} .bubble .bubble-body>*:first-child{margin-top:0} .bubble .bubble-body>*:last-child{margin-bottom:0} .bubble.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:5px} .bubble.user a{color:inherit;text-decoration:underline} .bubble.assistant{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:5px} .bubble.refused{align-self:flex-start;background:transparent;border:1px dashed var(--border);color:var(--ink-soft)} .bubble.thinking{opacity:.7;font-style:italic} .bubble-src{margin-top:8px;font-size:12px} .bubble-src summary{cursor:pointer;color:var(--ink-faint)} .chat-composer{display:flex;gap:10px;align-items:flex-end;margin-top:16px;position:sticky;bottom:0; background:var(--bg);padding:8px 0} .chat-composer textarea{flex:1;min-width:0;resize:none;min-height:46px;max-height:160px;margin:0} .chat-composer .btn{flex:none} @media(max-width:760px){ .chat-shell{flex-direction:column;gap:10px} .chat-rail{flex:none;position:static;width:100%} .chat-list{flex-direction:row;overflow-x:auto;max-height:none} .chat-item{flex:none;max-width:160px} .bubble{max-width:92%} } .disc{margin:26px 0 6px;padding:14px 16px;border:1px dashed var(--border);border-radius:12px; color:var(--ink-soft);font-size:13px;line-height:1.6} /* ---------- pricing tiers ---------- */ .tiers{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:22px 0} .tier{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); box-shadow:var(--shadow);padding:24px 20px;display:flex;flex-direction:column;flex:1 1 240px;max-width:300px} .tier.pop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)} .tier .price{font-size:27px;font-weight:800;margin:8px 0} .tier .price small{font-size:13px;font-weight:500;color:var(--ink-soft)} .tier ul{list-style:none;padding:0;margin:12px 0 18px;color:var(--ink-soft);font-size:14px;line-height:1.9;flex:1} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0} .step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px} .step .n{font-size:13px;font-weight:800;color:var(--accent)} @media(max-width:760px){ .tiers,.steps,.chk-grid{grid-template-columns:1fr} } /* ============ U2 landing ============ */ /* data + numbers read as data */ .tier .price,.count .num,.newsrow .ntime,.update .meta .when{font-variant-numeric:tabular-nums} /* hero: aurora backdrop + self-drawing market line, content staggers in on load */ .hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,92px) 0 30px} .hero>*{position:relative;z-index:2} .hero-bg{position:absolute;inset:-20% -10% auto;height:130%;z-index:0;pointer-events:none;border:0} .hero-bg .a1,.hero-bg .a2{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9} .hero-bg .a1{width:52vw;height:52vw;left:-8vw;top:-12vw;background:radial-gradient(circle at 50% 50%,var(--glow-1),transparent 68%)} .hero-bg .a2{width:46vw;height:46vw;right:-6vw;top:2vw;background:radial-gradient(circle at 50% 50%,var(--glow-2),transparent 68%)} .hero-line{position:absolute;left:0;right:0;top:52%;width:100%;height:180px;z-index:1;opacity:.5;pointer-events:none} .hero-line path{stroke-dasharray:1200;stroke-dashoffset:0} .hero-line .apex{transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:no-preference){ .hero-bg .a1{animation:drift1 30s ease-in-out infinite} .hero-bg .a2{animation:drift2 34s ease-in-out infinite} .hero-line path{animation:draw 1.9s cubic-bezier(.22,.61,.36,1) .1s both} .hero-line .apex{animation:lm-pop .6s ease-out 1.8s both} .hero .badge{animation:rise .6s ease-out both} .hero h1{animation:rise .6s ease-out .08s both} .hero .lead{animation:rise .6s ease-out .16s both} .hero .btn-row{animation:rise .6s ease-out .24s both} } @keyframes draw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,3vw) scale(1.08)}} @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,-2vw) scale(1.12)}} .hero h1{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="light"] .hero h1,:root:not([data-theme="dark"]) .hero h1{color:var(--ink)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1{-webkit-text-fill-color:transparent}} :root[data-theme="dark"] .hero h1{-webkit-text-fill-color:transparent} /* live headline ticker */ .ticker{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border); margin:6px 0 4px;padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ticker-track{display:inline-flex;gap:0;white-space:nowrap;will-change:transform} @media (prefers-reduced-motion:no-preference){.ticker-track{animation:ticker 70s linear infinite}} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:13.5px;font-weight:550;padding:0 22px} .ticker a:hover{color:var(--ink);text-decoration:none} .ticker a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;opacity:.7} .ticker a .tsrc{color:var(--ink-faint);font-size:12px;font-weight:500} /* proof strip with count-ups */ .proof{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,6vw,64px);padding:30px 0 6px} .count{text-align:center} .count .num{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .count .lbl{color:var(--ink-soft);font-size:13.5px;margin-top:6px} /* how-it-works: connecting progress line behind the steps */ .steps{position:relative} .steps::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px; background:linear-gradient(90deg,transparent,var(--border),transparent);z-index:0} .step{position:relative;z-index:1} /* section reveal (JS adds .in; .reveal-on gate keeps content visible w/o JS) */ .reveal-on .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} .reveal-on .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal-on .reveal{opacity:1;transform:none;transition:none}} /* pricing pointer-tilt (JS sets --rx/--ry/--mx/--my; base is flat) */ .tier{transition:transform .18s ease,box-shadow .18s ease;transform-style:preserve-3d} @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .tier.tilt{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)} .tier.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 60%)} } /* scroll-spy underline on nav links */ .nav-links a.spy{color:var(--accent)} .nav-links a.spy::after{content:"";display:block;height:2px;border-radius:2px;background:var(--accent); margin-top:3px;animation:spygrow .25s ease} @keyframes spygrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* mobile nav sheet */ .nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px; border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-size:18px;padding:0} @media(max-width:760px){ .nav-toggle{display:inline-flex} .nav-links{position:absolute;top:calc(100% + 8px);right:12px;left:12px;flex-direction:column;align-items:stretch; gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow); padding:10px;display:none} .nav-links.open{display:flex;animation:sheet .22s ease} .nav-links a{padding:11px 12px;font-size:15px} @keyframes sheet{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} } /* ============ U3 app polish ============ */ /* direction badge on a read card */ .dir{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px; border-radius:6px;font-size:12px;font-weight:800;line-height:1;margin-right:2px} .dir.up{color:var(--up);background:color-mix(in srgb,var(--up) 15%,transparent)} .dir.down{color:var(--down);background:color-mix(in srgb,var(--down) 15%,transparent)} .dir.flat{color:var(--neutral);background:color-mix(in srgb,var(--neutral) 15%,transparent)} @media (prefers-reduced-motion:no-preference){.reveal-on .update.in .dir{animation:nudge .5s ease .2s}} @keyframes nudge{0%,100%{transform:translateY(0)}40%{transform:translateY(-2px)}} /* citation superscript — bracketed so it can't be mistaken for body text */ .cites{vertical-align:super;font-size:10.5px;font-weight:700;line-height:0;white-space:nowrap; color:var(--ink-faint);margin-left:1px} .cite{color:var(--accent);text-decoration:none;padding:0 .5px} .cite:hover{text-decoration:underline} /* market quick-switcher rail (horizontal scroll on narrow screens) */ .qswitch{display:flex;gap:7px;overflow-x:auto;padding:4px 0 10px;margin:2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch} .qswitch::-webkit-scrollbar{display:none} .qchip{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--surface-2); border:1px solid transparent;border-radius:99px;padding:6px 13px;white-space:nowrap;text-transform:capitalize} .qchip:hover{background:var(--border);color:var(--ink);text-decoration:none} .qchip.on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)} /* digest schedule manager */ .sched-list{display:flex;flex-direction:column;gap:8px;margin:12px 0} .sched{display:flex;align-items:center;justify-content:space-between;gap:12px; background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px} .sched-say{font-size:14px;line-height:1.5} .sched-say strong{color:var(--ink)} .sched .btn{flex:0 0 auto} .row2>div{min-width:120px} /* add-schedule form */ .sched-form{margin-top:14px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)} .sched-title{font-weight:700;font-size:14px;margin-bottom:12px} .sched-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .sched-grid label{margin-top:0} .sched-topics{margin-top:12px} .sched-topics summary{cursor:pointer;color:var(--ink-soft);font-size:13px} .sched-preview{margin:14px 0 4px;padding:11px 14px;border-radius:10px;font-size:14px;line-height:1.5; background:var(--accent-wash);border:1px solid var(--accent);color:var(--ink)} .sched-actions{display:flex;justify-content:flex-end;margin-top:6px} @media(max-width:560px){ .sched-grid{grid-template-columns:1fr} .sched-actions .btn{width:100%} } /* mobile bottom tab bar (logged-in) */ .tabbar{display:none} @media(max-width:760px){ .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45; background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px); border-top:1px solid var(--border);padding:6px 4px env(safe-area-inset-bottom,6px)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px; color:var(--ink-faint);font-size:10.5px;font-weight:600;text-decoration:none} .tabbar a .ti{font-size:19px;line-height:1} .tabbar a.on{color:var(--accent)} body{padding-bottom:64px} } /* footer */ footer{border-top:1px solid var(--border);margin-top:40px;padding:26px 0;color:var(--ink-soft);font-size:13px} footer .wrap{display:flex;flex-direction:column;gap:10px} .foot-links a{color:var(--ink-soft);margin-right:14px} .foot-badges{display:flex;flex-wrap:wrap;gap:8px} .fb-chip{font-size:12px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--border); border-radius:99px;padding:4px 10px} /* ---------- feed redesign: card art, pulse, brief, trends, grouping ---------- */ .cardart{margin:-18px -20px 12px;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; overflow:hidden;line-height:0} .cardart svg{width:100%;height:92px;display:block} @media (min-width:700px){ .cardart svg{height:112px} } .pl{font-size:11px;font-weight:800;line-height:1} .pl.up{color:var(--up)}.pl.down{color:var(--down)}.pl.flat{color:var(--neutral)} .trendchip{font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 7px;letter-spacing:.02em; text-transform:none;white-space:nowrap} .trendchip.up{color:var(--up);background:color-mix(in srgb,var(--up) 13%,transparent)} .trendchip.down{color:var(--down);background:color-mix(in srgb,var(--down) 13%,transparent)} .trendchip.flat{color:var(--neutral);background:color-mix(in srgb,var(--neutral) 13%,transparent)} .trendchip.turn{color:var(--accent);background:var(--accent-wash)} .askbtn{background:none;border:none;cursor:pointer;font-size:15px;line-height:1;color:var(--ink-faint);padding:2px 4px} .askbtn:hover{color:var(--accent)} .visitnote{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;padding:11px 14px; background:var(--accent-wash);border:1px solid var(--border);border-radius:12px;font-size:14px} .visitnote .vn-ic{flex:none;color:var(--accent);line-height:1.4} .briefcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:14px 18px;margin:14px 0 8px} .briefcard .bc-head{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:4px} .briefcard .bc-head .bc-ic{color:var(--neutral)} .briefcard .bc-head .muted{font-size:12px} .bc-item{border-top:1px solid var(--border);padding:2px 0} .bc-item:first-of-type{border-top:none} .bc-item summary{cursor:pointer;font-weight:700;text-transform:capitalize;padding:8px 0; display:flex;align-items:center;gap:7px;font-size:14.5px} .bc-item summary .bc-when{margin-left:auto;font-size:11.5px;color:var(--ink-faint);font-weight:500} .bc-body{padding:0 0 10px;line-height:1.55;font-size:14.5px} .bc-body p{margin:0 0 6px} .qswitch.tsw{padding-top:0;margin-top:-4px} .ghead{display:flex;align-items:center;gap:8px;margin:26px 0 2px;font-size:13px;font-weight:800; text-transform:capitalize;letter-spacing:.02em} .ghead .gcount{font-size:11px;font-weight:700;color:var(--ink-faint);background:var(--surface-2); border-radius:99px;padding:2px 8px} .chat-about{margin:0 0 12px;background:var(--accent-wash);border:1px solid var(--border);border-radius:10px} .chat-about summary{display:flex;align-items:center;gap:8px;padding:9px 13px;font-size:13px;cursor:pointer} .chat-about summary strong{text-transform:capitalize} .chat-about summary .ca-when{margin-left:auto;font-size:11.5px;color:var(--ink-faint);white-space:nowrap} .chat-about summary::after{content:"▾";color:var(--ink-faint);font-size:11px;margin-left:6px} .chat-about[open] summary::after{content:"▴"} .chat-about .ca-ic{color:var(--accent)} .chat-about .ca-body{padding:2px 14px 12px;font-size:14px;line-height:1.55;max-height:44vh;overflow:auto; border-top:1px solid var(--border)} .chat-about .ca-body p{margin:8px 0 0} /* ---------- billing tab: period status, auto-renew, invoice history ---------- */ .bill-period{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0} .paybadge{font-size:11.5px;font-weight:800;border-radius:99px;padding:3px 10px;white-space:nowrap} .paybadge.ok{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent)} .paybadge.due{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)} .autorenew-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px; padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;font-size:14px} .autorenew-row button{margin-left:auto} .invtable{display:flex;flex-direction:column;margin-top:4px} .invrow{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--border);font-size:13.5px} .invrow .inv-date{flex:0 0 84px;color:var(--ink-soft);font-variant-numeric:tabular-nums} .invrow .inv-plan{flex:0 0 76px;text-transform:capitalize;font-weight:600} .invrow .inv-amt{flex:0 0 72px;font-variant-numeric:tabular-nums} .invrow .inv-links{margin-left:auto;font-size:13px;display:flex;gap:10px}