/* Naeem careers — styled to sit next to naeem.com.sa: Ping AR + LT, warm canvas, cloud hero, centered section
   titles with the brush underline, real salon photography, pastel cards. Values come from the Naeem design
   system tokens (ds/tokens). */

:root{
  --canvas: var(--foundation-neutral-200);
  --surface: var(--foundation-base-white);
  --line: var(--foundation-neutral-300);
  --line-strong: var(--foundation-neutral-500);
  --ink: var(--foundation-tertiary-1000);
  --body: var(--foundation-neutral-950);
  --muted: var(--foundation-neutral-900);
  --accent: var(--foundation-accent-500);
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{margin:0;background:var(--surface);color:var(--body);font-family:var(--font-ui);font-size:var(--type-body-m-size);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--font-brand);font-weight:var(--weight-bold);line-height:1.35;text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--foundation-accent-200);border-radius:var(--radius-md)}
main:focus,section:focus{outline:none}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--space-6)}
.wrap.narrow{max-width:820px}
.pad{padding-block:var(--space-16)}
.muted{color:var(--muted)}
.ico{display:inline-block;flex:none;width:var(--icon-sm);height:var(--icon-sm)}
.skip{position:absolute;inset-inline-start:var(--space-3);top:-60px;z-index:var(--z-toast);background:var(--surface);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.skip:focus{top:var(--space-3)}

/* underline brush under one word, as on naeem.com.sa */
.u{position:relative;display:inline-block;white-space:nowrap}
.u::after{content:"";position:absolute;inset-inline:-4%;bottom:-0.12em;height:0.32em;background:url(/img/underline.webp) center/100% 100% no-repeat;z-index:-1}
h1,h2{position:relative;z-index:0}

/* ---------- header / footer ---------- */
.top{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:var(--space-10);min-height:72px}
.logo img{height:38px;width:auto}
.top-nav{display:flex;gap:var(--space-8)}
.top-nav a{color:var(--body);text-decoration:none;font-weight:var(--weight-medium)}
.top-nav a:hover{color:var(--accent)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-6)}
.top-link{color:var(--accent);font-weight:var(--weight-bold);text-decoration:none;font-size:var(--type-body-s-size)}
.foot{background:var(--canvas);margin-top:var(--space-20);border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-10);padding-block:var(--space-12)}
.foot-brand img{height:40px;width:auto;margin-bottom:var(--space-5)}
.foot-brand p{color:var(--muted);font-size:var(--type-body-s-size);max-width:34ch}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.foot-links a{color:var(--body);text-decoration:none;font-size:var(--type-body-s-size)}
.foot-links a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--line);padding-block:var(--space-6);font-size:13px;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:44px;padding:10px var(--space-7);border-radius:var(--radius-lg);border:1px solid transparent;font-family:var(--font-ui);font-weight:var(--weight-medium);font-size:var(--type-button-size);line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;color:var(--foundation-base-black);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.btn:active{transform:translateY(1px)}
.btn-sand{background:var(--foundation-tertiary-500)}
.btn-sand:hover{background:var(--foundation-tertiary-600)}
.btn-sage{background:var(--foundation-secondary-500)}
.btn-sage:hover{background:var(--foundation-secondary-600)}
.btn-ghost{background:transparent;color:var(--body)}
.btn-ghost:hover{background:var(--foundation-neutral-300)}
.btn-ghost-line{background:var(--surface);border-color:var(--line-strong);color:var(--body)}
.btn-ghost-line:hover{border-color:var(--foundation-neutral-700)}
.btn-danger{background:var(--foundation-error-500);color:var(--foundation-base-white)}
.btn-danger:hover{background:var(--foundation-error-600)}
.btn-danger-line{background:var(--surface);border-color:var(--foundation-error-300);color:var(--foundation-error-600)}
.btn-danger-line:hover{background:var(--foundation-error-100)}
.btn-lg{height:52px;padding:14px var(--space-8);font-size:17px}
.btn-sm{height:38px;padding:var(--space-3) var(--space-6);font-size:var(--type-body-s-size);border-radius:var(--radius-md)}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:var(--opacity-disabled);cursor:not-allowed}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- hero ---------- */
.hero{text-align:center;padding-block:var(--space-20) 0;background:url(/img/clouds-scaled.webp) center top/cover no-repeat,var(--foundation-secondary-200);overflow:hidden}
.hero h1{font-size:var(--type-h1-size);line-height:1.25;font-weight:var(--weight-bold)}
.hero .lead{max-width:640px;margin:var(--space-7) auto 0;font-size:var(--type-body-l-size);line-height:1.7}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5);margin-top:var(--space-10)}
.device{position:relative;max-width:900px;margin:var(--space-16) auto 0;padding-inline-end:12%}
.screen{position:relative;border:10px solid var(--foundation-base-black);border-bottom:0;border-radius:28px 28px 0 0;overflow:hidden;background:var(--surface);aspect-ratio:16/9.2;z-index:1}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.screen.back{position:absolute;inset-block:40px 0;inset-inline-end:0;width:30%;transform:rotate(4deg);transform-origin:bottom right;border-width:6px;background:var(--foundation-neutral-100);z-index:0;aspect-ratio:auto}

