/* ==========================================================================
   HaasiTech — site styles, shared by every page in this folder
   (index, contact, privacy, terms).

   HaasiTech is the parent brand: aubergine and purple, with lilac accents.
   Each product keeps its own world inside it — KitKi is a peacock-and-gold
   band with the jaali lattice; Ullek and Tutor stay purple. Gold is the
   thread through all of them. Newsreader (serif) for headings, IBM Plex Sans
   for text, IBM Plex Mono for addresses and labels. Dark by default; light is
   a choice (header button), shared with the other HaasiTech sites.
   ========================================================================== */

/* Self-hosted (SIL Open Font License) — no request leaves haasitech.com for fonts. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/newsreader-latin.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/newsreader-italic-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin.woff2) format('woff2')}

/* Dark aubergine: the default look. */
:root{
  --bg:#170d24;            /* page */
  --bg-2:#1f1330;          /* windows, panels */
  --ink:#f4ecdc;
  --ink-2:#c4bcb0;
  --ink-3:#958ca3;
  --rule:rgba(207,169,245,.2);
  --rule-2:rgba(244,236,220,.12);
  --accent:#cfa9f5;        /* lilac for text accents */
  --purple:#6b27a8;        /* HaasiTech purple: buttons, marks */
  --gold:#f0c977;
  --ok:#7fd1a8;
  --glow:rgba(107,39,168,.42);
  --head:rgba(23,13,36,.92);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
/* Light, when chosen with the header's sun/moon button (site.js sets data-theme).
   The KitKi band and the purple closing band keep their own colours. */
:root[data-theme="light"]{
  --bg:#f6f1e7;--bg-2:#fffaf1;--ink:#1d1428;--ink-2:#4a4058;--ink-3:#7a7088;
  --rule:rgba(107,39,168,.2);--rule-2:rgba(29,20,40,.1);--accent:#6b27a8;--gold:#a8740f;--ok:#2f7a4f;
  --glow:rgba(107,39,168,.14);--head:rgba(246,241,231,.92);
  color-scheme:light;
}
:root[data-theme="light"] .win:not(.kitki .win){box-shadow:0 30px 70px rgba(29,20,40,.12)}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.02;margin:0}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--accent)}
a{color:var(--accent);text-underline-offset:3px}
::selection{background:#6b27a8;color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:20;background:var(--head);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{width:32px;height:32px;flex:none}
.brand b{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:-.01em}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.site-nav > a{text-decoration:none;color:var(--ink-2);font-size:14.5px;padding:8px 11px;white-space:nowrap}
.site-nav > a:hover{color:var(--ink)}
.site-nav .cta{background:var(--purple);color:#fff;padding:9px 16px;margin-left:8px}
.site-nav .cta:hover{background:#4c1a7a;color:#fff}
/* theme button: shows the sun in dark mode (switch to light) and the moon in light mode */
.theme{appearance:none;border:0;background:none;cursor:pointer;color:var(--ink-2);width:36px;height:36px;display:inline-grid;place-items:center;flex:none;padding:0}
.theme:hover{color:var(--ink)}
.theme svg{width:18px;height:18px;display:none}
.theme[data-mode="dark"] .i-sun,.theme[data-mode="light"] .i-moon{display:block}
.theme:not([data-mode]) .i-sun{display:block}
@media (max-width:800px){ .site-nav > a.hide-sm{display:none} }
@media (max-width:480px){
  .wrap{padding-left:18px;padding-right:18px}
  .site-head .wrap{gap:8px}
  .site-nav{gap:0}
  .site-nav > a{padding:8px 8px}
  .site-nav .cta{padding:8px 12px;margin-left:4px}
  .brand b{font-size:23px}
}
@media (max-width:400px){ .site-nav > a:not(.cta){display:none} }

/* ── product lockup: mark, name, small "by HaasiTech" in HaasiTech lilac ── */
.lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.lockup svg{width:34px;height:34px;flex:none}
.lockup .nm{display:grid;line-height:1}
.lockup .nm b{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em}
.lockup .nm small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:5px}

/* ── buttons and statuses ───────────────────────────────────────────────── */
.btn{display:inline-block;font:inherit;font-weight:500;font-size:15px;padding:14px 24px;text-decoration:none;color:var(--ink);border:1px solid var(--rule)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.primary:hover{background:#4c1a7a;border-color:#4c1a7a;color:#fff}
.pill{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pill::before{margin-right:6px}
.pill.live{color:var(--ok)}       .pill.live::before{content:"●"}
.pill.early{color:var(--accent)}  .pill.early::before{content:"◐"}
.pill.build{color:var(--gold)}    .pill.build::before{content:"◒"}
.pill.plan{color:var(--ink-3)}    .pill.plan::before{content:"○"}

/* a product window: title bar with the address */
.win{background:var(--bg-2);border:1px solid var(--rule);box-shadow:0 40px 90px rgba(0,0,0,.28)}
.bar{display:flex;gap:7px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--rule-2);font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar i{width:7px;height:7px;flex:none;background:var(--rule-2)}

/* ── home: hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;left:-300px;top:-380px;width:1100px;height:1100px;background:radial-gradient(circle,var(--glow),transparent 60%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center;padding-top:96px;padding-bottom:96px}
@media (min-width:960px){ .hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px} }
.hero h1{font-size:clamp(46px,6vw,86px);margin:22px 0 26px}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:46ch;margin:0 0 34px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* the services register, as a console window */
.register ol{list-style:none;margin:0;padding:6px 20px}
.register li{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--rule-2)}
.register li:last-child{border-bottom:0}
.register .lockup svg{width:30px;height:30px}
.register .lockup .nm b{font-size:21px}
.register .addr{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:auto;margin-right:16px}
.register-foot{padding:12px 20px;border-top:1px solid var(--rule-2);font-size:13.5px;color:var(--ink-3)}
.register-foot b{color:var(--accent);font-weight:500}
@media (max-width:520px){ .register .addr{display:none} .register .pill{margin-left:auto} }

/* ── section heading ────────────────────────────────────────────────────── */
.section-head{display:grid;gap:14px;padding-top:96px;padding-bottom:44px;scroll-margin-top:70px}
@media (min-width:900px){ .section-head{grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:baseline} }
.section-head h2{font-size:clamp(36px,4.4vw,56px)}
.section-head p:not(.label){color:var(--ink-2);margin:16px 0 0;font-size:18px;max-width:56ch}

/* ── KitKi: its own peacock world inside the purple page ──────────── */
.kitki{
  --k-bg:#0c3436;--k-panel:#0b2c2e;--k-deep:#082425;--k-gold:#d6a84e;--k-gold2:#f0c977;
  --k-ink:#f4ecdc;--k-ink2:#c3bba8;--k-ink3:#8fa09c;--k-rule:rgba(214,168,78,.24);--k-rule2:rgba(244,236,220,.12);
  background:var(--k-bg);color:var(--k-ink);position:relative;overflow:hidden;border-top:3px solid var(--k-gold);scroll-margin-top:70px;
}
.kitki::before{content:"";position:absolute;right:-120px;top:-60px;width:820px;height:760px;background:var(--k-gold);opacity:.12;pointer-events:none;
  -webkit-mask:url(jaali.svg) 0 0/56px 56px repeat;mask:url(jaali.svg) 0 0/56px 56px repeat}
.kitki .wrap{position:relative}
.kitki-top{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
@media (min-width:960px){ .kitki-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.kitki .lockup .nm small{color:#cfa9f5}
.kitki .label{color:var(--k-gold)}
.kitki h2{font-size:clamp(44px,5vw,72px);margin:20px 0 22px}
.kitki h2 em{color:var(--k-gold2)}
.kitki .lede{color:var(--k-ink2)}
.kitki .btn{color:var(--k-ink);border-color:var(--k-rule)}
.kitki .btn:hover{border-color:var(--k-gold2);color:var(--k-gold2)}
.kitki .btn.gold{background:var(--k-gold);border-color:var(--k-gold);color:var(--k-deep)}
.kitki .btn.gold:hover{background:var(--k-gold2);border-color:var(--k-gold2)}
.kitki .pill.live{color:#7fd1a8} .kitki .pill.build{color:var(--k-gold2)} .kitki .pill.plan{color:var(--k-ink3)}
.kitki .win{background:var(--k-panel);border-color:var(--k-rule);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.kitki .bar{border-bottom-color:var(--k-rule2);color:var(--k-ink3)}
.kitki .bar i{background:rgba(244,236,220,.18)}
.report-body{padding:22px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:22px}
.grade{border:1px solid var(--k-rule);display:grid;place-items:center;align-content:center;height:120px}
.grade b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:72px;line-height:.9;color:var(--k-gold2)}
.grade span{font-family:var(--mono);font-size:11px;color:var(--k-ink3)}
.rows div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--k-rule2);font-size:14px}
.rows div:last-child{border-bottom:0}
.rows em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding-top:2px}
.rows .hi{color:#f0806a}.rows .md{color:var(--k-gold2)}.rows .ok{color:#7fd1a8}
.alert-card{position:relative;margin:-26px -18px 0 auto;width:310px;max-width:92%;background:var(--k-ink);color:var(--k-deep);box-shadow:0 30px 70px rgba(0,0,0,.5);border-top:3px solid var(--k-gold)}
.alert-card .hd{display:flex;align-items:center;gap:8px;padding:12px 16px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a5b12}
.alert-card .hd svg{width:14px;height:14px}
.alert-card h4{margin:8px 16px 6px;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.2}
.alert-card p{margin:0 16px 14px;font-size:13.5px;line-height:1.5;color:#3d4a48}
.visual-note{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--k-ink3)}
@media (max-width:560px){ .report-body{grid-template-columns:1fr} .grade{height:auto;padding:12px;grid-template-columns:auto auto;gap:12px;justify-content:start} .alert-card{margin-right:0} }

.lanes{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--k-rule)}
@media (min-width:960px){ .lanes{grid-template-columns:1fr 1fr} .lane+.lane{border-left:1px solid var(--k-rule);padding-left:56px} .lane:first-child{padding-right:56px} }
.lane{padding-top:56px;padding-bottom:72px}
.lane h3{font-size:clamp(30px,3.2vw,40px);margin:14px 0 12px;line-height:1.08}
.lane h3 em{color:var(--k-gold2)}
.lane > p{color:var(--k-ink2);margin:0 0 26px;max-width:46ch}
.modules{list-style:none;margin:0;padding:0}
.modules li{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:18px;padding:20px 0;border-top:1px solid var(--k-rule);align-items:start}
.modules .ico{width:46px;height:46px;border:1px solid var(--k-rule);display:grid;place-items:center;color:var(--k-gold2)}
.modules .ico svg{width:22px;height:22px}
.modules b{display:block;margin:2px 0 4px;font-size:16.5px;font-weight:600}
.modules span{display:block;color:var(--k-ink2);font-size:15px;line-height:1.55}
.modules .pill{padding-top:4px}
.kitki .actions{padding-bottom:64px;display:flex;gap:14px;flex-wrap:wrap}

/* ── Ullek and Tutor — HaasiTech purple ─────────────────────────────────── */
.pair{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
@media (min-width:960px){ .pair{grid-template-columns:1fr 1fr} .prod+.prod{border-left:1px solid var(--rule);padding-left:48px} .prod:first-child{padding-right:48px} }
.prod{padding-top:56px;padding-bottom:64px;scroll-margin-top:70px}
.prod .lockup svg{width:44px;height:44px}
.prod .lockup .nm b{font-size:34px}
.host{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:16px}
.prod .about{font-family:var(--serif);font-size:24px;line-height:1.35;margin:18px 0 22px;max-width:32ch}
.prod ul{list-style:none;margin:0 0 28px;padding:0}
.prod li{padding:10px 0 10px 22px;border-top:1px solid var(--rule);color:var(--ink-2);font-size:15.5px;position:relative}
.prod li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;background:var(--purple)}
.prod .row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ── in the workshop ────────────────────────────────────────────────────── */
.workshop{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
@media (min-width:900px){ .workshop{grid-template-columns:repeat(3,1fr)} .workshop > div+div{border-left:1px solid var(--rule);padding-left:28px} }
.workshop > div{padding:28px 28px 34px 0;scroll-margin-top:70px}
.workshop h3{font-size:28px;margin:12px 0 8px}
.workshop p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* ── approach ───────────────────────────────────────────────────────────── */
.principles{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--rule)}
.principles li{padding:26px 26px 30px 0}
.principles .num{display:block;font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;color:var(--gold)}
.principles h3{font-size:25px;margin:12px 0 8px}
.principles p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6}

/* ── closing band (HaasiTech purple) ───────────────────────── */
.band{background:#6b27a8;color:#fff;margin-top:96px}
.band .wrap{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:28px;padding-top:64px;padding-bottom:64px}
.band h2{font-size:clamp(34px,4.4vw,56px);max-width:18ch}
.band h2 em{color:#f0c977}
.band p{margin:14px 0 0;opacity:.85}
.band .btn{background:#f4ecdc;border-color:#f4ecdc;color:#170d24}
.band .btn:hover{background:#f0c977;border-color:#f0c977;color:#170d24}

/* ── content pages: contact, privacy, terms ─────────────────────────────── */
.page{padding-top:80px;padding-bottom:24px}
.page > *{max-width:720px}
.page h1{font-size:clamp(44px,5.8vw,72px);margin-bottom:22px}
.page p{color:var(--ink-2);margin:0 0 18px}
.contact-grid{display:grid;grid-template-columns:1fr;margin:40px 0 8px;border-top:1px solid var(--rule)}
.card{padding:22px 0;border-bottom:1px solid var(--rule)}
.card h2{font-size:26px;margin-bottom:8px}
.card p{margin:0;font-size:16px}
.card a{font-weight:500}
.card address{font-style:normal;color:var(--ink-2);font-size:16px;line-height:1.55}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule);margin-top:80px}
main:has(> .band:last-child) + .site-foot{margin-top:0;border-top:0}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-top:26px;padding-bottom:34px;font-size:14px;color:var(--ink-3)}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot .legal{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.site-nav a[aria-current="page"]:not(.cta),.site-foot a[aria-current="page"]{color:var(--accent)}

/* ── policy pages ───────────────────────────────────────────────────────── */
.page.legal-doc > *{max-width:760px}
.legal-doc .updated{color:var(--ink-3);font-size:14px;margin:-8px 0 30px;font-family:var(--mono)}
.legal-doc h2{font-size:32px;margin:48px 0 12px}
.legal-doc h3{font-size:22px;margin:24px 0 8px}
.legal-doc ul{color:var(--ink-2);margin:0 0 18px;padding-left:22px}
.legal-doc li{margin:0 0 8px}
.legal-doc .toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:0 0 8px}
.legal-doc .toc ol{margin:0;padding-left:22px;color:var(--ink-2)}
.legal-doc .toc li{margin:4px 0}

/* ── home: product overview cards (the detail lives on each product's page) ── */
.pcards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-bottom:56px}
@media (min-width:900px){ .pcards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pcard{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--bg-2);border:1px solid var(--rule);border-top:3px solid var(--purple)}
.pcard .lockup svg{width:40px;height:40px}
.pcard .lockup .nm b{font-size:28px}
.pcard .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:8px 0 0}
.pcard h3{font-size:26px;line-height:1.12}
.pcard .about{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.pcard-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pcard-top .pill{padding-top:6px}
.more{font-weight:500;font-size:15px;text-decoration:none;color:var(--accent)}
.more:hover{text-decoration:underline}
.btn.small{padding:9px 16px;font-size:14px}
/* KitKi keeps its own peacock world on the card, in both themes */
.pcard-kitki{position:relative;overflow:hidden;background:#0c3436;border-color:rgba(214,168,78,.24);border-top-color:#d6a84e;color:#f4ecdc}
.pcard-kitki::before{content:"";position:absolute;inset:0;background:#d6a84e;opacity:.08;pointer-events:none;
  -webkit-mask:url(jaali.svg) 0 0/44px 44px repeat;mask:url(jaali.svg) 0 0/44px 44px repeat}
.pcard-kitki > *{position:relative}
.pcard-kitki .kicker{color:#d6a84e}
.pcard-kitki h3 em{color:#f0c977}
.pcard-kitki .about{color:#c3bba8}
.pcard-kitki .lockup .nm small{color:#cfa9f5}
.pcard-kitki .pill.build{color:#f0c977}
.pcard-kitki .more{color:#f0c977}
.workshop{padding-bottom:8px}

/* ── product pages ──────────────────────────────────────────────────────── */
.crumb{padding-top:22px;font-size:14px;color:var(--ink-3)}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.kitki .crumb{color:var(--k-ink3)}
.product-hero{border-bottom:0}
.product-hero .wrap:not(.crumb){padding-top:40px}
.product-hero .crumb,.kitki .crumb{position:relative}
.product-hero .lockup svg{width:48px;height:48px}
.product-hero .lockup .nm b{font-size:36px}
.kicker-gap{margin-top:28px}
.product-hero h1{font-size:clamp(40px,5vw,68px)}
.product-hero .cta-row{align-items:center}
.points{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--rule)}
.points li{padding:13px 0 13px 24px;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:16px;position:relative}
.points li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;background:var(--purple)}
.spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
.spec div{display:contents}
.spec dt,.spec dd{padding:10px 0;border-bottom:1px solid var(--rule-2);font-size:15px}
.spec dt{color:var(--ink-3);padding-right:24px}
.spec dd{margin:0;color:var(--ink)}
.grade span + span{margin-top:2px}

.kitki .crumb a{color:var(--k-ink2)}
.kitki .btn.gold.small,.pcard-kitki .btn.gold{background:#d6a84e;border-color:#d6a84e;color:#082425}

/* ── account (signed in at auth.haasitech.com) ───────────────────────────── */
.account{position:relative;display:flex;align-items:center}
.account .signin{text-decoration:none;color:var(--ink-2);font-size:14.5px;padding:8px 11px;white-space:nowrap}
.account .signin:hover{color:var(--ink)}
.acct-btn{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;font:inherit;font-size:14.5px}
.acct-btn:hover{border-color:var(--accent)}
.acct-initial{width:28px;height:28px;display:grid;place-items:center;background:var(--purple);color:#fff;font-weight:600;font-size:13px}
.acct-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-caret{font-size:11px;color:var(--ink-3)}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:320px;max-width:calc(100vw - 32px);background:var(--bg-2);
  border:1px solid var(--rule);box-shadow:0 24px 60px rgba(0,0,0,.35);z-index:40}
.acct-who{display:grid;gap:2px;padding:16px 18px;border-bottom:1px solid var(--rule-2)}
.acct-who b{font-family:var(--serif);font-weight:500;font-size:20px}
.acct-who span{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.acct-who small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-top:4px}
.acct-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0;padding:12px 18px 4px}
.acct-products{list-style:none;margin:0;padding:0 8px 8px}
.acct-products a{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:9px 10px;text-decoration:none;color:var(--ink)}
.acct-products a:hover{background:var(--rule-2)}
.acct-products b{font-weight:600;font-size:14.5px}
.acct-products span{grid-column:1;font-size:12.5px;color:var(--ink-3)}
.acct-products em{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-size:13px;color:var(--accent)}
.acct-foot{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--rule-2)}
.acct-foot a{font-size:14px;text-decoration:none;color:var(--ink-2)}
.acct-foot a:hover{color:var(--ink)}
.acct-foot .acct-out{margin-left:auto;color:var(--accent)}
@media (max-width:480px){ .acct-name{display:none} .acct-btn{padding:4px} .acct-menu{position:fixed;left:16px;right:16px;top:66px;width:auto;max-width:none} }