/* © 2026 Job Shift Careers. All rights reserved. */
/* Job Shift Careers: a phone-first app shell. Deep navy ground, red / yellow / blue
   brand stripes, dark teal "X-ray film" panels for results. One deliberate dark look. */
:root{
  color-scheme:dark;
  --bg:#111A3C;--bg2:#17214A;--card:#1C2752;--card2:#222E5D;--ink:#EEF1FF;--mute:#9AA4CC;--line:#33407A;--soft:#26325F;
  --acc:#4D7CFF;--acc2:#7B5CFF;--red:#FF4D5E;--yel:#FFC93C;--good:#3EE08F;--bad:#FF6B7A;
  --redSoft:rgba(255,77,94,.16);--yelSoft:rgba(255,201,60,.14);--blueSoft:rgba(77,124,255,.18);
  --cash:#5B8CFF;--cond:#FFC93C;--var:#B794FF;--ret:#3DD6C6;--unclear:#FF6B7A;
  --film:#0E2529;--filmLine:#21454B;--filmInk:#E8F3F1;--filmMute:#9DB8B4;--filmSoft:#1B3C42;--filmAcc:#46C2AE;
  --fcash:#46C2AE;--fcond:#E3AE45;--fvar:#A98AF0;--fret:#7BA6F5;--funclear:#F0816C;--fgood:#5FD08F;--fbad:#F0816C;
  --fd:"Familjen Grotesk",system-ui,"Segoe UI",sans-serif;
  --fb:"Instrument Sans",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --fh:"Kalam","Comic Sans MS",cursive;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* #17 (5 Nov 2026): Text size grows the words only; spacing, cards and buttons keep their size */
html{--ts:1}html.fs-l{--ts:1.125}html.fs-xl{--ts:1.25}
body{margin:0;color:var(--ink);font:calc(1rem*var(--ts,1))/1.5 var(--fb);
  background:radial-gradient(900px 520px at -10% -8%,rgba(255,77,94,.16),transparent 60%),radial-gradient(800px 520px at 110% 4%,rgba(77,124,255,.22),transparent 62%),var(--bg);background-attachment:fixed;min-height:100vh}
a{color:var(--acc)}
h1,h2,h3,.num,.big{font-family:var(--fd);text-wrap:balance}
h1{font-size:calc(clamp(1.9rem,6vw,2.6rem)*var(--ts,1));line-height:1.08;letter-spacing:-.02em;margin:0}
h2{font-size:calc(1.15rem*var(--ts,1));margin:0 0 10px}
h3{font-size:calc(1rem*var(--ts,1));margin:0}
p{margin:0}
.note{color:var(--mute);font-size:calc(.88rem*var(--ts,1))}
.wrap{max-width:680px;margin:0 auto;padding-inline:16px;padding-block:16px 140px;display:grid;gap:14px}
.stack{display:grid;gap:14px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:16px;min-width:0;box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.film{position:relative;overflow:hidden;background:var(--film);color:var(--filmInk);border:1px solid var(--filmLine);border-radius:22px;padding:18px 16px;min-width:0;
  background-image:linear-gradient(var(--filmLine) 1px,transparent 1px),linear-gradient(90deg,var(--filmLine) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.film .note,.film .lbl{color:var(--filmMute)}
.lbl{font-size:calc(.76rem*var(--ts,1));text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:var(--mute)}
.soft{background:var(--soft);border-radius:14px;padding:12px}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:14px;padding:11px 16px;font-weight:600;text-decoration:none;transition:transform .14s,filter .2s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}
.btn.p{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px rgba(77,124,255,.8)}
.btn.r{background:linear-gradient(135deg,#FF4D5E,#FF7A45);border-color:transparent;color:#fff}
.btn.s{padding:7px 12px;font-size:calc(.88rem*var(--ts,1));border-radius:12px}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(255,107,122,.5);color:var(--bad);background:transparent}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.wide{width:100%}
.linkbtn{background:none;border:0;padding:0;color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:2px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],textarea,select{width:100%;min-width:0;font:inherit;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
input::placeholder,textarea::placeholder{color:#6F79A6}
textarea{min-height:120px;resize:vertical}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--acc);flex:none;margin:2px 0 0}
input[type=range]{width:100%;accent-color:var(--acc)}
.fld{display:grid;gap:5px;min-width:0}
.fld label{font-weight:600;font-size:calc(.9rem*var(--ts,1))}
.fld label span{font-weight:400;color:var(--mute);font-size:calc(.82rem*var(--ts,1))}
.flds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:calc(.92rem*var(--ts,1));line-height:1.4}
.chk b{font-weight:600}
.err{color:var(--bad);font-size:calc(.88rem*var(--ts,1));font-weight:600}
.ok{color:var(--good);font-size:calc(.88rem*var(--ts,1));font-weight:600}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:calc(.76rem*var(--ts,1));font-weight:700;background:var(--soft);color:var(--ink)}
.pill.y{background:var(--yelSoft);color:var(--yel)}.pill.b{background:var(--blueSoft);color:#9DB5FF}.pill.g{background:rgba(62,224,143,.15);color:var(--good)}
.stripe{display:inline-flex;gap:4px}.stripe i{height:5px;width:22px;border-radius:3px}
.stripe i{background:var(--brass)}.stripe i:nth-child(2){opacity:.6}.stripe i:nth-child(3){opacity:.3}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:calc(1.1rem*var(--ts,1));color:var(--ink);text-decoration:none}
.brand span{color:var(--brass)}
:root{--brass:#E8B04A}html.light{--brass:#9C6A12}
.genie{font-family:var(--fh);font-weight:700;color:#FFE7A8;text-shadow:0 0 14px rgba(255,200,90,.45)}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(17,26,60,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .in{max-width:680px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.preview-band{background:var(--yelSoft);color:#FFE08A;border-bottom:1px dashed rgba(255,201,60,.5);font-size:calc(.82rem*var(--ts,1));text-align:center;padding:6px 16px}
.back{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px;font-weight:600;font-size:calc(.9rem*var(--ts,1));color:var(--ink);text-decoration:none;justify-self:start}

/* tab bar: across the top, under the brand; swipe sideways on phones */
.tabs{border-top:1px solid var(--line)}
.tabs-in{max-width:1180px;margin:0 auto;display:flex;gap:4px;padding:6px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 13px;font-size:calc(.88rem*var(--ts,1));font-weight:600;color:var(--mute);border-radius:12px;text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:color .2s,background .2s}
.tabs a:hover{color:var(--ink);background:var(--soft)}
.tabs a svg{width:18px;height:18px;flex:none}
.tabs a[aria-current="page"]{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 8px 22px -8px rgba(77,124,255,.8)}
@media (min-width:1100px){.tabs-in{justify-content:center}}
.wrap{padding-block:16px 110px}

/* landing */
.hero{display:grid;gap:14px;padding-block:18px 6px}
.hero .lead{font-size:calc(1.08rem*var(--ts,1));color:var(--mute);max-width:56ch}
.hero h1 em{font-style:normal;color:var(--red)}
.xr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.ring{--p:0;flex:none;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--filmAcc) calc(var(--p)*1%),var(--filmSoft) 0);display:grid;place-items:center;transition:--p .8s;box-shadow:0 0 28px rgba(70,194,174,.25)}
.ring>div{width:90px;height:90px;border-radius:50%;background:var(--film);display:grid;place-items:center;text-align:center;line-height:1.05}
.ring .num{font-size:calc(1.55rem*var(--ts,1));font-weight:700}
.ring small{display:block;font-size:calc(.62rem*var(--ts,1));color:var(--filmMute)}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.feat div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.feat i{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-weight:700;font-family:var(--fd)}
.feat div:nth-child(3n+1) i{background:var(--redSoft);color:var(--red)}.feat div:nth-child(3n+2) i{background:var(--yelSoft);color:var(--yel)}.feat div:nth-child(3n) i{background:var(--blueSoft);color:var(--acc)}
.feat b{font-family:var(--fd)}.feat span{color:var(--mute);font-size:calc(.86rem*var(--ts,1))}
.foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:calc(.85rem*var(--ts,1));color:var(--mute);padding-block:10px}
.foot a{color:var(--mute)}
.madeby{text-align:center;font-size:calc(.76rem*var(--ts,1));font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.copyr{text-align:center;font-size:calc(.74rem*var(--ts,1));color:var(--mute);opacity:.8;margin:-4px 0 0}
/* the small raised ™ after the brand name */
.tm{font-size:.48em;font-weight:600;vertical-align:super;line-height:0;margin-left:1px;color:var(--mute);letter-spacing:0;font-family:var(--fb, inherit)}

/* code input */
.code{letter-spacing:.5em;font-family:var(--fd);font-size:calc(1.4rem*var(--ts,1));text-align:center}

/* home */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{position:relative;overflow:hidden;border:0;text-align:left;color:#fff;border-radius:20px;padding:14px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;background:linear-gradient(145deg,var(--k1),var(--k2));text-decoration:none}
.kpi .lb{font-size:calc(.7rem*var(--ts,1));text-transform:uppercase;letter-spacing:.09em;font-weight:700;opacity:.88}
.kpi b{font-family:var(--fd);font-size:calc(1.55rem*var(--ts,1));line-height:1.05;font-variant-numeric:tabular-nums}
.kpi span{font-size:calc(.78rem*var(--ts,1));opacity:.92}
.kpi::after{content:"";position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.13)}
.tiles{display:grid;gap:10px}
.tile{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:2px 12px;align-items:center;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:18px;padding:12px 14px;color:var(--ink);text-decoration:none;text-align:left;width:100%}
.tile:hover{border-color:var(--acc)}
.tile i{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-weight:700;font-family:var(--fd);font-size:calc(1.15rem*var(--ts,1))}
.tile b{font-family:var(--fd);font-size:calc(1.03rem*var(--ts,1))}.tile span{color:var(--mute);font-size:calc(.86rem*var(--ts,1))}
.tile em{grid-row:span 2;font-style:normal;font-size:calc(.72rem*var(--ts,1));font-weight:700;color:#C9B8FF;background:rgba(123,92,255,.18);border-radius:999px;padding:3px 8px;white-space:nowrap}
.tile.c1 i{background:var(--redSoft);color:var(--red)}.tile.c2 i{background:var(--yelSoft);color:var(--yel)}.tile.c3 i{background:var(--blueSoft);color:var(--acc)}

/* offer tool */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg2);border-radius:14px;padding:4px}
.seg button{border:0;border-radius:10px;padding:9px 8px;background:transparent;color:var(--mute);font-weight:600;line-height:1.2}
.seg button small{display:block;font-weight:400;font-size:calc(.76rem*var(--ts,1));font-variant-numeric:tabular-nums}
.seg button[aria-selected="true"]{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.line{border:1px solid var(--line);border-left:6px solid var(--c,var(--line));border-radius:12px;padding:10px;display:grid;gap:8px}
.lr{display:grid;grid-template-columns:minmax(0,1fr) 108px 26px;gap:6px;align-items:center}
.lr input[data-f="a"]{text-align:right;font-variant-numeric:tabular-nums}
.lr.lr2{grid-template-columns:minmax(0,1fr) 116px}
.lr input[data-f="amount"]{text-align:right;font-variant-numeric:tabular-nums}
.x{border:0;background:transparent;color:var(--mute);font-size:calc(1.4rem*var(--ts,1));line-height:1;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:4px 10px;font-size:calc(.8rem*var(--ts,1))}
.chip[aria-pressed="true"]{background:var(--c,var(--acc));border-color:var(--c,var(--acc));color:#0A0F24;font-weight:700}
.why{font-size:calc(.82rem*var(--ts,1));color:var(--mute)}
/* offer lines: phone = name and amount on top, "How it's paid" below; wide boxes = one row */
.lns{container-type:inline-size}
.lr3{display:grid;grid-template-columns:minmax(0,1fr) 116px 26px;grid-template-areas:"n a x" "c c .";gap:6px;align-items:center}
.lr3 [data-f="n"]{grid-area:n}.lr3 [data-f="a"]{grid-area:a;text-align:right;font-variant-numeric:tabular-nums}.lr3 select{grid-area:c;min-width:0}.lr3 .x{grid-area:x}
.lr3 > .ferr{grid-column:1/-1}
@container (min-width:540px){.lr3{grid-template-columns:minmax(0,1fr) 108px 204px 22px;grid-template-areas:"n a c x"}}
.lnote{margin:0;font-size:calc(.82rem*var(--ts,1));color:var(--mute)}
.ox .o1{order:1}.ox .o2{order:2}.ox .o3{order:3}.ox .o4{order:4}.ox .o5{order:5}
#o-cmp:empty,#o-more:empty{display:none}
@media (min-width:1100px){.split.ox{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.ox .lns .line{padding:8px 10px}}
.ox .aibox{margin:0}
.big{font-size:calc(2rem*var(--ts,1));font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.inh b{font-family:var(--fd);font-size:calc(1.3rem*var(--ts,1));color:var(--filmAcc);font-variant-numeric:tabular-nums}
.bar{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--filmSoft)}
.bar i{height:100%}
.leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:calc(.82rem*var(--ts,1));font-variant-numeric:tabular-nums}
.leg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:6px}
.gauge{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--funclear),var(--fcond) 50%,var(--fcash))}
.gauge i{position:absolute;top:-5px;width:4px;height:20px;border-radius:2px;background:var(--filmInk);transform:translateX(-50%);transition:left .6s}
.hpill{display:inline-block;border-radius:999px;padding:3px 12px;font-weight:700;font-size:calc(.88rem*var(--ts,1));background:var(--hc);color:#0B1F22}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.stat{background:var(--filmSoft);border-radius:12px;padding:10px 12px;min-width:0}
.card .stat{background:var(--soft)}
.stat b{display:block;font-family:var(--fd);font-size:calc(1.3rem*var(--ts,1));font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:calc(.8rem*var(--ts,1));color:var(--filmMute)}.card .stat span{color:var(--mute)}
.up{color:var(--good)}.down{color:var(--bad)}.film .up{color:var(--fgood)}.film .down{color:var(--fbad)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:calc(.9rem*var(--ts,1));font-variant-numeric:tabular-nums}
th,td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left}
th{font-size:calc(.76rem*var(--ts,1));text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:600}
td small{display:block;font-size:calc(.76rem*var(--ts,1))}
ul.clean{margin:0;padding-left:20px;display:grid;gap:6px}
.tag{display:inline-block;font-size:calc(.72rem*var(--ts,1));font-weight:700;border-radius:6px;padding:1px 6px;margin-right:6px;background:var(--soft)}
.tag.n{color:var(--good)}.tag.g{color:var(--bad)}.tag.c{color:var(--cond)}
details.card>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"Show";font-size:calc(.85rem*var(--ts,1));font-weight:600;color:var(--acc)}
details.card[open]>summary::after{content:"Hide"}
details.card[open]>summary{margin-bottom:10px}
.sl label{display:flex;justify-content:space-between;gap:8px;font-size:calc(.92rem*var(--ts,1));font-weight:600}
.sl label span{font-variant-numeric:tabular-nums;color:var(--acc)}