/* ---------- sections ---------- */
.sec{padding-block:var(--space-20) 0}
.title{text-align:center;font-size:34px;color:var(--body);margin-bottom:var(--space-12)}
.sub{text-align:center;color:var(--muted);margin-top:calc(var(--space-8) * -1);margin-bottom:var(--space-10)}

.segs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-6)}
.seg{position:relative;grid-column:span 2;margin:0;border-radius:var(--radius-2xl);overflow:hidden;aspect-ratio:443/413}
.seg.wide{grid-column:span 3;aspect-ratio:680/413}
.seg img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-standard)}
.seg:hover img{transform:scale(1.03)}
.seg figcaption{position:absolute;top:var(--space-7);inset-inline-start:var(--space-7);color:var(--foundation-primary-200);font-family:var(--font-brand);font-weight:var(--weight-bold);font-size:var(--type-body-xl-size);text-shadow:0 1px 8px rgba(13,14,12,.25)}

.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.b{border-radius:var(--radius-2xl);padding:var(--space-10) var(--space-8)}
.b.big{display:flex;flex-direction:column;justify-content:flex-end;min-height:220px}
.b .num{display:block;font-family:var(--font-brand);font-size:64px;line-height:1.1;font-weight:var(--weight-bold);direction:ltr;text-align:right}
.b.big span{font-size:var(--type-body-l-size);color:var(--ink);font-weight:var(--weight-bold);margin-top:var(--space-3)}
.b h3{font-size:var(--type-body-l-size);margin-bottom:var(--space-3)}
.b p{font-size:15px}
.b-blush{background:var(--foundation-primary-300)}
.b-blush .num{color:var(--foundation-tertiary-800)}
.b-sage{background:var(--foundation-secondary-200)}
.b-sage .num{color:var(--foundation-secondary-600)}
.b-sand{background:var(--foundation-tertiary-200)}
.b-sand .num{color:var(--foundation-tertiary-800)}
.b-canvas{background:var(--canvas)}

.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-10)}
.fchip{height:40px;padding:0 var(--space-7);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);font-weight:var(--weight-medium);font-size:var(--type-body-s-size);cursor:pointer}
.fchip:hover{border-color:var(--foundation-secondary-500)}
.fchip[aria-pressed="true"]{background:var(--foundation-secondary-200);border-color:var(--foundation-secondary-600);color:var(--foundation-secondary-1000)}

