/* © 2026 Job Shift Careers. All rights reserved. */
/* =========================================================
   The visitor website: header, bands, articles, footer.
   Everything here is scoped to html.site, so the signed-in app
   is never touched. Light is the main look; dark is a warm navy
   version of the same design, chosen by the device or You > Mode.
   ========================================================= */

html.site{
  /* dark (default) */
  --s-ink:#F4F0E6;
  --s-mute:#A7B0CE;
  --s-bg:#0E1738;
  --s-bg2:#141E46;
  --s-cream:#16204A;
  --s-panel:#1A2552;
  --s-navy:#0A1230;
  --s-on-navy:#F4F0E6;
  --s-navy-mute:#A7B0CE;
  --s-line:rgba(232,176,74,.20);
  --s-line2:#2E3A72;
  --s-brass:#E8B04A;
  --s-brass-2:#FFD98A;
  --s-on-brass:#1A1204;
  --s-cta:#E8B04A;--s-on-cta:#1A1204;
  --s-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  --s-max:1180px;
  --s-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}
html.site.light{
  --s-ink:#141C38;
  --s-mute:#5B6684;
  --s-bg:#FFFFFF;
  --s-bg2:#FBF7EE;
  --s-cream:#F7F1E3;
  --s-panel:#FFFFFF;
  --s-navy:#101A3E;
  --s-on-navy:#F4F0E6;
  --s-navy-mute:#B6BEDA;
  --s-line:rgba(20,28,56,.13);
  --s-line2:rgba(20,28,56,.13);
  --s-brass:#9C6A12;
  --s-brass-2:#7E540A;
  --s-on-brass:#FFFFFF;
  --s-cta:#101A3E;--s-on-cta:#FFFFFF;
  --s-shadow:0 30px 60px -38px rgba(16,26,62,.45);
}

html.site body{background:var(--s-bg);background-image:none;color:var(--s-ink)}
html.site ::selection{background:var(--s-brass);color:var(--s-on-brass)}

/* ---------- shared page frame ---------- */
html.site .s-in{max-width:var(--s-max);margin:0 auto;padding-inline:clamp(16px,4vw,40px);width:100%}
html.site .band{padding-block:clamp(44px,6.5vw,92px)}
html.site .band.tight{padding-block:clamp(30px,4vw,54px)}
html.site .band.cream{background:var(--s-cream)}
html.site .band.soft2{background:var(--s-bg2)}
html.site .band.navy{background:var(--s-navy);color:var(--s-on-navy)}
html.site .band.navy .s-lead,html.site .band.navy .note{color:var(--s-navy-mute)}
html.site .band.navy h2,html.site .band.navy h3{color:var(--s-on-navy)}

/* ---------- type ---------- */
html.site h1,html.site h2,html.site .s-dsp{
  font-family:var(--s-serif);font-weight:400;letter-spacing:-.01em;line-height:1.08;text-wrap:balance;color:var(--s-ink)}
html.site h1{font-size:calc(clamp(2.3rem,5.6vw,4.1rem)*var(--ts,1))}
html.site h2{font-size:calc(clamp(1.75rem,3.9vw,2.9rem)*var(--ts,1));margin:0 0 14px}
html.site h3{font-family:var(--fb);font-weight:600;font-size:calc(1.05rem*var(--ts,1));letter-spacing:0;color:var(--s-ink)}
html.site .s-eyebrow{font:600 calc(.74rem*var(--ts,1))/1 var(--fb);text-transform:uppercase;letter-spacing:.16em;color:var(--s-brass);margin:0 0 14px;display:flex;align-items:center;gap:10px}
html.site .s-eyebrow{flex-wrap:wrap}
html.site .s-eyebrow::after{content:"";height:1px;width:38px;background:var(--s-brass);opacity:.5;flex:none}
@media (max-width:560px){html.site .s-eyebrow::after{display:none}}
html.site .s-lead{color:var(--s-mute);font-size:calc(clamp(1rem,1.5vw,1.16rem)*var(--ts,1));line-height:1.62;max-width:62ch;margin:0}
html.site .s-head{max-width:66ch;margin-bottom:clamp(20px,2.4vw,32px)}
html.site .s-head h2{margin-bottom:12px}
html.site .note{color:var(--s-mute)}
html.site a{color:var(--s-brass-2)}
html.site.light a{color:var(--s-brass)}

/* ---------- buttons (website versions of .btn) ---------- */
html.site .btn{border-radius:2px;border:1px solid var(--s-line2);background:transparent;color:var(--s-ink);
  font:600 calc(.95rem*var(--ts,1)) var(--fb);padding:13px 24px;letter-spacing:.01em;transition:background .18s,color .18s,border-color .18s,transform .14s}
