/*
 * askclueless.com — the site pages (/, /features, /pricing, /download, /students, /about, /whats-new,
 * /legal, 404). Loads after tokens.css.
 *
 * Layout (where things sit, column counts and widths, section order): each page is measured from its
 * counterpart on Anthropic's sites with the Remake skill (the Claude site's home, product overview, pricing,
 * download and education pages; the company site's company, news and privacy pages). The numbers are in
 * docs/style-from-anthropic.md. No Anthropic code, fonts, icons, pictures or logos are used.
 * Look (colour, type, buttons, spacing, radius, shadow, motion): the Clueless design system via
 * tokens.css, with the site's own type sizes and section spacing recorded as DECISIONS W.7-W.10.
 */

/* ── 1. Site tokens (DECISIONS W.8, W.9) ─────────────────────────────────── */
:root {
  --site-max: 1312px;          /* claude.com's content width */
  --page-px: 64px;
  --nav-h: 84px;
  --sec-gap: calc(var(--sp-80) + var(--sp-48)); /* 128 between sections, as measured */
  --hero-fs: 56px; --hero-lh: 64px;             /* W.2 */
  --hero-xl-fs: 72px; --hero-xl-lh: 80px;       /* W.8 */
  --h2-fs: 44px; --h2-lh: 50px;                 /* the Large `display` size, at the site's 400 */
  --h3-fs: 26px; --h3-lh: 32px;                 /* `title-section` Large */
  --card-title-fs: 18px; --card-title-lh: 24px; /* `title-body` Large */
  --lead-fs: 18px; --lead-lh: 28px;
  --read-fs: 16px; --read-lh: 26px;             /* the chat's answer text */
  --price-fs: 34px; --price-lh: 38px;           /* `stat` Large */
  /* The app's Grasslands wallpaper (desktop/src/styles/tokens.css, shell-wallpaper.css): the home hero's ground
     under the grass clip's poster, Dark here and Light below (DECISIONS W.11) */
  --wp-dark-0: #050605; --wp-dark-1: #0b0e0c; --wp-dark-2: #141a15;
  --wp-light-0: #f6f6f3; --wp-light-1: #eceee9; --wp-light-2: #dfe4da;
  --grass-sky: linear-gradient(180deg, var(--wp-dark-0) 0%, var(--wp-dark-1) 52%, var(--wp-dark-2) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --grass-sky: linear-gradient(180deg, var(--wp-light-0) 0%, var(--wp-light-1) 55%, var(--wp-light-2) 100%); }
}

