/* HireQuanta design layer (16 Oct 2026, the owner's "next level" brief). Loaded last on every page: one type family, one set
   of colour tokens, one header row, and one look for buttons, fields and cards. Page styles keep their layout; this layer
   gives them a common finish. Colours meet WCAG AA in light and dark (checked by second-brief-brand-check.cjs and the
   phase 8 axe sweep). */

/* DM Sans is the app's own font (also used for application resumes), served from this server. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/resume-fonts/DMSans-400.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/resume-fonts/DMSans-500.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/resume-fonts/DMSans-600.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/resume-fonts/DMSans-700.ttf') format('truetype')}

:root{
 --font:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 --bg:#ffffff;--surface:#ffffff;--soft:#f5f7fb;--text:#101a2e;--muted:#566176;--line:#e3e8f1;--line-strong:#cfd7e6;
 --primary:#2457e6;--primary-hover:#1b46c4;--primary-ink:#2457e6;--tint:#eef3ff;--navy:#071229;--focus:#2457e6;
 --radius-sm:8px;--radius:12px;--radius-lg:18px;
 --shadow-sm:0 1px 2px rgba(16,26,46,.05),0 1px 1px rgba(16,26,46,.03);
 --shadow:0 2px 6px rgba(16,26,46,.05),0 10px 28px rgba(16,26,46,.07);
 --header-h:64px;
}
body.product.dark,body.dark{
 --bg:#0b1220;--surface:#111a2b;--soft:#162136;--text:#e9eef8;--muted:#a7b1c6;--line:#24314a;--line-strong:#33425f;
 --primary:#2457e6;--primary-hover:#3a6cf0;--primary-ink:#a2b8f7;--tint:#16233f;--focus:#a2b8f7;
 --shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow:0 2px 6px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
}

/* Type: one family; headings tight and confident; emphasis by colour, not a second (serif, italic) face. */
body.product,body.product button,body.product input,body.product select,body.product textarea{font-family:var(--font)}
body.product{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px}
body.product h1{font-weight:700;letter-spacing:-.025em;line-height:1.08}
body.product h2{font-weight:700;letter-spacing:-.018em}
body.product h3{font-weight:600;letter-spacing:-.01em}
body.product h1 em,body.product h2 em,body.product .coral,body.product .hero h1 em{font-family:var(--font);font-style:normal;color:var(--primary-ink)}
body.product .eyebrow{font-weight:700;letter-spacing:.09em;color:var(--primary-ink)}
body.product .practice-band .eyebrow{color:#a2b8f7}  /* on the navy band */
body.product .muted,body.product .small{color:var(--muted)}

/* The header: one row. Logo, the two sections and More, then search, My resumes, the account and the theme. */
body.product header.header{position:sticky;top:0;z-index:40;height:var(--header-h);min-height:var(--header-h);padding:0 28px;gap:20px;
 background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
 border-bottom:1px solid var(--line);box-shadow:none}
body.product header.header .logo{flex:none}
body.product header.header>nav.nav{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;min-height:0;height:auto;overflow:visible;flex:0 1 auto}
body.product header.header>nav.nav .nav-left{display:flex;gap:4px;align-items:center}
body.product header.header>nav.nav a,body.product header.header>nav.nav .more-tools>summary{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;
 font-size:15px;font-weight:600;color:var(--text);text-decoration:none;border:0;background:none;white-space:nowrap;transition:background .15s,color .15s}
body.product header.header>nav.nav a:hover,body.product header.header>nav.nav .more-tools>summary:hover{background:var(--soft)}
body.product header.header>nav.nav a[data-current-family=true]{background:var(--tint);color:var(--primary-ink)}
body.product header.header>nav.nav a[data-current-family=true]::after{display:none}
body.product header.header>nav.nav .more-tools>summary{list-style:none;cursor:pointer;gap:6px;color:var(--muted)}
body.product header.header>nav.nav .more-tools>summary::-webkit-details-marker{display:none}
body.product header.header>nav.nav .more-tools>summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:4px}
body.product header.header>nav.nav .more-tools{position:relative}
body.product header.header>nav.nav .more-tools-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;padding:8px;display:grid;gap:2px;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);z-index:50}
body.product header.header>nav.nav .more-tools-menu a{height:auto;padding:9px 12px;border-radius:8px;font-weight:500;font-size:14.5px}
body.product header.header .searchbox{margin-left:auto;flex:0 1 300px;min-width:180px;height:40px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
body.product header.header .searchbox-button{font-size:14px;color:var(--muted)}
body.product header.header .workspace-link{font-weight:600;font-size:15px;color:var(--text)}
body.product header.header .signin{height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;background:var(--navy);color:#fff}
body.dark.product header.header .signin{background:var(--primary)}
body.product header.header .theme-control{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
body.product .site-notice{padding:6px 16px;font-size:13px;line-height:1.4;text-align:center;background:var(--soft);color:var(--muted);border-bottom:1px solid var(--line)}
@media(max-width:1080px){body.product header.header .searchbox{display:none}body.product header.header .mobile-search{display:inline-flex}}
@media(max-width:760px){body.product header.header{padding:0 16px;gap:10px}body.product header.header>nav.nav{display:none}body.product header.header .workspace-link{display:none}}

/* Buttons: one height, one radius, a clear primary. */
body.product .primary,body.product a.primary,body.product button.primary{min-height:44px;padding:0 20px;border-radius:var(--radius);font-weight:600;font-size:15px;letter-spacing:0;
 background:var(--primary);color:#fff;border:1px solid var(--primary);box-shadow:0 1px 2px rgba(36,87,230,.25);transition:background .15s,box-shadow .15s,transform .05s}
body.product .primary:hover:not(:disabled),body.product a.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 4px 14px rgba(36,87,230,.28)}
body.product .primary:active:not(:disabled){transform:translateY(1px)}
body.product .primary:disabled,body.product button.primary[disabled]{opacity:.55;box-shadow:none;cursor:not-allowed}
body.product .secondary,body.product a.secondary,body.product button.secondary{min-height:44px;padding:0 18px;border-radius:var(--radius);font-weight:600;background:var(--surface);color:var(--text);border:1px solid var(--line-strong)}
body.product .secondary:hover:not(:disabled){border-color:var(--primary);color:var(--primary-ink)}
body.product .subtle,body.product button.subtle{border-radius:var(--radius);font-weight:600}
body.product :focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px}

/* Fields: taller, rounded, a calm focus. */
body.product input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.product select,body.product textarea{border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
body.product input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,body.product select:focus,body.product textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent);outline:none}
body.product input[type=checkbox],body.product input[type=radio]{accent-color:var(--primary)}

/* Cards and panels. */
body.product .panel{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm)}
body.product .page-title h1{font-size:clamp(2rem,3.6vw,3.1rem)}
/* A title written as eyebrow, heading and line reads top to bottom, not as three columns. */
body.product .page-title:has(>.eyebrow:first-child){display:block}
body.product .page-title:has(>.eyebrow:first-child)>p:not(.eyebrow){max-width:68ch}
body.product .breadcrumb{font-size:13.5px;color:var(--muted);text-transform:none}