.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.job{position:relative;display:flex;flex-direction:column;background:var(--canvas);border-radius:var(--radius-2xl);padding:var(--space-8);transition:background var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.job:hover{background:var(--foundation-primary-200);box-shadow:var(--shadow-sm)}
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5)}
.job h3{font-size:22px}
.job h3 a{color:inherit;text-decoration:none}
.job h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.job h3 a:focus-visible{box-shadow:none}
.job:focus-within{box-shadow:0 0 0 3px var(--foundation-accent-200)}
.job-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-circle);background:var(--surface);color:var(--foundation-tertiary-900)}
.meta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);font-size:13px;font-weight:var(--weight-medium);color:var(--body);background:var(--surface);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-5);line-height:1.7}
.chip .ico{width:var(--icon-xs);height:var(--icon-xs)}
.job .sum{margin-top:var(--space-6);font-size:15px}
.job ul{margin:var(--space-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-2);font-size:14px;color:var(--muted)}
.job li{display:flex;gap:var(--space-3)}
.job li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--foundation-tertiary-600);margin-top:10px}
.job .go{margin-top:auto;padding-top:var(--space-8)}
.job.general{background:var(--foundation-secondary-200)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;background:var(--canvas);border-radius:var(--radius-2xl);padding:var(--space-8)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--foundation-tertiary-500);color:var(--foundation-base-black);font-weight:var(--weight-bold);margin-bottom:var(--space-6)}
.steps b{display:block;font-size:var(--type-body-l-size);color:var(--ink);margin-bottom:var(--space-2)}
.steps span{font-size:15px}

.faq{display:grid;gap:var(--space-5)}
.faq details{background:var(--canvas);border-radius:var(--radius-xl);padding:0 var(--space-8)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding-block:var(--space-7);font-family:var(--font-brand);font-weight:var(--weight-bold);font-size:var(--type-body-l-size);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform var(--duration-base) var(--ease-standard);color:var(--muted)}
.faq details[open] summary .ico{transform:rotate(180deg)}
.faq details p{padding-bottom:var(--space-7)}

.cta{position:relative;text-align:center;border-radius:var(--radius-2xl);padding:var(--space-20) var(--space-8);background:url(/img/clouds-scaled.webp) center/cover no-repeat,var(--foundation-secondary-200);overflow:hidden}
.cta h2{font-size:36px;color:var(--foundation-secondary-900)}
.cta p{margin:var(--space-5) auto var(--space-10);max-width:46ch;font-size:var(--type-body-l-size)}
.mj{position:absolute;width:auto;height:84px;pointer-events:none}
.cta .mj1{top:12%;inset-inline-start:6%}.cta .mj2{top:14%;inset-inline-end:6%}
.cta .mj3{bottom:12%;inset-inline-start:10%}.cta .mj4{bottom:10%;inset-inline-end:10%}

/* ---------- auth ---------- */
.auth{position:relative;min-height:calc(100vh - 72px);display:grid;place-items:center;padding:var(--space-16) var(--space-6);background:url(/img/clouds-scaled.webp) center/cover no-repeat,var(--foundation-secondary-200);overflow:hidden}
.auth-card{position:relative;z-index:1;width:100%;max-width:480px;background:var(--surface);border-radius:var(--radius-2xl);padding:var(--space-12) var(--space-10);box-shadow:var(--shadow-lg)}
.auth-card h1{font-size:30px;text-align:center;color:var(--foundation-secondary-900)}
.auth-card .sub{margin:var(--space-3) 0 var(--space-8);color:var(--muted);text-align:center}
.auth-card form{display:grid;gap:var(--space-7)}
.auth-card .alert{margin-bottom:var(--space-6)}
.auth .mj1{top:12%;inset-inline-start:12%}.auth .mj2{top:14%;inset-inline-end:12%}
.auth .mj3{bottom:14%;inset-inline-start:9%}.auth .mj4{bottom:12%;inset-inline-end:10%}
.small-link{justify-self:start;margin-top:calc(var(--space-5) * -1);font-size:var(--type-body-s-size);text-decoration:none;font-weight:var(--weight-medium)}
.switch{text-align:center;margin-top:var(--space-8);font-size:var(--type-body-s-size);color:var(--muted)}
.switch a{font-weight:var(--weight-bold);text-decoration:none}
.badge-ico{width:72px;height:72px;margin:0 auto var(--space-7);border-radius:50%;display:grid;place-items:center;background:var(--foundation-secondary-200);color:var(--foundation-secondary-800)}
.badge-ico .ico{width:36px;height:36px}
.badge-ico.good{background:var(--foundation-success-100);color:var(--foundation-success-700)}
.badge-ico.warn{background:var(--foundation-warning-100);color:var(--foundation-warning-700)}
.hint-box{background:var(--canvas);border-radius:var(--radius-lg);padding:var(--space-6);font-size:var(--type-body-s-size);margin-bottom:var(--space-7)}
.inbox{margin-top:var(--space-8);border:1.5px dashed var(--foundation-warning-300);background:var(--foundation-warning-100);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-3);font-size:13px}
.inbox b{display:flex;align-items:center;gap:var(--space-2);color:var(--foundation-warning-1000)}
.inbox .btn{justify-self:start;background:var(--surface)}