/* gap timeline */
.safe .num{font-size:calc(3rem*var(--ts,1));font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.safe .num small{font-size:calc(1rem*var(--ts,1));color:var(--filmMute);margin-left:6px}
ol.tl{list-style:none;padding:0;margin:0}
ol.tl li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line);align-items:start}
ol.tl li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--d,var(--line));margin-top:5px}
ol.tl .d{font-size:calc(.8rem*var(--ts,1));color:var(--mute);font-variant-numeric:tabular-nums}
ol.tl .r{text-align:right;font-variant-numeric:tabular-nums;font-size:calc(.9rem*var(--ts,1))}
ol.tl .r small{display:block;color:var(--mute);font-size:calc(.76rem*var(--ts,1))}
ol.tl li.low{background:rgba(255,107,122,.1);border-radius:10px;padding-inline:8px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.kv b{text-align:right;font-variant-numeric:tabular-nums}

/* negotiate */
.ask{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
.ask .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--blueSoft);font-family:var(--fd);font-weight:700;color:var(--acc)}
.ask .amt{font-family:var(--fd);font-weight:700;font-size:calc(1.2rem*var(--ts,1));color:var(--acc);font-variant-numeric:tabular-nums}
.ask p{font-size:calc(.88rem*var(--ts,1));color:var(--mute)}
.ask label{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:calc(.85rem*var(--ts,1));color:var(--mute)}

