*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08080f;--bg2:#0f0f1a;--bg3:#141420;--surface:#1a1a2e;--surface2:#202038;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.11);
  --accent:#7c5cfc;--accent2:#a78bfa;--accent3:#38bdf8;
  --green:#34d399;--amber:#fbbf24;--red:#f87171;
  --text:#eeeeff;--text2:#9898bb;--text3:#55556a;
  /* Both faces must carry Cyrillic — the UI ships in BG and RU as well as EN. */
  --font-head:'Cormorant Garamond',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;
  --radius:12px;--radius-sm:8px;--shadow:0 4px 24px rgba(0,0,0,.4);
  /* The width of the content column, and the gutter every section leaves
     beside it. One variable rather than a 1100px repeated in four rules,
     because the very-wide tiers at the bottom of this file widen it, and the
     fixed nav has to track it to stay aligned with the page under it. */
  --maxw:1100px;--gutter:2.5rem;
  /* Tells the browser which way its own furniture should go: scrollbars, the
     dropdown list a <select> opens, the caret. Without it those stay light
     while everything around them is dark, which is the giveaway that a page was
     painted dark rather than designed that way. The light theme at the foot of
     this file flips it. */
  color-scheme:dark;
}
/* 18px, up from the browser default of 16. Every size in this file is in rem,
   so moving the root moves the whole page together — headings, body copy,
   buttons, padding and the clamp() on the hero h1 all scale in proportion
   rather than drifting out of relation to each other. One number to turn if
   this is too much or too little; the very wide tiers at the foot of the file
   turn it again, and they are relative to this value, not to 16. */
/* scrollbar-gutter keeps the space the scrollbar takes reserved on every page,
   whether or not that page is long enough to need one. Without it the viewport
   is 15px wider on the auth pages than on the landing page, and *everything
   centred* moves half of that — 7.7px — the moment you navigate between them.
   The bar itself is pinned to both edges and so only gets 15px wider, which is
   why nobody noticed — but the hero, the section columns and the footer are all
   centred, and they have been stepping sideways on every trip to the login page
   in both themes since long before either of them existed. */
html{scroll-behavior:smooth;font-size:18px;scrollbar-gutter:stable}
/* 1rem, not 16px: rem answers to html rather than to body, so pinned in px the
   body copy would be the one thing on the page that ignored the root above. */
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.65;overflow-x:hidden}
.hidden{display:none!important}
.page{display:none}
.page.active{display:block}

/* TOAST */
/* Hidden by opacity and visibility, not by transform alone. translateY(120%)
   is 120% of the *empty* pill — about 25px — which never clears the 2rem it
   sits above the bottom edge, so the bare container stayed on screen as a
   small blank capsule whenever no message was showing. The visibility delay
   holds it rendered until the slide-out finishes. */
#toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(120%);opacity:0;visibility:hidden;background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:.6rem 1.4rem;border-radius:100px;font-size:.84rem;z-index:9999;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .26s ease,visibility 0s linear .3s;white-space:nowrap;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s}