/* ---------- fields ---------- */
.f{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.f > .lbl{font-size:var(--type-label-size);font-weight:var(--weight-medium);color:var(--body)}
.req{color:var(--foundation-error-500);margin-inline-start:2px}
.opt{color:var(--muted);font-weight:var(--weight-regular);font-size:13px;margin-inline-start:var(--space-2)}
.in{width:100%;height:48px;padding:0 var(--space-6);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-md);font-size:var(--type-body-m-size);color:var(--body);transition:border-color var(--duration-fast),box-shadow var(--duration-fast);appearance:none}
textarea.in{height:auto;min-height:110px;padding:var(--space-5) var(--space-6);resize:vertical;line-height:1.6}
select.in{padding-inline-end:var(--space-12);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23837F7D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 16px center/12px 8px no-repeat}
.in::placeholder{color:var(--foundation-neutral-800)}
.in:hover{border-color:var(--foundation-neutral-600)}
.in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--foundation-accent-200)}
.in[readonly]{background:var(--canvas);color:var(--muted)}
.in[dir="ltr"]{text-align:right}
.in[dir="ltr"]:placeholder-shown{text-align:right}
.phone{display:flex;gap:var(--space-3)}
.phone .cc{display:grid;place-items:center;flex:none;padding:0 var(--space-5);height:48px;border:1px solid var(--line-strong);border-radius:var(--radius-md);font-size:var(--type-body-s-size);color:var(--muted);background:var(--canvas)}
.phone .in{text-align:left}
.pw{position:relative;display:block}
.pw .in{padding-inline-start:var(--space-12)}
.pw .eye{position:absolute;inset-inline-start:var(--space-3);top:50%;transform:translateY(-50%);border:0;background:none;padding:var(--space-3);color:var(--muted);cursor:pointer;display:grid;border-radius:var(--radius-md)}
.help{font-size:13px;color:var(--muted);line-height:1.5}
.help.e{display:none}
.f.err .in,.f.err .phone .cc{border-color:var(--foundation-error-500)}
.f.err .in:focus{box-shadow:0 0 0 3px var(--foundation-error-200)}
.f.err .help.e{display:flex;gap:var(--space-2);align-items:center;color:var(--foundation-error-600)}
.f.err .help.e .ico{width:var(--icon-xs);height:var(--icon-xs)}
.f.err .help.h{display:none}

.choices{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choices span{display:inline-flex;align-items:center;height:42px;padding:0 var(--space-7);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);font-size:var(--type-body-s-size);font-weight:var(--weight-medium);transition:all var(--duration-fast) var(--ease-standard)}
.choices label:hover span{border-color:var(--foundation-tertiary-600)}
.choices input:checked + span{background:var(--foundation-tertiary-300);border-color:var(--foundation-tertiary-700);color:var(--ink)}
.choices input:focus-visible + span{box-shadow:0 0 0 3px var(--foundation-accent-200)}
.f.err .choices span{border-color:var(--foundation-error-300)}