html.site .btn:hover{filter:none;background:var(--s-cream)}
html.site .band.navy .btn,html.site .s-hero .btn{color:var(--s-on-navy);border-color:rgba(244,240,230,.35)}
html.site .band.navy .btn:hover,html.site .s-hero .btn:hover{background:rgba(244,240,230,.1)}
html.site .btn.p{background:var(--s-cta);border-color:var(--s-cta);color:var(--s-on-cta);box-shadow:none}
html.site .btn.p:hover{filter:brightness(1.12)}
/* on a navy band the call to action is always brass, so it stands out */
html.site .band.navy,html.site .s-hero,html.site .sfoot{--s-cta:#E8B04A;--s-on-cta:#1A1204}
html.site .btn.r{background:var(--s-brass);border-color:var(--s-brass);color:var(--s-on-brass)}
html.site .btn.s{padding:9px 16px;font-size:calc(.88rem*var(--ts,1))}
html.site .btn.ghost{background:transparent}
html.site .btn.wide{width:100%}
html.site .btn:active{transform:translateY(1px)}

/* ---------- header ---------- */
html.site .top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--s-bg) 92%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--s-line2)}
html.site .top .in{max-width:var(--s-max);padding:0 clamp(16px,4vw,40px);min-height:70px;display:flex;align-items:center;gap:18px}
html.site .top .brand{font-family:var(--s-serif);font-weight:400;font-size:calc(1.32rem*var(--ts,1));letter-spacing:.01em;color:var(--s-ink);gap:9px;margin-right:auto;flex:none}
html.site .top .brand span{color:var(--s-brass)}
html.site .top .brand .stripe i{height:4px;width:18px;border-radius:2px;background:var(--s-brass)}
html.site .snav{display:none;align-items:center;gap:2px;margin:0}
html.site .snav button,html.site .snav a{background:none;border:0;padding:10px 13px;border-radius:2px;
  font:600 calc(.92rem*var(--ts,1)) var(--fb);color:var(--s-mute);text-decoration:none;position:relative}
html.site .snav button::after,html.site .snav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;background:var(--s-brass);transform:scaleX(0);transform-origin:left;transition:transform .2s}
html.site .snav button:hover,html.site .snav a:hover{color:var(--s-ink);background:none}
html.site .snav button:hover::after,html.site .snav a:hover::after,html.site .snav a[aria-current]::after{transform:scaleX(1)}
html.site .snav a[aria-current]{color:var(--s-ink)}
html.site .s-act{display:none;align-items:center;gap:8px;flex:none}
html.site .menu-btn.snav-m{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--s-line2);border-radius:2px;background:none;color:var(--s-ink)}
html.site .menu-btn.snav-m svg{width:20px;height:20px}
@media (min-width:1000px){
  html.site .snav{display:flex}
  html.site .s-act{display:flex}
  html.site .menu-btn.snav-m{display:none}
}
html.site .snav-in{display:none}

/* the drop-down menu on phones (static pages) */
html.site .smenu-wrap{border-top:1px solid var(--s-line2);background:var(--s-bg);max-height:min(70vh,560px);overflow:auto}
@media (min-width:1000px){html.site .smenu-wrap{display:none!important}}
html.site .smenu-wrap .smenu{padding-block:4px 16px}
html.site .smenu-wrap .smenu a:last-child{border-bottom:0}

/* the sheet menu on phones (the app shell) */
html.site .smenu{display:grid;gap:2px}
html.site .smenu button,html.site .smenu a{display:block;text-align:left;background:none;border:0;border-bottom:1px solid var(--s-line2);
  border-radius:0;padding:15px 2px;font:600 calc(1.05rem*var(--ts,1)) var(--fb);color:var(--s-ink);text-decoration:none}
html.site .smenu button:hover,html.site .smenu a:hover{background:none;color:var(--s-brass)}

/* ---------- hero ---------- */
html.site .s-hero{background:var(--s-navy);color:var(--s-on-navy);position:relative;overflow:hidden}
html.site .s-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 440px at 82% 22%,rgba(232,176,74,.16),transparent 66%),radial-gradient(620px 420px at 6% 96%,rgba(232,176,74,.08),transparent 70%)}
html.site .s-hero .s-in{position:relative;z-index:1;display:grid;gap:clamp(30px,5vw,60px);align-items:center;
  padding-block:clamp(48px,7vw,104px)}