/* MODAL */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
#modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg3);border:1px solid var(--border2);border-radius:16px;padding:2rem;max-width:480px;width:calc(100% - 2rem);transform:scale(.95);transition:transform .2s;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}
#modal-overlay.open .modal{transform:scale(1)}
.modal-title{font-family:var(--font-body);font-size:1.15rem;font-weight:700;margin-bottom:1.4rem;display:flex;justify-content:space-between;align-items:center}
.modal-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.2rem;line-height:1;padding:.2rem .4rem;border-radius:6px;transition:color .15s}
.modal-close:hover{color:var(--text)}
.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.4rem}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--gutter);background:rgba(8,8,15,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{font-family:var(--font-head);font-size:1.2rem;font-weight:800;color:var(--text);cursor:pointer;letter-spacing:-.02em;flex-shrink:0}
.nav-logo span{color:var(--accent2)}
.nav-links{display:flex;align-items:center;gap:1.25rem}
/* nowrap for the same reason the two buttons below have it. "How it works" is
   three words with room to break, and once the language switcher grew into a
   menu the bar got tight enough at around 1024px that it took the offer —
   stacking onto two lines and pushing the bar's height with it. */
.nav-links a{color:var(--text2);text-decoration:none;font-size:.88rem;transition:color .15s;cursor:pointer;white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:.65rem}
/* Nothing in this bar may wrap. Left to wrap, "Get started free" became three
   stacked words on a phone, which pushed the bar to 92px tall and slid the
   whole thing over the logo. */
.btn-ng,.btn-np{white-space:nowrap}
.btn-ng{background:transparent;color:var(--text2);border:1px solid var(--border2);padding:.44rem 1rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.84rem;cursor:pointer;transition:all .15s}
.btn-ng:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.btn-np{background:var(--accent);color:#fff;border:none;padding:.44rem 1.1rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.84rem;font-weight:500;cursor:pointer;transition:all .15s}
.btn-np:hover{background:#8d6dfd;transform:translateY(-1px)}
/* Lives here with the rest of the bar rather than at the foot of the file: the
   phone tier needs to shrink it, and an equally specific rule declared later
   would have quietly won.

   A fixed width, not an intrinsic one. Sized to "Български", the longest of the
   six endonyms — left to size itself the control would be 30px narrower in
   English than in Bulgarian, and the whole bar would jump sideways every time
   someone changed language, which is the fault this bar has just had fixed.

   The chevron is a background image because appearance:none removes the native
   one. It is a data: URI, which img-src in _headers already allows. */
.lang-select{width:6.1rem;background:transparent;color:var(--text2);border:1px solid var(--border2);padding:.3rem 1.35rem .3rem .5rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%239898bb' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;background-size:.55rem}
.lang-select:hover,.lang-select:focus{color:var(--text);border-color:rgba(255,255,255,.2)}
/* The open menu is drawn by the OS, not by this stylesheet. color-scheme at the
   top of the file gets it most of the way; these two keep the list legible on
   the platforms that still take their colours from the element. */
.lang-select option{background:var(--bg3);color:var(--text)}
/* Sized to match .lang-select rather than to the glyph, so the bar keeps one
   rhythm — and kept as narrow as that allows, because everything in this bar is
   competing for the same 375px and the two thresholds below were measured
   against its width. line-height:1 stops the sun and the moon, which have
   different ink heights, from resizing the button as they swap. */
.theme-btn{background:transparent;color:var(--text2);border:1px solid var(--border2);padding:.3rem .5rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.82rem;line-height:1;cursor:pointer;transition:all .15s}
.theme-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.theme-ico{display:block;width:1em;text-align:center}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.7rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.93rem;font-weight:500;cursor:pointer;transition:all .17s;border:none;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#8d6dfd;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.btn-danger{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.22)}.btn-danger:hover{background:rgba(248,113,113,.22)}
.btn-sm{padding:.42rem .95rem;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

/* FORMS */
.form-group{display:flex;flex-direction:column;gap:.38rem}
.form-label{font-size:.76rem;color:var(--text2);font-weight:500}
.form-input,.form-select,.form-textarea{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:.58rem .88rem;color:var(--text);font-family:var(--font-body);font-size:.875rem;transition:border-color .15s;outline:none;width:100%}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent)}
.form-textarea{resize:vertical;min-height:90px}
.form-select option{background:var(--bg3)}
.form-hint{font-size:.7rem;color:var(--text3)}
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-right:2.5rem}
.pw-eye{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:.9rem}
.pw-eye:hover{color:var(--text2)}

/* TOGGLE */
.tgl-row{display:flex;align-items:center;justify-content:space-between;padding:.72rem 0;border-bottom:1px solid var(--border)}
.tgl-row:last-child{border:none}
.tgl-label{font-size:.875rem;font-weight:500}
.tgl-sub{font-size:.73rem;color:var(--text3);margin-top:.08rem}
.tgl{width:40px;height:22px;border-radius:100px;background:var(--surface2);border:1px solid var(--border2);position:relative;cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0}
.tgl.on{background:var(--accent);border-color:var(--accent)}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl.on::after{transform:translateX(18px)}

/* BADGE */
.badge{display:inline-flex;align-items:center;padding:.16rem .58rem;border-radius:100px;font-size:.68rem;font-weight:600}
.b-sent{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.2)}
.b-pending{background:rgba(251,191,36,.1);color:var(--amber);border:1px solid rgba(251,191,36,.2)}
.b-viewed{background:rgba(167,139,250,.1);color:var(--accent2);border:1px solid rgba(167,139,250,.2)}
.b-error{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.b-new{background:rgba(56,189,248,.1);color:var(--accent3);border:1px solid rgba(56,189,248,.2)}

/* DOT */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-g{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot-a{background:var(--amber)}
.dot-gr{background:var(--text3)}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem}
.card-title{font-family:var(--font-body);font-size:.92rem;font-weight:700;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ctr{font-size:.73rem;color:var(--text3);font-family:var(--font-body);font-weight:400}

/* METRIC */
.mc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.4rem}
.mc-l{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.45rem}
.mc-v{font-family:var(--font-head);font-size:1.9rem;font-weight:800;line-height:1}
.mc-s{font-size:.73rem;color:var(--text3);margin-top:.3rem}
.mc-s.up{color:var(--green)}

/* BANNERS */
.ban-warn{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.22);border-radius:var(--radius-sm);padding:.82rem 1rem;font-size:.82rem;color:var(--amber);display:flex;align-items:flex-start;gap:.65rem;margin-bottom:1.4rem}
.ban-info{background:rgba(124,92,252,.07);border:1px solid rgba(124,92,252,.22);border-radius:var(--radius-sm);padding:.82rem 1rem;font-size:.82rem;color:var(--accent2);display:flex;align-items:flex-start;gap:.65rem}

/* TAGS */
.tags-wrap{display:flex;flex-wrap:wrap;gap:.38rem;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:.45rem .65rem;cursor:text;min-height:40px;align-items:center}
.tags-wrap:focus-within{border-color:var(--accent)}
.tag{display:inline-flex;align-items:center;gap:.3rem;background:rgba(124,92,252,.14);border:1px solid rgba(124,92,252,.25);color:var(--accent2);padding:.12rem .5rem;border-radius:100px;font-size:.73rem}
.tag-rm{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:.85rem;line-height:1;padding:0;opacity:.65}
.tag-rm:hover{opacity:1}
.tags-inp{background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:.875rem;min-width:70px;flex:1}

/* EMPTY */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem;color:var(--text3);text-align:center;gap:.65rem}
.empty svg{opacity:.22;width:36px;height:36px}
.empty p{font-size:.82rem;max-width:240px;line-height:1.5}

/* ──────────── LANDING ──────────── */
#page-landing{min-height:100vh}
.glow{position:fixed;top:-120px;left:50%;transform:translateX(-50%);width:53.75rem;height:40rem;background:radial-gradient(ellipse,rgba(124,92,252,.11) 0%,transparent 68%);pointer-events:none;z-index:0}
.land-z{position:relative;z-index:1}