/* ── 2. Base for the site pages ──────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--sp-16)); }
.site { background: var(--sand); }
.site main { display: block; }
.skip {
  position: absolute; left: var(--sp-16); top: -60px; z-index: 100;
  padding: var(--sp-8) var(--sp-16); border-radius: var(--r-control);
  background: var(--sand-raised); color: var(--text-1); text-decoration: none;
}
.skip:focus { top: var(--sp-16); }
#main:focus { outline: none; } /* focus-ok: the skip link's target (tabindex -1), not a control */
/* The home hero's "Copy link" in an app's own browser (site.js, audit M7): a text link that is a button. */
.copy-link { display: inline-block; padding: 10px 0; margin: -10px 0; border: 0; background: none; font: inherit; cursor: pointer; }
.wrap { width: 100%; max-width: calc(var(--site-max) + 2 * var(--page-px)); margin: 0 auto; padding: 0 var(--page-px); }
.sec { padding-top: var(--sec-gap); }
.sec-last { padding-bottom: var(--sec-gap); }
.center { text-align: center; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.h-hero { font-size: var(--hero-fs); line-height: var(--hero-lh); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.h-hero-xl { font-size: var(--hero-xl-fs); line-height: var(--hero-xl-lh); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.h-sec { font-size: var(--h2-fs); line-height: var(--h2-lh); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.h-sub { font-size: var(--h3-fs); line-height: var(--h3-lh); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.h-card { font-size: var(--card-title-fs); line-height: var(--card-title-lh); font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: var(--lead-fs); line-height: var(--lead-lh); color: var(--text-2); text-wrap: pretty; }
.read { font-size: var(--read-fs); line-height: var(--read-lh); color: var(--text-2); text-wrap: pretty; }
.meta { font-size: var(--text-meta); line-height: var(--text-meta-lh); font-weight: 500; color: var(--text-3); }
/* The kicker (§11.5): the one uppercase micro-heading */
.kicker { font-size: var(--kicker-size); line-height: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; color: var(--text-3); font-size: var(--text-meta); line-height: var(--text-meta-lh); font-weight: 600; letter-spacing: 0.04em; }
.stack-8 > * + * { margin-top: var(--sp-8); }
.stack-12 > * + * { margin-top: var(--sp-12); }
.stack-16 > * + * { margin-top: var(--sp-16); }
.stack-24 > * + * { margin-top: var(--sp-24); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.center .actions, .actions.center { justify-content: center; }
.pill-xl { height: var(--ctl-text-xl); padding: 0 var(--btn-px-xl); font-size: var(--btn-fs-xl); gap: 9px; }
.ico { width: 20px; height: 20px; }
.ico-lg { width: 24px; height: 24px; stroke-width: 1.5; }
.ico-fill { fill: currentColor; stroke: none; }
.text-link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--link-hover); }

/* A chip: a label, never a button (§11.3) */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-6); height: 28px; padding: 0 var(--sp-12);
  border: 1px solid var(--sand-line-2); border-radius: var(--r-chip); background: var(--glass-raised);
  font-size: var(--text-meta); line-height: 1; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.chip-soon { border-style: dashed; color: var(--text-3); }
.chip-soon b { font-weight: 600; color: var(--text-3); }
.tag { white-space: nowrap;
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-8);
  border-radius: var(--r-chip); background: var(--fill-3);
  font-size: var(--kicker-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}

/* A card (§11.7): raised surface, hairline, squircle. No shadow at rest; an interactive one lifts. */
.card {
  display: block; position: relative;
  padding: var(--sp-32);
  border: 1px solid var(--sand-line);
  border-radius: var(--r-card-lg);
  background: var(--sand-raised);
  color: var(--text-1);
  text-decoration: none;
}
a.card { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
@media (hover: hover) { a.card:hover { transform: translateY(var(--lift-2)); box-shadow: var(--elev-2); border-color: var(--sand-line-2); color: var(--text-1); } }
a.card:active { transform: scale(var(--press-scale)); }
.panel { border-radius: var(--r-surface); background: var(--sand-raised); border: 1px solid var(--sand-line); }

/* Grid paper: the Clueless sign-in ground (DECISIONS W.10), behind every product picture */
.paper {
  position: relative; overflow: hidden;
  border: 1px solid var(--sand-line);
  border-radius: var(--r-card-lg);
  background-color: var(--chrome);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.shot { display: block; width: 100%; height: auto; border-radius: var(--r-row); border: 1px solid var(--sand-line-2); box-shadow: var(--elev-3); background: var(--sand); }
.shot img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* ── 3. Header: claude.com's nav (84 tall, logo left, links, two buttons right) ── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--sand);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--sand-line); }
.hdr-in { display: flex; align-items: center; gap: var(--sp-16); height: var(--nav-h); }
.hdr .lockup { margin-right: auto; }
.hdr-nav { display: flex; align-items: center; gap: var(--sp-2); }
.hdr-nav a, .menu-links a {
  display: inline-flex; align-items: center; height: var(--ctl-text-md); padding: 0 14px;
  border-radius: var(--r-control); color: var(--text-2); font-size: var(--text-body); font-weight: 500; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) { .hdr-nav a:hover, .menu-links a:hover { background: var(--glass-raised); color: var(--text-1); } }
.hdr-nav a[aria-current="page"], .menu-links a[aria-current="page"] { color: var(--text-1); background: var(--fill-3); }
.hdr-actions { display: flex; align-items: center; gap: var(--sp-8); margin-left: var(--sp-16); }
.hdr-menu { display: none; color: var(--text-1); }
.menu { border-top: 1px solid var(--sand-line); background: var(--sand); padding: var(--sp-12) 0 var(--sp-24); }
.menu-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.menu-links a { height: var(--ctl-text-lg); font-size: 16px; }
.menu .actions { margin-top: var(--sp-16); }
.menu .actions .pill { flex: 1; }
/* Logged in on this browser (site.js sets data-auth on <html> before the first paint; Chase, 7 Nov): Log in and the
   sign-up card leave, the avatar and "Continue to chat" come. Without script nobody is known, so "in" parts stay hidden. */
html[data-auth="in"] [data-when="out"], html:not([data-auth="in"]) [data-when="in"] { display: none !important; }
.me-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: var(--logo-ink);
  font-size: 14px; font-weight: 600; line-height: 1;
}
.me-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hdr-me { display: inline-flex; border-radius: 50%; }
.menu-me { display: flex; align-items: center; gap: 10px; margin: var(--sp-16) 0 0; font-size: 15px; color: var(--text-2); min-width: 0; }
/* A long email wraps instead of widening the card or the menu */
.menu-me-text, .try-me-text { min-width: 0; overflow-wrap: anywhere; }
.menu-me [data-me-email], .try-me b { color: var(--text-1); font-weight: 600; }

/* ── 4. Footer: claude.com's footer (lockup left, four columns right), on the chrome ground ── */
.ftr { margin-top: var(--sec-gap); padding: calc(2 * var(--sp-48)) 0 var(--sp-48); background: var(--chrome); border-top: 1px solid var(--sand-line); }
.ftr-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 853px); gap: var(--sp-48); }
.ftr-brand p { margin-top: var(--sp-16); max-width: 300px; }
.ftr-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-32); }
.ftr h2 { font-size: var(--text-meta); line-height: var(--text-meta-lh); font-weight: 500; color: var(--text-3); margin-bottom: var(--sp-12); }
.ftr li + li { margin-top: var(--sp-8); }
.ftr a { color: var(--text-2); text-decoration: none; font-size: var(--text-body); line-height: var(--text-body-lh); }
.ftr a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-12); margin-top: calc(2 * var(--sp-48)); padding-top: var(--sp-24); border-top: 1px solid var(--sand-line); }