@media (min-width:980px){html.site .s-hero .s-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
html.site .s-hero h1{color:var(--s-on-navy);max-width:16ch}
html.site .s-hero h1 em{font-style:italic;color:var(--s-brass)}
html.site .s-hero .s-lead{color:var(--s-navy-mute);max-width:52ch}
html.site .s-hero-txt{display:grid;gap:22px;min-width:0}
html.site .s-hero .s-eyebrow{color:var(--s-brass)}
html.site .s-hero .row{gap:12px}
html.site .s-rule{height:1px;background:linear-gradient(90deg,var(--s-brass),transparent);max-width:220px}

/* founding spots */
html.site .s-spots{display:grid;gap:9px;max-width:420px}
html.site .spotbar{height:3px;border-radius:0;background:rgba(244,240,230,.18);overflow:hidden}
html.site .spotfill{height:100%;width:0;border-radius:0;background:var(--s-brass);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
html.site .s-spots .note{color:var(--s-navy-mute);font-size:calc(.86rem*var(--ts,1))}
html.site .spotn{font-family:var(--s-serif);font-size:calc(1.5rem*var(--ts,1));color:var(--s-brass);line-height:1}

/* phone frame */
html.site .s-phone{margin:0;display:grid;justify-items:center;position:relative}
html.site .bezel{position:relative;width:min(290px,76vw);aspect-ratio:390/780;border-radius:34px;padding:8px;
  background:#060B1F;border:1px solid rgba(232,176,74,.3);box-shadow:0 46px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(232,176,74,.1)}
html.site .bezel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px;background:var(--s-navy)}
html.site .bezel .ph-l{display:none}
html.site.light .bezel .ph-l{display:block}
html.site.light .bezel .ph-d{display:none}
html.site.light .bezel{background:#101A3E;box-shadow:0 46px 90px -44px rgba(16,26,62,.7)}
html.site .bezel.sm{width:min(220px,58vw)}
html.site .s-lamp{position:absolute;left:-6%;bottom:-18px;width:120px;pointer-events:none;filter:drop-shadow(0 0 22px rgba(232,176,74,.45))}
html.site .s-lamp svg{width:100%;height:auto}

/* ---------- facts strip ---------- */
html.site .s-facts{background:var(--s-bg);padding-block:0}
html.site .s-facts .s-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding-inline:0;background:var(--s-line2);border-block:1px solid var(--s-line2)}
@media (min-width:860px){html.site .s-facts .s-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
html.site .s-fact{background:var(--s-bg2);padding:clamp(20px,3vw,32px) clamp(16px,2.6vw,28px);display:grid;gap:5px;align-content:center}
html.site .s-fact b{font-family:var(--s-serif);font-weight:400;font-size:calc(clamp(1.7rem,3vw,2.3rem)*var(--ts,1));line-height:1;color:var(--s-brass)}
html.site .s-fact span{font-size:calc(.88rem*var(--ts,1));color:var(--s-mute);line-height:1.4}

/* ---------- tool rows ---------- */
html.site .s-rows{display:grid}
html.site .s-row{display:grid;gap:clamp(26px,4.5vw,64px);align-items:center;padding-block:clamp(40px,5.5vw,76px);border-top:1px solid var(--s-line2)}
html.site .s-row:first-child{border-top:0;padding-top:clamp(18px,2vw,28px)}
@media (min-width:900px){
  html.site .s-row{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
  html.site .s-row.flip{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
  html.site .s-row.flip .s-phone{order:-1}
}
html.site .s-row-txt{display:grid;gap:16px;min-width:0;align-content:center}
html.site .s-row-txt h2{margin:0;font-size:calc(clamp(1.55rem,3.2vw,2.35rem)*var(--ts,1))}
html.site ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
html.site ul.ticks li{position:relative;padding-left:26px;line-height:1.55;color:var(--s-ink)}
html.site .band.navy ul.ticks li{color:var(--s-on-navy)}
html.site ul.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:1px;background:var(--s-brass)}
html.site ul.ticks li::after{display:none}

/* ---------- steps ---------- */
html.site .s-steps{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;gap:1px;background:rgba(244,240,230,.16)}
@media (min-width:820px){html.site .s-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
html.site .s-steps li{counter-increment:n;background:var(--s-navy);padding:clamp(24px,3vw,36px);display:grid;gap:10px;align-content:start}
html.site .s-steps li::before{content:counter(n,decimal-leading-zero);font-family:var(--s-serif);font-size:calc(2.2rem*var(--ts,1));line-height:1;color:var(--s-brass)}
html.site .s-steps b{font-size:calc(1.1rem*var(--ts,1));font-weight:600}
html.site .s-steps span{color:var(--s-navy-mute);line-height:1.6}

/* ---------- pricing ---------- */
html.site .pcards{display:grid;gap:clamp(16px,2.4vw,28px)}
@media (min-width:820px){html.site .pcards{grid-template-columns:1fr 1fr}}
html.site .pcard{display:grid;gap:14px;align-content:start;border:1px solid var(--s-line2);border-radius:2px;
  padding:clamp(26px,3.4vw,42px);background:var(--s-panel);box-shadow:none}
html.site .pcard.hi{border-color:var(--s-brass);border-top:3px solid var(--s-brass);background:var(--s-panel)}
html.site .pcard h3{font-family:var(--s-serif);font-weight:400;font-size:calc(1.6rem*var(--ts,1))}
html.site .pcard .pill{justify-self:start;border-radius:0;background:transparent;border:1px solid var(--s-brass);
  color:var(--s-brass);font:600 calc(.7rem*var(--ts,1)) var(--fb);letter-spacing:.12em;text-transform:uppercase;padding:5px 11px}
html.site .pp{display:flex;align-items:baseline;gap:10px}
html.site .pp b{font-family:var(--s-serif);font-weight:400;font-size:calc(clamp(2.4rem,4.4vw,3.2rem)*var(--ts,1));line-height:1;color:var(--s-ink)}
html.site .pp span{color:var(--s-mute)}
html.site .pcard .btn{justify-self:start;margin-top:6px}
html.site .pcard .spotbar{background:var(--s-line2)}

/* ---------- questions ---------- */
html.site .faq-l{display:grid;gap:0;border-top:1px solid var(--s-line2);max-width:860px}
html.site .faq details{border-bottom:1px solid var(--s-line2);background:none;padding:0;border-radius:0}
html.site .faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font:600 calc(1.05rem*var(--ts,1)) var(--fb);position:relative;color:var(--s-ink)}
html.site .faq summary::-webkit-details-marker{display:none}
html.site .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:1px solid var(--s-brass);border-bottom:1px solid var(--s-brass);transform:rotate(45deg);transition:transform .25s}
html.site .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
html.site .faq details p{margin:0 0 22px;color:var(--s-mute);max-width:72ch;line-height:1.65}

/* ---------- founder strip ---------- */
html.site .s-founder{display:grid;gap:clamp(22px,3.4vw,46px);align-items:center}
@media (min-width:760px){html.site .s-founder{grid-template-columns:150px minmax(0,1fr)}}
html.site .s-founder img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:1px solid var(--s-brass);justify-self:start}
html.site .s-founder blockquote{margin:0;font-family:var(--s-serif);font-size:calc(clamp(1.25rem,2.4vw,1.75rem)*var(--ts,1));line-height:1.38;color:var(--s-ink)}
html.site .band.navy .s-founder blockquote{color:var(--s-on-navy)}
html.site .s-founder cite{display:block;margin-top:14px;font-style:normal;font-size:calc(.9rem*var(--ts,1));color:var(--s-mute);letter-spacing:.04em}
html.site .band.navy .s-founder cite{color:var(--s-navy-mute)}

/* ---------- final call ---------- */
html.site .s-final{text-align:center;display:grid;gap:22px;justify-items:center}
html.site .s-final h2{max-width:18ch}
html.site .s-final .s-lead{text-align:center}

/* ---------- footer ---------- */
html.site .sfoot{background:var(--s-navy);color:var(--s-on-navy);border-top:0;margin:0;padding-block:clamp(44px,5.5vw,72px) 30px;display:block}
html.site .sfoot-g{display:grid;gap:30px 24px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--s-max);
  margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
html.site .sfoot-b{grid-column:1/-1;display:grid;gap:10px;max-width:34ch}
@media (min-width:980px){html.site .sfoot-g{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}html.site .sfoot-b{grid-column:auto}}
html.site .sfoot .brand{font-family:var(--s-serif);font-weight:400;font-size:calc(1.3rem*var(--ts,1));color:var(--s-on-navy)}
html.site .sfoot .brand span{color:var(--s-brass)}
html.site .sfoot h3{font:600 calc(.72rem*var(--ts,1)) var(--fb);text-transform:uppercase;letter-spacing:.15em;color:var(--s-brass);margin:0 0 14px}
html.site .sfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
html.site .sfoot a,html.site .sfoot .linkbtn{color:var(--s-navy-mute);text-decoration:none;font-weight:400;font-size:calc(.9rem*var(--ts,1));padding:0;text-align:left;background:none;border:0}
html.site .sfoot a:hover,html.site .sfoot .linkbtn:hover{color:var(--s-brass)}
html.site .sfoot .note{color:var(--s-navy-mute);font-size:calc(.86rem*var(--ts,1));line-height:1.6}
html.site .sfoot-end{max-width:var(--s-max);margin:clamp(34px,4vw,54px) auto 0;padding:22px clamp(16px,4vw,40px) 0;
  border-top:1px solid rgba(244,240,230,.14);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
html.site .sfoot-end p{color:var(--s-navy-mute);font-size:calc(.8rem*var(--ts,1));margin:0}
html.site .sfoot .copyr{text-align:left;color:var(--s-navy-mute);opacity:1}

/* ---------- article pages (guides, About, Help, legal) ---------- */
html.site .s-art{background:var(--s-bg)}
html.site .s-art .s-in{padding-block:clamp(34px,4.5vw,58px) clamp(50px,6vw,86px)}
html.site .s-artgrid{display:grid;gap:clamp(30px,4vw,56px);align-items:start}
@media (min-width:1040px){html.site .s-artgrid{grid-template-columns:minmax(0,1fr) 320px}}
html.site .s-body{max-width:72ch;min-width:0}
html.site .s-body.s-wide{max-width:76ch}
html.site .s-body h2{font-size:calc(clamp(1.45rem,2.9vw,2.1rem)*var(--ts,1));margin:clamp(34px,4vw,52px) 0 12px}
html.site .s-body h2:first-child{margin-top:0}
html.site .s-body h3{font-size:calc(1.06rem*var(--ts,1));margin:26px 0 7px}
html.site .s-body p,html.site .s-body li{color:var(--s-mute);font-size:calc(1.02rem*var(--ts,1));line-height:1.72}
html.site .s-body p{margin:0 0 14px}
html.site .s-body ul,html.site .s-body ol{padding-left:22px;display:grid;gap:9px;margin:0 0 16px}
html.site .s-body b,html.site .s-body strong{color:var(--s-ink);font-weight:600}
html.site .s-body .lead{color:var(--s-ink);font-size:calc(clamp(1.08rem,1.8vw,1.3rem)*var(--ts,1));line-height:1.6;font-family:var(--s-serif);margin:0 0 24px;max-width:60ch}
html.site .s-body .soft{background:var(--s-cream);border:0;border-left:2px solid var(--s-brass);border-radius:0;padding:20px 22px;margin:0 0 18px}
html.site .s-body .soft p{margin:0;color:var(--s-ink)}
html.site .s-body .gpic{margin:26px 0;display:grid;gap:8px}
html.site .s-body .gpic img{width:100%;max-width:560px;height:auto;border-radius:2px;border:1px solid var(--s-line2);box-shadow:var(--s-shadow)}
html.site .s-body .offer{border:0;border-top:1px solid var(--s-brass);border-bottom:1px solid var(--s-brass);background:none;
  border-radius:0;padding:18px 0;font-size:calc(.98rem*var(--ts,1));color:var(--s-ink);margin:28px 0}
html.site .s-body .offer b{color:var(--s-brass)}
html.site .s-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:calc(.84rem*var(--ts,1));color:var(--s-mute);margin:0 0 20px}
html.site .s-crumb a{color:var(--s-mute);text-decoration:none}
html.site .s-crumb a:hover{color:var(--s-brass)}
html.site .s-crumb i{font-style:normal;opacity:.45}
html.site .s-art h1{font-size:calc(clamp(2rem,4.4vw,3.2rem)*var(--ts,1));margin:0 0 18px;max-width:20ch}

/* the founder's own words, on About */
html.site .s-quote{margin:0;padding:0 0 0 24px;border-left:2px solid var(--s-brass);max-width:62ch}
html.site .s-body .s-quote p,html.site .s-quote p{font-family:var(--s-serif);font-size:calc(clamp(1.1rem,1.9vw,1.4rem)*var(--ts,1));line-height:1.52;color:var(--s-ink);margin:0 0 16px}
html.site .s-quote p:last-child{margin-bottom:0}
html.site .s-body .s-sig,html.site .s-sig{margin:20px 0 0;padding-left:24px;font:600 calc(1rem*var(--ts,1)) var(--fb);color:var(--s-ink)}
html.site .s-sig span{display:block;font-weight:400;font-size:calc(.88rem*var(--ts,1));color:var(--s-mute);margin-top:3px;letter-spacing:.03em}
html.site .s-body .s-big,html.site .s-big{font-family:var(--s-serif);font-size:calc(clamp(1.15rem,2.1vw,1.55rem)*var(--ts,1));line-height:1.45;color:var(--s-ink);max-width:56ch;margin:0}
html.site .s-body .s-promises,html.site .s-promises{list-style:none;counter-reset:p;padding:0;display:grid;gap:18px;margin:0 0 26px}
/* the handwritten Genie line inside an article (.s-body p would grey it out) */
html.site .s-body .genie{color:var(--s-brass)}
html.site .s-body .s-promises li,html.site .s-promises li{counter-increment:p;position:relative;padding-left:46px;color:var(--s-mute);line-height:1.65}
html.site .s-promises li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--s-serif);font-size:calc(1.5rem*var(--ts,1));line-height:1.2;color:var(--s-brass)}
html.site .s-promises b{color:var(--s-ink)}