/* jobs */
.job{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:6px}
.job .meta{font-size:calc(.8rem*var(--ts,1));color:var(--mute)}
.job .meta .old{color:var(--yel);font-weight:600}
.job .acts .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-out{margin:0}
.job .acts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:calc(.88rem*var(--ts,1))}
.srch{display:flex;flex-wrap:wrap;gap:8px}
.srch a{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font-weight:600;font-size:calc(.88rem*var(--ts,1));text-decoration:none}
.trow{border:1px solid var(--line);border-left:6px solid var(--sc);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
.trow .meta{font-size:calc(.8rem*var(--ts,1));color:var(--mute)}
.trow select{width:auto;padding:6px 8px;font-size:calc(.85rem*var(--ts,1))}
.trow input{grid-column:1/-1;font-size:calc(.86rem*var(--ts,1));padding:7px 10px}
.fu{display:inline-block;font-size:calc(.72rem*var(--ts,1));font-weight:700;border-radius:6px;padding:1px 7px;margin-left:6px;background:var(--yelSoft);color:var(--cond)}

/* addas */
.adda{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:2px 12px;align-items:center;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:18px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.adda:hover{border-color:var(--acc)}
.adda .em{grid-row:span 2;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:calc(1.5rem*var(--ts,1));background:var(--soft)}
.adda b{font-family:var(--fd);font-size:calc(1.02rem*var(--ts,1))}
.adda span{color:var(--mute);font-size:calc(.84rem*var(--ts,1));min-width:0}
.adda small{grid-row:span 2;font-size:calc(.74rem*var(--ts,1));color:var(--mute);text-align:right;white-space:nowrap}
.adda small b{display:block;font-size:calc(.95rem*var(--ts,1));color:var(--ink)}
.room{display:flex;flex-direction:column;height:calc(100dvh - 210px);min-height:360px;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg{max-width:86%;align-self:flex-start;display:grid;gap:2px}
.msg.me{align-self:flex-end}
.msg .who{font-size:calc(.74rem*var(--ts,1));color:var(--mute);font-weight:600;display:flex;gap:8px;align-items:center}
.msg.me .who{justify-content:flex-end}
.msg .bub{padding:9px 12px;border-radius:14px;border-bottom-left-radius:4px;background:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(.94rem*var(--ts,1))}
.msg.me .bub{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-radius:14px;border-bottom-right-radius:4px}
.msg .tools{display:flex;gap:10px;font-size:calc(.74rem*var(--ts,1))}
.msg.me .tools{justify-content:flex-end}
.msg .tools button{background:none;border:0;padding:0;color:var(--mute);text-decoration:underline}
.day{align-self:center;font-size:calc(.72rem*var(--ts,1));color:var(--mute);background:var(--bg2);border-radius:999px;padding:2px 10px}
.compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--bg2)}
.compose textarea{min-height:44px;max-height:120px;resize:none}
.rules{border:1px solid rgba(255,201,60,.5);background:var(--yelSoft);border-radius:16px;padding:14px;display:grid;gap:10px}
.rules h3{color:#FFE08A}

/* sheets / dialogs */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(5,8,20,.72);display:grid;place-items:end center;padding:16px}
@media (min-width:600px){.sheet-bg{place-items:center}}
.sheet{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;gap:12px;box-shadow:0 24px 60px -20px #000;max-height:calc(100dvh - 32px);overflow-y:auto}
.sheet h3{font-size:calc(1.15rem*var(--ts,1))}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:70;background:#EEF1FF;color:#0A0F24;font-weight:600;border-radius:14px;padding:10px 18px;font-size:calc(.92rem*var(--ts,1));box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 32px);animation:toastin .3s cubic-bezier(.2,.8,.2,1) both}
.toast.ok{background:#E7FBEF;color:#0B3B22;border:1px solid #3EE08F}
@keyframes toastin{from{opacity:0;transform:translate(-50%,-10px)}}
.fab{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;border:0;border-radius:999px;padding:11px 16px 11px 12px;background:linear-gradient(135deg,#FF4D5E,#FF7A45);color:#fff;font-family:var(--fd);font-weight:700;display:flex;gap:8px;align-items:center;box-shadow:0 8px 22px rgba(255,77,94,.4);text-decoration:none}
.fab i{width:22px;height:22px;border-radius:50%;background:var(--yel);color:#0A0F24;display:grid;place-items:center;font-style:normal;font-size:calc(.8rem*var(--ts,1))}
.fab small{font-family:var(--fb);font-weight:600;font-size:calc(.7rem*var(--ts,1));opacity:.9}
.cl{font-size:calc(.7rem*var(--ts,1));font-weight:700;color:#C9B8FF;margin-left:6px;white-space:nowrap}

/* legal pages */
.legal h2{margin-top:10px}.legal p,.legal li{color:#D5DAF3;font-size:calc(.95rem*var(--ts,1))}.legal ul{padding-left:20px;display:grid;gap:6px;margin:0}
.draft{border:1px dashed rgba(255,201,60,.6);background:var(--yelSoft);color:#FFE08A;border-radius:12px;padding:10px 12px;font-size:calc(.86rem*var(--ts,1))}

@keyframes rise{from{opacity:.4;transform:translateY(8px)}}
.view>*{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* fixes after phone test */
.brand{white-space:nowrap;flex:none}
.top .pill{white-space:nowrap;font-size:calc(.7rem*var(--ts,1))}
@media (max-width:440px){.brand{gap:7px;font-size:calc(1rem*var(--ts,1))}.brand .stripe{gap:3px}.brand .stripe i{width:12px;height:4px}}
.tile b,.tile span{grid-column:2;min-width:0}
.tile em{grid-column:3;grid-row:1 / span 2}
.tile i{grid-column:1;grid-row:1 / span 2}
.offer{border:1px solid rgba(255,201,60,.5);background:var(--yelSoft);border-radius:14px;padding:12px 14px;font-size:calc(.92rem*var(--ts,1));color:#FFE9B0}
.offer b{color:#FFE08A}
.feat-l div{grid-template-columns:40px minmax(0,1fr);align-items:start}
.feat-l span{line-height:1.45}
.steps3{margin:0;padding-left:22px;display:grid;gap:10px}
.steps3 li b{display:block;font-family:var(--fd)}
.steps3 li span{color:var(--mute);font-size:calc(.9rem*var(--ts,1))}
.steps3 li::marker{color:var(--yel);font-family:var(--fd);font-weight:700}
.mission{display:grid;gap:4px;border-color:rgba(255,201,60,.45);background:linear-gradient(160deg,rgba(255,201,60,.08),transparent 60%),var(--card)}
.mission .lbl{margin:8px 0 0;color:var(--yel)}.mission .lbl:first-child{margin-top:0}
.legal .mission .big-line,.big-line{font-family:var(--fd);font-size:calc(1.18rem*var(--ts,1));line-height:1.35;color:var(--ink);margin:2px 0 6px}
.legal ol.promises{padding-left:22px;display:grid;gap:8px;margin:0}
.replay{justify-self:center;margin-top:6px}
.l-cards{counter-reset:tool}.l-cards>div{position:relative}.l-cards>div::after{counter-increment:tool;content:counter(tool);position:absolute;top:12px;right:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 calc(.8rem*var(--ts,1)) var(--fd);color:var(--yel);border:1px solid rgba(255,201,60,.5);background:rgba(255,201,60,.08)}
.l-cards>div>b{padding-right:30px}
.safety{margin:8px 0 0;padding:9px 12px;border-radius:12px;font-size:calc(.82rem*var(--ts,1));line-height:1.45;color:#FFE7B0;background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.4)}.safety b{color:#FFD56A}
.adda .em{grid-column:1;grid-row:1/3}.adda>b{grid-column:2;grid-row:1;align-self:end}.adda>span:not(.em){grid-column:2;grid-row:2;align-self:start}.adda small{grid-column:3;grid-row:1/3;align-self:center}

/* ===== Oct 12 changes ===== */
/* tool intro: what this page does and the two ways to use it */
.intro{border:1px solid rgba(77,124,255,.4);background:linear-gradient(160deg,rgba(77,124,255,.12),transparent 70%),var(--card);border-radius:16px;padding:12px 14px;display:grid;gap:6px;font-size:calc(.92rem*var(--ts,1))}
.intro b.t{font-family:var(--fd);font-size:calc(1rem*var(--ts,1))}
.intro ol{margin:0;padding-left:20px;display:grid;gap:4px}
.intro .cl{margin-left:4px}
.step{display:flex;align-items:center;gap:10px}
.step i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 calc(.85rem*var(--ts,1)) var(--fd);font-style:normal;background:var(--yel);color:#0A0F24}
.film .step i{background:var(--filmAcc)}
.step h2{margin:0}
.film .step h2{color:var(--filmInk)}
.hint{background:var(--filmSoft);border-radius:12px;padding:10px 12px;font-size:calc(.88rem*var(--ts,1));color:var(--filmInk);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}

/* home: one big colourful card per tool */
.bigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.bigs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.big-c{position:relative;overflow:hidden;border-radius:22px;padding:16px 14px 14px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;color:var(--kc,#fff);text-decoration:none;background:linear-gradient(145deg,var(--k1),var(--k2));box-shadow:0 16px 30px -16px var(--k1);transition:transform .2s}
.big-c:hover{transform:translateY(-3px)}.big-c:active{transform:scale(.97)}
.big-c::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.big-c .ic{position:relative;z-index:1;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.big-c .ic svg{width:22px;height:22px}
.big-c .nm{font-size:calc(.72rem*var(--ts,1));text-transform:uppercase;letter-spacing:.09em;font-weight:700;opacity:.9}
.big-c b{font-family:var(--fd);font-size:calc(1.4rem*var(--ts,1));line-height:1.08;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big-c .sb{font-size:calc(.8rem*var(--ts,1));opacity:.92;line-height:1.3}

/* sign-in page with a proper welcome */
.auth{position:relative;padding-top:8px}
.auth-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.auth-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;animation:orb 10s ease-in-out infinite}
.auth-bg i:nth-child(1){width:340px;height:340px;background:var(--red);top:-80px;left:-90px}
.auth-bg i:nth-child(2){width:300px;height:300px;background:var(--yel);bottom:-90px;right:-70px;opacity:.28;animation-delay:-3s}
.auth-bg i:nth-child(3){width:320px;height:320px;background:var(--acc);top:35%;left:55%;animation-delay:-6s}
@keyframes orb{50%{transform:translate(24px,-30px) scale(1.06)}}
.auth-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding-block:10px 4px}
.auth-hero h1{font-size:calc(clamp(1.9rem,7vw,2.6rem)*var(--ts,1))}
.auth-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--red),var(--yel),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-hero .lamp{width:110px;height:auto;filter:drop-shadow(0 0 18px rgba(255,190,80,.45));animation:float2 4s ease-in-out infinite}
@keyframes float2{50%{transform:translateY(-6px) rotate(-2deg)}}
.auth-hero .lead{grid-column:1/-1;color:var(--mute);font-size:calc(1rem*var(--ts,1))}
.auth-pts{display:flex;flex-wrap:wrap;gap:6px}
.auth-pts span{font-size:calc(.8rem*var(--ts,1));font-weight:600;border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.auth .card{background:linear-gradient(180deg,rgba(24,34,74,.92),rgba(19,27,59,.92));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (max-width:440px){.auth-hero .lamp{width:80px}}
/* every tab name in full: wrap onto a second line instead of scrolling (phones still swipe) */
@media (min-width:600px){.tabs-in{flex-wrap:wrap;justify-content:center;overflow:visible}}
/* ===== Oct 12 batch 2 ===== */
.top .in>.row{flex-wrap:nowrap}
.bell{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);display:grid;place-items:center;padding:0;flex:none}
.bell svg{width:18px;height:18px}
.bell b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--red);color:#fff;font:700 calc(.66rem*var(--ts,1))/18px var(--fb);text-align:center;padding:0 4px}
.nt{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;background:var(--card2)}
.nt.new{border-color:rgba(255,201,60,.6);background:linear-gradient(160deg,rgba(255,201,60,.1),transparent 70%),var(--card2)}
.nt .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--soft)}
.subtabs{position:sticky;top:calc(var(--toph,110px));z-index:15;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;margin:0 -4px;background:rgba(17,26,60,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px}
.subtabs::-webkit-scrollbar{display:none}
.subtabs a{flex:0 0 auto;padding:7px 12px;border-radius:10px;font-weight:600;font-size:calc(.86rem*var(--ts,1));color:var(--mute);text-decoration:none;white-space:nowrap}
.subtabs a[aria-current="true"]{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 6px 16px -8px rgba(77,124,255,.8)}
.subtabs b{display:inline-block;min-width:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--blueSoft);color:#9DB5FF;font-size:calc(.74rem*var(--ts,1));text-align:center}
.subtabs b:empty{display:none}
#sec-find,#sec-open,#trc{scroll-margin-top:180px}
.bigs .big-c:last-child:nth-child(odd){grid-column:1/-1;min-height:120px}
.fab{padding:8px 16px 8px 10px}

/* ☰ menu (drawer from the right) */
.menu-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);display:grid;place-items:center;padding:0;flex:none;cursor:pointer}
.menu-btn svg{width:18px;height:18px}
@media (max-width:599px){#topr .pill{display:none}#topr{gap:8px}}
.drw-bg{position:fixed;inset:0;z-index:60;background:rgba(5,8,20,.72);display:flex;justify-content:flex-end;animation:drwf .2s ease-out}
.drw{width:min(330px,88vw);height:100%;background:var(--card);border-left:1px solid var(--line);padding:14px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;overflow-y:auto;box-shadow:-24px 0 60px -20px #000;animation:drwin .26s cubic-bezier(.2,.8,.2,1)}
@keyframes drwin{from{transform:translateX(100%)}}@keyframes drwf{from{opacity:0}}
.drw-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.drw-hd .brand .stripe{display:inline-flex}
.drw-me{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:12px;border-radius:16px;background:var(--soft);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.drw-me .av{grid-row:span 2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 calc(1.15rem*var(--ts,1)) var(--fd);color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.drw-me .who{display:grid;min-width:0}.drw-me .who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drw-me .go{font-size:calc(.82rem*var(--ts,1));font-weight:600;color:var(--acc)}
.drw-me[aria-current]{border-color:var(--acc)}
.drw-l{display:grid;gap:2px}
.drw-l a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600}
.drw-l a svg{width:20px;height:20px;flex:none;color:var(--mute)}
.drw-l a:hover{background:var(--soft)}
.drw-l a[aria-current]{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}.drw-l a[aria-current] svg{color:#fff}
.drw-out{margin-top:auto}
/* Install the app row: a soft gold box so it stands apart from the sections (no animation) */
.drw-l a.drw-inst{margin-top:8px;border:1px solid rgba(255,201,60,.45);background:rgba(255,201,60,.08)}
.drw-l a.drw-inst svg{color:var(--yel)}
.drw-inst span{display:grid;line-height:1.25}.drw-inst small{font-weight:400;font-size:calc(.8rem*var(--ts,1));color:var(--mute)}
ol.inst{margin:0;padding-left:20px;display:grid;gap:8px}ol.inst li{margin:0}
@media (max-width:599px){.tabs-in.more{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}}
@media (prefers-reduced-motion:reduce){.drw,.drw-bg{animation:none}}

/* phone: smaller Ask Genie button */
@media (max-width:599px){.fab{padding:6px 13px 6px 8px;gap:6px;font-size:calc(.88rem*var(--ts,1));line-height:1.1;box-shadow:0 6px 16px -6px rgba(255,77,94,.7)}.fab small,.fab br{display:none}.fab .jg-lampbtn{width:30px;height:17px}}

/* ===== two-column tools and Home dashboard: big screens only (1100px and up).
   Phones, tablets and small laptops keep the single-column layout. ===== */
.split{display:flex;flex-direction:column;gap:14px;min-width:0}
.split>.col-in,.split>.col-out{display:contents}
#g-safe{order:-1}
.hx{display:none}
.swagat{border-color:rgba(255,201,60,.5)}
@media (min-width:1100px){
  .top .in{max-width:1180px;padding-inline:24px}
  .wrap{max-width:860px}
  .wrap.wide{max-width:1180px;padding-inline:24px}
  .tabs a[data-t="about"],.tabs a[data-t="me"]{display:none}
  .tabs-in{gap:2px}.tabs a{padding:8px 11px}
  .bigs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bigs .big-c:last-child:nth-child(odd){grid-column:auto;min-height:150px}
  .bigs .big-c:nth-child(7):last-child{grid-column:span 2}
  .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}
  .split>.col-in,.split>.col-out{display:grid;gap:14px;min-width:0}
  #g-safe{order:0}
  .hx{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
  .hx h2{font-size:calc(1.1rem*var(--ts,1));margin:0}
  .hx-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .hx-h a{font-size:calc(.86rem*var(--ts,1));font-weight:600;color:var(--acc);text-decoration:none}
  .hx-steps{display:grid;gap:12px}
  .hx-n{font-size:calc(.86rem*var(--ts,1));color:var(--mute)}.hx-n b{color:var(--ink);font-family:var(--fd);font-size:calc(1.05rem*var(--ts,1))}
  .hx-bar{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
  .hx-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--yel),var(--good));transition:width .6s}
  .hx-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .hx-list a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid transparent;color:var(--ink);text-decoration:none;transition:background .2s,border-color .2s}
  .hx-list a:hover{background:var(--soft)}
  .hx-c{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 calc(.85rem*var(--ts,1)) var(--fd);background:var(--soft);color:var(--mute);border:1px solid var(--line)}
  .hx-list .ok .hx-c{background:rgba(62,224,143,.16);color:var(--good);border-color:rgba(62,224,143,.5)}
  .hx-list li.nx{border-color:rgba(77,124,255,.55);background:var(--blueSoft)}
  .hx-list .nx .hx-c{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}
  .hx-t{display:grid;min-width:0}.hx-t b{font-size:calc(.95rem*var(--ts,1))}.hx-t small{color:var(--mute);font-size:calc(.82rem*var(--ts,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hx-go{color:var(--mute);font-size:calc(1.2rem*var(--ts,1))}
  .hx-next{margin:0;font-size:calc(.92rem*var(--ts,1));color:var(--mute)}.hx-next a{color:var(--acc);font-weight:600;text-decoration:none}
  .hx-side{display:grid;gap:18px;min-width:0}
  .hx-jobs{display:grid;gap:8px}
  .hx-job{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
  .hx-job span{display:grid;min-width:0}.hx-job b{font-size:calc(.94rem*var(--ts,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hx-job small{color:var(--mute);font-size:calc(.82rem*var(--ts,1))}
  .hx-job .btn{flex:none}
  .hx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
  .hx-tip{position:relative;overflow:hidden;display:grid;align-content:start;gap:6px;border-color:rgba(255,201,60,.45);background:radial-gradient(240px 160px at 100% 0%,rgba(255,201,60,.18),transparent 70%),linear-gradient(180deg,var(--card2),var(--card))}
  .hx-tip .lbl{color:var(--yel);margin:0}
  .hx-tt{margin:0;font-size:calc(.95rem*var(--ts,1));line-height:1.45}
  .hx-lamp{position:absolute;right:10px;top:10px;opacity:.9}
  .hx-adda{display:grid;gap:8px;align-content:start}
  .hx-ad{display:grid;gap:2px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
  .hx-ad b{font-size:calc(.9rem*var(--ts,1))}.hx-ad span{font-size:calc(.84rem*var(--ts,1));color:var(--mute)}.hx-ad small{font-size:calc(.76rem*var(--ts,1));color:var(--mute)}
  .hx-ad:hover b{color:var(--acc)}
}
@media (min-width:1100px) and (max-width:1279px){.tabs-in{padding-inline:8px}.tabs a{padding:8px 8px;font-size:calc(.84rem*var(--ts,1));gap:6px}.tabs a svg{width:16px;height:16px}}

/* ===== Home fun, Genie boxes, animations switch (all screen sizes). Nothing here flashes. ===== */
.no-anim *,.no-anim *::before,.no-anim *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#an-seg{grid-template-columns:repeat(3,1fr)}
.wnew{border-color:rgba(255,201,60,.5);background:radial-gradient(300px 160px at 100% 0%,rgba(255,201,60,.14),transparent 70%),linear-gradient(180deg,var(--card2),var(--card))}
.wnew ul,.swagat ul{margin:0}.wnew li,.swagat li{margin:4px 0}
/* greeting row with the lamp */
.hgreet{position:relative;z-index:7;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.hlamp-w{position:relative;display:grid;justify-items:end}
.hlamp{position:relative;border:0;background:none;padding:10px 4px 4px;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.hlamp .jg-lampbtn{width:92px;height:52px}
.hlamp-svg{display:inline-block;transform-origin:50% 85%}
.hlamp:not(.calm) .hlamp-svg{animation:lampwig 4.5s ease-in-out 1.2s infinite}
@keyframes lampwig{0%,80%,100%{transform:rotate(0)}83%{transform:rotate(-10deg)}86%{transform:rotate(9deg)}89%{transform:rotate(-7deg)}92%{transform:rotate(5deg)}95%{transform:rotate(-2deg)}}
.hlamp-tip{position:absolute;top:-8px;right:0;background:var(--yel);color:#1A1200;font:700 calc(.72rem*var(--ts,1))/1 var(--fb);padding:5px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.6);animation:tipbob 2.4s ease-in-out infinite}
.hlamp-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:var(--yel);transform:translateX(-50%) rotate(45deg)}
@keyframes tipbob{50%{transform:translateY(-3px)}}
.hlamp-s{position:absolute;left:-2px;bottom:4px;font-size:calc(1.2rem*var(--ts,1))}
.hlamp:focus-visible{outline:2px solid var(--yel);outline-offset:2px;border-radius:12px}
.gsay{position:absolute;right:0;top:100%;z-index:6;width:min(290px,78vw);margin-top:6px;background:#FFF6DC;color:#2A1D00;border-radius:16px;padding:10px 12px;box-shadow:0 16px 30px -12px rgba(0,0,0,.7);animation:gsayin .3s ease-out}
.gsay b{font:700 calc(.74rem*var(--ts,1)) var(--fb);text-transform:uppercase;letter-spacing:.08em;color:#9C6416}.gsay p{margin:2px 0 0;font-size:calc(.95rem*var(--ts,1));line-height:1.4}
.gsay::before{content:"";position:absolute;right:38px;top:-6px;width:12px;height:12px;background:#FFF6DC;transform:rotate(45deg)}
@keyframes gsayin{from{opacity:0;transform:translateY(-6px)}}
/* poll and badges */
.fun{display:grid;gap:14px;align-items:start}
@media (min-width:700px){.fun{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.fun h2{font-size:calc(1.1rem*var(--ts,1));margin:0}
.poll,.badges{display:grid;gap:10px;align-content:start}
.poll{border-color:rgba(77,124,255,.45);background:radial-gradient(260px 140px at 100% 0%,rgba(77,124,255,.16),transparent 70%),linear-gradient(180deg,var(--card2),var(--card))}
.poll-q{margin:0;font-family:var(--fd);font-weight:700;font-size:calc(1.08rem*var(--ts,1));line-height:1.3}
.poll-o{display:grid;gap:8px}.poll-o .btn{justify-content:flex-start;text-align:left;width:100%}
.poll-r{display:grid;gap:9px}
.pr-t{display:flex;justify-content:space-between;gap:10px;font-size:calc(.92rem*var(--ts,1))}.pr-y{color:var(--good);font-size:calc(.78rem*var(--ts,1))}
.pr-b{height:8px;border-radius:4px;background:var(--soft);overflow:hidden;margin-top:4px}
.pr-b i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc2));animation:grow .8s ease-out}
.pr.me .pr-b i{background:linear-gradient(90deg,var(--yel),var(--red))}
@keyframes grow{from{width:0}}
.streak{font:700 calc(.82rem*var(--ts,1)) var(--fb);color:#FFD27A;background:rgba(255,201,60,.14);border:1px solid rgba(255,201,60,.4);padding:4px 10px;border-radius:999px;white-space:nowrap}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.bdg{display:grid;justify-items:center;gap:4px;padding:10px 4px 8px;border-radius:14px;border:1px solid var(--line);background:var(--soft);color:var(--mute);cursor:pointer;font:600 calc(.7rem*var(--ts,1))/1.2 var(--fb);text-align:center}
.bdg .em{font-size:calc(1.6rem*var(--ts,1));line-height:1;filter:grayscale(1);opacity:.45}
.bdg.on{color:var(--ink);border-color:rgba(255,201,60,.55);background:radial-gradient(circle at 50% 30%,rgba(255,201,60,.22),transparent 70%),var(--soft)}
.bdg.on .em{filter:none;opacity:1}
/* celebration */
.cele{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:140;width:min(340px,calc(100% - 32px));cursor:pointer}
.cele-card{display:grid;justify-items:center;gap:4px;text-align:center;background:linear-gradient(160deg,#2A2160,#151C45);border:1px solid rgba(255,201,60,.6);border-radius:20px;padding:16px;box-shadow:0 24px 50px -16px #000;animation:celein .45s cubic-bezier(.2,.9,.3,1.3)}
.cele-em{font-size:calc(2.6rem*var(--ts,1));line-height:1.1}.cele-card b{font-family:var(--fd);font-size:calc(1.15rem*var(--ts,1))}.cele-card p{margin:0;color:#FFE7A8}
@keyframes celein{from{opacity:0;transform:translateY(30px) scale(.9)}}
.confetti{position:fixed;inset:0;z-index:139;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;border-radius:2px;animation:cfall 3s linear forwards}
@keyframes cfall{to{transform:translateY(110vh) rotate(var(--r,540deg))}}
/* gold Genie box */
.gbox{position:relative;overflow:hidden;display:grid;gap:10px;padding:16px 16px 14px;border-radius:20px;border:1px solid rgba(255,201,60,.6);background:radial-gradient(320px 180px at 100% 0%,rgba(255,201,60,.22),transparent 70%),linear-gradient(160deg,#2A2246,#171D44);box-shadow:0 16px 34px -18px rgba(255,190,60,.55)}
.gbox-t{margin:0;padding-right:70px;font-size:calc(.98rem*var(--ts,1));line-height:1.45}.gbox-t b{color:#FFE7A8}
.gbox-lamp{position:absolute;right:12px;top:12px}
.gbox-f{margin:0;font-size:calc(.8rem*var(--ts,1));color:#E9D9A8}
.btn.gold{background:linear-gradient(135deg,#FFD25E,#F0A020);border-color:transparent;color:#1A1200;box-shadow:0 10px 22px -10px rgba(255,190,60,.8)}
.btn.gold .cl{color:#5A3B00}
/* What you need, on the Welcome page */
.need{border-color:rgba(255,201,60,.5)}
.need-l{margin:0;padding-left:22px;display:grid;gap:8px}.need-l a{color:var(--acc)}
/* step list rows (progress only, not links) */
.hx-list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid transparent}
.hx-dn{font:700 calc(.72rem*var(--ts,1)) var(--fb);color:var(--good);text-transform:uppercase;letter-spacing:.06em}.hx-dn.nx{color:#9DB5FF}
/* ☰ menu shortcuts: badges line and Chai Poll row */
.drw-fun{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-4px;padding:9px 12px;border-radius:14px;border:1px solid rgba(255,201,60,.45);background:rgba(255,201,60,.1);color:var(--ink);text-decoration:none;font-weight:600;font-size:calc(.9rem*var(--ts,1))}
.drw-fun .go{font-size:calc(.8rem*var(--ts,1));color:#FFD27A;white-space:nowrap}
.drw-poll{position:relative}
.ndot{width:9px;height:9px;border-radius:50%;background:var(--red);margin-left:auto;box-shadow:0 0 0 3px rgba(255,77,94,.25)}
/* a soft highlight when the menu jumps to a box (fades once, no flashing) */
.flash-in{animation:boxhi 1.6s ease-out}
@keyframes boxhi{0%{box-shadow:0 0 0 3px rgba(255,201,60,.8)}100%{box-shadow:0 0 0 3px rgba(255,201,60,0)}}

/* ---------- step 1: AI boxes, input checks, disclaimers, resume page, PDF page picker ---------- */
.aibox{border:1px solid rgba(255,201,60,.45);background:linear-gradient(180deg,rgba(255,201,60,.08),rgba(255,201,60,.02)),var(--card);border-radius:20px;padding:16px;min-width:0}
.aiw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--soft);color:var(--ink)}
.aiw-lamp{width:42px;flex:none}
@media (prefers-reduced-motion:no-preference){.aiw-lamp{animation:aiwbob 2.4s ease-in-out infinite}}
@keyframes aiwbob{50%{transform:translateY(-3px)}}
html.no-anim .aiw-lamp{animation:none}
.aie{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,107,122,.45);background:rgba(255,107,122,.08);display:grid;gap:8px}
.disc{color:var(--mute);font-size:calc(.8rem*var(--ts,1));margin:4px 0 0;border-top:1px dashed var(--line);padding-top:8px}
.ferr{color:#FFB3BC;font-size:calc(.84rem*var(--ts,1));margin:4px 0 0;min-height:0}
.ferr:empty{display:none}
[aria-invalid="true"]{border-color:#FF6B7A!important}
.lr > .ferr{grid-column:1/-1}
input[type=file]{width:100%;min-width:0;font:inherit;color:var(--ink);background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
/* upload boxes: our own button that remembers the file (instead of the browser's "No file chosen") */
.pick{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;min-width:0}
.pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.pick:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.pick .pk-b{flex:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:600;font-size:calc(.86rem*var(--ts,1));background:var(--card,transparent)}
.pick .pk-n{min-width:0;flex:1;font-size:calc(.88rem*var(--ts,1));color:var(--mute);overflow-wrap:anywhere}
.pick.has .pk-n{color:var(--ink)}
.pick.has .pk-n b{font-weight:600}
.pick .pk-ok{color:var(--good);font-weight:600}
.pick input[type=file]:disabled{cursor:progress}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:60vh;overflow:auto}
.pthumb{display:grid;gap:4px;justify-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:6px;color:var(--ink)}
.pthumb canvas{width:100%;height:auto;border-radius:6px;background:#fff}
.cv-wrap{background:#fff;color:#111;border-radius:14px;padding:18px;overflow:auto}
.cv h1{font:700 calc(1.5rem*var(--ts,1)) Arial,Helvetica,sans-serif;margin:0;color:#111}.cv h2{font:700 calc(.82rem*var(--ts,1)) Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #999;margin:14px 0 6px;padding-bottom:2px;color:#111}
.cv p,.cv li{font:calc(.92rem*var(--ts,1))/1.45 Arial,Helvetica,sans-serif;margin:0 0 4px;color:#111}.cv ul{margin:4px 0 8px 18px;padding:0}.cv-c{color:#444!important}.cv-h{font-weight:700}.cv-e p span{float:right;color:#444}
mark.addn{background:#FFE680;color:#111;border-radius:4px;padding:0 3px}
.pass-card{border-color:rgba(77,124,255,.5)}
.ag-dym{justify-content:flex-start;text-align:left}
.foot a,.foot span{white-space:nowrap}

/* ---------- engagement: reason card, weekly recap, swipe, Genie reacts ---------- */
.why{border-color:rgba(255,201,60,.5)}
.why-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.why-o .btn{justify-content:flex-start;text-align:left}
.recap{border-color:rgba(77,124,255,.55)}
.swipe-bg{position:fixed;inset:0;z-index:80;background:rgba(8,12,30,.92);display:grid;align-content:center;justify-items:center;gap:14px;padding:16px;overflow:auto}
.swipe-top{width:min(420px,100%);display:flex;justify-content:space-between;align-items:center}
.swipe-card{position:relative;width:min(420px,100%);min-height:300px;display:grid;align-content:start;gap:8px;background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 24px 50px -16px #000;touch-action:pan-y;user-select:none;cursor:grab}
.swipe-card h2{margin:0;font-size:calc(1.35rem*var(--ts,1))}
.swipe-card.done{min-height:0;cursor:default;text-align:center;justify-items:center}
.sw-tag{position:absolute;top:18px;padding:4px 10px;border-radius:8px;font:800 calc(1rem*var(--ts,1)) var(--fd);opacity:0;transition:opacity .15s}
.sw-tag.save{right:18px;color:var(--good);border:2px solid var(--good)}
.sw-tag.skip{left:18px;color:var(--bad);border:2px solid var(--bad)}
.swipe-card.go-save .sw-tag.save,.swipe-card.go-skip .sw-tag.skip{opacity:1}
.swipe-act{width:min(420px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.greact{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:70;width:min(440px,calc(100% - 32px));display:flex;gap:10px;align-items:center;background:linear-gradient(160deg,#2A2160,#151C45);border:1px solid rgba(255,201,60,.6);border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px -14px #000;cursor:pointer;animation:greactin .4s ease}
@keyframes greactin{from{opacity:0;transform:translate(-50%,20px)}}
.greact p{margin:0;font-weight:600}
.greact-l{width:44px;flex:none}
.greact-l svg{width:44px;height:auto}
.no-anim .greact,.no-anim .swipe-card{animation:none;transition:none}
.swipe-card .pill{justify-self:start}

/* ---------- step 2: More tools ---------- */
.more-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.more-h h2{margin:0}
.more-h a{font-weight:600;font-size:calc(.9rem*var(--ts,1))}
.more-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.more-c{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--card2),var(--card));color:var(--ink);text-decoration:none;min-height:64px;transition:transform .14s,border-color .2s}
.more-c:hover{border-color:var(--k1)}.more-c:active{transform:scale(.98)}
.more-c .mi{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--k1),var(--k2))}
.more-c .mi svg{width:22px;height:22px}
.more-c .mt{display:grid;gap:2px;min-width:0}
.more-c b{font-family:var(--fd);font-size:calc(1rem*var(--ts,1))}
.more-c small{color:var(--mute);font-size:calc(.84rem*var(--ts,1));line-height:1.35}
.more-g.big .more-c{padding:16px;min-height:84px}
.tx-v{margin:0;font-size:calc(1.05rem*var(--ts,1));color:var(--filmInk)}
.tx-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tx-col{display:grid;gap:4px;align-content:start;background:var(--filmSoft);border:1px solid var(--filmLine);border-radius:14px;padding:12px;min-width:0}
.tx-col.win{border-color:var(--fgood)}
.tx-col>b{font-family:var(--fd);font-size:calc(1.5rem*var(--ts,1));font-variant-numeric:tabular-nums}
.tx-col small{color:var(--filmMute);font-size:calc(.8rem*var(--ts,1))}
.tx-col .kv{border-color:var(--filmLine);font-size:calc(.84rem*var(--ts,1));padding:6px 0}
.tx-col .kv span{color:var(--filmMute)}
@media (max-width:420px){.tx-cols{grid-template-columns:1fr}}
ul.flags{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.flags li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--redSoft);border-left:3px solid var(--bad)}
ul.flags li span{color:var(--mute);font-size:calc(.88rem*var(--ts,1))}
.gf-bar{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;color:var(--filmInk)}
.gf-bar i{display:block;height:14px;border-radius:7px}
.gf-bar b{font-variant-numeric:tabular-nums;font-family:var(--fd)}
.film:not(.safe) .num{font-size:calc(2.5rem*var(--ts,1));font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--filmInk)}
.film:not(.safe) .num small{font-size:calc(1rem*var(--ts,1));color:var(--filmMute);margin-left:6px;font-weight:600}

/* =========================================================
   Light mode (html.light, set by js/look.js). Same layout, paper-white ground,
   deeper versions of the brand colours so text stays readable.
   ========================================================= */
html.light{
  color-scheme:light;
  --bg:#F4F6FC;--bg2:#FFFFFF;--card:#FFFFFF;--card2:#FFFFFF;--ink:#141B3D;--mute:#56607F;--line:#D7DCEC;--soft:#EDF0F8;
  --acc:#3460E0;--acc2:#6A48E0;--red:#E03247;--yel:#B07400;--good:#11834F;--bad:#D02E43;
  --redSoft:rgba(224,50,71,.09);--yelSoft:rgba(232,162,26,.13);--blueSoft:rgba(52,96,224,.10);
  --cash:#2F5FDD;--cond:#B07400;--var:#7A47D6;--ret:#0B8F80;--unclear:#D02E43;
  --film:#EAF6F2;--filmLine:#CBE6DF;--filmInk:#0D2B28;--filmMute:#4B6E69;--filmSoft:#DBEFEA;--filmAcc:#0C8A77;
  --fcash:#0C8A77;--fcond:#B07400;--fvar:#7A47D6;--fret:#2F5FDD;--funclear:#D0503A;--fgood:#178A50;--fbad:#D0503A;
}
html.light body{background:radial-gradient(900px 520px at -10% -8%,rgba(255,77,94,.07),transparent 60%),radial-gradient(800px 520px at 110% 4%,rgba(77,124,255,.09),transparent 62%),var(--bg);background-attachment:fixed}
html.light .card,html.light .more-c{box-shadow:0 10px 26px -18px rgba(20,27,61,.35)}
html.light .top{background:rgba(255,255,255,.9)}
html.light .subtabs{background:rgba(244,246,252,.94)}
html.light .preview-band{color:#6A4A00}
html.light input::placeholder,html.light textarea::placeholder{color:#8A93B4}
html.light .pill.b,html.light .subtabs b,html.light .hx-dn.nx{color:#2F55C8}
.subtabs a[aria-current="true"] b{background:rgba(255,255,255,.22);color:#fff}
html.light .genie{color:#9A5D00;text-shadow:none}
html.light .rules h3,html.light .draft,html.light .offer b{color:#7A5200}
html.light .offer{color:#4A3600}
html.light .safety{color:#5A4100}.safety b{}
html.light .safety b{color:#7A5200}
html.light .tile em,html.light .cl{color:#5B37C0;background:rgba(106,72,224,.10)}
html.light .legal p,html.light .legal li{color:#2B3356}
html.light .streak,html.light .drw-fun .go{color:#8A5A00}
html.light .gbox-t b{color:#8A5A00}html.light .gbox-f{color:#6B5520}
html.light .ferr{color:#C02A3E}
html.light .hpill{color:#fff}
html.light .chip[aria-pressed="true"]{color:#fff}
html.light .auth .card{background:rgba(255,255,255,.94)}
html.light .auth-pts span{background:rgba(20,27,61,.04)}
html.light .sheet-bg,html.light .drw-bg{background:rgba(20,27,61,.45)}
html.light .sheet{box-shadow:0 24px 60px -20px rgba(20,27,61,.45)}
html.light .swipe-bg{background:rgba(244,246,252,.96)}
html.light .tabs a[aria-current="page"],html.light .btn.p{box-shadow:0 8px 20px -10px rgba(52,96,224,.6)}
html.light .film{background-color:var(--film)}
html.light ol.tl li.low{background:rgba(208,46,67,.07)}
html.light .toast{background:#141B3D;color:#fff}
#an-seg,#th-seg,#fs-seg,#drw-th{grid-template-columns:repeat(3,1fr)}
.drw-look{margin-top:auto;display:grid;gap:6px}
.drw-look+.drw-out{margin-top:0}
.seg button{min-height:44px}
.jg{display:inline;font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:1.5px dotted var(--acc);cursor:help}
.jg:hover{color:var(--acc)}
.btn{min-height:44px}.btn.s{min-height:38px}
.linkbtn{padding:6px 0}
input::placeholder,textarea::placeholder{color:#7E88B5}
html.light input::placeholder,html.light textarea::placeholder{color:#8A93B4}
html.light .cele-card,html.light .greact{color:#EEF1FF}
html.light .hlamp-svg,html.light .hx-lamp svg,html.light .aiw-lamp,html.light .land .lamp,html.light .auth-hero .lamp{filter:drop-shadow(0 2px 3px rgba(120,70,0,.5))}
#docs-l .kv{align-items:center}
.founder{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.founder img{width:132px;height:132px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--card2);box-shadow:0 0 0 2px var(--yel),0 14px 30px -14px rgba(0,0,0,.6)}
.founder-t{display:grid;gap:2px;min-width:0;flex:1 1 200px}
.founder-t b{font-family:var(--fd);font-size:calc(1.25rem*var(--ts,1))}
.founder-t p{margin:4px 0 0}

/* ===== owner page: insights ===== */
.own-grid{display:grid;gap:14px}
@media (min-width:1100px){.own-grid{grid-template-columns:1fr 1fr;align-items:start}}
.own-2{display:grid;gap:14px}
@media (min-width:600px){.own-2{grid-template-columns:1fr 1fr}}
.own-2 h3,.own-grid h3{font-size:calc(.95rem*var(--ts,1));margin:4px 0 0}
.hb{display:grid;gap:6px}
.hb-r{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:calc(.88rem*var(--ts,1))}
.hb-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-b{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.hb-b i{display:block;height:100%;border-radius:5px;background:var(--acc)}
.hb-r b{font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}
.vb{display:flex;align-items:flex-end;gap:2px;height:84px;border-bottom:1px solid var(--line)}
.vb i{flex:1;min-width:2px;border-radius:3px 3px 0 0;background:var(--acc);opacity:.85}
.vb-x{display:flex;justify-content:space-between;font-size:calc(.75rem*var(--ts,1));color:var(--mute)}
.meter{display:grid;gap:6px;padding:8px 0;border-top:1px solid var(--line)}
.meter .mt{display:block;height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.meter .mt i{display:block;height:100%;background:#4CC38A;border-radius:5px}
.meter .mt.hot i{background:#FF4D5E}
.meter .note{margin:0}

/* ---------- Resume Builder: templates and the page preview (16 Oct) ---------- */
.tplg{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.tplc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:12px;padding:8px 10px;min-height:52px;cursor:pointer}
.tplc i{grid-row:1/3;width:14px;height:30px;border-radius:4px;background:var(--k);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tplc b{font-size:calc(.86rem*var(--ts,1));line-height:1.2}.tplc small{font-size:calc(.72rem*var(--ts,1));color:var(--mute);line-height:1.2}
.tplc[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset;background:var(--soft)}
.cvp{position:relative;width:100%;overflow:hidden;border-radius:12px;background:#E6E9EF;border:1px solid var(--line)}
.cvp-in{transform-origin:0 0;width:210mm}
.cvp .cvt{box-shadow:none}
/* the resume preview as A4 pages with a gap, like Word */
.cvp-src{position:absolute;left:0;top:0;width:210mm;height:0;overflow:hidden;visibility:hidden}
.cvp-pages{display:grid;gap:9mm;padding:0 0 1px}
.cvpg{position:relative;width:210mm;background:#fff;overflow:hidden;box-shadow:0 3mm 9mm -4mm rgba(15,23,42,.45)}
.cvpw{position:absolute;left:0;right:0;overflow:hidden}
.cvpn{position:absolute;right:12mm;bottom:5mm;font:9pt/1 Arial,sans-serif;color:#9AA3AF}
.rb .stats .stat b{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
/* ---------- Genie's magic while jobs are found ---------- */
.magic-bg{place-items:center!important;background:rgba(5,8,20,.82)}
.magic{width:min(340px,100%);display:grid;gap:12px;justify-items:center;text-align:center;padding:26px 20px;border-radius:24px;background:radial-gradient(circle at 50% 30%,rgba(123,92,255,.35),transparent 70%),var(--card);border:1px solid var(--line)}
.mg-lamp{position:relative;width:110px;height:90px;display:grid;place-items:center}
.mg-lamp svg{width:96px}
.mg-smoke{position:absolute;left:50%;top:-6px;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:radial-gradient(circle,rgba(170,140,255,.55),transparent 65%);filter:blur(2px)}
.mg-lamp .sp{position:absolute;font-style:normal;color:#FFD86B;font-size:16px;opacity:0}
.mg-lamp .s1{left:6px;top:4px}.mg-lamp .s2{right:8px;top:0}.mg-lamp .s3{right:0;top:44px}.mg-lamp .s4{left:0;top:40px}
.mg-step{margin:0;color:var(--ink);font-weight:600;min-height:2.6em}
.mg-bar{width:100%;height:8px;border-radius:5px;background:var(--soft);overflow:hidden}
.mg-bar i{display:block;height:100%;width:8%;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc2),#FFC93C);transition:width 1.2s ease}
@media (prefers-reduced-motion:no-preference){
  html:not(.no-anim) .mg-lamp svg{animation:mgbob 1.6s ease-in-out infinite}
  html:not(.no-anim) .mg-smoke{animation:mgsmoke 2.2s ease-out infinite}
  html:not(.no-anim) .mg-lamp .sp{animation:mgspark 1.8s ease-in-out infinite}
  html:not(.no-anim) .mg-lamp .s2{animation-delay:.45s}html:not(.no-anim) .mg-lamp .s3{animation-delay:.9s}html:not(.no-anim) .mg-lamp .s4{animation-delay:1.3s}
}
html.no-anim .mg-lamp .sp{opacity:.8}
@keyframes mgbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes mgsmoke{0%{transform:translateY(16px) scale(.5);opacity:0}40%{opacity:.9}100%{transform:translateY(-26px) scale(1.4);opacity:0}}
@keyframes mgspark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.2)}}
/* ---------- tax: where to invest ---------- */
.inv{display:grid;gap:8px}
.inv .iv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:12px;background:var(--soft)}
.inv .iv b{font-size:calc(.95rem*var(--ts,1))}.inv .iv .sv{text-align:right;color:var(--good);font-weight:700;white-space:nowrap}
.inv .iv .note{grid-column:1/-1;margin:0}
/* ---------- What CTC to ask: the three numbers ---------- */
.ask3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ask3 div{padding:10px;border-radius:14px;background:rgba(255,255,255,.06);display:grid;gap:2px}
.ask3 span{font-size:calc(.78rem*var(--ts,1));color:var(--filmInk,var(--mute))}.ask3 b{font-size:calc(1.15rem*var(--ts,1))}.ask3 small{font-size:calc(.74rem*var(--ts,1));color:var(--filmInk,var(--mute));opacity:.85}
.ask3 .a1 b{color:#7EE2A8}.ask3 .a2 b{color:#FFD86B}.ask3 .a3 b{color:#FF8A96}
@media (max-width:420px){.ask3{grid-template-columns:1fr}}
html.light .ask3 div{background:rgba(0,0,0,.04)}
html.light .ask3 .a1 b{color:#11834F}html.light .ask3 .a2 b{color:#9A6400}html.light .ask3 .a3 b{color:#C42A3E}
/* guide pages: the tool picture */
.guide .gpic{margin:6px 0;display:grid;gap:6px;justify-items:start}
.guide .gpic img{width:100%;max-width:540px;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.guide .soft p{margin:0}
/* Genie counts a wish after each polish */
.wishes{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:280px}
.wishes i{width:9px;height:9px;border-radius:50%;background:#FFD86B;box-shadow:0 0 6px rgba(255,216,107,.7)}
.wishes i.u{background:var(--line);box-shadow:none}
@media (prefers-reduced-motion:no-preference){html:not(.no-anim) .wishes i.now{animation:wishgo 1.4s ease-out 2 both}}
@keyframes wishgo{0%{background:#FFD86B;transform:scale(1.8);box-shadow:0 0 14px #FFD86B}100%{background:var(--line);transform:scale(1);box-shadow:none}}
/* the home page's heading for search engines (the app draws its own once it loads) */
.seo-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Job Finder: best matches with "You could also apply for" beside them (a row of role buttons above them on phones) */
.jm-grid{display:flex;flex-direction:column;gap:14px;min-width:0}
.jm-main{min-width:0}
.jm-side{order:-1;min-width:0;background:var(--soft);border-radius:14px;padding:12px}
.jm-roles{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.jm-roles .chip{flex:none;white-space:nowrap;padding:6px 12px;font-size:calc(.84rem*var(--ts,1))}
.jm-role[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
@media (min-width:1100px){
  .jm-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:20px}
  .jm-side{order:0;position:sticky;top:calc(var(--toph,110px) + 64px);max-height:calc(100vh - var(--toph,110px) - 84px);overflow:auto}
  .jm-roles{flex-wrap:wrap;overflow:visible}
  .jm-roles .chip{white-space:normal;text-align:left}
}
.rg-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:calc(1.02rem*var(--ts,1))}
.rg-h:first-child{border-top:0;margin-top:0;padding-top:0}
.rg-sum{margin:0}

/* Feedback screen: the chips that stay chosen */
.chip.on{border-color:var(--acc);background:var(--blueSoft);color:#9DB5FF;font-weight:600}
#fb-stars .chip.on{border-color:var(--yel);background:var(--yelSoft);color:var(--yel)}
#fb-stars .chip{letter-spacing:1px}

/* Job Finder: the bank and NBFC list (name on the left, searches on the right) */
#bf-l .kv{align-items:center;gap:8px;flex-wrap:wrap}
#bf-l .srch{gap:6px}
#bf-l .srch a{padding:5px 11px;font-size:calc(.8rem*var(--ts,1));border-radius:999px}
#bf-l .lbl{margin-top:6px}
/* two side by side on a computer, so the list stays short */
@media (min-width:860px){#bf-l > .stack > .stack{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}}

/* small tag on every AI result */
.aitag{display:flex;align-items:center;gap:10px;margin:0;padding:7px 12px;border-radius:12px;background:var(--yelSoft);border:1px solid rgba(255,201,60,.4);font-size:calc(.86rem*var(--ts,1));color:var(--ink);line-height:1.35}
.aitag b{font-size:calc(.72rem*var(--ts,1));letter-spacing:.07em;color:var(--yel);white-space:nowrap}
html.light .aitag{border-color:rgba(176,116,0,.35)}

/* About, opened from inside the app: the intro strip in the website's navy, with the photo on it */
.view.legal .s-hero{--s-brass:#E8B04A;position:relative;overflow:hidden;margin:0 0 28px;padding:clamp(22px,4vw,40px);border-radius:22px;color:#F4F0E6;
  background:radial-gradient(120% 90% at 88% 0%,rgba(232,176,74,.16),transparent 60%),#0A1230;border:1px solid #2E3A72}
.view.legal .s-hero .s-in{display:grid;gap:26px;align-items:center}
@media (min-width:760px){.view.legal .s-hero .s-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.view.legal .s-hero-txt{display:grid;gap:16px;min-width:0}
.view.legal .s-hero .s-eyebrow{margin:0;font:600 calc(.74rem*var(--ts,1))/1 var(--fb);text-transform:uppercase;letter-spacing:.16em;color:#E8B04A}
.view.legal .s-hero h1{margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:calc(clamp(2rem,4.6vw,2.9rem)*var(--ts,1));line-height:1.08;letter-spacing:0;color:#F4F0E6}
.view.legal .s-hero h1 em{font-style:italic;color:#E8B04A}
.view.legal .s-hero .s-lead{margin:0;font-size:calc(1.05rem*var(--ts,1));line-height:1.55;color:#A7B0CE}
.view.legal .s-hero .s-rule{height:1px;max-width:220px;background:linear-gradient(90deg,#E8B04A,transparent)}
.view.legal .s-hero .note{margin:0;color:#A7B0CE}
.view.legal .s-hero .s-phone{margin:0;display:grid;justify-items:center}
.view.legal .band .s-in{display:block}
.view.legal .s-artgrid{display:grid;gap:30px}
.view.legal .s-body{display:grid;gap:14px;min-width:0}
.view.legal .s-body h2{margin:20px 0 0}
.view.legal .s-body h2:first-child{margin-top:0}
.view.legal .s-quote{margin:4px 0 0;padding:2px 0 2px 20px;border-left:2px solid var(--brass);display:grid;gap:14px}
.view.legal .s-quote p{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:calc(1.22rem*var(--ts,1));line-height:1.5;color:var(--ink)}
.view.legal .s-sig{margin:0;padding-left:22px;font-weight:600;color:var(--ink)}
.view.legal .s-sig span{display:block;margin-top:3px;font-weight:400;font-size:calc(.86rem*var(--ts,1));color:var(--mute)}
.view.legal .s-big{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:calc(1.3rem*var(--ts,1));line-height:1.45;color:var(--ink)}
.view.legal .s-promises{list-style:none;counter-reset:p;padding:0;margin:0;display:grid;gap:14px}
.view.legal .s-promises li{counter-increment:p;position:relative;padding-left:44px;line-height:1.6}
.view.legal .s-promises li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:-4px;font-family:"Instrument Serif",Georgia,serif;font-size:calc(1.5rem*var(--ts,1));color:var(--brass)}
.view.legal .s-promises b{color:var(--ink)}
.view.legal .s-side{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.view.legal .s-card{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:16px;background:var(--card)}
.view.legal .s-card h3{margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:calc(1.35rem*var(--ts,1));color:var(--ink)}
.view.legal .s-card p{margin:0}
.view.legal .s-card .btn{justify-self:start}
.view.legal .s-side .s-eyebrow{margin:0 0 10px!important;font:600 calc(.72rem*var(--ts,1))/1 var(--fb);text-transform:uppercase;letter-spacing:.16em;color:var(--brass)}
.view.legal .s-more{display:grid;border-top:1px solid var(--line)}
.view.legal .s-more a{display:block;padding:12px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:calc(.94rem*var(--ts,1))}
.view.legal .s-more a:hover{color:var(--brass)}
.disc.gov a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* 24 Oct 2026: the app's wordmark in the website's serif style, matching the logo being trademarked */
.brand{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;font-size:calc(1.34rem*var(--ts,1));letter-spacing:.01em;gap:9px}
.brand .stripe i{width:18px;height:4px;border-radius:2px}
@media (max-width:440px){.brand{font-size:calc(1.2rem*var(--ts,1));gap:7px}.brand .stripe i{width:13px}}
/* Offer X-Ray: Joining this year? (#22, 2 Nov 2026) */
.jy2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.jyb{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card2)}
.jyb .lbl{font-weight:600;color:var(--ink)}
/* share sheet: square + tall cards (item A, 5 Nov 2026) */
.shcs{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.shc{margin:0;display:grid;gap:8px;justify-items:start}
.shc img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.shc .shc-tl{max-height:300px;width:auto;max-width:100%}
.shc figcaption{display:grid;gap:2px}
/* Play app Welcome (signed out): "Why can't I just ask AI?" under the buttons */
.aw-why{margin-top:28px}.aw-why .band{padding:0;background:none}.aw-why .s-in{padding:0}.aw-why .s-head{margin-bottom:14px}
.aw-why .s-eyebrow{font-size:calc(.78rem*var(--ts,1));letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin:0}
.aw-why h2{font-size:calc(1.35rem*var(--ts,1));margin:4px 0}.aw-why .s-lead,.aw-why p{color:var(--ink);line-height:1.55}.aw-why .s-whyai{display:grid;gap:14px}
.aw-why ul.s-xl{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}.aw-why ul.s-xl li{position:relative;padding-left:22px}
.aw-why ul.s-xl li::before{content:"✕";position:absolute;left:0;color:var(--brass);font-size:.85em}
.tstrip{border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:10px;padding:8px 12px;display:grid;gap:2px;background:var(--card2)}
.line.flash{outline:3px solid var(--brass);outline-offset:3px;border-radius:10px;transition:outline-color .6s}
/* #13 Your week: "Got it" stays on the title's line on phones; a drawn calendar instead of the emoji (Android drew "July 17") */
.recap .rc-h{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px}
.recap .rc-h h2{display:flex;align-items:center;gap:8px;margin:0;min-width:0}
.recap .rc-ico{width:1.1em;height:1.1em;flex:none;color:var(--acc)}
.recap .rc-h .linkbtn{flex:none;white-space:nowrap}
/* #18 + #27 (testers, 5 Nov 2026), phones and the Play app only (touch screens), the app's own screens only:
   - the app's controls and labels aren't selectable (a long-press used to select the whole page); what you'd copy stays
     selectable: every field (HR message, emails, offer lines), the resume preview, Genie's answers, AI results, job details;
   - no grey/blue box when you tap; a gentle pressed look instead, so taps still feel answered;
   - no Chrome link menu on the app's own controls (phone.js). The yellow focus ring stays for keyboards. */
@media (hover:none) and (pointer:coarse){
  html:not(.site) body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  html:not(.site) :is(input,textarea,select,[contenteditable],.sel,.cvp,.cvp-pages,.cvt,.ag-a,.aibox,#cx-out,.job,.bj-x,.disc,pre,code,.aie,.err,.gsay p){-webkit-user-select:text;user-select:text}
  html:not(.site) :is(#tabs a,.subtabs a,.big-c,a.card,.ph-quick,.ph-chai,button,.btn,.linkbtn,.drw-l a,.chip,.bdg,.back){-webkit-touch-callout:none}
  html:not(.site) :is(#tabs a,.subtabs a,.big-c,a.card,.ph-quick,.ph-chai,.btn,.chip,.drw-l a):active{filter:brightness(.92);transform:translateY(1px)}
  html:not(.site) :is(button,.linkbtn):active{opacity:.8}
}
html.play body{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
/* #28 interview prep */
.ivp h4{margin:4px 0 0}.ivq{display:grid;gap:8px}.ivq li{display:grid;gap:2px}.ivp details>summary{cursor:pointer;padding:4px 0}
/* Chai Break extras (2 Nov 2026): interview practice and Guess the CEO */
.pq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-top:14px}
a.card.pq-c{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
.pq-i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(77,124,255,.16);color:var(--acc)}
.pq-i.q{background:rgba(255,201,60,.18);color:#C27C0E}.pq-i svg{width:22px;height:22px}
.pq-t{display:grid;gap:2px;min-width:0}.pq-t b{font-family:var(--fd);font-size:calc(1.05rem*var(--ts,1))}
.pq-go{font-size:calc(1.5rem*var(--ts,1));color:var(--mute)}
.ivx{color:var(--brass);font-weight:600}
.ivf input{width:100%}
.ivc{gap:6px}.ivc .chip small{opacity:.7;margin-left:2px}
.ivl{display:grid;gap:8px}
.ivi{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card,transparent)}
.ivi>summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;font-weight:600;list-style-position:outside}
.ivi .ivt{flex:1;min-width:0}.ivi .ivok{color:var(--good);font-weight:700}
.ivi[open]>summary{margin-bottom:8px}
.ivb{display:grid;gap:8px}.ivb p{margin:0}
.iva{margin:0;padding:10px 12px;border-left:3px solid var(--brass);background:rgba(232,176,74,.08);border-radius:0 10px 10px 0;display:block;line-height:1.5}
.iva .note{display:block;margin-bottom:4px;font-size:calc(.75rem*var(--ts,1));text-transform:uppercase;letter-spacing:.06em}
.ivpr .btn.on,.ivi .btn.on{border-color:var(--good);color:var(--good)}
.qz{display:grid;gap:12px}
.qzo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px}
.qzo .btn{justify-content:flex-start;text-align:left;white-space:normal;height:auto;min-height:44px}
.qzo .btn:disabled{opacity:.6;cursor:default}
.qzo .btn.right{opacity:1;border-color:var(--good);color:var(--good);font-weight:700}
.qzo .btn.wrong{opacity:1;border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.qzq.ok{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}.qzq.no{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.qzf{margin:0}