/* ── 5. Shared blocks ────────────────────────────────────────────────────── */
/* Section heading, centred (claude.com's "Explore plans", "FAQ") */
.sec-head { max-width: 760px; margin: 0 auto var(--sp-48); text-align: center; }
.sec-head .lead { margin-top: var(--sp-16); }
.sec-head .actions { margin-top: var(--sp-24); }

/* Segmented (§11.12): grey selection, never green */
.seg { display: inline-flex; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-control); background: var(--fill-3); border: 1px solid var(--sand-line); }
.seg button {
  height: 32px; padding: 0 var(--sp-16); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--text-2); font-size: var(--btn-fs-md); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface-raise); color: var(--text-1); box-shadow: var(--elev-1); }
.seg button:active { transform: scale(var(--press-scale)); }
.seg .save { margin-left: var(--sp-6); color: var(--link); font-weight: 600; }

/* Plans: claude.com's four cards (310 wide, 24 apart, radius 24, padding 32) with the app's Paywall parts */
.plans-switch { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-32); }
.plans-switch .meta { min-height: 16px; text-align: center; }
.months { display: flex; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; min-height: 34px; }
.months[hidden] { display: flex !important; visibility: hidden; } /* laid out either way, so no card moves (§12.9) */
.months .pill[aria-pressed="true"] { background: var(--surface-raise); border-color: var(--text-3); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-24); }
.plan { display: flex; flex-direction: column; gap: var(--sp-16); }
.plan-rec { border-color: var(--tint-line); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); min-height: 28px; }
.plan-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fill-3); color: var(--text-1); }
.plan h3 { font-size: var(--h3-fs); line-height: var(--h3-lh); font-weight: 600; letter-spacing: -0.015em; }
.plan .blurb { margin-top: var(--sp-4); min-height: calc(2 * var(--text-body-lh)); color: var(--text-3); font-size: var(--text-body); line-height: var(--text-body-lh); }
.price { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--price-fs); line-height: var(--price-lh); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price small { white-space: nowrap; font-size: var(--text-body); line-height: var(--text-body-lh); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.price-notes { min-height: 32px; }
.plan .pill { width: 100%; }
.plan-plus { font-size: var(--text-meta); line-height: var(--text-meta-lh); font-weight: 600; color: var(--text-1); }
.ticks li { display: flex; gap: var(--sp-8); font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--text-2); }
.ticks li + li { margin-top: var(--sp-8); }
.ticks svg { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2; color: var(--text-1); }
.ticks b { color: var(--text-1); font-weight: 600; }
.fine-print { max-width: 860px; margin: var(--sp-32) auto 0; text-align: center; }
.fine-print p + p { margin-top: var(--sp-4); }

/* FAQ: claude.com's centred list (640 wide, rows about 88 tall) as <details> */
.faq { max-width: 704px; margin: 0 auto; border-top: 1px solid var(--sand-line); }
.faq details { border-bottom: 1px solid var(--sand-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  min-height: 72px; padding: var(--sp-16) 0; cursor: pointer; list-style: none;
  font-size: var(--read-fs); line-height: 24px; font-weight: 500; color: var(--text-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--dur-fast) var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: var(--r-check); }
.faq .read { padding: 0 var(--sp-48) var(--sp-24) 0; }
.faq-tabs { display: flex; justify-content: center; margin-bottom: var(--sp-32); }

/* Final call to action (claude.com's "Don't know where to start?") */
.cta-end { max-width: 760px; margin: 0 auto; text-align: center; }
.cta-end .lead { margin-top: var(--sp-16); }
.cta-end .actions { margin-top: var(--sp-32); justify-content: center; }

/* Numbered outcomes, three across (claude.com's "01 / 02 / 03", 1200 wide, 32 apart; rules §15.8) */
.outcomes { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-32); }
.outcomes li { padding-top: var(--sp-24); border-top: 1px solid var(--sand-line-2); }
.outcomes .h-card { margin-top: var(--sp-16); }
.outcomes .read { margin-top: var(--sp-8); }

/* Left heading + right content, a page's sub-sections (claude.com /download "Get started") */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 864px); gap: var(--sp-32); align-items: start; }
.split-head .lead { margin-top: var(--sp-16); max-width: 409px; }