.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);text-align:center;padding:var(--space-10) var(--space-6);border:1.5px dashed var(--line-strong);border-radius:var(--radius-xl);background:var(--canvas);cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast)}
.drop:hover,.drop.over{border-color:var(--foundation-tertiary-700);background:var(--foundation-tertiary-200)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{color:var(--ink);font-weight:var(--weight-medium)}
.drop b u{color:var(--accent);text-decoration:none}
.drop small{font-size:13px;color:var(--muted)}
.drop:has(input:focus-visible){box-shadow:0 0 0 3px var(--foundation-accent-200)}
.f.err .drop{border-color:var(--foundation-error-500)}
.file-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-lg);background:var(--foundation-tertiary-300);color:var(--foundation-tertiary-1000);flex:none}
.file{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--canvas)}
.file .nm{min-width:0;flex:1}
.file .nm b{display:block;color:var(--ink);font-weight:var(--weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.file .nm small{color:var(--muted);font-size:13px}
.row-actions{display:flex;gap:var(--space-2)}

.consent{display:flex;gap:var(--space-5);align-items:flex-start;font-size:var(--type-body-s-size);cursor:pointer}
.consent input{appearance:none;flex:none;width:20px;height:20px;margin:3px 0 0;border:1.5px solid var(--line-strong);border-radius:var(--radius-xs);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--accent);border-color:var(--accent)}
.consent input:checked::after{content:"";width:5px;height:10px;border:solid var(--foundation-base-white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.consent input:focus-visible{box-shadow:0 0 0 3px var(--foundation-accent-200)}
.f.err .consent input{border-color:var(--foundation-error-500)}

.alert{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--foundation-error-300);background:var(--foundation-error-100);color:var(--foundation-error-800);font-size:var(--type-body-s-size);margin-bottom:var(--space-6)}
.alert .ico{flex:none;margin-top:3px}
.alert a{font-weight:var(--weight-bold);color:inherit}
.alert.info{border-color:var(--foundation-secondary-300);background:var(--foundation-secondary-100);color:var(--foundation-secondary-1000)}
.alert.good{border-color:var(--foundation-success-300);background:var(--foundation-success-100);color:var(--foundation-success-1000)}

/* ---------- apply ---------- */
.apply{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-12);align-items:start;padding-top:var(--space-12)}
.back{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--muted);text-decoration:none;font-size:var(--type-body-s-size);font-weight:var(--weight-medium);margin-bottom:var(--space-6)}
.back:hover{color:var(--accent)}
.apply h1{font-size:var(--type-heading-size)}
.intro-sum{display:none;margin-top:var(--space-3)}
.intro{color:var(--muted);margin:var(--space-3) 0 var(--space-8)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:var(--space-10) var(--space-8);margin-bottom:var(--space-6)}
.card-h{display:flex;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-8)}
.card-h .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--foundation-tertiary-300);color:var(--ink);font-weight:var(--weight-bold);font-size:var(--type-body-s-size);flex:none}
.card-h h2{font-size:var(--type-body-xl-size)}
.card-h p{font-size:var(--type-body-s-size);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-6)}
.grid .wide{grid-column:1/-1}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-8)}
.aside{position:sticky;top:96px}
.aside .card{background:var(--canvas);border:0;padding:var(--space-8)}
.aside h3{font-size:var(--type-body-xl-size);margin-top:var(--space-6)}
.aside p{font-size:15px;margin-top:var(--space-5)}
.aside ul{margin:var(--space-6) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-3);font-size:var(--type-body-s-size)}
.aside li{display:flex;gap:var(--space-3)}
.aside li .ico{color:var(--foundation-success-700);width:var(--icon-xs);height:var(--icon-xs);margin-top:5px}
.aside .note{display:flex;gap:var(--space-3);font-size:13px;color:var(--muted);padding-inline:var(--space-2)}
.aside .note .ico{width:var(--icon-xs);height:var(--icon-xs);margin-top:4px}