/* Footer: quiet, one family, two rows. */
body.product footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 18px;max-width:1240px;margin:56px auto 0;padding:28px 28px 36px;border-top:1px solid var(--line);background:var(--bg)}
body.product footer>span{font-family:var(--font);font-style:normal;font-weight:500;color:var(--muted);font-size:15px}
body.product footer>p{margin:0;justify-self:end;font-weight:600;font-size:14px;color:var(--text)}
body.product footer>small{grid-column:1/-1;color:var(--muted);font-size:13px}
body.product footer .care-footer{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-start;margin-top:10px;padding:0}
body.product footer .care-footer a{color:var(--muted);font-size:14px;min-height:0}
body.product footer .care-footer a:hover{color:var(--primary-ink)}
@media(max-width:760px){body.product footer{grid-template-columns:1fr;padding-bottom:96px}body.product footer>p{justify-self:start}body.product footer .care-footer{gap:0 18px;margin-top:4px}body.product footer .care-footer a{min-height:44px;display:inline-flex;align-items:center}}

@media(prefers-reduced-motion:reduce){body.product *{transition:none!important}}

/* Phone tab bar: three equal tabs, an icon above each name. */
@media(max-width:760px){
 body.product .mobile-nav{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0;height:auto;min-height:64px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(16,26,46,.06)}
 body.product .mobile-nav>a,body.product .mobile-nav .mobile-more>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 6px;border-radius:12px;
  font-size:11.5px;font-weight:600;line-height:1.15;text-align:center;color:var(--muted);background:none;text-decoration:none;list-style:none}
 body.product .mobile-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 body.product .mobile-nav .mobile-more>summary svg{fill:currentColor;stroke:none}
 body.product .mobile-nav>a[data-current-family=true]{color:var(--primary-ink);background:var(--tint)}
 body.product .mobile-nav .mobile-more>summary::-webkit-details-marker{display:none}
 body.product .mobile-nav .mobile-more{position:relative;display:flex}
 body.product .mobile-nav .mobile-more>summary{flex:1}
 body.product .mobile-nav .mobile-more-menu{bottom:calc(100% + 10px);right:0;left:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
}