/* ── 6. Home (claude.com /) ──────────────────────────────────────────────── */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); padding-top: var(--sp-24); min-height: min(772px, calc(100dvh - var(--nav-h))); }
.home-hero-col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-48) 0; }
.home-hero-stack { width: min(100%, 540px); display: flex; flex-direction: column; align-items: center; }
.home-hero .lead { margin-top: var(--sp-16); max-width: 460px; }
.try-card {
  width: min(100%, 448px); margin-top: var(--sp-32);
  display: flex; flex-direction: column; gap: var(--sp-12);
  padding: 28px; border: 1px solid var(--sand-line-2); border-radius: var(--r-surface);
  background: var(--sand-raised); box-shadow: var(--elev-3);
}
.try-card .meta { margin-top: var(--sp-4); line-height: 19px; font-weight: 400; text-wrap: pretty; } /* no one-word last line on a phone */
.try-card .meta a { color: var(--text-2); }
.try-card .meta [data-signup-why] { display: block; } /* the terms start their own line */
/* The email form (W.13), as on the login page: 12 between parts, the button 16 under the field */
.try-email { display: flex; flex-direction: column; gap: var(--sp-12); }
/* A percentage width lets the field shrink with a 320 px phone: WebKit otherwise holds it at its ~20-character size */
.try-email input { width: 100%; }
.try-email .pill-primary { margin-top: var(--sp-4); }
.try-error { margin: 0; font-size: var(--text-meta); line-height: var(--text-meta-lh); color: var(--destructive-ink); }
.try-error:empty { margin-top: calc(-1 * var(--sp-12)); } /* a live region stays in the page but takes no room */
.try-in { gap: var(--sp-16); }
.try-me { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 15px; color: var(--text-2); min-width: 0; }
.home-hero .after-card { margin-top: var(--sp-24); }
.home-art { display: flex; align-items: center; justify-content: center; min-height: 520px; padding: var(--sp-40); }
.home-art .shot { width: min(100%, 560px); }
/* The grass clip (Chase, 2026-11-06: "Use the grass motion to be put there"; DECISIONS W.11): the app's Motion
   wallpaper and sign-in backdrop in the hero picture's rounded frame. The clip is the same photograph in Light and
   Dark, as on the app's Home (rules §8.6); the frame's hairline and the Grasslands ground under the poster follow
   the look. Poster, then the lead video over the spare, both parked by site.js (setupGrass). */
.grass {
  position: relative; overflow: hidden; isolation: isolate; padding: 0;
  border: 1px solid var(--sand-line); border-radius: var(--r-card-lg);
  clip-path: inset(0 round var(--r-card-lg)); /* WebKit clips a playing video to the radius only with this */
  background: var(--grass-sky);
}
.grass-ground { display: contents; }
.grass-poster, .grass-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: 50% 50%;
}
.grass-video { z-index: 1; opacity: 0; pointer-events: none; background: transparent; }
.grass-video.is-lead { z-index: 2; }
.grass-video.is-shown { opacity: 1; }
/* Only the first picture fades in over the poster; every loop after that is a cut. */
.grass-video.is-fading { transition: opacity var(--dur-slow) var(--ease); }
/* B (Chase, 2026-11-07: "I choose B"): the 3.17 GPA app picture sits on the grass, as the app's sign-in sheet sits
   on its backdrop (ProtoAuth .cl-auth-sheet over .cl-auth-backdrop, auth.css): above the poster and both videos, its
   own layer, --r-panel as a squircle (the arc where corner-shape isn't drawn, §7.4) and --elev-4 (sheets, §8.1), with
   the product shot's hairline so it still separates on the Dark grass. The real app at Standard (§17.4). Phones get
   the GPA tile alone, sized to the 4:3 frame's height, so it stays about as large as the computer's card. */
.grass-card {
  position: relative; z-index: 3; isolation: isolate; display: block; overflow: hidden;
  width: min(calc(100% - 2 * var(--sp-24)), 560px);
  border: 1px solid var(--sand-line-2); border-radius: var(--r-panel); corner-shape: squircle;
  background: var(--sand); box-shadow: var(--elev-4);
}
.grass-card img { display: block; width: 100%; height: auto; }

/* ── 7. Features (claude.com /product/overview) ───────────────────────────── */
.prod-hero { padding-top: calc(var(--sp-80) + var(--sp-16)); text-align: center; }
.prod-hero .lead { max-width: 550px; margin: var(--sp-24) auto 0; }
.prod-hero .actions { margin-top: var(--sp-32); justify-content: center; }
.prod-hero-art { width: min(100%, 720px); margin: calc(2 * var(--sp-32)) auto 0; padding: var(--sp-32); }
.tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-12); }
.tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); min-height: 104px;
  padding: var(--sp-16); border: 1px solid var(--sand-line); border-radius: var(--r-card);
  background: transparent; color: var(--text-2); text-align: left;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab b { color: var(--text-1); font-size: var(--text-body); font-weight: 600; }
.tab span { font-size: var(--text-meta); line-height: var(--text-meta-lh); }
.tab svg { width: 18px; height: 18px; color: var(--text-3); }
@media (hover: hover) { .tab:hover { background: var(--glass-raised); border-color: var(--sand-line-2); } }
.tab[aria-selected="true"] { background: var(--sand-raised); border-color: var(--sand-line-2); color: var(--text-2); }
.tab[aria-selected="true"] svg { color: var(--text-1); }
.tab:active { transform: scale(var(--press-scale)); }
.tab-panel { display: grid; grid-template-columns: minmax(0, 318px) minmax(0, 690px); justify-content: space-between; gap: var(--sp-48); align-items: center; margin-top: var(--sp-48); max-width: 1200px; margin-left: auto; margin-right: auto; }
.tab-panel[hidden] { display: none !important; }
.no-js .tab-panel[hidden] { display: grid !important; }
.tab-panel .chip { margin-bottom: var(--sp-16); }
.tab-panel .read { margin-top: var(--sp-16); }
.tab-panel .ticks { margin-top: var(--sp-16); }
.tab-art { min-height: 419px; display: flex; align-items: center; justify-content: center; padding: var(--sp-32); }
/* The 3D tab's picture: the library model's still on its own off-black stage (web3d posters) */
.tab-art-3d img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: #161616; }