/* the "Try it" box beside an article */
html.site .s-side{display:grid;gap:18px;align-content:start;position:sticky;top:94px}
@media (max-width:1039px){html.site .s-side{position:static}}
html.site .s-card{border:1px solid var(--s-line2);border-top:3px solid var(--s-brass);border-radius:2px;
  padding:26px 24px;background:var(--s-panel);display:grid;gap:12px}
html.site .s-card h3{font-family:var(--s-serif);font-weight:400;font-size:calc(1.35rem*var(--ts,1))}
html.site .s-card p{color:var(--s-mute);font-size:calc(.94rem*var(--ts,1));line-height:1.6;margin:0}
html.site .s-card .btn{justify-self:start}
html.site .s-more{display:grid;gap:0;border-top:1px solid var(--s-line2)}
html.site .s-more a{display:block;padding:13px 0;border-bottom:1px solid var(--s-line2);color:var(--s-ink);
  text-decoration:none;font-size:calc(.93rem*var(--ts,1));font-weight:500}
html.site .s-more a:hover{color:var(--s-brass)}
html.site .srch{display:flex;flex-wrap:wrap;gap:8px}
html.site .srch a{display:inline-block;padding:9px 16px;border-radius:2px;border:1px solid var(--s-line2);
  background:none;color:var(--s-ink);font-weight:500;font-size:calc(.88rem*var(--ts,1));text-decoration:none}