/* Home (the redesign): hero, the two sections, how it works, templates. */
body.product .home-shell{max-width:1240px}
body.product .home-shell .hero{border-radius:28px;border:1px solid var(--line);background:radial-gradient(120% 140% at 100% 0%,#dfe8ff 0%,rgba(223,232,255,0) 55%),linear-gradient(180deg,#f7f9ff,#ffffff);box-shadow:var(--shadow-sm);margin-top:28px}
body.dark.product .home-shell .hero{background:radial-gradient(120% 140% at 100% 0%,#1a2a52 0%,rgba(26,42,82,0) 55%),linear-gradient(180deg,#0f1830,#0b1220)}
body.product .home-shell .hero h1{font-size:clamp(2.6rem,5vw,4.3rem)}
body.product .home-shell .hero-actions{gap:12px}
body.product .home-shell .hero-actions a{min-height:50px;padding:0 24px;font-size:16px}
body.product .home-shell .section-heading h2{font-size:clamp(1.7rem,3vw,2.4rem)}
body.product .how-it-works{margin:72px 0 0}
body.product .how-steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:none}
body.product .how-steps>li{position:relative;padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
body.product .how-number{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--tint);color:var(--primary-ink);font-weight:700;margin-bottom:14px}
body.product .how-steps h3{margin:0 0 8px;font-size:19px}
body.product .how-steps p{margin:0;color:var(--muted);line-height:1.55}
body.product .how-sample{margin-top:18px;padding:16px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)}
body.product .how-score{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
body.product .how-score b{font-size:30px;line-height:1;color:var(--text)}
body.product .how-score span{color:var(--muted);font-size:13px}
body.product .how-parts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
body.product .how-parts li{display:grid;gap:5px;font-size:13px;color:var(--muted)}
body.product .how-parts .how-bar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
body.product .how-parts .how-bar>span{display:block;height:100%;border-radius:99px;background:var(--primary)}
body.product .home-shell .template-section{margin-top:72px}
body.product .home-shell .hero h1{font-size:clamp(2.5rem,4.4vw,3.9rem)}
@media(max-width:900px){body.product .how-steps{grid-template-columns:1fr}}
body.product .how-parts li:nth-child(1) .how-bar>span{width:82%}
body.product .how-parts li:nth-child(2) .how-bar>span{width:70%}
body.product .how-parts li:nth-child(3) .how-bar>span{width:90%}

/* Candidate Intelligence (the redesign): four named steps; while the questions are open they have the page to themselves;
   the score first, then what to close, the rest folded; the tailored resume shown large. */
body.product .studio-page .studio-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body.product .studio-page .studio-steps .studio-step-extra{display:none}
body.product .studio-page .studio-steps button{min-height:54px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;color:var(--text);justify-content:flex-start;gap:12px;padding:8px 14px;box-shadow:var(--shadow-sm)}
body.product .studio-page .studio-steps button:disabled{color:var(--muted);box-shadow:none;background:var(--soft)}
body.product .studio-page .studio-steps button[aria-current=step],body.product .studio-page .studio-steps button[aria-current=true],body.product .studio-page .studio-steps button.current{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-sm)}
body.product .studio-page .studio-number{min-width:30px;height:30px;border-radius:999px;display:inline-grid;place-items:center;background:var(--tint);color:var(--primary-ink);font-size:13px;font-weight:700}
body.product .studio-page .studio-close h3,body.product .studio-page .studio-analysis>summary{font-size:19px}
body.product .studio-page .studio-analysis{padding:0}
body.product .studio-page .studio-analysis>summary{padding:18px 22px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.product .studio-page .studio-analysis>summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);flex:none;transition:transform .15s}
body.product .studio-page .studio-analysis[open]>summary::after{transform:rotate(225deg)}
body.product .studio-page .studio-analysis>summary::-webkit-details-marker{display:none}
body.product .studio-page .studio-analysis>:not(summary){margin:0 22px 22px}
body.product .studio-page .studio-asked{color:var(--primary-ink);font-weight:600}
body.product .studio-page #studio-result .studio-columns{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
body.product .studio-page #studio-result .studio-preview{position:sticky;top:calc(var(--header-h) + 16px);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
body.product .studio-page .studio-review-changes>summary{font-weight:600}
@media(max-width:900px){body.product .studio-page .studio-steps{grid-template-columns:repeat(2,minmax(0,1fr))}body.product .studio-page #studio-result .studio-columns{grid-template-columns:1fr}body.product .studio-page #studio-result .studio-preview{position:static}}
/* After step 1 the page opens on the steps: the introduction has done its job. */
body.product .studio-page:has(#studio-app:not(.hidden):not([data-panel=inputs]))>.page-title{display:none!important}
body.product .studio-page:has(#studio-app:not(.hidden):not([data-panel=inputs])) #studio-app{margin-top:28px}
/* The narrowest phones (320–400 px): the header's four items still fit on one row. */
@media(max-width:400px){
 body.product header.header{padding:0 8px;gap:2px}
 body.product header.header .signin{height:44px;padding:0 12px;font-size:13.5px}
 body.product header.header .theme-control,body.product header.header .mobile-search{width:44px;height:44px;min-width:44px}
 body.product header.header .theme-control{border-color:transparent;background:transparent}
 body.product .header .logo .logo-light,body.product .header .logo .logo-dark{height:22px}
}
/* Tablets (761–1080 px): My resumes moves to More, and the account button becomes a round icon, so the row fits. */
@media(min-width:761px) and (max-width:1080px){
 body.product header.header{padding:0 16px;gap:10px}
 body.product header.header .workspace-link{display:none}
 body.product header.header>nav.nav a,body.product header.header>nav.nav .more-tools>summary{padding:0 11px;font-size:14.5px}
 body.product header.header .signin{width:40px;min-width:40px;padding:0;font-size:0;justify-content:center;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center/20px no-repeat}
}

/* Interview Agent setup (the redesign): two numbered parts, the documents under the choice, compact interviewers. */
body.product.interview-studio #int-setup .interview-entry legend,body.product .interview-step-title{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.01em;margin:6px 0 14px;color:var(--text)}
body.product .interview-step-number{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;flex:none}
body.product .interview-step-title{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
body.product #int-documents{margin-top:16px;padding:0;border:0}
body.product #int-documents>.small{margin:0 0 12px}
body.product #int-interviewer-choices .presenter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body.product #int-interviewer-choices .presenter-choice{position:relative;display:grid!important;gap:0 12px!important;overflow:visible;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;min-height:0}
body.product #int-interviewer-choices .presenter-choice img{grid-row:1/3;width:52px;height:52px;border-radius:999px;object-fit:cover;object-position:center 20%;aspect-ratio:1;margin:0}
body.product #int-interviewer-choices .presenter-choice strong{align-self:end;font-size:15px}
body.product #int-interviewer-choices .presenter-choice span{align-self:start;font-size:12.5px;color:var(--muted)}
body.product .presenter-choice input{position:absolute;opacity:0;pointer-events:none}
body.product #int-interviewer-choices .presenter-choice:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--tint)}
body.product .presenter-choice:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px}
@media(max-width:900px){body.product #int-interviewer-choices .presenter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* My resumes: the archived switch sits at the end of the action row. */
body.product:not(.editing) .workspace-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body.product .workspace-controls>label.check{order:9;margin-left:auto;font-size:14px;color:var(--muted)}
/* The editor's preview bar: plain labels, not letter-spaced captions. */
body.product .preview-toolbar{letter-spacing:normal}
body.product .preview-toolbar #preview-label{font-size:12.5px;letter-spacing:normal;color:var(--muted)}
body.product .preview-toolbar .preview-zoom-label{letter-spacing:normal;font-size:13.5px;color:var(--muted)}
body.product .preview-toolbar>span:first-child{font-size:11px;font-weight:600;letter-spacing:.08em}
body.product #paper-edit{margin-right:12px}
/* One column for every page: the same width and gutters, so headings line up from page to page. The editor keeps its wider canvas. */
body.product main#main:is(.studio-shell,.insights-page,.studio-page,.account-layout,.care-shell,.ops-main,.employer-shell){box-sizing:border-box;width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px)}
body.product.editing main#main.studio-shell{max-width:1392px}
/* Free allowances: what's left, then what's included. Packs and their price cards appear only where checkout is open. */
body.product:not(.billing-checkout) :is(#bill-catalog,#bill-packs){display:none}
body.product #bill-outcomes>h2{margin-top:0}
body.product .billing-account:has(#bill-private.hidden) #bill-refresh{display:none}
body.product .billing-intro{margin-bottom:6px}
body.product #bill-status:empty{display:none}
/* Text links read as links everywhere: the brand blue, as on the home and account pages. */
body.product :is(.care-shell,.insights-page) a:not([class]):not(.breadcrumb a){color:var(--primary-ink);font-weight:500}
/* Employers: the note's label keeps its width; the workspace has a visible title. */
body.product .employer-note strong{flex:none}
body.product .employer-title{margin:8px 0 4px}
body.product #em-status:empty{display:none}
/* Help pages: an empty list keeps quiet, and side-by-side links get room. */
body.product section:has(>#community-mine:empty){display:none}
body.product .care-shell section>a+a{margin-left:18px}
/* Templates on a phone: two designs per row, name and button only; a design's preview still shows its description. */
@media(max-width:760px){
 body.product #original-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 body.product .original-template .template-image-button{padding:12px 14px}
 body.product .original-template-copy{padding:12px}
 body.product .original-template-copy h2{font-size:16px;margin:4px 0 10px}
 body.product .original-template-copy>p:not(.eyebrow){display:none}
 body.product .original-template-copy .eyebrow{font-size:9.5px}
 body.product .original-template-copy .primary{min-height:40px;padding:8px 10px;font-size:13px}
}
@media(max-width:380px){body.product .original-template-copy .primary{padding:8px 4px;font-size:12px;white-space:nowrap}}
/* Forced colours (high contrast) drop the pill's background, so the current section is underlined instead. */
@media(forced-colors:active){body.product header.header .nav a[aria-current],body.product .nav a[aria-current],body.product .mobile-nav a[aria-current]{text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:2px}}
body.product.billing-checkout #bill-start{display:none}
body.product .billing-next{margin:18px 0 0}
/* My resumes on a phone: New resume first, then the other two ways in, full width; the archived switch last. */
@media(max-width:760px){
 body.product:not(.editing) .workspace-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 body.product .workspace-controls>#new{grid-column:1/-1;order:-1;width:100%;margin:0;justify-content:center}
 body.product .workspace-controls>:is(#import-resume,#guided-new){width:100%;justify-content:center;text-align:center;padding-left:8px;padding-right:8px}
 body.product .workspace-controls>label.check{grid-column:1/-1;margin-left:0}
 body.product .workspace-controls>.workspace-selector:not(:has(option:nth-child(2))){display:none}
}
/* Candidate Intelligence, 17 Oct 2026: one box for what the resume doesn't show, in the candidate's own words (studio_story). */
body.product .studio-tell{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow);display:grid;gap:12px;margin:22px 0}
body.product .studio-tell h3{margin:0;font-size:1.25rem}
body.product .studio-tell>p{margin:0}
body.product .studio-tell-terms{display:flex;flex-wrap:wrap;gap:8px}
body.product .studio-tell-terms:empty{display:none}
body.product .studio-term{min-height:36px;padding:6px 14px;border-radius:999px;border:1px dashed var(--primary);background:var(--tint);color:var(--primary-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
body.product .studio-term::before{content:"+ "}
body.product .studio-term:hover{background:var(--surface);border-style:solid}
body.product .studio-term:disabled{opacity:.5;cursor:default}
body.product #studio-story{width:100%;box-sizing:border-box;min-height:150px;resize:vertical;font:inherit;font-size:16px;line-height:1.55;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--text)}
body.product #studio-story:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
body.product #studio-story[readonly]{background:var(--bg);color:var(--muted)}
body.product .studio-tell-details:empty{display:none}
body.product .studio-tell-details .studio-details-grid{margin-top:6px}
body.product .studio-tell-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body.product .studio-told-done .studio-tell-actions{display:none}
body.product #studio-score .studio-result-heading{margin-bottom:4px}
body.product .studio-told{border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;margin:0 0 18px;background:var(--tint)}
body.product .studio-told h3{margin:0 0 4px;font-size:1.05rem}
body.product .studio-told-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
body.product .studio-told-list blockquote{margin:4px 0 0;padding-left:10px;border-left:3px solid var(--primary);color:var(--text);font-size:14px}
/* Candidate Intelligence step 1, 17 Oct 2026: the resume and the job side by side, one action under both. */
body.product .studio-page .studio-input{max-width:none}
body.product .studio-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
body.product .studio-input-grid .studio-upload-field{margin:0;align-content:start}
body.product .studio-input-title{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin:0}
body.product .studio-input-title .studio-number{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;padding:0;margin:0;border-radius:999px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;letter-spacing:0}
body.product .studio-pick{display:grid;gap:6px;font-size:14px;color:var(--muted);margin:4px 0 0}
body.product .studio-upload-field>.small:empty{display:none}
body.product .studio-input-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
body.product .studio-input-foot>p{margin:0}
body.product .studio-more-options{flex-basis:100%;border:0;padding:0;margin:0}
body.product .studio-more-options>summary{display:inline-flex;min-height:44px;align-items:center;font-size:14px;font-weight:500;color:var(--primary-ink);cursor:pointer}
body.product .studio-input-foot #studio-allowance{flex-basis:100%}
@media(max-width:860px){body.product .studio-input-grid{grid-template-columns:1fr}}
body.product #studio-app:has(#studio-progress:not(.hidden))[data-panel=inputs] #studio-inputs{display:none}
/* Match & gaps, 17 Oct 2026: the score and what to tell us side by side; the six parts below them, three across. */
body.product .studio-page .studio-top{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start;margin:0 0 20px}
body.product .studio-top .studio-tell{margin:0}
body.product .studio-page #studio-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;margin:0 0 20px}
body.product .studio-page #studio-breakdown>:is(h3,details){grid-column:1/-1}
body.product .studio-page #studio-breakdown>div{border-bottom:0;margin:0}
@media(max-width:1000px){body.product .studio-page .studio-top{grid-template-columns:minmax(0,1fr)}body.product .studio-page #studio-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body.product .studio-page #studio-breakdown{grid-template-columns:minmax(0,1fr)}}
body.product #studio-story-count{white-space:nowrap}
body.product #studio-score-note:empty{display:none}
/* 17 Oct 2026 (the motion system's proof, 18_MOTION_SYSTEM.md section 6): the phone touch targets still under 44 px reach it. */
body.product header.header a.logo{min-height:44px;align-items:center}
/* Found on the way: between 1,100 and 1,300 px "My resumes" wrapped onto two lines in the header. */
body.product header.header .workspace-link{white-space:nowrap}
@media(max-width:760px){
 body.product footer .care-footer a,body.product .breadcrumb a{min-width:44px;justify-content:center}
 body.product button.subtle,body.product a.red-link,body.product .original-template-copy a.primary,body.product .hq-upload .hq-upload-link{min-height:44px}
 body.product a.red-link,body.product .hq-upload a.hq-upload-link,body.product .care-links a,body.product .care-card>a:not(.primary):not(.secondary),
 body.product main>section>a,body.product .ops-hero>div>a,body.product .resume-recent a.small{display:inline-flex;align-items:center;min-height:44px}
 body.product label.check{display:inline-flex;align-items:center;gap:8px;min-height:44px}
}
/* Found on the way: at 320 px the two interviewer cards side by side were 3 px wider than the screen; below 380 px they stack. */
@media(max-width:380px){body.product #int-interviewer-choices .presenter-grid{grid-template-columns:minmax(0,1fr)}body.product #int-interviewer-choices .presenter-choice{margin:0}}
/* About us (18 Oct 2026): the founder beside his words; the living figure (web/folio/founder.js) takes the still picture's place. */
body.product .about-founder{display:grid;grid-template-columns:minmax(240px,400px) minmax(0,1fr);gap:48px;align-items:center;margin:8px 0 56px;padding:32px 40px;border-radius:28px;background:linear-gradient(135deg,var(--tint,#eef3ff),var(--surface,#fff) 72%);border:1px solid var(--line)}
body.product .founder-stage{position:relative;min-height:300px}
body.product .founder-still{display:block;width:100%;height:auto;max-height:480px;object-fit:contain;margin:0 auto}
body.product .founder-copy h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:6px 0 4px}
body.product .founder-role{color:var(--primary-ink,#1b46c4);font-weight:600;margin:0 0 14px}
body.product .founder-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
body.product .about-next{margin:56px 0 24px;text-align:center}
body.product .about-next .hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(max-width:760px){body.product .about-founder{grid-template-columns:minmax(0,1fr);padding:22px;gap:18px}body.product .founder-stage{max-width:320px;margin:0 auto;width:100%}}
/* 18 Oct 2026 (search: layout stability): the page area reaches the bottom of the screen, so content that appears after the account
   check (a sign-in panel, a list) never moves the footer while it is in view. */
body.product main#main{min-height:calc(100svh - 150px)}
/* Home's questions (18 Oct 2026, search): plain answers, one open at a time is fine; 44 px targets. */
body.product .faq-section{margin:64px 0}
body.product .faq-list{display:grid;gap:10px;max-width:880px}
body.product .faq-item{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:0 20px}
body.product .faq-item summary{min-height:56px;display:flex;align-items:center;cursor:pointer;font-weight:600;font-size:17px;list-style:none;gap:12px}
body.product .faq-item summary::-webkit-details-marker{display:none}
body.product .faq-item summary::after{content:'+';margin-left:auto;font-size:22px;font-weight:400;color:var(--primary,#2457e6)}
body.product .faq-item[open] summary::after{content:'−'}
body.product .faq-item p{margin:0 0 18px;color:var(--muted);line-height:1.6;max-width:72ch}
/* 18 Oct 2026 (search: layout stability): the two sections sit in the header in the page itself, so nothing moves when the
   scripts arrive; until product.js adds More, the static extra links stay out of the row. */
body.product header.header>nav.nav>.nav-right{display:none}