/* Drawn pieces of the app: made from the page's own parts, like the login page's chat (W.10) */
.mock { width: min(100%, 440px); display: flex; flex-direction: column; gap: var(--sp-12); }
.mock-card { padding: var(--sp-20); border: 1px solid var(--sand-line-2); border-radius: var(--r-card); background: var(--sand-raised); box-shadow: var(--elev-3); }
.mock-card + .mock-card { margin-left: var(--sp-32); }
.mock-q { font-size: var(--lead-fs); line-height: var(--lead-lh); font-weight: 600; letter-spacing: -0.01em; margin-top: var(--sp-8); }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-top: var(--sp-16); }
.mock-row-top { margin-top: 0; }
.mock-bar { margin-top: var(--sp-16); height: 6px; border-radius: var(--r-bar); background: var(--fill-3); overflow: hidden; }
.mock-bar i { display: block; height: 100%; width: 40%; background: var(--text-3); border-radius: inherit; }
.bubble { align-self: flex-end; max-width: 80%; padding: 10px 16px; background: var(--tab-selected); border-radius: var(--r-row) var(--r-row) 4px var(--r-row); font-size: 16px; line-height: 24px; }
.mock-answer { font-size: 16px; line-height: 26px; color: var(--text-2); }
.mock-answer b { color: var(--text-1); }
.cite { display: inline-flex; align-items: center; gap: var(--sp-6); height: 24px; padding: 0 var(--sp-8); border-radius: var(--r-chip); background: var(--fill-3); font-size: var(--text-meta); font-weight: 500; color: var(--text-2); }
.cite svg { width: 14px; height: 14px; }
.lasso { position: relative; padding: var(--sp-24); border-radius: var(--r-card); border: 2px dashed var(--link); }
/* "See it in 3D": the Mac app's cards, live (public/m3d-demo.js; the cards' own look is cards3d.css) */
.sec-head .chip + .h-sec { margin-top: var(--sp-16); }
.m3d-demo { max-width: 1000px; margin: 0 auto; }
.m3d-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); margin-bottom: var(--sp-24); }
.m3d-picker .pill[aria-pressed="true"] { background: var(--surface-raise); border-color: var(--text-3); }
.m3d-still { display: block; width: 100%; height: 380px; object-fit: cover; border-radius: var(--r-card); background: #161616; }
.m3d-hint { margin: var(--sp-12) 0 0; text-align: center; color: var(--text-3); font-size: var(--text-meta); }
.m3d-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-48); max-width: 1000px; margin: var(--sp-80) auto 0; }
.m3d-col .read { margin: var(--sp-12) 0 var(--sp-24); }

/* ── 8. Pricing (claude.com /pricing) ────────────────────────────────────── */
.price-hero { padding-top: calc(var(--sp-80) + var(--sp-16)); text-align: center; }
.price-hero .h-hero { margin-bottom: var(--sp-32); }
.price-hero .plans, .price-hero .fine-print { text-align: left; }
.price-hero .fine-print { text-align: center; }
.compare { position: relative; max-width: 1280px; margin: 0 auto; } /* relative: the .sr labels in cells stay inside its scroll box */
.compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare thead th { position: sticky; top: var(--nav-h); z-index: 2; background: var(--sand); padding: var(--sp-16) var(--sp-12); border-bottom: 1px solid var(--sand-line-2); text-align: left; vertical-align: bottom; }
.compare thead th:first-child { width: 296px; }
.compare thead .h-card { display: block; margin-bottom: var(--sp-8); }
.compare tbody th { padding: var(--sp-16) var(--sp-12); text-align: left; font-weight: 400; font-size: var(--text-body); color: var(--text-1); }
.compare td { padding: var(--sp-16) var(--sp-12); font-size: var(--text-body); color: var(--text-2); }
.compare tbody tr { border-bottom: 1px solid var(--sand-line); }
.compare .group th { padding-top: var(--sp-40); font-size: var(--h3-fs); line-height: var(--h3-lh); font-weight: 600; letter-spacing: -0.015em; color: var(--text-1); }
.compare .group { border-bottom-color: var(--sand-line-2); }
.compare td svg { width: 18px; height: 18px; stroke-width: 2; color: var(--text-1); }
.compare .no { color: var(--text-3); }
.compare-hint { display: none; }