.hero{max-width:var(--maxw);margin:0 auto;padding:9.5rem var(--gutter) 5rem;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(124,92,252,.12);border:1px solid rgba(124,92,252,.3);padding:.28rem .95rem;border-radius:100px;font-size:.76rem;color:var(--accent2);margin-bottom:1.9rem;font-weight:500}
.hero-badge::before{content:'●';font-size:.48rem;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.src-btn{background:var(--bg2);border:1px solid var(--border2);color:var(--text2);padding:.38rem .9rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.8rem;cursor:pointer;transition:all .14s}
.src-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.src-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero h1{font-family:var(--font-head);font-size:clamp(2.5rem,6.5vw,4.7rem);font-weight:800;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.3rem;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent2),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Measure limits in rem, not px: these cap a line length, and a line length is
   a count of characters. Pinned in px they stay 540px wide while the type
   around them grows on the wide tiers, which turns a comfortable measure into
   a narrow one. */
/* 0.98rem, down from 1.08. The measure comes down with it — 30.6rem is the old
   33.75 scaled by the same ratio — because the cap is a character count, not a
   width, and holding it fixed while the type shrank would have quietly bought
   this paragraph a longer line than it is meant to have. */
.hero p{font-size:.98rem;color:var(--text2);max-width:30.6rem;margin:0 auto 2.4rem;font-weight:300;text-wrap:balance}
.hero-ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero-trust{font-size:.78rem!important;color:var(--text3)!important;margin:1.15rem auto 0!important;font-weight:400!important;letter-spacing:.01em}
.hero-stats{display:flex;gap:3rem;justify-content:center;margin-top:4rem;flex-wrap:wrap;padding-top:2.5rem;border-top:1px solid var(--border)}
.snum{font-family:var(--font-head);font-size:2rem;font-weight:800;display:block}
.slbl{font-size:.78rem;color:var(--text3)}

.land-sec{max-width:var(--maxw);margin:0 auto;padding:5rem var(--gutter)}
.land-sec:nth-of-type(even){background:linear-gradient(90deg,transparent,rgba(124,92,252,.035),transparent)}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:.85rem}
.sec-title{font-family:var(--font-head);font-size:clamp(1.8rem,3.5vw,2.55rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:.85rem}
.sec-sub{color:var(--text2);font-size:.97rem;max-width:28.125rem;font-weight:300;margin-bottom:2.4rem}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.feat-card{background:var(--bg2);padding:2rem;transition:background .2s}
.feat-card:hover{background:var(--bg3);transform:translateY(-3px);transition:background .2s,transform .2s,box-shadow .2s}
.feat-icon{width:40px;height:40px;background:rgba(124,92,252,.11);border:1px solid rgba(124,92,252,.2);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:0;margin-bottom:1rem;filter:none}
.feat-card h3{font-family:var(--font-body);font-size:.97rem;font-weight:700;margin-bottom:.38rem}
.feat-card p{color:var(--text2);font-size:.84rem;line-height:1.65;font-weight:300}
/* The icons are inline SVG, not emoji: emoji render differently on every OS
   and never matched the type. font-size:0 on the tile kills the whitespace
   the old emoji text node left behind. */
.feat-icon svg,.step-visual svg{width:19px;height:19px;fill:none;stroke:var(--accent2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The one section on the page with no panel under it. It was centred for a
   while, which was a mistake: every other section here is left-aligned, so a
   centred one does not read as emphasis, it reads as a different component
   that has wandered in. The type is identical — Cormorant 800 at the same
   size, Inter for the eyebrow and the paragraph, same as #features — and
   alignment alone was enough to make it look like it was not.

   What it keeps is the tighter padding. It has a heading and a paragraph and
   nothing under them, so a full 5rem top and bottom leaves it looking like an
   illustration that failed to load. */
#why{padding-top:2.5rem;padding-bottom:3.5rem}

/* ──────────── PRODUCT TOUR ────────────
   The three-pane workspace mock in the landing page: profile, top matches,
   today's activity. It stands where the live-scan terminal used to, and makes
   the same argument by showing the product rather than an animation of it.

   Moved here out of an inline <style> in index.html, and deduplicated on the
   way: ten selectors were declared twice, an iteration pasted on top of the
   one before it rather than merged into it, and .tour-metric* was a whole
   component the markup had stopped using. Nothing else changed — the computed
   styles were compared element by element before and after.

   .tour-path and .tour-live went with them: both were styled, neither was ever
   put in the markup. If the topbar is meant to carry a breadcrumb and a "live"
   chip, the markup is the missing half, not the CSS. */
.product-tour{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 5rem;position:relative;z-index:1}
.tour-heading{margin-bottom:2rem}
.tour-workspace{background:var(--surface);border:1px solid var(--border2);border-radius:16px;overflow:hidden;box-shadow:0 20px 52px rgba(13,10,36,.2)}
.tour-topbar{height:2.7rem;padding:0 1rem;display:flex;align-items:center;gap:.45rem;background:var(--bg3);border-bottom:1px solid var(--border);justify-content:flex-start}
.tour-topbar span:last-child{font-size:.68rem;color:var(--text3);margin-left:.3rem}
.tour-layout{display:grid;grid-template-columns:.75fr 1.1fr 1.15fr;min-height:16rem}
.tour-pane{padding:1.25rem;border-right:1px solid var(--border)}
.tour-pane:last-child{border:0}
.tour-kicker{font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;color:var(--accent2);font-weight:700;margin-bottom:.85rem}
.tour-profile{display:flex;align-items:center;gap:.55rem;margin-bottom:.8rem;padding:.75rem;border-radius:10px;background:var(--bg2)}
.tour-avatar{width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent3));position:relative}
.tour-profile strong,.tour-match strong,.tour-draft strong{display:block;font-size:.72rem}
.tour-profile small,.tour-match small,.tour-draft small{display:block;color:var(--text3);font-size:.63rem;margin-top:.12rem}
.tour-meta{font-size:.62rem;color:var(--text2);padding:.58rem .15rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.tour-meta b{float:none;color:var(--text);font-size:.67rem}
.tour-match{display:flex;justify-content:space-between;align-items:center;padding:.72rem .15rem;border-bottom:1px solid var(--border)}
.tour-match.active{margin:0 -.45rem;padding:.65rem .45rem;background:rgba(124,92,252,.10);border-radius:7px;border-bottom-color:transparent;box-shadow:inset 3px 0 var(--accent2)}
.tour-score{font-size:.7rem;color:var(--green);font-weight:700;padding:.24rem .38rem;border-radius:5px;background:rgba(52,211,153,.11)}
.tour-avatar::after{content:'';position:absolute;right:-1px;bottom:-1px;width:.48rem;height:.48rem;border-radius:50%;background:var(--green);border:2px solid var(--bg2)}
.tour-match small{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-activity{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
/* The application strip, under the three panes. The panel showed a profile,
   some matches and a count of what happened — none of which is the thing
   anyone is paying for. This is: the tailored CV line for the job selected in
   the middle pane, which is why it names Northstar rather than being generic.

   It is headed "Application sent" rather than "Tailored draft" on purpose.
   Drafting and sending are two different promises, and the page makes the
   auto-apply one — in the hero, in the activity tiles above ("Queued",
   "Applied"), and here. Auto-apply is not built yet; every plan row, the
   pricing banner, the features grid and the Terms modal say so in as many
   words, which is the condition under which this panel shows the finished
   behaviour rather than today's. If that ships late, this kicker and the hero
   line are the two places that have to move back.

   It carries no "verified" badge. One was tried and it read as a disclaimer:
   a small green pill at the right-hand end of a full-width strip under a panel
   is the shape fine print comes in, whatever it says.

   The job title and company repeat the selected match above deliberately —
   that repetition is the whole point, since it is what shows the application
   was written for that posting rather than in general. They use the same
   strong and small pattern as the match rows, so the strip reads as more of
   the panel's content instead of a caption attached to it.

   One strip rather than a fourth column: at three panes the layout is already
   at the width it can carry, and this belongs *after* the match it was written
   for rather than beside it. */
.tour-draft{border-top:1px solid var(--border);padding:1rem 1.25rem}
.tour-draft .tour-kicker{margin-bottom:.6rem}
/* The tick is back, but on the kicker rather than in a pill of its own.
   As a green badge at the right-hand end of the strip it read as a
   compliance stamp; in front of "Application sent" it reads as what it
   is, the status of the row — the same job the highlight does on the
   selected match above. */
.tour-tick{color:var(--green);margin-right:.3rem;font-style:normal}
/* The dashboard's copy of the panel (js/workspace.js). It shares every class
   above so the two cannot drift — the tour is a promise about what the
   dashboard looks like, and one stylesheet is what keeps the promise true.
   Only the window chrome differs: the landing mock has three decorative
   traffic lights because it is pretending to be a screenshot, and in the real
   dashboard that bar is worth a status line and a refresh button instead. */
.ws-bar{justify-content:space-between;padding-right:.55rem}
.ws-status{font-size:.64rem;color:var(--text3)}
.ws-refresh{padding:.2rem .5rem;font-size:.72rem;line-height:1}
.ws-empty{font-size:.68rem;color:var(--text3);line-height:1.5;padding:.4rem 0}
.ws-empty.muted{color:var(--text3);opacity:.85}
/* The avatar is a real monogram here rather than an empty gradient disc. */
.ws .tour-avatar{display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#fff}

/* The GO button. Big and round on purpose: it is the one thing on this screen
   that starts the process the whole product is about, and the three steps
   above it exist to lead the eye here. Everything else in the dashboard is a
   rectangle, which is what makes a circle read as "this one is different"
   without needing a colour nobody else uses.

   .go-spin is applied while a run is in flight — the fetch hits four job
   boards and then scores everything against the profile, so it is routinely a
   ten-second wait and the button has to look busy rather than broken. */
.go-wrap{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.6rem 0 .4rem;border-top:1px solid var(--border);margin-top:1.4rem}
.go-btn{width:5.2rem;height:5.2rem;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#8b6cfd,var(--accent));color:#fff;
  font-family:var(--font-head);font-size:1.5rem;font-weight:800;letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(124,92,252,.34);transition:transform .16s,box-shadow .16s,filter .16s}
.go-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,92,252,.42)}
.go-btn:active:not(:disabled){transform:translateY(0)}
.go-btn:disabled{cursor:not-allowed;filter:grayscale(.35);opacity:.75;box-shadow:none}
.go-btn.go-spin{animation:goPulse 1.1s ease-in-out infinite}
@keyframes goPulse{0%,100%{box-shadow:0 8px 24px rgba(124,92,252,.30)}50%{box-shadow:0 8px 34px rgba(124,92,252,.55)}}
.go-label{display:block;line-height:1}
.go-note{font-size:.72rem;color:var(--text3);text-align:center;max-width:24rem;line-height:1.5}

/* ──────────── MAIL ────────────
   Three folders over one list. The row is a grid rather than a flex line so
   the sender column stays put down the list — a ragged left edge is what makes
   a mail list hard to scan, and every mail client in the world aligns it. */
.mail-folders{display:flex;gap:.4rem;flex-wrap:wrap}
.mail-tab{background:transparent;color:var(--text2);border:1px solid var(--border2);padding:.4rem .85rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.8rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem}
.mail-tab:hover{color:var(--text)}
.mail-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mail-count,.sb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:100px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700}
.mail-tab.active .mail-count{background:rgba(255,255,255,.28)}
.sb-badge{margin-left:auto}
.mail-row{display:grid;grid-template-columns:11rem 1fr auto;gap:.8rem;align-items:baseline;padding:.7rem .2rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .13s}
.mail-row:last-child{border-bottom:none}
.mail-row:hover{background:rgba(124,92,252,.06)}
/* Unread is weight plus a rule down the left edge, not colour alone: colour
   alone is the one cue a reader with low vision or a mono display loses. */
.mail-row.unread{box-shadow:inset 2px 0 var(--accent2)}
.mail-row.unread .mail-who,.mail-row.unread .mail-subj{color:var(--text);font-weight:600}
.mail-who{font-size:.78rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-subj{font-size:.8rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-when{font-size:.7rem;color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums}
.mail-actions{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.mail-read-head h4{font-family:var(--font-body);font-size:1rem;font-weight:700}
.mail-read-meta{font-size:.74rem;color:var(--text3);margin-top:.2rem}
/* pre, so a reply keeps the line breaks the sender typed, with wrapping so a
   long line does not push the card sideways. */
.mail-read-body{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);font-family:var(--font-body);font-size:.84rem;line-height:1.7;color:var(--text2);white-space:pre-wrap;word-break:break-word}
@media(max-width:560px){.mail-row{grid-template-columns:1fr auto}.mail-who{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.go-btn.go-spin{animation:none}}
/* min-height, not a narrower measure. The letter is three lines in five of
   the six languages and two in English, and chasing that with the measure
   only pushes the longer ones to four. Reserving three lines keeps the
   panel the same height whichever language it is read in, which matters
   more here than on a text section: this is meant to look like one fixed
   product window, not a box that resizes when you change language. */
.tour-draft-text{font-size:.7rem;line-height:1.6;color:var(--text2);margin-top:.45rem;max-width:30rem;min-height:3.36rem}
.tour-activity-row{display:block;padding:.75rem;border:1px solid var(--border);border-radius:9px;background:var(--bg2)}
.tour-activity-row span{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}
/* Body face, not the display serif the landing page uses for its big
   numbers. This panel is a picture of the product, and product UI sets
   figures in the UI font — Cormorant numerals here make a dashboard look
   like a magazine. tabular-nums so the four tiles line up as they change. */
.tour-activity-row b{display:block;font-family:var(--font-body);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:.3rem}
.tour-activity-row:nth-child(1) b{color:var(--accent3)}
.tour-activity-row:nth-child(2) b{color:var(--accent2)}
.tour-activity-row:nth-child(3) b{color:var(--amber)}
.tour-activity-row:nth-child(4) b{color:var(--green)}
@media(max-width:1040px){
  .tour-layout{grid-template-columns:1fr}
  .tour-pane{border-right:0;border-bottom:1px solid var(--border)}
  .tour-pane:last-child{border-bottom:0}
  .price-card:nth-child(2){transform:none}
}
@media(max-width:460px){
  .tour-activity{grid-template-columns:1fr 1fr}
  .tour-activity-row{padding:.6rem .4rem}
  .tour-activity-row b{font-size:1.2rem}
}

.how-grid{display:grid;grid-template-columns:minmax(0,42rem);gap:4rem;align-items:center;justify-content:center}
.steps{display:flex;flex-direction:column;gap:.8rem}
.step{display:flex;gap:.7rem;align-items:stretch}
.step-n{width:29px;height:29px;border-radius:50%;background:rgba(124,92,252,.14);border:1px solid rgba(124,92,252,.32);color:var(--accent2);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.7rem}
.step h4{font-family:var(--font-body);font-weight:700;font-size:.92rem;margin-bottom:.22rem}
.step p{color:var(--text2);font-size:.83rem;font-weight:300}
/* Each step is a card now, with its own icon tile. .step-copy is the second
   line of step 3's heading, which is a <span> inside the <h4> so that the
   two halves stay separate i18n keys. */
.step>div:last-child{flex:1}
.step-card{display:grid;grid-template-columns:2.65rem 1fr;gap:.85rem;padding:.8rem .9rem;border:1px solid var(--border);border-radius:10px;background:var(--bg2)}
.step-visual{display:grid;place-items:center;width:2.65rem;height:2.65rem;border-radius:8px;background:rgba(124,92,252,.12)}
.step-visual svg{width:21px;height:21px}
.step h4{margin-top:.05rem}
.step-copy{font-family:var(--font-body);font-size:.83rem;font-weight:300;color:var(--text2);line-height:1.55}

.mac{width:8px;height:8px;border-radius:50%}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.65rem;position:relative;display:flex;flex-direction:column}
/* No "Most popular" ribbon: nothing here is for sale, so nothing is popular. */
.pplan{display:inline-block;background:rgba(251,191,36,.12);color:var(--amber);border:1px solid rgba(251,191,36,.3);font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.1rem .55rem;border-radius:100px;margin-bottom:.7rem}
.pname{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.55rem}
.pamount{font-family:var(--font-head);font-size:2.3rem;font-weight:800}
.pamount sup{font-size:.85rem;vertical-align:super;font-weight:500}
.pamount .per{font-size:.82rem;color:var(--text3);font-family:var(--font-body);font-weight:300}
.pdesc{font-size:.81rem;color:var(--text2);margin:.6rem 0 1.2rem;font-weight:300}
.pdiv{border:none;border-top:1px solid var(--border);margin-bottom:1rem}
.pfeat{display:flex;align-items:flex-start;gap:.5rem;font-size:.81rem;color:var(--text2);margin-bottom:.5rem;font-weight:300}
.pfeat::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0;margin-top:.05rem}
.pfeat.off{color:var(--text3)}.pfeat.off::before{content:'—';color:var(--text3);font-weight:400}
/* The middle plan is lifted and ribboned. .price-card is a column flexbox
   above so the button can take margin-top:auto and sit on the same line in
   all three cards however long the feature list is. */
.price-card:nth-child(2){border-color:rgba(124,92,252,.7);box-shadow:0 12px 34px rgba(124,92,252,.14);transform:translateY(-.55rem)}
.price-card:nth-child(2)::before{content:'Recommended';position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:.22rem .65rem;border-radius:99px;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.price-card .btn{margin-top:auto!important}

footer{border-top:1px solid var(--border);padding:2.2rem var(--gutter);max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem}
.f-logo{font-family:var(--font-head);font-size:1rem;font-weight:800}
.f-logo span{color:var(--accent2)}
.f-links{display:flex;gap:1.4rem}
.f-links a{font-size:.76rem;color:var(--text3);text-decoration:none;cursor:pointer;transition:color .15s}
.f-links a:hover{color:var(--text2)}
footer p{font-size:.72rem;color:var(--text3)}

/* ──────────── AUTH ──────────── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1}
.auth-box{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:2.4rem;width:100%;max-width:410px;box-shadow:var(--shadow)}
.auth-logo{font-family:var(--font-head);font-size:1.25rem;font-weight:800;text-align:center;margin-bottom:.35rem}
.auth-logo span{color:var(--accent2)}
.auth-sub{text-align:center;color:var(--text3);font-size:.83rem;margin-bottom:1.9rem}
.auth-form{display:flex;flex-direction:column;gap:.95rem}
.auth-div{display:flex;align-items:center;gap:.7rem;color:var(--text3);font-size:.76rem;margin:.35rem 0}
.auth-div::before,.auth-div::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-foot{text-align:center;font-size:.8rem;color:var(--text3);margin-top:1.1rem}
.auth-foot a{color:var(--accent2);text-decoration:none;cursor:pointer}
.auth-foot a:hover{text-decoration:underline}
.oauth-btn{width:100%;padding:.62rem;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text2);font-family:var(--font-body);font-size:.83rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem;transition:all .15s}
.oauth-btn:hover{border-color:rgba(255,255,255,.2);color:var(--text)}

/* ──────────── DASHBOARD ──────────── */
#page-dashboard{min-height:100vh}
.dash-layout{display:grid;grid-template-columns:226px 1fr;min-height:100vh}
.sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{font-family:var(--font-head);font-size:1.08rem;font-weight:800;padding:1.35rem 1.35rem 1.15rem;border-bottom:1px solid var(--border);cursor:pointer}
.sb-logo span{color:var(--accent2)}
.sb-sec{font-size:.63rem;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;padding:.85rem 1.35rem .32rem}
.sb-item{display:flex;align-items:center;gap:.7rem;padding:.57rem 1.35rem;font-size:.83rem;color:var(--text2);cursor:pointer;transition:all .13s;border-left:2px solid transparent;user-select:none}
.sb-item:hover{color:var(--text);background:var(--surface)}
.sb-item.active{color:var(--text);border-left-color:var(--accent);background:rgba(124,92,252,.07)}
.sb-item svg{width:14px;height:14px;flex-shrink:0;opacity:.65}
.sb-item.active svg{opacity:1}
.sb-bottom{margin-top:auto;border-top:1px solid var(--border);padding:.95rem 1.35rem}
.user-pill{display:flex;align-items:center;gap:.7rem}
.avatar{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0}
.sb-foot{padding:.4rem .3rem;display:flex;align-items:center;gap:.3rem}
.sb-foot .theme-btn{margin-left:auto}
.sb-back{padding:.6rem 1.35rem;border-top:1px solid var(--border)}
.sb-back a{font-size:.73rem;color:var(--text3);text-decoration:none;display:flex;align-items:center;gap:.38rem;transition:color .13s;cursor:pointer}
.sb-back a:hover{color:var(--text2)}

.main-area{padding:1.9rem 2.4rem;overflow-y:auto;max-height:100vh}
.page-head{margin-bottom:1.65rem;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.9rem}
.page-head-left h1{font-family:var(--font-body);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.page-head-left p{color:var(--text2);font-size:.85rem;margin-top:.18rem}

.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.95rem;margin-bottom:1.4rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}

.Job-row{display:flex;align-items:center;gap:.85rem;padding:.65rem 0;border-bottom:1px solid var(--border)}
.Job-row:last-child{border:none}
.Job-ico{width:33px;height:33px;border-radius:7px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.58rem;color:var(--text3);flex-shrink:0;font-weight:700}
.Job-inf{flex:1;min-width:0}
.Job-ttl{font-size:.81rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.Job-co{font-size:.7rem;color:var(--text3)}

/* DATA TABLE */
.dtable{width:100%;border-collapse:collapse;font-size:.81rem}
.dtable th{color:var(--text3);font-weight:500;text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.dtable td{padding:.62rem .7rem;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text2)}
.dtable tr:last-child td{border:none}
.dtable tr:hover td{background:rgba(255,255,255,.015)}

/* ──────────── TAILORED DRAFTS ────────────
   The two alert kinds carry the weight here. `.gap` is what the candidate does
   not appear to meet — the most decision-useful thing the model returns, and
   never shown to an employer. `.crit` is the anti-fabrication check finding a
   claim that is not in the profile. Both sit above the draft, not under it. */
.draft-alert{border:1px solid var(--border2);border-left-width:4px;border-radius:var(--radius);padding:1.05rem 1.2rem;margin-bottom:1.1rem;background:var(--surface)}
.draft-alert h4{font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:.35rem}
.draft-alert p{font-size:.81rem;color:var(--text2);font-weight:300;line-height:1.6;max-width:680px}
.draft-alert ul{list-style:none;display:flex;flex-direction:column;gap:.42rem;margin-top:.75rem}
.draft-alert li{font-size:.84rem;color:var(--text);line-height:1.5;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.52rem .75rem}
.draft-alert.crit{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.28);border-left-color:var(--red)}
.draft-alert.crit h4{color:var(--red)}
.draft-alert.gap{background:rgba(251,191,36,.06);border-color:rgba(251,191,36,.28);border-left-color:var(--amber)}
.draft-alert.gap h4{color:var(--amber)}
.draft-alert.ok{background:rgba(52,211,153,.05);border-color:rgba(52,211,153,.24);border-left-color:var(--green)}
.draft-alert.ok h4{color:var(--green)}
.draft-alert.note{border-left-color:var(--accent2)}
.draft-alert.note h4{color:var(--accent2)}
.draft-role{padding:.85rem 0;border-bottom:1px solid var(--border)}
.draft-role:first-child{padding-top:0}
.draft-role:last-child{border-bottom:none;padding-bottom:0}
.draft-role-h{font-size:.87rem;font-weight:600}
.draft-role-c{font-size:.74rem;color:var(--text3);margin-bottom:.45rem}
.draft-role ul{list-style:disc;padding-left:1.15rem;display:flex;flex-direction:column;gap:.3rem}
.draft-role li{font-size:.82rem;color:var(--text2);line-height:1.55;font-weight:300}
#draft-skills .tag{cursor:default}

/* INTEGRATION ROW */
.int-row{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.8rem}
.int-row:last-child{margin:0}
.int-left{display:flex;align-items:center;gap:.9rem}
.int-ico{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0}

/* Between the full-width bar and the width at which the links are dropped
   altogether. The spacing that is right at 1360px is simply more than there is
   here, now that the switcher is a six-language menu rather than three 2-letter
   buttons and the bar carries a theme toggle as well. Everything in this tier
   gives up a little so that all four links stay on one line, in every language,
   down to the cut-off below — French is the one that decides it. */
@media(max-width:1120px){
  .nav-links{gap:.9rem}
  .nav-links a{font-size:.82rem}
  nav{gap:.75rem}
  .nav-right{gap:.4rem}
  .lang-select{width:5.6rem}
  .btn-ng{padding:.44rem .75rem}
  .btn-np{padding:.44rem .8rem}
}
/* The in-page links stand down here. 1000, not the 900 it was: four links plus
   a language menu plus two buttons is more than the bar holds in French, which
   needs "Fonctions · Comment ça marche · Tarifs · Tableau de bord" where English
   needs four short words. Measured by walking the width down until the
   right-hand group runs past the end of the bar: French spills 8px at 1001 and
   fits with nothing to spare at 1024, so the floor is a shade under 1024 and
   this is set clear of it rather than on it. (It was 1060 while the light bar
   was an inset pill and needed 36px more than the dark one; the two themes are
   the same width now, so one measurement covers both.) */
@media(max-width:1040px){
  nav{padding:.85rem 1.25rem}
  .nav-links{display:none}
  .feat-grid{grid-template-columns:1fr}
  .how-grid,.price-grid,.cfg-grid,.metrics-row,.grid2{grid-template-columns:1fr}
  .dash-layout{grid-template-columns:1fr}
  .sidebar{display:none}
}

/* ──────────── PHONES ────────────
   Everything left in the bar at this width — wordmark, theme toggle, language
   menu, two calls to action — has to fit across 375px, and at the desktop sizes
   it does not: it wrapped, doubled the bar's height, and covered the logo.
   Nothing is dropped here; the switcher is how a reader who does not read
   English gets a readable page at all. */
@media(max-width:560px){
  nav{padding:.7rem 1rem;gap:.5rem}
  .nav-logo{font-size:1.02rem}
  .nav-right{gap:.35rem}
  .lang-select{width:5.5rem;padding:.24rem 1.15rem .24rem .4rem;font-size:.66rem;background-size:.5rem;background-position:right .4rem center}
  /* Down to 24px from 34. One glyph can give up more than a word can, and
     every pixel it gives up is one the "Get started free" threshold below does
     not have to spend. */
  .theme-btn{padding:.24rem .34rem;font-size:.74rem}
  .btn-ng,.btn-np{padding:.4rem .62rem;font-size:.75rem}
  /* A 2.5rem gutter spends 80px of a 375px screen on nothing. */
  :root{--gutter:1.25rem}
  .hero{padding-top:7rem;padding-bottom:3.5rem}
  .land-sec{padding-top:3.2rem;padding-bottom:3.2rem}
  .hero-stats{gap:1.75rem;margin-top:2.6rem;padding-top:1.9rem}
}

/* The bar needs 441px to seat both calls to action, so below that the signup
   button stands down — it is the one control here that is duplicated: the
   hero's "Start for free" is the same destination, a bigger target, and
   already on screen. "Log in" is not duplicated anywhere on the landing page
   and stays. Both are set from storage.js with an empty inline display, which
   defers to this rule rather than fighting it.

   The figure is measured against the *widest language*, not English, and
   against the 18px root at the top of this file. It was 392px and this
   threshold was 430px when the root was the browser default; raising the root
   scaled the bar's contents with everything else and quietly pushed Russian
   past the old line, so a 431–441px window clipped the button again with
   nothing to show it. If the root moves again, or anything is added to the bar,
   re-measure rather than scaling this by eye.

   Re-measured three times now: when the theme toggle joined the bar, when
   German, French and Spanish did, and again once the light bar stopped being an
   inset pill and went back to the dark bar's geometry. That last change is
   worth a note, because it moved this number by more than either of the others:
   while the light bar was inset 2rem it was always the binding case, and every
   figure here had 36px added to it that no longer applies. The two themes are
   the same width now, so one measurement covers both.

   With both calls to action on screen the bar needs 505px in German, 486
   Bulgarian and Russian, 476 Spanish and French, 466 English. 540 is the German
   figure plus the ~36px of slack this threshold has always carried.

   French was once worse than any of these — "Commencer gratuitement" needed
   674px on its own — and that was fixed in the copy rather than here: the nav
   button is "Essai gratuit". Only the bar uses that key; the hero and
   how-it-works buttons are the separate "Get started free →" key and keep the
   longer wording.

   540 still hides the button earlier than English alone would need. That is the
   trade this threshold has always made — one breakpoint, measured against the
   widest language rather than the one the copy happens to be written in. */
@media(max-width:540px){
  #nav-signup{display:none}
}

/* One tier narrower still. With the signup button already gone, what is left —
   wordmark, theme toggle, language menu, "Log in" — still did not fit a 320px
   screen, which has 306 usable pixels once the light theme's bar is inset from
   the edges: the "Log in" button ran out past the right-hand end of the bar in
   Spanish, French and German.

   Nothing more is dropped, because nothing left is droppable: the theme and
   language controls exist nowhere else on the landing page, and "Log in" is the
   only way in. What gives instead is the whitespace between them, and the two
   controls that can afford to be a little smaller. Checked afterwards in all
   six languages at 320, 360 and 375px, on both themes. */
@media(max-width:380px){
  nav{padding:.6rem .55rem;gap:.3rem}
  .nav-right{gap:.22rem}
  .nav-logo{font-size:.95rem}
  .theme-btn{padding:.24rem .3rem}
  /* 4.9rem still clears "Български", the longest of the six names, by about
     10px at this size — measured, not assumed. Clipping the name of a language
     is the one thing a language menu must not do. */
  .lang-select{width:4.9rem;padding:.24rem 1rem .24rem .4rem;font-size:.63rem;background-position:right .35rem center}
}

/* ──────────── VERY WIDE DISPLAYS ────────────
   The column above is 1100px at every width, which is right up to about a
   1440p window and wrong past it: on a 3840px panel at 100% scale the page is
   a 28%-wide ribbon of 16px text with an ocean either side. These two tiers
   widen the column and scale the type with it — everything downstream is in
   rem, so it follows. Both are keyed to CSS pixels, so a 4K display running at
   150% reports 2560 and correctly gets the gentler tier.

   Nothing here applies below 2200px. A 1920px window is untouched. */
@media(min-width:2200px){
  :root{--maxw:1320px;--gutter:3rem}
  /* Relative to the 18px base at the top of this file, not to the browser's
     16. These tiers were written when the base was the default; left at 17px
     this one would have made a 4K display render *smaller* than a laptop. */
  html{font-size:19px}
  /* The bar keeps its full-bleed backdrop and border, but its *contents* stop
     hugging the screen edges and line up with the column instead. Left alone
     at 3840px the logo sat 1,322px away from the text it labels. This is
     deliberately not applied at ordinary desktop widths, where a full-bleed
     bar over a centred column is the intended look. */
  nav{padding-inline:calc((100% - var(--maxw))/2 + var(--gutter))}
  /* The dashboard has no column of its own — it fills whatever the sidebar
     leaves, which at this width is a 3,600px-wide table. */
  .main-area{max-width:100rem;width:100%;margin-inline:auto}
}
@media(min-width:3000px){
  :root{--maxw:1560px;--gutter:3.5rem}
  html{font-size:21px}
}

/* ──────────── LIGHT THEME ────────────
   Everything below is scoped to [data-theme="light"], set on <html> by
   js/theme.js before first paint. Nothing above this line changes, so the dark
   design is exactly what it was.

   This block sits last in the file on purpose. A theme-scoped rule already
   outranks its unscoped twin on specificity (0,1,1 against 0,0,1), which is why
   it can also override declarations made inside the media queries above — but
   the light theme's *own* responsive tiers are same-specificity against its own
   base rules, so they have to come after them, and they do, at the bottom.

   Two kinds of rule live here. The first is the palette: most of the page needs
   nothing more, because it is drawn from the custom properties. The second is
   the handful of places where a colour is baked into a rule rather than taken
   from a token — a white hover border, a black modal scrim — plus the shape
   changes the light design actually calls for. */
[data-theme="light"]{
  /* --bg is what shows through the mesh in .glow; --bg2 is very slightly cool
     so an input reads as a field on a white card rather than as a hole in it. */
  --bg:#f4f2fb;--bg2:#fbfaff;--bg3:#f7f5fd;--surface:#ffffff;--surface2:#efecfa;
  --border:rgba(23,17,54,.08);--border2:rgba(23,17,54,.13);
  /* Darker than the dark theme's, and not by taste: --accent carries white text
     on buttons, and --accent2 is a *text* colour on the eyebrows, links and
     tags. The dark theme's #a78bfa on white is about 2:1, which is unreadable.
     These are 5.3:1 for white-on-accent and 6.9:1 for accent2-on-white. The
     hero's gradient keeps the brighter pair — see .hero h1 em below. */
  --accent:#6d4bf5;--accent2:#5b34d6;--accent3:#0284c7;
  /* Same reason. The status colours are all used as text on a pale tint of
     themselves (.b-sent, .ban-warn, .pfeat::before), and the dark theme's
     pastels vanish there. */
  --green:#047857;--amber:#b45309;--red:#dc2626;
  --text:#191830;--text2:#55536f;--text3:#82809c;
  /* Light-theme shadows are violet rather than black: a neutral drop shadow on
     a tinted background reads as grey dirt under the card.

     Three steps, and every one of them is two shadows rather than one. The
     tight layer is what actually separates a box from the page — it is doing
     the job the border cannot, because --border at 8% on a near-white surface
     is almost invisible. The wide, fainter layer is the depth. A single large
     blur on its own reads as a halo round the box rather than as a box sitting
     above something, which is the difference between this looking smooth and
     looking blurry.

     sm: boxes inside a card — step cards, activity tiles, the profile row.
     md: cards on the page — features, pricing, dashboard panels.
     lg: the things that float — the workspace panel, modals, the auth box. */
  --sh-sm:0 1px 2px rgba(76,53,150,.05),0 2px 6px rgba(76,53,150,.05);
  --sh-md:0 2px 4px rgba(76,53,150,.05),0 8px 22px rgba(76,53,150,.07);
  --sh-lg:0 4px 10px rgba(76,53,150,.06),0 18px 46px rgba(76,53,150,.12);
  --shadow:var(--sh-lg);
  color-scheme:light;
}
/* The page's own colour is only the base coat; the gradient is .glow, below. */
[data-theme="light"] body{background:var(--bg)}

/* The mesh. .glow already exists as a fixed, non-interactive layer under the
   content on the landing and auth pages (.land-z lifts everything above it), so
   the light theme reshapes that one element into a full-viewport wash instead of
   introducing a second layer or a background-attachment:fixed on <body>, which
   is the version that stutters on a phone.

   Fixed, so it does not repeat or seam as the page scrolls — the whole document
   sits on one continuous field of colour. It is also why the dashboard, which
   has no .glow, stays a plain light surface: an app screen wants quiet. */
[data-theme="light"] .glow{
  /* -24px on the right, to paint under the gutter that scrollbar-gutter keeps
     reserved at the top of this file. A page too short to scroll has no
     scrollbar in that gutter, and the mesh — being a fixed box sized to the
     viewport without it — stopped 15px early and left a flat pale strip down
     the right-hand edge of the login page. 24 covers the widest scrollbar a
     desktop theme is likely to ask for; it is a soft radial, so overshooting
     costs nothing, and a fixed box adds no scrollable overflow. */
  top:0;left:0;right:-24px;bottom:0;width:auto;height:auto;transform:none;
  background:
    radial-gradient(42rem 30rem at 6% -8%,rgba(255,158,214,.50),transparent 62%),
    radial-gradient(40rem 28rem at 96% 0%,rgba(139,185,255,.52),transparent 64%),
    radial-gradient(46rem 30rem at 48% 108%,rgba(150,238,198,.42),transparent 62%),
    radial-gradient(38rem 34rem at 88% 86%,rgba(186,166,255,.40),transparent 66%);
}

/* NAV — colours only. Geometry is deliberately left to the base rule, so the
   bar is in exactly the same place, at exactly the same size, in both themes.

   It was a centred, inset pill for a while, which is what the reference design
   showed. The cost was that pressing the theme toggle relayed out the bar
   underneath your cursor: it shrank away from both screen edges and slid to the
   middle. A control that moves the moment you press it is a worse thing than a
   plainer bar, and the toggle sits *in* the bar, so it moved itself.

   Nothing here sets top, left, right, width, transform, padding or radius. The
   translucency still does real work: the mesh behind it shows through, so the
   bar picks up the pink at one end and the blue at the other rather than
   sitting on the page as a flat white slab. */
[data-theme="light"] nav{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 20px rgba(76,53,150,.07);
}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .btn-ng:hover,
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .lang-select:hover,
[data-theme="light"] .lang-select:focus,
[data-theme="light"] .theme-btn:hover,
[data-theme="light"] .src-btn:hover,
[data-theme="light"] .oauth-btn:hover{border-color:rgba(23,17,54,.22)}
/* The chevron is baked into a data: URI, so its colour cannot come from a
   custom property — the light theme needs its own copy. Same path, stroke
   swapped for the light --text2. */
/* The feature tiles are a solid purple gradient on light, so the icon inside
   them has to invert — it is stroked with --accent2 on dark. */
[data-theme="light"] .feat-icon svg{stroke:#fff}
[data-theme="light"] .lang-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%2355536f' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E")}

/* BUTTONS — fully round, and the primary one carries a coloured shadow of its
   own so it still reads as raised against a pale page, where the dark theme's
   contrast alone was doing that job. */
[data-theme="light"] .btn,
[data-theme="light"] .btn-ng,
[data-theme="light"] .btn-np{border-radius:100px}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-np{background:linear-gradient(135deg,#8b6cfd,#6d4bf5);box-shadow:0 6px 18px rgba(109,75,245,.30)}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-np:hover{background:linear-gradient(135deg,#9a7dff,#7b5bff);box-shadow:0 10px 24px rgba(109,75,245,.34)}
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-ng{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(76,53,150,.07)}
[data-theme="light"] .btn-danger{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.25)}
[data-theme="light"] .btn-danger:hover{background:rgba(220,38,38,.14)}

/* HERO — the badge becomes a white pill, as the tinted lavender one all but
   disappeared against the mesh. */
[data-theme="light"] .hero-badge{background:rgba(255,255,255,.88);border-color:rgba(109,75,245,.20);box-shadow:0 4px 14px rgba(76,53,150,.10)}
/* The one place the brighter accents stay. This is 2.5rem–4.7rem type, where
   the threshold is 3:1 rather than 4.5:1, and both ends clear it (4.4 and 3.5).
   Using the darkened --accent2/--accent3 here would have made the headline the
   heaviest thing on an otherwise airy page. */
[data-theme="light"] .hero h1 em{background-image:linear-gradient(135deg,#7c5cfc,#3b9ae8)}

/* FEATURES — the dark theme's hairline mosaic (a 1px-gapped grid whose gaps are
   the border colour) depends on the cards being lighter than the line between
   them. Inverted, that reads as a wireframe. Light gets separated cards with a
   shadow instead, which is also what the reference design shows. */
[data-theme="light"] .feat-grid{gap:1.15rem;background:none;border:none;border-radius:0;overflow:visible}
[data-theme="light"] .feat-card{background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.9);border-radius:16px;transition:background .2s,box-shadow .2s,transform .2s}
[data-theme="light"] .feat-card:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--sh-lg)}
[data-theme="light"] .feat-icon{background:linear-gradient(135deg,#8b6cfd,#6d4bf5);border-color:transparent;box-shadow:0 4px 12px rgba(109,75,245,.28)}

/* SURFACES — a card that is white on a white page needs an edge that is not
   just a border, or the layout flattens into one sheet. */
[data-theme="light"] .card,
[data-theme="light"] .mc,
[data-theme="light"] .price-card,
[data-theme="light"] .int-row,
[data-theme="light"] .feat-card,
[data-theme="light"] .tags-wrap{box-shadow:var(--sh-md)}
/* The boxes *inside* a card, which had only a border and so had almost
   nothing: the three step cards, the four activity tiles and the profile row
   at the top of the tour. */
[data-theme="light"] .step-card,
[data-theme="light"] .tour-activity-row,
[data-theme="light"] .tour-profile{box-shadow:var(--sh-sm)}
/* The workspace panel carries a near-black shadow that is right on the dark
   theme and reads as grey smudge on this one. */
[data-theme="light"] .tour-workspace{box-shadow:var(--sh-lg)}
/* Restores the lift on the recommended plan, which the generic .price-card
   rule above was flattening: both selectors are (0,2,0), so the later one won
   and all three cards came out identical. Keeps the accent tint, since this
   one is meant to read as raised rather than merely present. */
[data-theme="light"] .price-card:nth-child(2){box-shadow:0 4px 10px rgba(124,92,252,.10),0 18px 46px rgba(124,92,252,.18)}
[data-theme="light"] .auth-box{background:rgba(255,255,255,.86);backdrop-filter:blur(18px)}
[data-theme="light"] #modal-overlay{background:rgba(32,22,72,.34)}
[data-theme="light"] #toast{box-shadow:0 8px 26px rgba(76,53,150,.22)}

/* The three rules whose separator is a white alpha — invisible on white. */
[data-theme="light"] .dtable td{border-bottom-color:rgba(23,17,54,.07)}
[data-theme="light"] .dtable tr:hover td{background:rgba(23,17,54,.028)}


/* DASHBOARD — the sidebar is the white plane and the work area the tinted one,
   which is the opposite of the dark theme and the right way round on light:
   the reading surface should be the calmer of the two. */
[data-theme="light"] .sidebar{background:#fff;box-shadow:1px 0 18px rgba(76,53,150,.06)}
[data-theme="light"] .sb-item:hover{background:rgba(23,17,54,.035)}
[data-theme="light"] .sb-item.active{background:rgba(109,75,245,.08)}