.done{max-width:600px;margin:var(--space-20) auto 0;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:var(--space-16) var(--space-10);animation:rise var(--duration-slow) var(--ease-standard)}
.done .badge-ico{animation:pop 480ms cubic-bezier(0.34,1.56,0.64,1)}
.done h1{font-size:var(--type-subheading-size)}
.done p{margin-top:var(--space-5)}
.done .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5);margin-top:var(--space-10)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ---------- account ---------- */
.acc{max-width:860px;margin:0 auto;padding-top:var(--space-12)}
.acc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-6);margin-bottom:var(--space-8)}
.acc-head h1{font-size:var(--type-heading-size)}
.tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--line);margin-bottom:var(--space-8);overflow-x:auto}
.tabs a{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);color:var(--muted);text-decoration:none;font-weight:var(--weight-medium);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--foundation-tertiary-700)}
.apps{display:grid;gap:var(--space-6)}
.app{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:var(--space-8)}
.app.closed{background:var(--canvas)}
.app-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6)}
.app h3{font-size:var(--type-body-l-size)}
.app-top .muted{font-size:13px;margin-top:var(--space-1)}
.pill{flex:none;font-size:13px;font-weight:var(--weight-bold);padding:var(--space-1) var(--space-5);border-radius:var(--radius-pill);white-space:nowrap}
.pill.info{background:var(--foundation-secondary-200);color:var(--foundation-secondary-1000)}
.pill.accent{background:var(--foundation-tertiary-300);color:var(--foundation-tertiary-1000)}
.pill.good{background:var(--foundation-success-100);color:var(--foundation-success-900)}
.pill.muted{background:var(--foundation-neutral-300);color:var(--foundation-neutral-1000)}
.track{display:grid;grid-template-columns:repeat(4,1fr);margin:var(--space-8) 0 var(--space-5);padding:0;list-style:none;font-size:13px;color:var(--muted)}
.track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}
.track li span{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.track li::before{content:"";position:absolute;top:7px;inset-inline-end:50%;width:100%;height:2px;background:var(--line-strong)}
.track li:first-child::before{display:none}
.track li.done span{background:var(--foundation-secondary-600);border-color:var(--foundation-secondary-600)}
.track li.done::before,.track li.now::before{background:var(--foundation-secondary-600)}
.track li.now span{border-color:var(--foundation-tertiary-700);background:var(--foundation-tertiary-500);box-shadow:0 0 0 4px var(--foundation-tertiary-200)}
.track li.now{color:var(--ink);font-weight:var(--weight-bold)}
.app-text{font-size:15px}
.when{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-5);background:var(--foundation-tertiary-200);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);font-size:15px}
.app-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--line);font-size:var(--type-body-s-size)}
.danger-zone{border-color:var(--foundation-error-300)}
.empty{text-align:center;background:var(--canvas);border-radius:var(--radius-2xl);padding:var(--space-16) var(--space-8);grid-column:1/-1}
.empty b{display:block;font-family:var(--font-brand);font-size:var(--type-body-l-size);color:var(--ink)}
.empty p{color:var(--muted);margin:var(--space-3) 0 var(--space-8)}
.skel{height:200px;border-radius:var(--radius-2xl);background:linear-gradient(90deg,var(--foundation-neutral-300),var(--foundation-neutral-200),var(--foundation-neutral-300));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + var(--space-8));inset-inline:0;margin:0 auto;width:max-content;max-width:calc(100% - 32px);background:var(--foundation-tertiary-1000);color:var(--foundation-base-white);padding:var(--space-5) var(--space-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-toast);font-size:var(--type-body-s-size)}
.preview-flag{background:var(--foundation-warning-100);border-bottom:1px solid var(--foundation-warning-300);color:var(--foundation-warning-1000);font-size:13px;text-align:center;padding:var(--space-3) var(--space-6)}