/* ── 9. Download (claude.com /download) ─────────────────────────────────── */
.dl-hero { padding-top: calc(var(--sp-80) + var(--sp-16)); text-align: center; }
.dl-hero .lead { margin: var(--sp-16) auto 0; max-width: 504px; }
.dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32); }
.dl-cards .card { display: flex; flex-direction: column; }
.dl-cards .card > .read { margin-top: var(--sp-8); }
.rows { margin-top: var(--sp-24); }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-height: 69px; border-top: 1px solid var(--sand-line); }
.rows li > span:first-child { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--text-body); color: var(--text-1); font-weight: 500; }
.rows .meta { font-weight: 400; }
.wide-card { grid-column: 1 / -1; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: var(--sp-24); padding: var(--sp-24) var(--sp-32); background: var(--fill-3); }
.go { text-align: center; max-width: 640px; margin: 0 auto; }
.go-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-card); background: var(--sand-raised); border: 1px solid var(--sand-line); margin-bottom: var(--sp-24); }
.go .lead { margin-top: var(--sp-16); }
.go-rows { max-width: 640px; margin: var(--sp-48) auto 0; }
.go-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); padding: var(--sp-32) 0; border-top: 1px solid var(--sand-line); }
.go-rows li:last-child { border-bottom: 1px solid var(--sand-line); }
.go-rows .h-card { display: flex; gap: var(--sp-12); align-items: flex-start; }
.go-rows .h-card svg { flex: none; margin-top: 2px; color: var(--text-3); }

/* ── 10. Students (claude.com /solutions/education) ─────────────────────── */
.edu-hero { padding-top: calc(var(--sp-80) + var(--sp-16)); }
.edu-hero-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); margin-top: var(--sp-48); }
.edu-hero-sub > div { grid-column: 2; max-width: 489px; }
.edu-hero-sub .actions { margin-top: var(--sp-24); }
.works-with { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-48); margin-top: var(--sp-80); padding-top: var(--sp-32); border-top: 1px solid var(--sand-line); }
.works-with b { display: block; font-size: var(--card-title-fs); line-height: var(--card-title-lh); font-weight: 600; letter-spacing: -0.01em; }
.three { max-width: 1088px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-48) var(--sp-32); }
.three .ico-box, .four .ico-box { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-row); background: var(--sand-raised); border: 1px solid var(--sand-line); color: var(--text-1); margin-bottom: var(--sp-16); }
.three .read, .four .read { margin-top: var(--sp-8); }
.banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-32); padding: calc(var(--sp-32) * 2); border-radius: var(--r-surface); border: 1px solid var(--sand-line); background: var(--chrome); }
.banner p { max-width: 576px; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; }
.term-rows { position: relative; max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); gap: var(--sp-32); }
.term-art { display: flex; flex-direction: column; gap: var(--sp-12); }
.term-art .card { padding: var(--sp-16); border-radius: var(--r-card); }
.term-art .card:nth-child(2) { margin-left: var(--sp-24); }
.term-art .card:nth-child(3) { margin-left: var(--sp-48); }
.term-art .card p { font-size: var(--text-body); line-height: var(--text-body-lh); margin-top: var(--sp-6); }
.term-art .card .pill { margin-top: var(--sp-12); }
.term-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); padding: var(--sp-32) 0; border-top: 1px solid var(--sand-line); }
.term-list li:last-child { border-bottom: 1px solid var(--sand-line); }
.resources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-48); padding: calc(var(--sp-32) * 2); margin: 0 auto; max-width: 1192px; }
.resources .read { margin-top: var(--sp-16); max-width: 420px; }
.res-links { display: flex; flex-direction: column; gap: var(--sp-8); }
.res-links .card { padding: var(--sp-24) var(--sp-32); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.res-links .card svg { color: var(--text-3); }
.commit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); align-items: start; margin-bottom: var(--sp-48); }
.commit .h-sub { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: -0.02em; max-width: 466px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-32); }
.cols-3 > .card { display: flex; flex-direction: column; gap: var(--sp-8); }
.cols-3 > .card .pill { align-self: flex-start; margin-top: auto; }
.cols-3 > .card .read { margin-bottom: var(--sp-16); }
.prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 299px)); justify-content: center; gap: var(--sp-32); }
.prompt { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-24); border-radius: var(--r-card-lg); border: 1px solid var(--sand-line); background: var(--sand-raised); }
.prompt .pill { align-self: flex-start; }
.prompt p { font-size: var(--lead-fs); line-height: var(--lead-lh); color: var(--text-1); }

/* ── 11. About (Anthropic company page) ─────────────────────────────────── */
.co-wrap { --site-max: 1280px; --page-px: 80px; }
.co-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); padding-top: var(--sp-80); }
.co-hero .h-hero { font-weight: 400; }
.co-hero .lead { font-size: 20px; line-height: 30px; color: var(--text-1); }
.co-hero .actions { margin-top: var(--sp-24); }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-32); margin-top: var(--sp-16); }
.four .read { font-size: 15px; line-height: 22px; }
.purpose { margin-top: var(--sp-80); }
.team { display: grid; grid-template-columns: minmax(0, 276px) minmax(0, 1fr); gap: var(--sp-48); padding: var(--sp-32); border-radius: var(--r-surface); background: var(--chrome); border: 1px solid var(--sand-line); }
.team .read { margin-top: var(--sp-12); }
.team figure { margin: 0; }
.team figcaption { margin-top: var(--sp-12); }
.values { display: grid; grid-template-columns: minmax(0, 416px) minmax(0, 1fr); gap: var(--sp-48) var(--sp-80); padding-top: var(--sp-48); border-top: 1px solid var(--sand-line); }
.values-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); }
.values-list .h-card { font-size: 20px; line-height: 27px; }
.values .left .read { margin-top: var(--sp-16); }