html.site .srch a:hover{border-color:var(--s-brass);color:var(--s-brass)}

/* a plain grid of cards, used by the guides hub */
html.site .s-grid{display:grid;gap:1px;background:var(--s-line2);border:1px solid var(--s-line2)}
@media (min-width:700px){html.site .s-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){html.site .s-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
html.site .s-grid a{background:var(--s-panel);padding:26px 24px;display:grid;gap:8px;align-content:start;
  text-decoration:none;transition:background .18s}
html.site .s-grid a:hover{background:var(--s-cream)}
html.site .s-grid b{font-family:var(--s-serif);font-weight:400;font-size:calc(1.25rem*var(--ts,1));color:var(--s-ink);line-height:1.25}
html.site .s-grid span{color:var(--s-mute);font-size:calc(.92rem*var(--ts,1));line-height:1.55}

/* ---------- forms on the website (Feedback) ---------- */
html.site .s-form{display:grid;gap:18px;max-width:620px}
html.site .s-form .fld label{font-weight:600;font-size:calc(.92rem*var(--ts,1));color:var(--s-ink)}
html.site .s-form .fld label span{font-weight:400;color:var(--s-mute)}
html.site .s-form input[type=text],html.site .s-form input[type=email],html.site .s-form textarea,html.site .s-form select{
  background:var(--s-panel);border:1px solid var(--s-line2);border-radius:2px;color:var(--s-ink);padding:13px 14px}
html.site .s-form input:focus,html.site .s-form textarea:focus,html.site .s-form select:focus{outline:2px solid var(--s-brass);outline-offset:1px;border-color:var(--s-brass)}
html.site .s-form .chk{color:var(--s-ink);font-size:calc(.95rem*var(--ts,1))}
html.site .s-chips{display:flex;flex-wrap:wrap;gap:8px}
html.site .s-chips label{position:relative;display:inline-flex}
html.site .s-chips input{position:absolute;opacity:0;width:0;height:0}
html.site .s-chips span{display:inline-block;padding:10px 17px;border:1px solid var(--s-line2);border-radius:2px;
  font-size:calc(.9rem*var(--ts,1));font-weight:500;cursor:pointer;color:var(--s-ink)}
html.site .s-chips input:checked + span{border-color:var(--s-cta);background:var(--s-cta);color:var(--s-on-cta)}
html.site .s-chips input:focus-visible + span{outline:3px solid var(--s-brass);outline-offset:2px}
html.site .s-form .s-stars{display:flex;gap:6px;direction:rtl;justify-content:flex-end}
html.site .s-form .s-stars input{position:absolute;opacity:0;width:0;height:0}
html.site .s-form .s-stars label{cursor:pointer;font-size:calc(2rem*var(--ts,1));line-height:1;font-weight:400;
  color:color-mix(in srgb,var(--s-mute) 38%,transparent);transition:color .15s}
html.site .s-form .s-stars label:hover,html.site .s-form .s-stars label:hover ~ label,
html.site .s-form .s-stars input:checked ~ label{color:var(--s-brass)}
html.site .s-form .s-stars input:focus-visible + label{outline:3px solid var(--s-brass);outline-offset:2px}
html.site .s-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
html.site .s-done{border-left:2px solid var(--s-brass);background:var(--s-cream);padding:22px 24px;display:grid;gap:8px}
html.site .s-done b{font-family:var(--s-serif);font-weight:400;font-size:calc(1.4rem*var(--ts,1));color:var(--s-ink)}

/* the handwritten Genie line, kept readable on the navy bands in light mode */
html.site .band.navy .genie,html.site .s-hero .genie,html.site .sfoot .genie{color:#FFD98A;text-shadow:0 0 14px rgba(255,200,90,.35)}

/* ---------- motion ---------- */
html.site .reveal{opacity:1}
html.site.motion .reveal:not(.in){opacity:0;transform:translateY(22px)}
html.site.motion .reveal.in{animation:s-rise .8s cubic-bezier(.2,.75,.25,1) var(--rd,0s) both}
html.site.motion .reveal.in.done{animation:none}
@keyframes s-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.site.motion *{animation:none!important;transition:none!important}html.site .reveal{opacity:1!important;transform:none!important}}

/* ---------- print ---------- */
@media print{html.site .top,html.site .sfoot,html.site .s-side,html.site .btn{display:none!important}}

/* ---------- Tools drop-down (desktop) and expandable Tools (phone menus) ---------- */
html.site .top .in{position:relative}
html.site .snav{align-self:stretch}
html.site .snav-dd{display:flex;align-items:stretch}
html.site .snav .dd-b{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
html.site .snav .dd-b .dd-c{width:14px;height:14px;transition:transform .2s}
html.site .snav-dd.open .dd-c,html.site .snav-dd:hover .dd-c{transform:rotate(180deg)}
html.site .snav-dd.open .dd-b::after,html.site .snav-dd:hover .dd-b::after{transform:scaleX(1)}
html.site .dd-p{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);width:min(780px,calc(100vw - 32px));z-index:40}
html.site .snav-dd.open .dd-p{display:block}
@media (hover:hover){html.site .snav-dd:hover .dd-p{display:block}}
html.site .snav-dd.shut .dd-p{display:none!important}
html.site .dd-box{background:var(--s-bg);border:1px solid var(--s-line2);border-top:2px solid var(--s-brass);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.6);padding:22px 26px 12px}
html.site .dd-g{display:grid;grid-template-columns:1fr 1fr;gap:6px 34px}
html.site .dd-h{margin:0 0 8px;font:700 calc(.7rem*var(--ts,1)) var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--s-brass)}
html.site .snav .dd-p a{display:grid;gap:1px;padding:9px 12px;margin:0 -12px;border-radius:2px;
  font:400 calc(.82rem*var(--ts,1)) var(--fb);color:var(--s-mute);text-decoration:none;position:static;text-align:left}
