/* The app header and footer (v6 item 5), the home page ("My tools"), Pricing and My plan, built to match docs/v6-mockups/v6-website-prototype.html.
   Colors, fonts and tokens come from style.css (loaded first). */
:root{ --mint:#8FD6C3; }
/* v7 item 22: the styles the pages ask for but style.css does not load (the browser was faking them): Karla italic (the tagline under the logo) and 600, Lora italic 400 and 500 (the Pricing taglines). */
@font-face{font-family:'Karla';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/karla-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/karla-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-italic.woff2') format('woff2');}
/* Option D3 (Yang, 2026-10-22): a white 66px bar, its row inside the main site's column (wallstreetsmart.com keeps its header in a 1,340px box with 40px sides, so the logos line up on wide screens),
   the logo (190px) with a thin divider and a green AI TOOLS label, the tools as one gray group in the middle (the current one raised in white), and the round account button with the initial only. */
.ah{ background:#FFFFFF; border-bottom:1px solid var(--border); font-family:'Karla',-apple-system,"Segoe UI",Arial,sans-serif; position:sticky; top:0; z-index:40; }
.ah-inner{ max-width:1340px; margin:0 auto; padding:0 40px; display:flex; align-items:center; gap:20px; height:66px; box-sizing:border-box; white-space:nowrap; }
.ah-brand{ display:flex; align-items:center; gap:14px; flex:none; text-decoration:none; } .ah-brand img{ display:block; height:27px; width:190px; mix-blend-mode:multiply; }   /* the logo file has a white background: multiply makes it vanish on the header */
.ah-div{ width:1px; height:24px; background:#C9D9DF; flex:none; } .ah-tag{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
:root[data-theme="dark"] .ah-brand img{ filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ah-brand img{ filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen; } }
.ah-nav{ margin:0 auto; } .ah-nav ul{ list-style:none; margin:0; padding:4px; display:flex; gap:2px; background:#EEF3F4; border-radius:10px; }
.ah-nav .ah-soon{ cursor:not-allowed; opacity:.55; }   /* a tool that has not launched, or is admin-only for now (src/admin-only-tools.ts): in the group, grey, not a link */
.ah-nav .ah-blank{ display:block; height:20px; margin:8px 13px; border-radius:6px; background:rgba(65,98,110,.12); }   /* a tool this viewer cannot open: no name (src/admin-only-tools.ts) */
body[data-plan="accelerator"] .ah-nav .ah-blank{ background:rgba(255,255,255,.09); }
.ah-soon-tag{ display:inline-block; margin-left:7px; padding:0 6px; border-radius:999px; border:1px solid #C4A882; color:#6A522E; font-size:10px; font-weight:800; letter-spacing:.08em; line-height:16px; vertical-align:1px; }
:root[data-theme="dark"] .ah-soon-tag, body[data-plan="accelerator"] .ah-soon-tag{ color:#EEDFC6; border-color:rgba(196,168,130,.6); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ah-soon-tag{ color:#EEDFC6; border-color:rgba(196,168,130,.6); } }
.ah-nav a, .ah-nav .ah-soon{ display:block; padding:8px 13px; border-radius:7px; color:#2E4A52; text-decoration:none; font-weight:500; font-size:14px; line-height:20px; transition:color .15s, background .15s, box-shadow .15s; } .ah-nav a:hover{ color:var(--accent); background:rgba(255,255,255,.7); }
.ah-nav a[aria-current="page"]{ background:#FFFFFF; color:var(--accent-ink); font-weight:700; box-shadow:0 1px 3px rgba(19,27,30,.12); }
.ah-main, .ah-plain{ display:block; color:#2E4A52; text-decoration:none; font-weight:500; font-size:14px; line-height:20px; transition:color .2s, background .2s; } .ah-main:hover, .ah-plain:hover{ color:var(--accent); }
.ah-main{ font-size:13.5px; color:var(--ink-dim); flex:none; } .ah-plain{ padding:8px 12px; border-radius:8px; } .ah-plain[aria-current="page"]{ background:var(--accent-soft); color:var(--accent-ink); font-weight:700; }
.ah-right{ display:flex; align-items:center; gap:20px; flex:none; }
.ah-cta{ display:inline-block; flex:none; padding:11px 22px; border:2px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:700; font-size:13.5px; letter-spacing:.135px; line-height:20px; box-shadow:0 2px 10px rgba(0,0,0,.1); transition:transform .15s, box-shadow .15s; } .ah-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(19,141,117,.28); }
.ah-acct{ position:relative; }
.ah-acct-btn{ display:flex; align-items:center; gap:6px; min-height:44px; font:inherit; padding:4px 8px 4px 4px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:#2E4A52; cursor:pointer; transition:border-color .2s, color .2s; } .ah-acct-btn:hover{ border-color:var(--accent); color:var(--accent); }
.ah-avatar{ width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-size:14px; font-weight:800; flex:none; }
.ah-caret{ font-size:11px; color:var(--ink-dim); }
:root[data-theme="dark"] .ah{ background:var(--bg); border-bottom-color:rgba(255,255,255,.06); } :root[data-theme="dark"] .ah-div{ background:var(--border); } :root[data-theme="dark"] .ah-nav ul{ background:var(--surface-2); }
:root[data-theme="dark"] .ah-nav a, :root[data-theme="dark"] .ah-nav .ah-soon, :root[data-theme="dark"] .ah-main, :root[data-theme="dark"] .ah-plain{ color:var(--ink-dim); } :root[data-theme="dark"] .ah-nav a:hover{ background:var(--surface); } :root[data-theme="dark"] .ah-nav a[aria-current="page"]{ background:var(--surface); color:var(--accent-ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ah{ background:var(--bg); border-bottom-color:rgba(255,255,255,.06); } :root:not([data-theme="light"]) .ah-div{ background:var(--border); } :root:not([data-theme="light"]) .ah-nav ul{ background:var(--surface-2); }
  :root:not([data-theme="light"]) .ah-nav a, :root:not([data-theme="light"]) .ah-nav .ah-soon, :root:not([data-theme="light"]) .ah-main, :root:not([data-theme="light"]) .ah-plain{ color:var(--ink-dim); } :root:not([data-theme="light"]) .ah-nav a:hover{ background:var(--surface); } :root:not([data-theme="light"]) .ah-nav a[aria-current="page"]{ background:var(--surface); color:var(--accent-ink); } }
.ah-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px; z-index:80; display:flex; flex-direction:column; white-space:normal; }
.ah-menu[hidden]{ display:none; }
.ah-menu .ah-note{ padding:8px 10px 2px; font-size:12px; color:var(--ink-faint); } .ah-menu .ah-who{ padding:0 10px 8px; margin-bottom:4px; border-bottom:1px solid var(--border); font-size:13.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.ah-menu a, .ah-menu button{ display:block; width:100%; text-align:left; padding:9px 10px; border:0; border-radius:6px; background:none; color:#2E4A52; font:inherit; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; transition:color .2s, background .2s; } .ah-menu a:hover, .ah-menu button:hover{ background:var(--surface-2); color:var(--accent); }
.ah-menu a[aria-current="page"]{ color:var(--accent-ink); font-weight:700; }
.ah a:focus-visible, .ah button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.ah-burger{ display:none; font:inherit; font-weight:600; font-size:14px; padding:8px 14px; border:2px solid var(--border); border-radius:6px; background:var(--surface); color:#2E4A52; cursor:pointer; margin-left:auto; }
/* Narrow windows fold the four tools into a Menu button; wide ones keep every word on one line. With the short tool names the row needs at most about 1,050px (a Free account with Upgrade to Pro),
   so everyone folds at the same width (2026-10-23). On a phone the signed-out links get their own row, and the AI TOOLS label hides. */
@media (max-width:1239px){
  .ah-inner{ flex-wrap:wrap; height:auto; min-height:64px; padding-block:10px; gap:8px 16px; white-space:normal; } .ah-burger{ display:block; }
  .ah-nav{ display:none; width:100%; order:5; margin:0; } .ah-nav.open{ display:block; } .ah-nav ul{ flex-direction:column; align-items:flex-start; gap:4px; padding:4px 0 8px; background:none; }
}
@media (max-width:1099px){ .ah-inner{ padding-inline:20px; } .ah-brand img{ width:176px; height:25px; } }
@media (max-width:700px){ .ah-div, .ah-tag{ display:none; } .ah-right.out, .ah-right.up{ width:100%; justify-content:space-between; gap:12px; } }

/* The dark footer */
.af{ background:#131B1E; color:#8FA0A4; font-family:'Karla',-apple-system,"Segoe UI",Arial,sans-serif; font-size:14px; margin-top:48px; }
.af-inner{ max-width:1340px; margin:0 auto; padding:56px 40px 30px; box-sizing:border-box; }   /* the header's column, so the edges line up (2026-10-22) */
@media (max-width:1099px){ .af-inner{ padding-inline:20px; } }
.af-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.af-logo{ display:block; } .af-logo img{ height:34px; width:auto; display:block; }
.af-about p{ margin:14px 0 0; font-size:13.5px; line-height:1.5; max-width:260px; }
.af h5{ margin:0 0 16px; color:#F9F9F9; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.af a{ display:block; color:#8FA0A4; text-decoration:none; font-size:13.5px; margin-bottom:10px; } .af a:hover{ color:#138D75; }
/* Copyright left, Terms and Conditions right, on one line under a faint rule, as on wallstreetsmart.com */
.af-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#6C7E82; } .af-bottom a{ display:inline; margin:0; font-size:inherit; color:#6C7E82; } .af-bottom a:hover{ color:#F9F9F9; } .af-links{ display:flex; flex-wrap:wrap; gap:6px 22px; }
@media (max-width:760px){ .af-grid{ grid-template-columns:1fr 1fr; } .af-about{ grid-column:1 / -1; } }
/* Pages */
.page-wrap{ max-width:1340px; margin:0 auto; padding:56px 40px 24px; font-family:'Karla',-apple-system,"Segoe UI",Arial,sans-serif; color:var(--ink); box-sizing:border-box; }
.page-wrap h1{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:clamp(32px,4vw,42px); margin:0 0 12px; letter-spacing:-.01em; }
.page-wrap .lead{ color:var(--ink-dim); font-size:17px; margin:0 0 6px; }
.page-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:28px; }
.thanks{ color:#5C4562; font-weight:700; margin:12px 0 0; } :root[data-theme="dark"] .thanks{ color:#C9B6D1; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .thanks{ color:#C9B6D1; } }
.btn-out{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border:1.5px solid var(--interested); border-radius:6px; background:transparent; color:var(--interested); font:inherit; font-weight:700; font-size:14.5px; text-decoration:none; cursor:pointer; } .btn-out:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn-out:disabled{ opacity:.55; cursor:default; } .btn-out.danger{ border-color:var(--expired-c); color:var(--expired-c); }
.btn-pri{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border:1.5px solid transparent; border-radius:6px; background:var(--accent); color:var(--on-accent); font:inherit; font-weight:700; font-size:14.5px; text-decoration:none; cursor:pointer; } .btn-pri:hover{ background:var(--accent-ink); } .btn-pri:disabled{ opacity:.55; cursor:default; }
.btn-soon{ display:inline-flex; align-items:center; min-height:44px; padding:0 22px; border:1.5px dashed var(--ink-faint); border-radius:6px; color:var(--ink-faint); font-weight:700; font-size:14.5px; }
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.tool-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px; display:flex; flex-direction:column; min-width:0; }
.tool-card .hd{ display:flex; align-items:center; gap:14px; margin-bottom:14px; font-family:'Lora',Georgia,serif; font-size:23px; font-weight:600; line-height:1.2; }
.tool-card .mk{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:15px; flex:none; font-family:'Lora',Georgia,serif; }   /* Lora stops at 700 (v7 item 22) */
.mk.ci{ background:var(--accent-soft); color:var(--accent-ink); } .mk.qb{ background:var(--t-div-bg); color:var(--t-div); } .mk.cm{ background:var(--t-full-bg); color:var(--t-full); } .mk.rr{ background:var(--t-summer-bg); color:var(--t-summer); }   /* Resume Review (v7 item 27): Warm Sand */
.tool-card p{ color:var(--ink-dim); margin:0 0 18px; font-size:16px; line-height:1.55; } .tool-card .stats{ display:flex; flex-wrap:wrap; gap:6px 24px; font-size:14px; color:var(--ink-dim); margin:0 0 22px; min-height:20px; } .tool-card .stats b{ color:var(--ink); }
.tool-card .act{ margin-top:auto; }
/* Interview Coach (Yang, Nov 3, 2026, mock A): one full-width card under the four, text on the left and a small interview-room preview on the right */
.tool-card.wide{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:28px; }
.tool-card .tc-body{ flex:1 1 420px; min-width:0; display:flex; flex-direction:column; }
.mk.ic{ background:#ECE7F3; color:#5E4886; }   /* Heather, the Interviewing stage tint (palette v3) */
:root[data-theme="dark"] .mk.ic{ background:#3A2F4F; color:#ECE7F3; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mk.ic{ background:#3A2F4F; color:#ECE7F3; } }
.ic-stage{ flex:1 1 380px; min-width:0; background:#131B1E; border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:14px; color:#F9F9F9; }
.ic-stage .ic-eb{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8FD6C3; }
.ic-stage .ic-q{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:26px; line-height:1.15; }
.ic-stage .ic-row{ display:flex; align-items:center; gap:14px; }
.ic-stage .ic-rec{ flex:none; width:46px; height:46px; border-radius:50%; background:#6B2E3A; display:grid; place-items:center; } .ic-stage .ic-rec::after{ content:""; width:14px; height:14px; border-radius:50%; background:#FFFFFF; }
.ic-stage svg{ flex:1; min-width:0; height:40px; } .ic-stage .ic-time{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.ic-stage .ic-qs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; } .ic-stage .ic-qs span{ padding:3px 10px; border-radius:999px; background:#1C262A; color:#C9D6DA; }
.btn-soon{ display:inline-flex; align-items:center; min-height:44px; padding:0 22px; border-radius:6px; background:var(--surface-2); color:var(--ink-dim); font-weight:700; font-size:14.5px; cursor:not-allowed; }
/* a tool not open to this student yet (src/admin-only-tools.ts): a blank block of faint shapes, no name and no words (Yang, Nov 3, 2026) */
.tool-card.locked{ gap:14px; min-height:210px; }
.tool-card.locked.wide{ min-height:230px; }
.sk{ display:block; border-radius:6px; background:var(--surface-2); opacity:.55; }
.sk-top{ display:flex; align-items:center; gap:14px; } .sk-mk{ width:44px; height:44px; border-radius:11px; } .sk-t{ width:180px; height:20px; } .sk-l{ height:12px; opacity:.35; } .sk-l.w1{ width:90%; } .sk-l.w2{ width:66%; } .sk-b{ width:200px; height:44px; margin-top:auto; }
.sk-stage{ flex:1 1 380px; min-height:150px; border-radius:14px; opacity:.35; }
.suggest-line{ margin:22px 0 0; font-size:14px; color:var(--ink-faint); } .suggest-line button{ font:inherit; font-weight:700; color:var(--accent-ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; }
.dlg-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; display:grid; place-items:center; padding:16px; }
.dlg{ background:var(--surface); border-radius:14px; padding:24px; width:min(460px,100%); display:flex; flex-direction:column; gap:12px; box-shadow:0 12px 32px rgba(0,0,0,.3); } .dlg h2{ margin:0; font-family:'Lora',Georgia,serif; font-weight:600; font-size:20px; }
.dlg textarea{ min-height:110px; border:1px solid var(--border); border-radius:8px; padding:10px; font:inherit; background:var(--surface); color:var(--ink); } .dlg .row{ display:flex; gap:10px; justify-content:flex-end; } .dlg .msg{ font-size:13px; color:var(--ink-dim); }
@media (max-width:1099px){ .page-wrap{ padding-inline:20px; } }   /* the header's sides at this width */
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } .page-wrap{ padding:32px 16px 16px; } }
/* Pricing */
.pricing{ text-align:center; } .pricing h1{ margin-bottom:14px; } .pricing .lead{ max-width:560px; margin:0 auto 40px; }
.plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; text-align:left; }
.plan{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:10px; position:relative; min-width:0; } .plan.pro{ border:2px solid var(--accent); }
.plan .eb{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .plan.pro .eb{ color:var(--accent-ink); }
.plan .badge-top{ position:absolute; top:-14px; left:24px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
.plan .nm{ font-family:'Lora',Georgia,serif; font-size:40px; font-weight:600; line-height:1.1; } .plan .nm small{ font-family:'Karla',sans-serif; font-size:15px; font-weight:500; color:var(--ink-dim); margin-left:8px; }
.plan .sb{ font-size:13px; color:var(--ink-faint); } .plan .inc{ color:var(--accent-ink); font-weight:700; margin-top:10px; }
.plan ul{ margin:6px 0 20px; padding-left:20px; line-height:1.9; font-size:15px; flex:1; } .plan .act{ margin-top:auto; } .plan .act > *{ width:100%; box-sizing:border-box; }
.plan.dk{ grid-column:1 / -1; background:#131B1E; border-color:#131B1E; color:#F9F9F9; } .plan.dk .eb{ color:var(--mint); } .plan.dk .sb{ color:#8DA1A8; } .plan.dk ul{ color:#E3E3E3; columns:2; column-gap:40px; }
.plan.dk .btn-out{ color:#F9F9F9; border-color:rgba(249,249,245,.55); } .plan.dk .btn-out:hover{ border-color:#F9F9F9; background:rgba(255,255,255,.08); }
.pricing .fine{ font-size:13px; color:var(--ink-faint); margin:18px 0 0; text-align:center; }
.faq-band{ background:var(--surface); border-block:1px solid var(--border); margin-top:44px; } .faq{ max-width:760px; margin:0 auto; padding:64px 20px; font-family:'Karla',sans-serif; } .faq h2{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:34px; margin:0 0 24px; }
.faq details{ border-top:1px solid var(--border); } .faq details:last-of-type{ border-bottom:1px solid var(--border); } .faq summary{ list-style:none; cursor:pointer; padding:20px 4px; font-weight:800; font-size:15px; display:flex; justify-content:space-between; gap:16px; } .faq summary::after{ content:'+'; color:var(--accent); font-size:20px; line-height:1; } .faq details[open] summary::after{ content:'\2212'; }
.faq summary::-webkit-details-marker{ display:none; } .faq p{ margin:0 0 20px; padding:0 4px; color:var(--ink-dim); line-height:1.65; font-size:15px; }
@media (max-width:760px){ .plans{ grid-template-columns:1fr; } .plan.dk ul{ columns:1; } }
/* My plan */
.myplan-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px; max-width:520px; display:flex; flex-direction:column; gap:12px; }
.myplan-card .fine.foot{ text-align:center; }   /* the words at the bottom of every plan view are centered (Yang, 2026-10-15) */
.myplan-card .ok-line{ margin:0; color:var(--accent-ink); font-weight:500; font-size:14.5px; } .myplan-card .ok-line .tick{ font-weight:800; }
.myplan-card .eb{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.myplan-card .pr{ font-family:'Lora',Georgia,serif; font-size:44px; font-weight:600; } .myplan-card .pr small{ font-family:'Karla',sans-serif; font-size:16px; font-weight:500; color:var(--ink-dim); margin-left:8px; }
.myplan-card ul{ margin:8px 0 12px; padding-left:20px; line-height:2; font-size:16px; } .myplan-card .col{ display:flex; flex-direction:column; gap:12px; } .myplan-card .col > *{ width:100%; box-sizing:border-box; }
.myplan-card .fine{ font-size:13px; color:var(--ink-faint); margin:0; }
/* Not on the access list (web/not-listed.ts; Yang, Nov 5, 2026): the welcome block's look, with plain inline links; on a page without one, the same block under the header. */
.welcome.nl .nl-text{ max-width:600px; margin:12px auto 0; line-height:1.6; } .welcome.nl .nl-text b{ color:var(--ink); }
.welcome.nl a.nl-link{ display:inline; margin:0; padding:0; background:none; border-radius:0; color:var(--accent-ink); font-weight:700; text-decoration:underline; }
.nl-band{ max-width:720px; margin:28px auto; padding:32px 28px; text-align:center; color:var(--ink-dim); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-sizing:border-box; } .nl-band h2{ margin:0; color:var(--ink); font-family:'Lora',Georgia,serif; }
.welcome .seeplans{ margin:16px 0 0; font-size:13.5px; color:var(--ink-dim); } .welcome .seeplans a{ display:inline; margin:0; padding:0; background:none; color:var(--accent-ink); font-weight:700; text-decoration:underline; }
.page-wrap #app{ margin-top:28px; } .myplan-card .eb .badge{ background:#5C4562; color:#fff; font-size:11.5px; letter-spacing:.08em; padding:3px 10px; border-radius:999px; }

/* v7 items 12, 17, 21: Pricing copy C, taglines in italic Lora, IQ tags, the intro across 1000px, and the Accelerator card in two groups */
.pricing .lead{ max-width:1000px; font-size:18px; }
.plan .tag{ font-family:'Lora',Georgia,serif; font-style:italic; font-size:16px; color:var(--ink-dim); margin:-6px 0 0; } .plan.dk .tag{ color:#8DA1A8; }
.tool-tag{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--accent-ink); background:var(--accent-soft); border-radius:4px; padding:1px 6px; margin-left:4px; vertical-align:2px; } .plan.dk .tool-tag{ color:#0C1416; background:#ACD7CF; }
.plan li.inc{ list-style:none; margin:0 0 4px -20px; font-weight:700; color:var(--accent-ink); }
.plan .inc-h{ font-weight:700; color:var(--accent-ink); line-height:1.9; } .plan.dk .inc-h{ color:#8FD6C3; } .plan.dk ul{ flex:none; } .plan.dk li{ break-inside:avoid; }
.plan.dk .acc-prog{ border-top:1px solid rgba(249,249,249,.16); padding-top:16px; margin-bottom:20px; } .plan.dk .acc-prog ul{ margin:0; }

/* v7 items 19 and 20 on Subscription & Billing: the dark ACCELERATOR pill, and the Pro trial view */
.badge.acc-pill{ background:#131B1E; color:#fff; } .myplan-card .trial-h{ font-weight:700; margin-top:6px; } .myplan-card .keep{ border-top:1px solid var(--border); padding-top:18px; display:flex; flex-direction:column; gap:12px; }

/* v7 item 20: the trial countdown on My tools (colors from the approved mock-up: Warm Sand, then Oxblood; Faded Slate dashed outline; no fill) */
.page-top{ align-items:center; } .trialcd{ display:flex; align-items:center; gap:14px; border:1.5px dashed #7A9EA6; border-radius:12px; padding:9px 11px 9px 15px; max-width:100%; margin-left:auto; }
.trialcd .num{ font-family:'Lora',Georgia,serif; font-size:36px; font-weight:600; line-height:1; color:#131B1E; } .trialcd .txt{ display:flex; flex-direction:column; gap:5px; min-width:0; } .trialcd b{ font-size:14.5px; line-height:1.2; }
.trialcd .bars{ display:flex; gap:4px; } .trialcd .bars span{ display:block; width:22px; height:6px; border-radius:3px; } .trialcd .on-sand{ background:#C4A882; } .trialcd .off-sand{ background:#EEDFC6; } .trialcd .on-ox{ background:#6B2E3A; } .trialcd .off-ox{ background:#F2E4E6; }
.trialcd .when{ font-size:12.5px; line-height:1.2; color:var(--ink-dim); } .trialcd .btn-pri.sm{ min-height:36px; padding:0 14px; font-size:13.5px; flex:none; }
@media (max-width:760px){ .trialcd{ margin-left:0; } }   /* on a phone it sits under "Welcome back", above Suggest a tool */
/* v7 items 3, 14, 19 in Career Intelligence (kept here: style.css is near the 60 KB limit) */
/* v8 item 25: one tool in the header (Free, the trial, Pro, signed out): no Menu button below 1100px; the link shows as it is, on its own row on a phone. */
@media (max-width:1099px){ .ah-inner.one .ah-burger{ display:none; } .ah-inner.one .ah-nav{ display:block; width:auto; order:0; margin:0 auto; } .ah-inner.one .ah-nav ul{ flex-direction:row; padding:4px; background:#EEF3F4; } }
@media (max-width:760px){ .ah-inner.one .ah-nav{ width:100%; order:5; } .ah-inner.one .ah-right{ margin-left:auto; } }
/* v8 item 25: "Firm page →" in the black label for Accelerator students, a small version of "Interview Prep →". */
.role-sub .firm-page.bl{ display:inline-flex; align-items:center; margin-left:4px; min-height:22px; padding:0 8px; border-radius:5px; font-size:12px; background:#0A0D0F; color:#EEDFC6; border:1px solid #C4A882; vertical-align:1px; } .role-sub .firm-page.bl:hover{ color:#fff; border-color:#EEDFC6; text-decoration:none; }
/* Saved Searches (Yang, 2026-10-28): how to follow a firm that has no openings yet, a filled Tinted Frost box above the list. */
.ss-tip{ margin:0 0 14px; padding:14px 18px; background:var(--surface-2); border-radius:10px; font-size:14.5px; line-height:1.55; color:var(--ink-dim); } .ss-tip b{ color:var(--ink); } .ss-tip-h{ display:block; } .ss-tip p{ margin:6px 0 0; }   /* Yang's wording, 2026-10-28 */
.pro-pill.acc{ background:#131B1E; } .role-sub .firm-page{ color:var(--accent-ink); font-weight:700; text-decoration:none; white-space:nowrap; } .role-sub .firm-page:hover{ text-decoration:underline; }
.pro-line{ margin:8px 0 0; font-size:14px; } .pro-line a{ color:var(--accent-ink); font-weight:800; }

/* v7 item 11: Free accounts (body[data-free="1"], only with the v7 plans on). Favorites keep no status; + Favorite all and Excel export show the dashed lock look (the server answers with the plan that includes them). */
/* v9 (Yang, 2026-11-03): a Free account sees the status dropdown greyed out like the Excel button (dashed, no lock); a click shows the Pro message instead of opening it (web/app.ts renderShort). */
body[data-free="1"] .stage-select{ background:transparent; color:#7A9EA6; border:1.5px dashed #7A9EA6; cursor:pointer; }
body[data-free="1"] #favAllBtn, body[data-free="1"] #favAllBtnM, body[data-free="1"] #exportBtn{ background:transparent; color:#7A9EA6; border:1.5px dashed #7A9EA6; }
.fp-plan-note{ margin:10px 0 0; padding:10px 12px; border-radius:8px; background:#EEDFC6; color:#6A522E; font-size:13px; line-height:1.45; }

/* v7 item 11: the signed-out look-only preview's sign-up message (web/preview.ts), the prototype's bar at the bottom of the screen. */
.pv-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; max-width:calc(100% - 32px); background:#fff; color:#131B1E; border:1px solid #E3E3E3; border-radius:10px; box-shadow:0 8px 24px rgba(19,27,30,.14); padding:14px 20px; font-size:14.5px; line-height:1.4; }
.pv-bar .pv-start{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap; }
.pv-bar .pv-start:hover{ filter:brightness(1.08); }
body[data-preview="1"] .rowlink{ cursor:default; }
@media (max-width:640px){ .pv-bar{ left:16px; right:16px; transform:none; max-width:none; bottom:16px; } }

/* v7 item 10 (Yang, 2026-10-14): dark mode keeps the dark header, with the email in the account button readable; on phones the account button is 44px tall (the usual tap size). */
:root[data-theme="dark"] .ah-acct-btn{ color:var(--ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ah-acct-btn{ color:var(--ink); } }
@media (max-width:760px){ .ah-acct-btn{ min-height:44px; } }

/* v7 item 24 (Yang, 2026-10-14, option 1): the black label for Accelerator students, in black and Warm Sand. body[data-plan="accelerator"] is set by app-header.ts.
   The black ACCELERATOR pill (black with a Warm Sand edge) is the same everywhere: the header, beside page titles, on the Subscription & Billing card and on the Accelerator locks. */
:root{ --bl-black:#0A0D0F; --bl-ink:#131B1E; --bl-sand:#C4A882; --bl-sand-text:#EEDFC6; --bl-pill-text:#EEDFC6; }
.bl-pill{ display:inline-flex; align-items:center; font-family:'Karla',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.14em; line-height:1.2; padding:4px 11px; border-radius:999px; background:var(--bl-black); color:var(--bl-pill-text); border:1px solid var(--bl-sand); white-space:nowrap; }
.ah-inner > .bl-pill{ margin-left:-6px; flex:none; }
body[data-plan="accelerator"] .ah{ background:var(--bl-ink); border-bottom:1px solid rgba(196,168,130,.35); }
body[data-plan="accelerator"] .ah-brand img{ filter:invert(1) hue-rotate(180deg) brightness(1.15); mix-blend-mode:screen; }
body[data-plan="accelerator"] .ah-nav a, body[data-plan="accelerator"] .ah-nav .ah-soon, body[data-plan="accelerator"] .ah-main, body[data-plan="accelerator"] .ah-burger{ color:#C9D9DF; }
body[data-plan="accelerator"] .ah-nav a:hover, body[data-plan="accelerator"] .ah-main:hover, body[data-plan="accelerator"] .ah-nav a[aria-current="page"], body[data-plan="accelerator"] .ah-tag{ color:var(--bl-sand-text); }
/* the tools group on the ink: a faint glass group, the current tool black with a Warm Sand edge (option D3, 2026-10-22) */
body[data-plan="accelerator"] .ah-nav ul{ background:rgba(255,255,255,.06); } body[data-plan="accelerator"] .ah-nav a:hover{ background:rgba(255,255,255,.06); } body[data-plan="accelerator"] .ah-div{ background:rgba(196,168,130,.45); }
body[data-plan="accelerator"] .ah-nav a[aria-current="page"]{ background:var(--bl-black); box-shadow:inset 0 0 0 1px rgba(196,168,130,.55); }
body[data-plan="accelerator"] .ah-acct-btn{ background:rgba(255,255,255,.05); border-color:rgba(196,168,130,.45); color:var(--bl-pill-text); }
body[data-plan="accelerator"] .ah-avatar{ background:var(--bl-black); color:var(--bl-sand-text); border:1px solid var(--bl-sand); }
body[data-plan="accelerator"] .ah-burger{ background:transparent; border-color:rgba(196,168,130,.45); }
@media (max-width:1099px){ body[data-plan="accelerator"] .ah-nav{ background:var(--bl-ink); } }
.pro-pill.acc, .badge.acc-pill{ background:var(--bl-black)!important; color:var(--bl-pill-text)!important; border:1px solid var(--bl-sand); letter-spacing:.14em; }
.pro-pill.acc{ padding-left:calc(11px + .14em); }
/* Subscription & Billing: the Accelerator card in the black label */
.myplan-card.bl{ background:var(--bl-ink); color:#F9F9F9; border-color:var(--bl-sand); }
.myplan-card.bl .bl-line{ font-family:'Lora',Georgia,serif; font-style:italic; font-weight:500; font-size:15px; color:var(--bl-sand-text); }
.myplan-card.bl .pr{ color:#F9F9F9; } .myplan-card.bl .fine{ color:#8DA1A8; }
.myplan-card .inc-h{ font-weight:700; color:var(--accent-ink); margin-top:4px; } .myplan-card.bl .inc-h{ color:var(--bl-sand-text); }
.myplan-card .tool-tag{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--accent-ink); background:var(--accent-soft); border-radius:4px; padding:1px 6px; margin-left:4px; vertical-align:2px; }
.myplan-card.bl .tool-tag{ color:var(--bl-ink); background:var(--bl-sand-text); }
.myplan-card.bl .blsec{ border-top:1px solid rgba(196,168,130,.35); padding:12px 0 6px; margin:6px 0; }
.myplan-card.bl .prog{ border-top:1px solid rgba(196,168,130,.35); padding-top:12px; margin-top:6px; }
.myplan-card.bl .btn-out{ border-color:var(--bl-sand); color:var(--bl-pill-text); background:transparent; }
/* Pricing: the Accelerator card names the black label (seen by everyone) */
.plan.dk{ border-color:var(--bl-sand)!important; }
.plan.dk .eb, .plan.dk .inc-h{ color:var(--bl-sand-text)!important; }
.plan.dk .tool-tag{ color:var(--bl-ink)!important; background:var(--bl-sand-text)!important; }
.plan.dk .btn-out{ border-color:var(--bl-sand)!important; color:var(--bl-pill-text)!important; }
.plan.dk .eb .bl-pill{ margin-left:10px; vertical-align:2px; }
/* the black label section: full width, the same heading and two-column bullets as the sections under it (Yang, 2026-10-14) */
.plan.dk .bl-sec{ border-top:1px solid rgba(249,249,249,.16); padding:16px 0; margin:6px 0; } .plan.dk .bl-sec ul{ margin:0; }   /* below the Pro list (Yang, 2026-10-15) */
.pricing .fine .tool-tag{ margin:0 4px 0 0; }
@media (max-width:1099px){ .ah-inner > .bl-pill{ margin-left:0; } }
@media (max-width:560px){ .ah-inner > .bl-pill{ display:none; } }
body[data-plan="accelerator"] .ah-caret{ color:var(--bl-sand); }
/* The signed-out preview of Career Intelligence (item 11): a warm sand box after the title and the line under it, with the green Start with free button (Yang, 2026-10-14) */
.pv-tag{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:7px 8px 7px 12px; align-self:center; margin-right:auto; flex:0 1 auto; border-radius:10px; background:#EEDFC6; border:1px solid #C4A882; color:#6A522E; font-size:13px; font-weight:500; line-height:1.35; }
.pv-tag .pv-k{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6A522E; }
.pv-tag .pv-go{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:12.5px; text-decoration:none; white-space:nowrap; } .pv-tag .pv-go:hover{ filter:brightness(1.1); }
/* v7 item 30: Your morning email (/email-settings) */
.es-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; align-items:start; margin-top:8px; } .es-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.es-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 24px; }
.es-card h2{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:19px; margin:0; } .es-card .sub{ font-size:14px; color:var(--ink-dim); }
.es-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.es-sw{ position:relative; flex:none; width:44px; height:26px; border-radius:999px; border:0; background:#C9D2D5; cursor:pointer; padding:0; } .es-sw::after{ content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s; }
.es-sw.on{ background:var(--accent); } .es-sw.on::after{ left:21px; } .es-sw:disabled{ opacity:.5; cursor:not-allowed; }
.es-when{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } .es-opt{ font:inherit; font-weight:700; font-size:14px; padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; } .es-opt.on{ background:#131B1E; border-color:#131B1E; color:#EEDFC6; }
.es-note{ margin:10px 0 0; font-size:13px; color:var(--ink-dim); line-height:1.5; }
.es-grp{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6A522E; margin:16px 0 2px; }
.es-part{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 0; border-top:1px solid var(--border); } .es-grp + .es-part{ border-top:0; }
.es-part.moved{ background:linear-gradient(90deg, rgba(196,168,130,.16), transparent); border-radius:8px; } .es-part.locked .es-name b{ color:var(--ink-dim); }
.es-arr{ display:flex; flex-direction:column; gap:3px; } .es-arr button{ width:28px; height:22px; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--ink-dim); font-size:10px; cursor:pointer; } .es-arr button:disabled{ opacity:.35; cursor:default; }
.es-name{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:15px; } .es-src{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.es-pill{ font-size:9.5px; padding:3px 8px; } .es-pill.pro{ display:inline-flex; font-weight:800; letter-spacing:.08em; border-radius:999px; background:#5C4562; color:#fff; }
.es-soon{ font-size:11.5px; font-weight:700; background:var(--surface-2, #EBF2F4); color:var(--ink-dim); border-radius:999px; padding:3px 9px; }
.es-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .es-chip{ font:inherit; font-size:13px; padding:5px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; } .es-chip.on{ background:var(--accent-soft); border-color:#9ACFC2; color:var(--accent-ink); font-weight:700; }
.es-pv{ position:sticky; top:110px; background:var(--surface-2, #F4F6F6); border:1px solid var(--border); border-radius:14px; padding:16px; } .es-pv .es-grp{ margin-top:0; color:var(--ink-dim); }   /* neutral, not the sand of the group labels (Yang, 2026-10-14) */
.es-mail{ background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; color:#131B1E; } .es-mail-h{ background:#131B1E; border-bottom:2px solid #C4A882; color:#fff; padding:12px 14px; font-family:'Lora',Georgia,serif; font-weight:600; font-size:15px; }
.es-mail-h.std{ background:#0f2a26; border-bottom:0; }
.es-mail-s{ padding:10px 14px; border-top:1px solid #EEF1F2; font-size:12px; color:#7A9EA6; } .es-mail-s b{ display:block; font-family:'Lora',Georgia,serif; font-weight:600; font-size:14px; color:#131B1E; } .es-mail-s.none{ font-size:13.5px; }
.es-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; background:#131B1E; color:#F9F9F9; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700; } .es-toast[hidden]{ display:none; }
@media (max-width:860px){ .es-grid{ grid-template-columns:1fr; } .es-pv{ position:static; } }
/* v7 item 28: the morning desk on My tools, for Accelerator students (the black label: ink, Warm Sand) */
.desk{ background:#131B1E; color:#F9F9F9; border-radius:16px; padding:24px 28px; margin:0 0 22px; }
.desk[hidden]{ display:none; }
.desk-top{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-bottom:14px; } .desk h2{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:30px; line-height:1.2; margin:0; color:#F9F9F9; } @media (max-width:860px){ .desk h2{ font-size:25px; } }   /* the same size as the Interview Prep banner heading (Yang, 2026-10-15) */ .desk .asof{ font-size:13px; color:#8DA1A8; }
.desk-mk{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.desk-t{ border:1px solid rgba(249,249,249,.12); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; } .desk-t .n{ font-size:11.5px; line-height:1.35; color:#8DA1A8; margin-top:4px; } .desk-t .k{ font-size:12px; color:#8DA1A8; } .desk-t .v{ font-family:'Lora',Georgia,serif; font-size:22px; font-weight:600; } .desk-t .s{ font-size:12px; color:#EEDFC6; }
.desk-g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.desk-p{ border:1px solid rgba(249,249,249,.12); border-radius:10px; padding:14px 16px; min-width:0; } .desk-p h3{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#EEDFC6; margin:0 0 8px; }
.desk-r{ display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:6px 0; border-top:1px solid rgba(249,249,249,.08); color:#F9F9F9; text-decoration:none; } .desk-r:first-child{ border-top:0; } .desk-r .when{ color:#8DA1A8; white-space:nowrap; } a.desk-r:hover span:first-child{ color:#EEDFC6; }
.desk-none, .desk-sub{ margin:0; font-size:13.5px; color:#8DA1A8; line-height:1.5; } .desk-sub{ margin-top:2px; }
.desk-b{ display:inline-flex; align-items:center; margin-top:10px; min-height:36px; padding:0 12px; border-radius:6px; border:1px solid #C4A882; color:#EEDFC6; font-weight:700; font-size:13.5px; text-decoration:none; } .desk-b:hover{ color:#fff; border-color:#EEDFC6; }
@media (max-width:900px){ .desk-mk{ grid-template-columns:repeat(2,minmax(0,1fr)); } .desk-g{ grid-template-columns:1fr; } .desk{ padding:20px; } }
/* v7 item 32 (Yang, 2026-10-14, option F): the postings rows stay top-aligned, but Role through Posting start 7px lower, so their first line sits level with
   "+ Favorite" on the right, and the role name is one step larger. Option E (the same without the larger name) is the fallback: delete the .role-title, .role-sub and thead th lines. */
@media (min-width:861px){ .table-scroll:not([data-view=saved]) tbody td:not(:last-child){ padding-top:20px; } }   /* the table view only; phones keep their cards */
.table-scroll:not([data-view=saved]) .role-title{ font-size:14.5px; line-height:1.35; }
.table-scroll:not([data-view=saved]) .role-sub{ font-size:12px; margin-top:3px; }
.table-scroll:not([data-view=saved]) thead th{ font-size:12px; }   /* column headers one step up (Yang, 2026-10-14); at most 1px wider */
/* In the preview, Rows per page and the page numbers stay at the bottom right but grayed out: they cannot be used (a click shows the sign-up message) (Yang, 2026-10-14) */
body[data-preview="1"] .pagebar .rpp, body[data-preview="1"] .pagebar .pagenav{ opacity:.45; filter:grayscale(1); }
body[data-preview="1"] .pagebar select, body[data-preview="1"] .pagebar button{ cursor:not-allowed; }

/* Location: Remote and Not listed under the scrolling list of cities (Yang, 2026-10-14). */
.checkrow + .loc-extras, .scroll-list + .loc-extras{ margin-top:4px; padding-top:4px; border-top:1px dashed var(--border); }

/* The owner's ADMIN bar (web/app-header.ts, src/admin-view.ts; Yang, 2026-10-14): the prototype's sand bar, on the real site, for the owner only. */
.adminbar{ background:#EEDFC6; color:#6A522E; border-bottom:1px solid #C4A882; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:8px 16px; font:500 12.5px 'Karla',-apple-system,"Segoe UI",Arial,sans-serif; }
@media (min-width:900px){ .adminbar{ position:sticky; top:0; z-index:41; } .ah{ top:var(--adminbar-h,0px); } }   /* frozen like the header; on a phone the bar scrolls away so it does not use up the screen */
.adminbar b{ font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.adminbar .pg{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.adminbar .seg{ display:inline-flex; flex-wrap:wrap; gap:3px; background:#fff; border:1px solid #C4A882; border-radius:8px; padding:3px; }
.adminbar .seg a, .adminbar .seg button{ border:0; background:transparent; color:#41626E; font:700 12px 'Karla',sans-serif; padding:5px 9px; border-radius:6px; cursor:pointer; text-decoration:none; }
.adminbar .seg .on{ background:#131B1E; color:#F9F9F9; }
.adminbar .seg .soon{ color:#5A777F; font:700 12px 'Karla',sans-serif; padding:5px 9px; cursor:default; }   /* a tool with no page yet (Resume Review), as in the header */
.adminbar .seg a:focus-visible, .adminbar .seg button:focus-visible{ outline:2px solid #0E6A58; outline-offset:2px; }

/* v7 item 38: the maintenance notice everyone but the owner sees (web/app-header.ts). Palette v2 negative-status tint, no line under it (Yang, 2026-11-02). */
.maint-note{ background:#F2E4E6; color:#6B2E3A; padding:12px 20px; text-align:center; font:600 15px 'Karla',-apple-system,"Segoe UI",Arial,sans-serif; }

/* Export to Excel is Pro and Accelerator only, not the trial (Yang, 2026-10-15): the same dashed lock look on the trial (the server answers the same). */
body[data-trial="1"] #exportBtn, body[data-trial="1"] .fi-export{ background:transparent; color:#7A9EA6; border:1.5px dashed #7A9EA6; }

/* v8 item 3: the markets strip, a thin black bar inside the sticky header on Firm Insights (Accelerator only, drawn only when there are numbers). Warm Sand for rises, a light Oxblood for falls; no green, in keeping with the black label. */
.mstrip{ background:var(--bl-black); border-top:1px solid rgba(196,168,130,.55); color:var(--bl-pill-text); font:500 13px 'Karla',-apple-system,"Segoe UI",Arial,sans-serif; }
.mstrip-in{ margin:0 auto; padding:7px 40px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (min-width:1440px){ .mstrip-in{ padding:7px 90px; } }
.mstrip .ms-lab{ font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--bl-sand); }
.mstrip b{ font-weight:700; color:#F9F9F9; }
.mstrip .up{ color:var(--bl-sand); } .mstrip .dn{ color:#F2E4E6; background:#46222A; padding:0 5px; border-radius:4px; }   /* falls on v2's dark negative chip (Yang, 2026-11-02, option B) */
.mstrip .ms-asof{ color:#8DA1A8; }
.mstrip .ms-go{ margin-left:auto; color:var(--bl-sand-text); font-weight:700; text-decoration:none; }
.mstrip .ms-go:hover{ text-decoration:underline; } .mstrip .ms-go:focus-visible{ outline:2px solid var(--bl-sand); outline-offset:3px; }
@media (max-width:1099px){ .mstrip-in{ padding:7px 20px; flex-wrap:nowrap; overflow-x:auto; } .mstrip .ms-go{ margin-left:0; } }   /* one line that scrolls sideways on a phone, so the sticky header stays short */

/* v8 item 4: the networking pack (web/reach-out.ts). The Reach out button is black label; for Free, Pro and the trial it shows a lock. The panel is ink with a Warm Sand line. */
.ro-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 12px; border-radius:7px; background:#0A0D0F; border:1px solid #C4A882; color:#EEDFC6; font:700 13px 'Karla',-apple-system,"Segoe UI",Arial,sans-serif; white-space:nowrap; cursor:pointer; }
.ro-btn:hover{ background:#131B1E; } .ro-btn:focus-visible{ outline:2px solid #C4A882; outline-offset:2px; } .ro-btn .ro-caret{ font-size:10px; } .ro-btn[aria-expanded="true"] .ro-caret{ transform:rotate(180deg); }
.ro-btn .ro-lock{ display:none; } body:not([data-plan="accelerator"]) .ro-btn .ro-lock{ display:inline; }
.fav-row .ro-btn{ margin-left:auto; }
tr.ro-tr > td{ padding:0 14px 16px; border-top:0; background:transparent; }
.ro-panel{ background:#131B1E; color:#F9F9F9; border-top:2px solid #C4A882; border-radius:14px; padding:18px 20px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:16px 26px; text-align:left; white-space:normal; font-family:'Karla',-apple-system,"Segoe UI",Arial,sans-serif; margin-top:6px; }
.ro-eb{ grid-column:1/-1; display:flex; align-items:baseline; gap:6px 14px; } .ro-eb > span:not(.ro-pill){ flex:1 1 auto; min-width:0; }
.ro-eb > b{ font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#C4A882; } .ro-eb > span{ font-size:13px; color:#B9C8CC; }
.ro-x{ margin-left:auto; background:none; border:0; color:#8DA1A8; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; } .ro-x:hover{ color:#F9F9F9; } .ro-x:focus-visible{ outline:2px solid #C4A882; outline-offset:2px; }
.ro-panel h4{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:17px; margin:0 0 8px; color:#F9F9F9; }
.ro-list{ display:flex; flex-direction:column; gap:8px; }
.ro-srch{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(249,249,249,.14); background:rgba(249,249,249,.04); border-radius:10px; padding:10px 12px; color:#F9F9F9; text-decoration:none; }
.ro-srch:hover{ border-color:#C4A882; } .ro-srch:focus-visible{ outline:2px solid #C4A882; outline-offset:2px; }
.ro-srch .t{ font-size:13.5px; min-width:0; } .ro-srch small{ display:block; font-size:11.5px; color:#8DA1A8; } .ro-srch .go{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:#EEDFC6; white-space:nowrap; }
.ro-srch.off{ opacity:.6; cursor:default; } .ro-srch.off:hover{ border-color:rgba(249,249,249,.14); }
.ro-school{ font-size:13px; color:#B9C8CC; margin:10px 0 0; } .ro-school b{ color:#F9F9F9; } .ro-from{ color:#8DA1A8; }
.ro-chg{ background:none; border:0; padding:0; color:#EEDFC6; font:700 13px inherit; text-decoration:underline; cursor:pointer; } .ro-chg:focus-visible{ outline:2px solid #C4A882; outline-offset:2px; }
.ro-foot{ font-size:12px; color:#8DA1A8; margin:6px 0 0; }
.ro-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.ro-tabs button{ border:1px solid rgba(196,168,130,.45); background:transparent; color:#C9D9DF; border-radius:99px; padding:5px 12px; font:700 12.5px 'Karla',-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer; }
.ro-tabs button.on{ background:#C4A882; color:#0A0D0F; border-color:#C4A882; } .ro-tabs button:focus-visible{ outline:2px solid #C4A882; outline-offset:2px; }
.ro-msg{ background:#fff; color:#131B1E; border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.55; }
.ro-msg p{ margin:0 0 9px; white-space:pre-line; } .ro-msg p:last-child{ margin-bottom:0; }
.ro-subj{ font-size:12.5px; color:#41626E; border-bottom:1px solid #E3E3E3; padding-bottom:8px; margin-bottom:10px; }
.ro-fill{ background:#EEDFC6; border-bottom:1.5px solid #C4A882; padding:0 2px; border-radius:2px; }
.ro-blank{ background:#EEF1F2; border-bottom:1.5px dashed #7A9EA6; padding:0 3px; border-radius:2px; color:#41626E; }
.ro-msgfoot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.ro-copy{ min-height:36px; padding:0 15px; border-radius:7px; background:#138D75; border:0; color:#fff; font:700 13.5px 'Karla',-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer; } .ro-copy:focus-visible{ outline:2px solid #C4A882; outline-offset:2px; }
.ro-count{ font-size:12px; color:#B9C8CC; }
.ro-over .ro-count{ color:#C4A882; font-weight:700; }   /* over LinkedIn's limit: brand Warm Sand */
.ro-overnote{ flex-basis:100%; margin:0; padding:8px 11px; border-left:3px solid #C4A882; border-radius:4px; background:rgba(196,168,130,.12); color:#EEDFC6; font-size:12.5px; line-height:1.45; }
.ro-legend{ font-size:12px; color:#B9C8CC; margin:10px 0 0; } .ro-legend .ro-fill, .ro-legend .ro-blank{ font-size:12px; color:#131B1E; padding:1px 6px; }
.ro-pinned{ position:sticky; left:14px; box-sizing:border-box; }
.ro-locked{ grid-template-columns:1fr; gap:8px; } .ro-pill{ font-size:10.5px !important; font-weight:800; letter-spacing:.12em; color:#EEDFC6 !important; background:#0A0D0F; border:1px solid #C4A882; border-radius:99px; padding:2px 9px; }
.ro-why{ margin:0; font-size:14px; color:#E3E3E3; max-width:720px; } .ro-learn{ color:#EEDFC6; font-weight:700; font-size:14px; }
@media (max-width:860px){ .ro-panel{ grid-template-columns:1fr; padding:16px; } tr.ro-tr > td{ padding:0 0 14px; } }
.fp-from{ color:var(--ink-faint, #7A9EA6); font-weight:400; }

/* "More locations" fold under the Location list (Yang, Oct 21, 2026). */
.loc-more{ margin-top:4px; padding-top:4px; border-top:1px dashed var(--border); }
/* Same type as the Location rows above it (13.5px, regular) and the same gray count (Yang, Oct 22, 2026). */
.loc-more-head{ display:flex; align-items:center; gap:12px; width:100%; padding:5px 7px; border-radius:6px; background:none; border:0; font-family:inherit; font-size:13.5px; font-weight:400; color:var(--ink); cursor:pointer; text-align:left; }
.loc-more-head:hover{ background:var(--surface-2); }
.loc-more-head .loc-more-title{ flex:1; }
.loc-more-head .count{ color:var(--ink-faint); font-size:12px; }
/* The arrow sits where the rows' checkboxes are, so "More locations" starts in the same column as "Remote/Virtual" (Oct 22, 2026). */
.loc-more-chev{ display:inline-block; width:15px; margin-left:4px; text-align:center; font-size:20px; line-height:1; transition:transform .15s; }   /* 20px: about a checkbox's height (Yang, Oct 22, 2026) */
.loc-more.open .loc-more-chev{ transform:rotate(90deg); }
.loc-more-list{ display:none; margin-top:4px; }
.loc-more.open .loc-more-list{ display:block; }
/* v8 item 14: Your emails (/alerts/manage, opened from the "New at your firms" email; no sign-in) */
.em-body{ margin:0; background:var(--bg); }
.em-top{ background:#0f2a26; color:#fff; } .em-top-in{ max-width:720px; margin:0 auto; padding-block:16px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); display:flex; justify-content:space-between; align-items:center; gap:12px; box-sizing:border-box; }
.em-brand{ font-family:'Lora',Georgia,serif; font-weight:700; font-size:18px; } .em-site{ font-size:13px; color:#8fd6c3; }
.page-wrap.em-wrap{ max-width:720px; padding-top:36px; } .em-list{ display:grid; gap:14px; margin-top:22px; }
.em-list .es-row{ align-items:flex-start; } .em-list form{ margin:0; } .em-list .es-note{ margin:0; }
.em-more{ display:inline-block; margin-top:8px; font-size:14px; font-weight:700; color:var(--accent); text-decoration:none; } .em-more:hover{ text-decoration:underline; }
.em-all{ background:none; border:1px solid var(--border); border-radius:999px; padding:8px 16px; font:700 14px 'Karla',Arial,sans-serif; color:var(--ink-dim); cursor:pointer; } .em-all:hover{ color:var(--ink); border-color:var(--ink-dim); }
@media (max-width:600px){ .page-wrap.em-wrap{ padding:24px 16px 24px; } }
/* v8 items 15, 16 and 20 (src/codes.ts): the /join code box, My plan's extra days, code box and Invite friends, and the pricing page's club band.
   Green fill for good news (Yang, 2026-10-26: "green as that symbolizes the go ahead"); pink for a code that was not applied. */
.page-wrap #app:has(> .myplan-card + .myplan-card){ display:flex; flex-direction:column; gap:20px; }
.codebox{ display:flex; gap:8px; } .codebox input{ flex:1; min-width:0; font:inherit; font-size:16px; font-weight:700; letter-spacing:.06em; padding:10px 12px; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:var(--surface); }
.codebox input.plain{ font-weight:500; letter-spacing:0; font-size:14.5px; }
.code-lbl{ font-weight:700; font-size:14.5px; color:var(--ink); }
.code-ok, .code-note{ background:var(--accent-soft); color:var(--ink); border-radius:10px; padding:12px 14px; font-size:14.5px; line-height:1.55; }
.code-err{ background:var(--expired-soft); color:var(--expired-c); border-radius:8px; padding:12px 14px; font-size:14.5px; line-height:1.55; }
.myplan-card .lead-in{ font-size:14px; color:var(--ink-dim); }
.myplan-card table{ min-width:0; width:100%; border-collapse:collapse; background:transparent; font-size:14.5px; }
.myplan-card table td{ padding:9px 0; border-top:1px solid var(--border); vertical-align:top; color:var(--ink); }
.myplan-card table td span{ display:block; font-size:13px; color:var(--ink-faint); }
.myplan-card .xd td:last-child{ text-align:right; font-weight:700; white-space:nowrap; } .myplan-card .xd tr.tot td{ border-top:2px solid var(--ink); font-weight:800; }
.myplan-card .fr td:first-child{ width:62px; color:var(--ink-dim); font-weight:700; } .myplan-card .fr .plus{ text-align:right; font-weight:700; color:var(--accent-ink); white-space:nowrap; }
.myplan-card.inv h2{ font-family:'Lora',Georgia,serif; font-size:21px; line-height:1.3; font-weight:600; margin:0; }
.myplan-card .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.myplan-card .stats div{ background:var(--accent-soft); border-radius:10px; padding:10px 6px; } .myplan-card .stats b{ display:block; font-family:'Lora',Georgia,serif; font-size:24px; color:var(--ink); } .myplan-card .stats span{ font-size:13px; color:var(--ink-dim); }
.myplan-card .bar{ height:8px; background:var(--border); border-radius:4px; overflow:hidden; } .myplan-card .bar i{ display:block; height:100%; background:var(--accent); }
/* Sign-in email card (web/my-plan.ts, mock-up gap-B-change-email.png; Yang, Nov 5, 2026): Emerald buttons, the positive green box when done, the Tinted Frost box for the Kajabi line. */
.myplan-card.em h2{ font-family:'Lora',Georgia,serif; font-size:21px; line-height:1.3; font-weight:600; margin:0; color:var(--ink); }
.myplan-card.em form{ display:flex; flex-direction:column; gap:12px; } .myplan-card.em > .btn-out{ align-self:flex-start; }
.myplan-card .em-lbl{ font-size:13.5px; color:var(--ink-dim); } .myplan-card .em-who{ font-size:16px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.myplan-card .em-p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-dim); overflow-wrap:anywhere; }
.myplan-card .em-in{ font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:var(--surface); width:100%; box-sizing:border-box; }
.myplan-card .em-digits{ display:flex; gap:8px; } .myplan-card .em-digits input{ width:44px; height:48px; padding:0; text-align:center; font:inherit; font-size:20px; font-weight:700; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:var(--surface); box-sizing:border-box; }
.myplan-card .em-done{ background:#E3F1EE; color:#0E6A58; border:1px solid #9ACFC2; border-radius:10px; padding:12px 14px; font-size:14.5px; line-height:1.55; overflow-wrap:anywhere; }
.myplan-card .em-info{ background:#EBF2F4; color:#2E4A52; border-radius:10px; padding:12px 14px; font-size:14px; line-height:1.55; } .myplan-card .em-info b{ color:#131B1E; }
.myplan-card .em-more{ all:unset; cursor:pointer; color:var(--accent-ink); font-weight:700; text-decoration:underline; } .myplan-card .em-more:focus-visible{ outline:2px solid #0E6A58; outline-offset:2px; border-radius:3px; } .myplan-card .em-more:disabled{ opacity:.55; cursor:default; }
.page-wrap.join{ max-width:560px; } .join-card .join-h{ font-size:28px; margin:0; } .join-card .btn-pri{ width:100%; box-sizing:border-box; }
.pricing .club{ text-align:left; margin:24px 0 0; background:var(--accent-soft); border-radius:16px; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pricing .club h2{ font-family:'Lora',Georgia,serif; font-size:22px; font-weight:600; margin:0 0 4px; color:var(--ink); } .pricing .club p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-dim); max-width:720px; } .pricing .club .btn-out{ white-space:nowrap; }

/* My Plan (Yang, 2026-10-27): three columns, so the code cards need no scroll: the plan card, then Invite friends, then Your extra days with Have a code? under it.
   Below 1100px one column: the plan card, Invite friends, Your extra days, Have a code?. */
.page-wrap #app.mp-two{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:24px; align-items:start; }
.page-wrap #app.mp-two .mp-main{ display:flex; flex-direction:column; gap:20px; min-width:0; }   /* the plan card, then Sign-in email (Yang, Nov 5, 2026) */
.page-wrap #app.mp-two .mp-side{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; gap:20px 24px; align-items:start; min-width:0; }
.page-wrap #app.mp-two .mp-side > .inv{ grid-row:1 / span 2; }
.page-wrap #app.mp-two .mp-side > .myplan-card{ max-width:none; min-width:0; }
.page-wrap #app.mp-two .mp-side:has(> :only-child){ grid-template-columns:minmax(0,420px); }   /* Invite friends alone (no extra days, the code box closed): one card wide, not the whole side */
@media (min-width:1100px) and (max-width:1279px){ .page-wrap #app.mp-two .mp-side{ grid-template-columns:minmax(0,460px); grid-template-rows:none; } .page-wrap #app.mp-two .mp-side > .inv{ grid-row:auto; } }   /* too narrow for two side columns: the side cards stack */
@media (max-width:1099px){ .page-wrap #app.mp-two{ display:flex; flex-direction:column; gap:20px; } .page-wrap #app.mp-two .mp-side{ display:contents; } }
/* My Tools (Yang, 2026-10-27): the invite line, a filled Tinted Frost box like the middle box of the "friend joined" email. Theme colors, so it stays readable in dark mode
   (--surface-2 is Tinted Frost #EBF2F4 in light). */
.home-inv{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:12px 0 0; padding:10px 16px; background:var(--surface-2); border-radius:8px; font-size:15px; color:var(--ink); width:fit-content; max-width:100%; box-sizing:border-box; }
.home-inv .k{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-right:4px; }
.home-inv b{ letter-spacing:.04em; } .home-inv a{ color:var(--accent-ink); font-weight:700; text-decoration:none; } .home-inv-copy{ font:inherit; font-size:13.5px; font-weight:700; padding:4px 12px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--ink); cursor:pointer; }
.home-inv-x{ margin-left:6px; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink-dim); font-size:20px; line-height:28px; cursor:pointer; } .home-inv-x:hover{ background:var(--surface); color:var(--ink); }

/* Division definitions (web/division-help.ts): the pop-up over the tool and the page /divisions. Colors from the palette: green callout, red-tint note. */
.div-what{ all:unset; cursor:pointer; align-self:flex-start; font-size:12px; font-weight:700; color:#0E6A58; text-decoration:underline; margin:-2px 0 4px; } .div-what:focus-visible{ outline:2px solid #0E6A58; outline-offset:2px; border-radius:3px; }
.dv-title{ font-family:'Lora',Georgia,serif; font-weight:600; font-size:28px; margin:0 0 6px; color:#131B1E; } .dv-intro{ margin:0 0 14px; color:#41626E; font-size:14.5px; }
.dv-covers{ background:#E3F1EE; border:1px solid #9ACFC2; border-radius:10px; padding:14px 18px; font-size:14px; line-height:1.5; margin-bottom:16px; color:#131B1E; } .dv-covers b{ color:#0E6A58; }
.dv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .dv-card{ background:#fff; border:1px solid #E3E3E3; border-radius:10px; padding:11px 14px; }
.dv-card h3{ margin:0 0 2px; font-size:14px; font-weight:800; color:#131B1E; } .dv-card p{ margin:0; font-size:13px; line-height:1.4; color:#41626E; }
.dv-note{ background:#F2E4E6; border-radius:10px; padding:14px 18px; font-size:13px; line-height:1.55; margin-top:16px; color:#131B1E; } .dv-note b{ color:#6B2E3A; }
.dv-page{ max-width:940px; } .dv-back{ display:inline-block; margin-bottom:14px; color:#0E6A58; font-weight:700; font-size:13.5px; text-decoration:none; }
.dv-scrim{ position:fixed; inset:0; background:rgba(19,27,30,.55); z-index:300; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:28px 16px; }
.dv-modal{ background:#FAFAFA; border-radius:14px; max-width:880px; width:100%; padding:26px 30px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.35); font-family:'Karla',-apple-system,"Segoe UI",Arial,sans-serif; color:#131B1E; box-sizing:border-box; }
.dv-x{ all:unset; position:absolute; right:16px; top:12px; font-size:26px; line-height:1; color:#41626E; cursor:pointer; padding:6px; } .dv-x:focus-visible{ outline:2px solid #0E6A58; border-radius:4px; }
body.dv-open{ overflow:hidden; }
@media (max-width:700px){ .dv-grid{ grid-template-columns:1fr; } .dv-modal{ padding:22px 18px; } }

/* v9 item 14: the name boxes on /start and /your-name. */
.nm-form{ display:flex; flex-direction:column; gap:14px; margin:14px 0 0; }
.nm-row{ display:flex; gap:12px; } .nm-row .nm-field{ flex:1; min-width:0; }
.nm-field label{ display:block; font-weight:700; font-size:13.5px; margin:0 0 6px; }
.nm-field input{ display:block; width:100%; box-sizing:border-box; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:15px; }
.nm-field input:focus{ outline:2px solid var(--accent); outline-offset:1px; background:var(--surface); }
.nm-msg{ color:#6B2E3A; font-size:13.5px; font-weight:600; min-height:0; } .nm-msg:empty{ display:none; }
.nm-note{ margin:0; padding:10px 12px; border-radius:8px; background:var(--surface-2); color:var(--ink-dim); font-size:13px; line-height:1.45; }
.nm-form .btn-pri{ width:100%; box-sizing:border-box; } .nm-form .btn-pri:disabled{ opacity:.5; cursor:default; }
.nm-skip{ text-align:center; font-size:13.5px; color:var(--ink-dim); }
.nm-or{ display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-size:11px; letter-spacing:.08em; margin:16px 0; } .nm-or:before, .nm-or:after{ content:""; flex:1; border-top:1px solid var(--border); }
.nm-google{ display:flex; text-align:center; box-sizing:border-box; width:100%; text-decoration:none; }
@media (max-width:480px){ .nm-row{ flex-direction:column; gap:14px; } }