/* ---------- job details ---------- */
.jd{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-12);align-items:start;padding-top:var(--space-12)}
.jd-head{display:flex;gap:var(--space-6);align-items:flex-start}
.jd-head .job-ico{width:56px;height:56px;background:var(--canvas)}
.jd-head .job-ico .ico{width:28px;height:28px}
.jd h1{font-size:var(--type-heading-size);outline:none}
.jd-head .meta{margin-top:var(--space-4)}
.jd-sum{font-size:var(--type-body-l-size);margin-top:var(--space-10);color:var(--ink)}
.jd-sec{margin-top:var(--space-12)}
.jd-sec h2{font-size:var(--type-body-xl-size)}
.jd-sec ul{margin:var(--space-6) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-4)}
.jd-sec li{display:flex;gap:var(--space-4)}
.jd-sec li .ico{flex:none;color:var(--foundation-success-700);width:var(--icon-sm);height:var(--icon-sm);margin-top:4px}
.jd-steps{margin:var(--space-6) 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:var(--space-4)}
.jd-steps li{counter-increment:s;display:flex;gap:var(--space-4);align-items:flex-start}
.jd-steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--foundation-primary-200);color:var(--foundation-tertiary-900);font-weight:var(--weight-bold);font-size:14px}
.jd-cta{margin-top:var(--space-12)}
.aside-cta{margin-top:var(--space-8)}
.aside-cta .btn{width:100%}
.jd-bar{display:none}

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apply,.jd{grid-template-columns:1fr}
  .aside{display:none}
  .intro-sum{display:block}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .top-in{gap:var(--space-5);min-height:64px}
  .logo img{height:32px}
  .top-nav{display:none}
  .top-actions{gap:var(--space-5)}
  .hero{padding-top:var(--space-12)}
  .hero h1{font-size:36px}
  .hero .lead{font-size:var(--type-body-m-size)}
  .hero-cta .btn{flex:1 1 140px}
  .device{margin-top:var(--space-10);padding-inline-end:0}
  .screen{border-width:6px;border-radius:18px 18px 0 0}
  .screen.back{display:none}
  .sec{padding-top:var(--space-16)}
  .title{font-size:var(--type-subheading-size);margin-bottom:var(--space-8)}
  .segs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .seg,.seg.wide{grid-column:span 1;aspect-ratio:1}
  .seg:last-child{grid-column:1/-1;aspect-ratio:2/1}
  .seg figcaption{font-size:var(--type-body-m-size);top:var(--space-5);inset-inline-start:var(--space-5)}
  .bento,.jobs,.steps,.grid{grid-template-columns:1fr}
  .b.big{min-height:0;padding:var(--space-8)}
  .b .num{font-size:48px}
  .job,.card,.app{padding:var(--space-8) var(--space-6)}
  .faq details{padding:0 var(--space-6)}
  .faq summary{font-size:var(--type-body-m-size)}
  .cta{padding:var(--space-16) var(--space-6) var(--space-24)}
  .cta h2{font-size:var(--type-subheading-size)}
  .cta .mj1,.cta .mj2{display:none}
  .cta .mj3{bottom:var(--space-5);inset-inline-start:12%}.cta .mj4{bottom:var(--space-5);inset-inline-end:12%}
  .mj{height:60px}
  .auth{padding:var(--space-8) var(--space-5) var(--space-24);place-items:start center}
  .auth .mj1,.auth .mj2{display:none}
  .auth .mj3{bottom:var(--space-6);inset-inline-start:14%}.auth .mj4{bottom:var(--space-6);inset-inline-end:14%}
  .auth-card{padding:var(--space-10) var(--space-6)}
  .apply h1,.acc-head h1{font-size:var(--type-subheading-size)}
  .submit-row .btn{width:100%}
  .jd h1{font-size:var(--type-subheading-size)}
  .jd-head .job-ico{width:44px;height:44px}
  .jd-sum{font-size:var(--type-body-m-size);margin-top:var(--space-8)}
  .jd-cta{display:none}
  .jd-bar{display:block;position:sticky;bottom:0;margin-top:var(--space-12);padding:var(--space-5) var(--space-5) calc(env(safe-area-inset-bottom,0px) + var(--space-5));background:var(--surface);box-shadow:0 -1px 0 var(--foundation-neutral-300)}
  .jd-bar .btn{width:100%}
  .done{margin-top:var(--space-10);padding:var(--space-12) var(--space-6)}
  .track{font-size:12px}
}
.inbox .code{font-size:28px;letter-spacing:.2em;color:var(--ink)}
.foot-team{color:var(--muted)!important}