html.site .snav .dd-p a::after{display:none}
html.site .snav .dd-p a b{font:600 calc(.95rem*var(--ts,1)) var(--fb);color:var(--s-ink)}
html.site .snav .dd-p a:hover{background:var(--s-cream);color:var(--s-mute)}
html.site .snav .dd-p a:hover b{color:var(--s-brass)}
html.site .dd-f{display:flex;justify-content:space-between;gap:18px;margin:12px -26px 0;padding:6px 26px 0;border-top:1px solid var(--s-line2)}
html.site .snav .dd-p .dd-f a{display:inline;padding:10px 0;margin:0;font:700 calc(.84rem*var(--ts,1)) var(--fb);color:var(--s-brass)}
html.site .snav .dd-p .dd-f a:hover{background:none;text-decoration:underline;color:var(--s-brass)}

/* phone menus: Tools opens in place */
html.site .smenu-dd{border-bottom:1px solid var(--s-line2)}
html.site .smenu-dd summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:15px 2px;font:600 calc(1.05rem*var(--ts,1)) var(--fb);color:var(--s-ink)}
html.site .smenu-dd summary::-webkit-details-marker{display:none}
html.site .smenu-dd summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--s-brass);border-bottom:2px solid var(--s-brass);
  transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
html.site .smenu-dd[open] summary::after{transform:rotate(225deg);margin-top:4px}
html.site .smenu-dd .dd-h{margin:6px 2px 4px}
html.site .smenu-dd a{display:grid!important;gap:1px;padding:9px 2px 9px 14px!important;border-bottom:0!important;border-left:2px solid var(--s-line2);
  font:400 calc(.82rem*var(--ts,1)) var(--fb)!important;color:var(--s-mute)!important;text-decoration:none}
