/* Plate in the new landing's theme (2026-09-27): the shared layer.

   Loaded last on studio.html and on the reading pages (terms, privacy, evidence, download,
   how-it-works). It restyles; it does not move, hide or reveal anything a script decides. In
   particular it never sets `display` on .header-signin, .header-cta or .bar-session (studio.css
   shows them by data-plan), and every element with the `hidden` attribute stays hidden.

   The language, taken from the landing's css/page.css:
     - one dark room (#0B0B0C), warm ink (#EEEDE8), a quiet second ink (#8E8D88), hairlines;
     - Bodoni Moda for display, Archivo for text and for the expanded uppercase labels. Both
       SIL OFL 1.1, vendored in assets/fonts with their licences. Hebrew keeps Heebo (OFL);
     - pills: white for the main action, outlined for the second one, and solid orange only
       for Get Plate Pro. Orange appears nowhere else except the mark's stripe;
     - K's glass tile: a real work inside a tile whose thick rim carries the mark
       (white | stripe | black), and small wall tiles with a thin light rim;
     - the launch offer tag, hung off Get Plate Pro on a string;
     - motion: short, damped, no constant movement. Reduced motion stills all of it. */

@font-face { font-family: "Bodoni Moda"; src: url("assets/fonts/BodoniModa-opsz-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/Archivo-wdth-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

/* Hebrew: the same Heebo files studio-sell.css and /he/ already use (SIL OFL 1.1). Declared here
   too so the guide pages, which do not load studio-sell.css, can use it. */
@font-face { font-family: "Heebo"; src: url("assets/fonts/Heebo-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("assets/fonts/Heebo-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("assets/fonts/Heebo-700.woff") format("woff"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("assets/fonts/Heebo-900.woff") format("woff"); font-weight: 800 900; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
body.plate-sub {
  --room: #0B0B0C; --ink-l: #EEEDE8; --ink-l2: #8E8D88; --ink-l3: #5E5D59;
  --hair: rgba(238,237,232,.14); --hair-2: rgba(238,237,232,.24); --hair-3: rgba(238,237,232,.42);
  --stripe: #FF5C00; --pro: #CC4400; --pro-hover: #E04E00; --pill-white: #F2F0EA;
  --panel-bg: #121214; --panel-bg-2: #17171A; --field-bg: rgba(11,11,12,.86);
  --t-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --t-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,0,0,1); --ease-out: cubic-bezier(.2,.7,.2,1);
  /* the older layers read these: point them at the room */
  --s-bg: var(--room); --s-surface: var(--panel-bg); --s-raise: var(--panel-bg-2); --s-line: var(--hair); --s-line-2: var(--hair-2);
  --s-text: var(--ink-l); --s-muted: var(--ink-l2); --s-dim: var(--ink-l3); --s-font: var(--t-text);
  --bg: var(--room); --panel: var(--panel-bg); --panel-2: var(--panel-bg-2); --ink: var(--ink-l); --body: #C9C8C2; --muted: var(--ink-l2);
  --line: var(--hair); --rule: var(--hair); --ink-2: var(--ink-l2); --ink-3: var(--ink-l3); --secondary: var(--ink-l2);
  --sans: var(--t-text); --display: var(--t-display); --radius: 16px;
  --orange-solid: var(--pro); --orange-solid-hover: var(--pro-hover);
  font-family: var(--t-text); font-stretch: 100%; letter-spacing: 0; background: var(--room); color: var(--ink-l);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Hebrew: Heebo for display and text alike; Bodoni and Archivo carry no Hebrew */
html[lang="he"] body.plate-sub { --t-display: "Heebo", system-ui, sans-serif; --t-text: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif; }
body.plate-sub::before { display: none; }
.plate-sub ::selection { background: var(--ink-l); color: var(--room); }
.plate-sub :is(p, li, dd, small, figcaption) { color: var(--ink-l2); }

/* type */
.plate-sub h1, .plate-sub h2 { font-family: var(--t-display); font-weight: 500; font-variation-settings: "opsz" 96; letter-spacing: -.015em; line-height: .98; color: var(--ink-l); }
.plate-sub h3, .plate-sub h4 { font-family: var(--t-text); font-weight: 600; letter-spacing: 0; color: var(--ink-l); }
html[lang="he"] .plate-sub h1, html[lang="he"] .plate-sub h2 { font-weight: 700; letter-spacing: -.01em; line-height: 1.08; font-variation-settings: normal; }
/* one tone: the second line of a headline is not greyed out */
.plate-sub .entry h1 span, .plate-sub .ws-title span { color: inherit; }
/* labels: the landing's expanded uppercase */
.plate-sub .kicker, .plate-sub .setup-eyebrow, .plate-sub .ws-eyebrow, .plate-sub .composer > label, .plate-sub .composer legend,
.plate-sub .community-form label:not(.community-check), .plate-sub #login-form > label {
  font-family: var(--t-text); font-stretch: 125%; font-weight: 560; font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-l2) !important; }
html[lang="he"] .plate-sub :is(.kicker, .setup-eyebrow, .ws-eyebrow, .composer > label, .composer legend, .community-form label:not(.community-check), #login-form > label) { font-stretch: 100%; font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 600; }
.plate-sub .kicker { margin-bottom: 16px; }

/* ------------------------------------------------------------------ pills */
/* plate-identity.css draws corner brackets on every button; the landing's pills have none */
.plate-sub .button::before, .plate-sub .button::after, .plate-sub .reg-button::before, .plate-sub .reg-button::after { display: none !important; }
.plate-sub .button, .plate-sub .ws-cta, .plate-sub .ws-ghost, .plate-sub .lib-open, .plate-sub .reg-button, .plate-sub .lang-switch {
  font-family: var(--t-text); font-stretch: 100%; letter-spacing: .005em; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.plate-sub .button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--pill-white); color: #0C0C0E; font-weight: 600; font-size: 15px; box-shadow: none; }
.plate-sub .button:hover { background: #FFFFFF; color: #0C0C0E; transform: none; box-shadow: none; }
.plate-sub .button:active { transform: translateY(1px); }
.plate-sub .button[disabled] { opacity: .5; }
.plate-sub .button-small { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.plate-sub .button-ghost, .plate-sub .ws-ghost { background: transparent; color: var(--ink-l); box-shadow: inset 0 0 0 1px var(--hair-3); }
.plate-sub .button-ghost:hover, .plate-sub .ws-ghost:hover { background: rgba(238,237,232,.08); color: var(--ink-l); box-shadow: inset 0 0 0 1px rgba(238,237,232,.7); }
.plate-sub .button-danger { background: transparent; color: #FF8A8D; box-shadow: inset 0 0 0 1px rgba(229,72,77,.55); }
.plate-sub .button-danger:hover { background: rgba(229,72,77,.12); color: #FF8A8D; }
/* Google keeps its near-white field, so its red stroke never sits on a colour */
.plate-sub button.button.button-google, .plate-sub a.button.button-google { min-height: 56px; border-radius: 999px; background: var(--pill-white); color: #0C0C0E; font-size: 16px; font-weight: 600; gap: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.plate-sub button.button.button-google:hover { background: #FFFFFF; color: #0C0C0E; transform: none; }
.plate-sub .button-google .g-mark { width: 20px; height: 20px; }
/* Get Plate Pro: the one orange control */
.plate-sub .reg-button.header-cta, .plate-sub .header-cta-solid, .plate-sub #upgrade {
  background: var(--pro); color: #FFFFFF; border: 0; border-radius: 999px; box-shadow: none; font-weight: 600; }
.plate-sub .reg-button.header-cta:hover, .plate-sub .header-cta-solid:hover, .plate-sub #upgrade:hover { background: var(--pro-hover); color: #FFFFFF; }
.plate-sub #upgrade { min-height: 48px; padding: 0 22px; font-size: 15px; }
.plate-sub .text-link { font: 500 14px/1.4 var(--t-text); font-stretch: 100%; color: var(--ink-l2); border-bottom: 1px solid var(--hair-2); padding-bottom: 1px; }
.plate-sub .text-link:hover { color: var(--ink-l); border-bottom-color: var(--ink-l); }
.plate-sub .instructions-link { font-family: var(--t-text); color: var(--ink-l); text-decoration: underline; text-decoration-color: var(--hair-3); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.plate-sub .instructions-link:hover { text-decoration-color: var(--ink-l); }
.plate-sub :is(input, textarea, select, button, a, summary):focus-visible { outline: 2px solid var(--ink-l); outline-offset: 3px; }

/* ------------------------------------------------------------------ header */
.plate-sub .site-header { background: transparent; box-shadow: none; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.plate-sub .site-header.is-scrolled { background: rgba(11,11,12,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 var(--hair); }
.plate-sub .header-inner { padding-inline: clamp(20px, 4.4vw, 64px); gap: 28px; }
.plate-sub .site-header .wordmark { gap: 11px; font: 600 17px/1 var(--t-text); font-stretch: 100%; letter-spacing: .005em; color: var(--ink-l); }
.plate-sub .site-header .wordmark img { width: 24px; height: 24px; }
.plate-sub .main-nav { gap: 22px; }
.plate-sub .main-nav a { font: 500 14px/1 var(--t-text); font-stretch: 100%; letter-spacing: 0; color: var(--ink-l2); padding: 8px 0; border-bottom: 1px solid transparent; }
.plate-sub .main-nav a:hover { color: var(--ink-l); border-bottom-color: transparent; }
.plate-sub .main-nav a[aria-current="page"] { color: var(--ink-l); border-bottom-color: var(--ink-l); }
.plate-sub .main-nav a.nav-plain { color: var(--ink-l2); }
.plate-sub .main-nav a.nav-plain[aria-current="page"] { color: var(--ink-l); }
.plate-sub .header-actions { gap: 20px; }
.plate-sub .header-signin { font: 500 15px/1 var(--t-text); font-stretch: 100%; color: var(--ink-l); opacity: .86; padding: 10px 2px; transition: opacity .2s; }
.plate-sub .header-signin:hover { opacity: 1; color: var(--ink-l); }
.plate-sub .header-cta { min-height: 44px; padding: 0 22px; font-size: 14.5px; }
.plate-sub .bar-session { gap: 10px; }
.plate-sub .session-who { color: var(--ink-l2); font: 500 13.5px/1 var(--t-text); }
.plate-sub .plan-badge, .plate-sub .plan-badge.is-pro { padding: 6px 9px 5px; border: 0; border-radius: 6px; font: 700 10.5px/1 var(--t-text); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--ink-l); box-shadow: inset 0 0 0 1px var(--hair-3); }
.plate-sub .plan-badge.is-pro { background: var(--pill-white); color: #0C0C0E; box-shadow: none; }
.plate-sub .lang-switch { display: inline-flex; align-items: center; border: 0; border-radius: 999px; min-height: 38px; padding: 0 16px; font: 500 13.5px/1 var(--t-text); color: var(--ink-l); box-shadow: inset 0 0 0 1px var(--hair-3); }
.plate-sub .lang-switch:hover { background: rgba(238,237,232,.08); }
.plate-sub .menu-toggle span { background: var(--ink-l); }
@media (max-width: 980px) {
  .plate-sub .main-nav { background: rgba(11,11,12,.96); box-shadow: inset 0 -1px 0 var(--hair); }
  .plate-sub .main-nav a { font-size: 16px; padding: 15px 0; border-bottom: 1px solid var(--hair); }
  .plate-sub .main-nav a[aria-current="page"] { border-bottom-color: var(--hair); }
}
@media (max-width: 640px) {
  .plate-sub .header-inner { padding-inline: 16px; gap: 10px; }
  .plate-sub .bar-session { gap: 6px; }
  .plate-sub .bar-session .button-small, .plate-sub .lang-switch { min-height: 34px; padding: 0 11px; font-size: 12.5px; }
  .plate-sub .menu-toggle { flex-shrink: 0; }
  .plate-sub .header-cta { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
  .plate-sub .site-header .wordmark { font-size: 16px; gap: 9px; }
  .plate-sub .site-header .wordmark img { width: 22px; height: 22px; }
}
/* signed in on a phone the bar carries the session controls too: the mark stands alone */
@media (max-width: 520px) {
  body.plate-sub:is([data-plan="starter"], [data-plan="pro"]) .site-header .wordmark { font-size: 0; gap: 0; }
  body.plate-sub:is([data-plan="starter"], [data-plan="pro"]) .header-cta { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
}

/* ------------------------------------------------------------------ surfaces */
/* one panel family: a quiet raised tile with a hairline, the landing's details panel */
.plate-sub :is(.login, .starter-setup, .starter-upgrade, .composer, .handoff, .briefs-column, .first-task, .community, .notice-view, .purchase-notice) {
  border: 0; border-radius: 16px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--hair), 0 30px 80px -40px rgba(0,0,0,.6); }
.plate-sub .first-task { background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--hair); }
.plate-sub .notice-view { background: none; box-shadow: none; }
/* fields: the landing's "Tell your agent" field */
.plate-sub input:not([type=radio]):not([type=checkbox]), .plate-sub textarea, .plate-sub select {
  border: 0; border-radius: 12px; background: var(--field-bg); color: var(--ink-l); font-family: var(--t-text); font-stretch: 100%;
  box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.plate-sub input:not([type=radio]):not([type=checkbox]):hover, .plate-sub textarea:hover { box-shadow: inset 0 0 0 1px var(--hair-2); }
.plate-sub input:not([type=radio]):not([type=checkbox]):focus, .plate-sub textarea:focus, .plate-sub select:focus { border-color: transparent; background: rgba(11,11,12,.95); box-shadow: inset 0 0 0 1px rgba(238,237,232,.5); }
.plate-sub input::placeholder, .plate-sub textarea::placeholder { color: rgba(142,141,136,.6); }
.plate-sub input[type=radio], .plate-sub input[type=checkbox] { accent-color: var(--pill-white); }
.plate-sub input[type=password] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
/* what an agent reads stays monospace, set as a quiet sheet */
.plate-sub pre, .plate-sub code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-stretch: 100%; }
.plate-sub .prompt-box pre, .plate-sub .first-task pre, .plate-sub .brief-preview-wrap pre { border: 0; border-radius: 12px; background: #070708; color: #C9C8C2; box-shadow: inset 0 0 0 1px var(--hair); }
.plate-sub .prompt-box:not(.is-open) pre::after { background: linear-gradient(rgba(7,7,8,0), #070708); border-radius: 0 0 12px 12px; }
.plate-sub .prompt-toggle { font-family: var(--t-text); }
.plate-sub .help { color: var(--ink-l2); }
.plate-sub .price-tax { font: 400 12.5px/1.55 var(--t-text); font-stretch: 100%; color: var(--ink-l2); }
.plate-sub .help a { color: var(--ink-l); text-decoration-color: var(--hair-3); }
.plate-sub .form-error { color: #FF9EA0; border-left-color: rgba(229,72,77,.8); }
.plate-sub .muted { color: var(--ink-l2); }
.plate-sub details > summary { font-family: var(--t-text); }


/* ------------------------------------------------------------------ footer */
.plate-sub .site-footer.plate-ending { border-top: 1px solid var(--hair); padding: 34px clamp(20px, 4.4vw, 64px) 32px; }
.plate-sub .plate-ending .wordmark { font: 600 16px/1 var(--t-text); font-stretch: 100%; color: var(--ink-l); gap: 10px; }
.plate-sub .plate-ending .home-ending-row { align-items: center; }
body.plate-sub .site-footer.plate-ending .home-ending-row nav a { font: 500 13.5px/1.3 var(--t-text); font-stretch: 100%; letter-spacing: 0; color: var(--ink-l2); border-bottom: 0; }
body.plate-sub .site-footer.plate-ending .home-ending-row nav a:hover { color: var(--ink-l); }

/* ------------------------------------------------------------------ the reading pages */
/* Terms, privacy, about the examples, the docs and how-it-works: the same room, Bodoni heads,
   no numbered chapter marks and no orange except Get Plate Pro. */
.plate-sub .skip-link, .plate-home .skip-link { background: var(--pill-white); color: #0C0C0E; border-radius: 999px; padding: 10px 16px; }
.plate-sub .header-register { font: 560 10.5px/1 var(--t-text); font-stretch: 125%; letter-spacing: .12em; color: var(--ink-l2); }
.plate-sub .main-nav a small { display: none; }
.plate-sub .main-nav a.nav-plain[aria-current="page"], .plate-sub .main-nav a[aria-current="page"] { border-bottom-color: var(--ink-l); }
.plate-sub .help-main { padding-block: clamp(40px, 8vh, 96px) 0; }
.plate-sub .help-main > h1 { font-family: var(--t-display); font-weight: 500; font-variation-settings: "opsz" 96; letter-spacing: -.018em; line-height: .96; font-size: clamp(48px, 6.4vw, 96px); color: var(--ink-l); }
.plate-sub .help-lead { font-size: 17px; line-height: 1.6; color: var(--ink-l2); max-width: 56ch; margin-top: 22px; }
.plate-sub .help-section { border-top-color: var(--hair); margin-top: clamp(40px, 6vh, 72px); padding-top: clamp(24px, 3.4vh, 36px); }
.plate-sub .help-section > h2 { display: block; font-family: var(--t-display); font-weight: 500; font-variation-settings: "opsz" 72; letter-spacing: -.015em; line-height: 1.02; font-size: clamp(30px, 3vw, 44px); color: var(--ink-l); max-width: 22ch; }
.plate-sub .help-section > h2::before { content: none; display: none; }
.plate-sub .help-section h3 { font-family: var(--t-display); font-weight: 500; font-variation-settings: "opsz" 36; font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -.01em; color: var(--ink-l); margin-top: 30px; }
.plate-sub .help-section p, .plate-sub .help-section li { font-size: 16px; line-height: 1.7; color: var(--ink-l2); }
.plate-sub .help-section strong, .plate-sub .help-section b { color: var(--ink-l); font-weight: 600; }
.plate-sub :is(.help-lead, .help-section) a:not(.button):not(.reg-button):not(.pill):not(.text-link),
.plate-sub .help-section td a, body.plate-sub main p > a:not(.button):not(.text-link) {
  color: var(--ink-l); text-decoration: underline; text-decoration-color: var(--hair-3); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.plate-sub :is(.help-lead, .help-section) a:not(.button):not(.reg-button):not(.pill):not(.text-link):hover, .plate-sub .help-section td a:hover { color: #FFFFFF; text-decoration-color: var(--ink-l); }
.plate-sub .help-section code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink-l); }
.plate-sub .help-code, .plate-sub .help-section pre { border: 0; border-radius: 12px; background: #070708; color: #C9C8C2; box-shadow: inset 0 0 0 1px var(--hair); font: 13px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 16px 18px; }
.plate-sub .help-section th { font: 560 10.5px/1.2 var(--t-text); font-stretch: 125%; letter-spacing: .12em; color: var(--ink-l2); }
.plate-sub .help-section th, .plate-sub .help-section td { border-bottom-color: var(--hair); }
.plate-sub .help-section .button, .plate-sub .help-main .button { margin-top: 20px; }
/* how-it-works: one-tone headline, and the stepper in the landing's pill language */
.plate-sub h1 > span { color: inherit; }
.plate-sub .setup-eyebrow, .plate-sub .step-kicker { font: 560 11px/1.3 var(--t-text) !important; font-stretch: 125% !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--ink-l2) !important; }
.plate-sub .step-navigation button { border-radius: 999px; color: var(--ink-l2); font-family: var(--t-text); }
.plate-sub .step-navigation button span { color: inherit; font-family: var(--t-text); }
.plate-sub .step-navigation button[aria-current="step"] { background: var(--pill-white); color: #0C0C0E; }
.plate-sub [role="tab"][aria-selected="true"] { color: #0C0C0E; }
html[lang="he"] .plate-sub :is(.setup-eyebrow, .step-kicker, .header-register, .help-section th) { font-stretch: 100% !important; letter-spacing: .02em !important; text-transform: none; font-size: 13px !important; }

/* ------------------------------------------------------------------ right to left, shared */
html[lang="he"] body.plate-sub { font-family: var(--t-text); }
html[dir="rtl"] .plate-sub :is(pre, code, .help-code) { direction: ltr; text-align: left; unicode-bidi: isolate; }
html[dir="rtl"] .plate-sub .help-section :is(ul, ol) { padding-left: 0; padding-inline-start: 20px; }
html[dir="rtl"] .plate-sub .header-inner, html[dir="rtl"] .plate-sub .main-nav { direction: rtl; }
html[dir="rtl"] .plate-sub [data-no-translate] { direction: ltr; unicode-bidi: isolate; text-align: left; }
html[lang="he"] .plate-sub :is(.help-main > h1, .help-section > h2, .help-section h3) { font-variation-settings: normal; font-weight: 700; letter-spacing: -.01em; line-height: 1.12; }
html[lang="he"] .plate-sub .help-main > h1 { font-size: clamp(42px, 5.4vw, 80px); }

@media (max-width: 700px) {
  .plate-sub .help-main > h1 { font-size: 44px; }
  .plate-sub .help-section > h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate-sub .button, .plate-sub .header-signin, .plate-sub .site-header { transition: none; }
}