/* ── 12. What's new (Anthropic news page) ───────────────────────────────── */
.news-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); padding: var(--sp-48) 0 var(--sp-16); border-bottom: 1px solid var(--sand-line-2); }
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-16); padding-top: var(--sp-32); }
.news-col { display: flex; flex-direction: column; }
.news-col > * + * { margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--sand-line); }
.story { display: block; color: var(--text-1); text-decoration: none; }
.story:hover .h-card, .story:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.story-meta { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-12); }
.story .read { margin-top: var(--sp-8); font-size: 15px; line-height: 22px; }
.story .h-card { font-size: 21px; line-height: 27px; }
.story-art { margin-bottom: var(--sp-16); padding: var(--sp-16); border-radius: var(--r-card); }
.story-art .shot { box-shadow: var(--elev-2); }
.story-lead h2 { font-size: 33px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; margin-top: var(--sp-16); }
.story-lead .story-art { padding: var(--sp-40); border-radius: var(--r-card-lg); }
.story-lead .read { font-size: var(--read-fs); line-height: var(--read-lh); }
.all-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-32); }
.all-head h2 { font-size: 42px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.release-list li { border-top: 1px solid var(--sand-line); }
.release-list li:last-child { border-bottom: 1px solid var(--sand-line); }
.release-list a { display: grid; grid-template-columns: 120px 150px minmax(0, 1fr) 24px; align-items: center; gap: var(--sp-24); min-height: 72px; padding: var(--sp-12) 0; color: var(--text-1); text-decoration: none; }
.release-list a:hover .h-card { text-decoration: underline; text-underline-offset: 3px; }
.release-list .h-card { font-size: 16px; line-height: 24px; }
.release-list svg { color: var(--text-3); }

/* ── 13. Legal (Anthropic privacy page) ───────────────────────────── */
.doc { max-width: 632px; margin: 0 auto; padding-top: calc(var(--sp-80) + var(--sp-48)); }
.doc .h-hero { font-size: 52px; line-height: 56px; }
.doc .meta { margin-top: var(--sp-16); }
.doc-body { margin-top: var(--sp-80); }
.doc-body p, .doc-body li { font-size: 17px; line-height: 26px; color: var(--text-1); }
.doc-body p + p { margin-top: var(--sp-24); }
.doc-body h2 { font-size: var(--h3-fs); line-height: 31px; font-weight: 600; letter-spacing: -0.015em; margin: var(--sp-48) 0 var(--sp-24); }
.doc-body h3 { font-size: 21px; line-height: 27px; font-weight: 600; margin: var(--sp-32) 0 var(--sp-16); }
.doc-body ul { list-style: disc; padding-left: var(--sp-24); }
.doc-body li + li { margin-top: var(--sp-12); }
.doc-body a { color: var(--link); }
.doc-links { display: grid; gap: var(--sp-12); margin-top: var(--sp-24); }
.doc-links .card { padding: var(--sp-24); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); }

/* 404 */
.lost { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-16); padding-top: var(--sp-80); }