html.site .smenu-dd a b{font:600 calc(.98rem*var(--ts,1)) var(--fb);color:var(--s-ink)}
html.site .smenu-dd a:hover{border-left-color:var(--s-brass)}
html.site .smenu-dd a:hover b{color:var(--s-brass)}
html.site .smenu-dd .dd-h:last-of-type{margin-top:12px}

/* "How Genie works" line under the tools on the home page */
html.site .s-blend{max-width:760px;margin:clamp(40px,6vw,72px) auto 0;padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--s-line2);text-align:center;display:grid;gap:12px;justify-items:center}
html.site .s-blend .s-big{margin:0}
html.site .s-blend .s-lead{margin:0}

/* "Thousands on your job hunt? Not here." cost section on the home page (22 Oct) */
html.site .s-cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){html.site .s-cost{grid-template-columns:1fr}}
html.site .s-cost h2 em{color:var(--s-brass)}
html.site .s-cost-txt .s-lead{margin-top:12px}
html.site .s-bill{border:1px solid rgba(244,240,230,.18);border-radius:2px;padding:clamp(16px,2.4vw,26px);background:rgba(244,240,230,.04);display:grid;min-width:0}
html.site .s-bl{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:14px 0;border-bottom:1px dashed rgba(244,240,230,.2);color:var(--s-on-navy)}
html.site .s-bl>span{min-width:0;flex:1 1 220px}
html.site .s-bl b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
html.site .s-bl small{display:block;font-weight:400;font-size:calc(.82rem*var(--ts,1));color:var(--s-navy-mute)}
html.site .s-ours>span small{display:block;margin-top:4px;font-family:var(--fb)}
html.site .s-hook{align-items:center;border-bottom:1px solid rgba(232,176,74,.45)}
html.site .s-hook>span{color:var(--s-navy-mute)}
html.site .s-hook>span b{color:var(--s-on-navy);font-weight:600;text-align:left}
html.site .s-ours{border-bottom:0;padding-top:18px}
html.site .s-ours>span{font-family:var(--s-serif);font-size:calc(1.45rem*var(--ts,1))}
html.site .s-ours>b{font-family:var(--s-serif);font-weight:400;font-size:calc(2.1rem*var(--ts,1));color:var(--s-cta);line-height:1}
html.site .s-billnote{margin:4px 0 0}
@media (max-width:520px){html.site .s-bl{flex-direction:column;align-items:flex-start}html.site .s-bl>span{flex:none}html.site .s-bl b{text-align:left}html.site .s-ours{flex-direction:row;align-items:flex-end;justify-content:space-between}}
/* pricing: why a full year (24 Oct 2026) */
html.site .s-why{display:grid;gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vw,48px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--s-line)}
@media (min-width:860px){html.site .s-why{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
html.site .s-whyq{margin:0;display:grid;gap:10px;min-width:0}
html.site .s-whyq blockquote{margin:0;font-family:var(--s-serif);font-size:calc(clamp(1.2rem,2.2vw,1.6rem)*var(--ts,1));line-height:1.38;color:var(--s-ink)}
html.site .s-whyq figcaption{color:var(--s-mute);font-size:calc(.92rem*var(--ts,1))}
html.site .s-whyq figcaption::before{content:"— "}
html.site .s-whyv{margin:0;min-width:0}
html.site .s-whyv li{margin-bottom:10px}

/* Signed-in members see the Welcome page in the website style: keep the app's tab bar and ☰ menu in their
   own colours there (a tester found gold tab text, and gold on blue on the selected Welcome tab; 30 Oct 2026) */
html.site .tabs a,html.site.light .tabs a{color:var(--mute)}
html.site .tabs a:hover,html.site.light .tabs a:hover{color:var(--ink)}
html.site .tabs a[aria-current="page"],html.site.light .tabs a[aria-current="page"]{color:#fff}
html.site .drw-l a,html.site.light .drw-l a{color:var(--ink)}
html.site .drw-l a[aria-current],html.site.light .drw-l a[aria-current]{color:#fff}
html.site .drw-me,html.site.light .drw-me{color:var(--ink)}
html.site .drw-me .go,html.site.light .drw-me .go{color:var(--acc)}
/* ...and keep the signed-in header the same size as on every other app page (it grew taller and wider on Welcome) */
html.site .top:has(#tabs:not([hidden])){position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(17,26,60,.88);border-bottom:1px solid var(--line)}
html.site.light .top:has(#tabs:not([hidden])){background:rgba(255,255,255,.9)}
html.site .top:has(#tabs:not([hidden])) .in{max-width:680px;margin:0 auto;padding:10px 16px;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (min-width:1100px){html.site .top:has(#tabs:not([hidden])) .in{max-width:1180px;padding-inline:24px}}
html.site .top:has(#tabs:not([hidden])) .brand{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-size:calc(1.34rem*var(--ts,1));margin-right:0;color:var(--ink)}
@media (max-width:440px){html.site .top:has(#tabs:not([hidden])) .brand{font-size:calc(1.2rem*var(--ts,1));gap:7px}html.site .top:has(#tabs:not([hidden])) .brand .stripe{gap:3px}html.site .top:has(#tabs:not([hidden])) .brand .stripe i{width:13px;height:4px}}
/* "Why can't I just ask AI?" (item B, 5 Nov 2026) */
html.site .s-whyai{display:grid;gap:clamp(20px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start;margin:0}
html.site .s-whyai p{margin:0;line-height:1.6;color:var(--s-ink)}
html.site ul.s-xl li::before{content:"✕";width:auto;height:auto;background:none;color:var(--s-brass);top:0;font-size:.85em}
html.site .s-whyai-g{font-size:calc(1.3rem*var(--ts,1));margin:4px 0}
html.site .s-whyai-p{padding:14px 16px;border:1px solid var(--s-line2);border-radius:14px}
html.site .s-whyai>div{padding:0;margin:0}