/* ── 14. Motion: reveal on scroll (§17.4: --ease and --dur-*, zero under reduced motion) ── */
.js [data-reveal] { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* ── 15. Narrow windows ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --page-px: 40px; }
  .co-wrap { --page-px: 40px; }
  .hdr-nav a { padding: 0 10px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .ftr-in { grid-template-columns: 1fr; }
  .term-rows { grid-template-columns: minmax(0, 1fr); }
  .term-art { display: none; }
}
@media (max-width: 1023px) {
  :root { --sec-gap: calc(2 * var(--sp-48)); --hero-xl-fs: 56px; --hero-xl-lh: 64px; }
  /* Phones and tablets: the links and "Log in" move into the menu; the green "Try Clueless" stays in the bar
     (Chase, 7 Nov: "users on mobile couldn't see the try Clueless button"). Touch areas 44 (audit M11): the pill
     looks 40 like the desktop one and its ::after takes taps 2px above and below; the menu's 44 square reaches
     5px into the page edge so its icon stays where it was. */
  .hdr-nav, .hdr-actions .pill-ghost { display: none; }
  .hdr-actions { margin-left: 0; gap: var(--sp-4); }
  .hdr-actions .pill-primary { position: relative; padding: 0 var(--sp-16); }
  .hdr-actions .pill-primary::after { content: ""; position: absolute; inset: -3px -1px; }
  .hdr-menu { display: inline-flex; width: var(--ctl-text-lg); height: var(--ctl-text-lg); margin-right: -5px; }
  .home-hero { grid-template-columns: 1fr; min-height: 0; }
  .home-art { min-height: 0; padding: var(--sp-24); }
  .home-art.grass { aspect-ratio: 4 / 3; padding: 0; }
  .tab-panel { grid-template-columns: 1fr; }
  .tab-art { min-height: 0; }
  .m3d-pair { grid-template-columns: 1fr; gap: var(--sp-48); margin-top: var(--sp-48); }
  .outcomes, .three, .cols-3 { grid-template-columns: 1fr; gap: var(--sp-32); }
  .dl-cards { grid-template-columns: 1fr; }
  .wide-card { flex-direction: column !important; align-items: flex-start; }
  .works-with { gap: var(--sp-32); }
  .edu-hero-sub { grid-template-columns: 1fr; }
  .edu-hero-sub > div { grid-column: 1; }
  .banner, .resources, .commit, .team, .values, .co-hero { grid-template-columns: 1fr; }
  .banner { flex-direction: column; align-items: flex-start; }
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: 1fr; }
  .news-col > * + *, .news-grid > * + * { margin-top: var(--sp-24); }
  .prompts { grid-template-columns: 1fr; }
  .prompt { aspect-ratio: auto; min-height: 200px; }
  .compare thead th:first-child { width: 180px; }
}
@media (max-width: 760px) {
  :root { --page-px: 20px; --nav-h: 64px; --sec-gap: var(--sp-80); --hero-fs: 44px; --hero-lh: 50px; --hero-xl-fs: 44px; --hero-xl-lh: 50px; --h2-fs: 30px; --h2-lh: 36px; --h3-fs: 22px; --h3-lh: 28px; --lead-fs: 17px; --lead-lh: 26px; }
  .co-wrap { --page-px: 20px; }
  .plans { grid-template-columns: 1fr; }
  .tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--page-px)); padding: 0 var(--page-px) var(--sp-4); }
  .tab { flex: 0 0 160px; scroll-snap-align: start; }
  .m3d-picker { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(-1 * var(--page-px)) var(--sp-16); padding: 0 var(--page-px) var(--sp-4); scrollbar-width: none; }
  .m3d-picker .pill { flex: 0 0 auto; }
  .tab-art, .home-art { padding: var(--sp-16); }
  .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-16); }
  .try-card { padding: var(--sp-20); border-radius: var(--r-panel); }
  .four, .values-list, .works-with, .go-rows li, .term-list li { grid-template-columns: 1fr; gap: var(--sp-12); }
  .banner, .resources { padding: var(--sp-32) var(--sp-24); }
  .banner p { font-size: 18px; line-height: 26px; }
  .faq .read { padding-right: 0; }
  .release-list a { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--sp-4) var(--sp-12); }
  .release-list .rl-date, .release-list .rl-tag { grid-column: 1; }
  .release-list .h-card { grid-column: 1; }
  .release-list svg { grid-column: 2; grid-row: 1 / span 3; }
  .all-head { flex-direction: column; align-items: flex-start; }
  .all-head h2 { font-size: 30px; line-height: 36px; }
  .story-lead h2 { font-size: 26px; line-height: 32px; }
  .compare { overflow-x: auto; }
  .compare table { min-width: 640px; }
  .compare thead th { position: static; }
  /* Audit M12: the hint above, and the plan names' column stays put while Pro and Max scroll in. */
  .compare-hint { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-12); }
  .compare-hint svg { width: 14px; height: 14px; }
  .compare thead th:first-child, .compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--sand); }
  .compare thead th:first-child { width: 132px; top: auto; } /* sticky sideways only: the header row doesn't follow the page here */
  /* A group's name spans the row: its words stay at the left edge while the plans scroll. */
  .compare .group th { position: static; }
  .compare .group th span { position: sticky; left: var(--sp-12); display: inline-block; }
  /* Audit M11: 44 px to tap on a phone (W.1, §17.4): small pills, the switches, the footer's links. */
  :root { --ctl-text-sm: 44px; }
  .seg button { height: 44px; }
  .ftr li + li { margin-top: 0; }
  .ftr a { display: inline-flex; align-items: center; min-height: 44px; }
  .doc { padding-top: var(--sp-48); }
  .doc .h-hero { font-size: 40px; line-height: 46px; }
  .doc-body { margin-top: var(--sp-48); }
  .mock-card + .mock-card { margin-left: var(--sp-16); }
  .dl-cards .card, .card { padding: var(--sp-24); }
  .grass-card { width: min(calc(100% - 2 * var(--sp-16)), 560px); }
}
/* A phone: the whole Grades screen would sit at under a third of its size, so the card is the GPA tile (510 x 444,
   the <picture>'s phone source) as tall as the 4:3 frame allows (75% of its width, less 16 above and below), one
   radius rung down for the smaller card, as the try card steps down on a phone. */
@media (max-width: 600px) {
  .grass-card {
    width: min(calc(100% - 2 * var(--sp-16)), calc((75% - 2 * var(--sp-16)) * 510 / 444), 400px);
    border-radius: var(--r-card);
  }
}
/* The narrowest phones keep the logo, "Open chat" and the menu in the bar; the menu says who is logged in. */
@media (max-width: 359px) {
  .hdr-me { display: none; }
}