:root{--ink:#102746;--muted:#607089;--paper:#f4f7fb;--surface:#fff;--line:#d5deeb;--accent:#165dc5;--accent-dark:#0c3d78;--success:#17795b;--warning:#a5640a;--danger:#b43d36;--radius:8px;font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;min-height:100dvh;overflow-x:hidden;background:var(--paper);color:var(--ink)}button,input{font:inherit}a{color:inherit}.skip{position:fixed;z-index:50;top:8px;left:8px;transform:translateY(-160%);padding:10px 14px;background:var(--ink);color:#fff}.skip:focus{transform:none}:focus-visible{outline:3px solid #69a0ee;outline-offset:3px}
.gtm-nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 max(24px,calc((100% - 1120px)/2));border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)}.gtm-brand{display:flex;align-items:center;gap:10px;text-decoration:none}.gtm-brand img{display:block;border-radius:50%}.gtm-brand span{display:grid;line-height:1.05}.gtm-brand b{font-size:14px}.gtm-brand small{margin-top:4px;color:var(--muted);font:700 9px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.gtm-nav nav{display:flex;gap:24px}.gtm-nav nav a{font-size:13px;font-weight:750;text-decoration:none}.gtm-nav nav a:hover{text-decoration:underline;text-underline-offset:5px}
.gtm-shell{width:min(1120px,calc(100% - 48px));margin:auto;padding:72px 0 96px}.gtm-intro{max-width:780px}.gtm-kicker{margin:0 0 14px;color:var(--accent);font:850 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.gtm-intro h1{max-width:720px;margin:0;font-size:clamp(42px,6vw,68px);line-height:1.05;letter-spacing:0}.gtm-intro>p:last-of-type{max-width:700px;margin:22px 0 0;color:var(--muted);font-size:18px;line-height:1.7}
.gtm-search{margin-top:34px}.gtm-search label,.field label{display:block;margin-bottom:8px;font-size:13px;font-weight:800}.gtm-search>div{display:grid;grid-template-columns:1fr auto;gap:8px}.gtm-search input,.field input{width:100%;min-height:52px;border:1px solid #aebdd1;border-radius:6px;background:#fff;padding:12px 14px;color:var(--ink)}.gtm-search input:focus,.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,93,197,.12);outline:0}.gtm-search button,.gtm-button{min-height:48px;border:1px solid var(--accent-dark);border-radius:6px;background:var(--accent-dark);color:#fff;padding:12px 20px;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.gtm-search button:hover,.gtm-button:hover{background:#082f5f}.gtm-search button:active,.gtm-button:active{transform:translateY(1px)}.gtm-search small,.field small{display:block;margin-top:8px;color:var(--muted);font-size:12px}.gtm-button[disabled],.gtm-search button[disabled]{opacity:.55;cursor:wait}.gtm-button.full{width:100%}
.gtm-state,.gtm-error{display:flex;gap:16px;align-items:center;margin-top:44px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.gtm-state b,.gtm-error b{display:block}.gtm-state p,.gtm-error p{margin:5px 0 0;color:var(--muted)}.gtm-pulse{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(22,93,197,.35);animation:pulse 1.8s infinite}.gtm-error{border-color:#e7bbb7;background:#fff8f7}.gtm-error b{color:var(--danger)}
.gtm-report{margin-top:44px;border:1px solid var(--line);border-top:4px solid var(--accent-dark);border-radius:var(--radius);background:var(--surface);overflow:hidden}.gtm-report-head{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px}.gtm-report-head h2{margin:0;font-size:clamp(28px,4vw,44px);overflow-wrap:anywhere}.gtm-report-head>div>p:last-child{margin:8px 0 0;color:var(--muted);font-size:12px}.gtm-verdict,.challenge-status{display:inline-flex;padding:8px 11px;border:1px solid #b8c8df;border-radius:99px;background:#edf3fb;color:var(--accent-dark);font-size:12px;font-weight:850;white-space:nowrap}.gtm-pending{margin:0 30px 30px;padding:24px;border-left:3px solid var(--warning);background:#fff8ec}.gtm-pending p{margin:8px 0 0;color:var(--muted);line-height:1.6}
.gtm-scores{display:grid;grid-template-columns:1.3fr repeat(3,1fr);border-block:1px solid var(--line)}.gtm-score{min-height:128px;display:grid;align-content:center;gap:10px;padding:24px;border-right:1px solid var(--line)}.gtm-score:last-child{border:0}.gtm-score span{color:var(--muted);font-size:12px;font-weight:750}.gtm-score b{font-size:36px}.gtm-score.primary{background:#102f59;color:#fff}.gtm-score.primary span{color:#c9d9ed}
.gtm-evidence-grid{display:grid;grid-template-columns:1fr 1fr}.gtm-evidence-grid section{padding:32px}.gtm-evidence-grid section+section{border-left:1px solid var(--line)}.gtm-evidence-grid h3{margin:0 0 18px;font-size:22px}.gtm-evidence-grid ul,.gtm-evidence-grid ol{display:grid;gap:13px;margin:0;padding-left:22px;color:#34445b;line-height:1.55}.gtm-report-actions{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:28px 30px;border-top:1px solid var(--line);background:#f8fafc}.gtm-report-actions b{font-size:17px}.gtm-report-actions p{margin:5px 0 0;color:var(--muted);font-size:13px}.gtm-boundaries{margin:0;padding:18px 30px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.gtm-boundaries summary{cursor:pointer;font-weight:800}.gtm-boundaries ul{line-height:1.7}
.claim-shell{padding-bottom:72px}.claim-layout{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);gap:22px;margin-top:42px;align-items:start}.claim-form,.challenge-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:26px}.claim-form fieldset{display:grid;gap:8px;margin:24px 0;border:0;padding:0}.claim-form legend{margin-bottom:10px;font-size:13px;font-weight:800}.method{display:flex;gap:11px;padding:14px;border:1px solid var(--line);border-radius:6px;cursor:pointer}.method:has(input:checked){border-color:var(--accent);background:#f2f7ff}.method input{margin-top:3px;accent-color:var(--accent)}.method span{display:grid;gap:4px}.method small{color:var(--muted);line-height:1.4}.form-note{margin:13px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.challenge-panel{min-height:430px}.challenge-empty{min-height:370px;display:grid;place-items:center;align-content:center;text-align:center}.challenge-empty span{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);font:850 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.challenge-empty b{margin-top:18px;font-size:18px}.challenge-empty p{max-width:340px;margin:8px 0 0;color:var(--muted)}.challenge-panel header{display:flex;justify-content:space-between;gap:18px;align-items:start}.challenge-panel h2{margin:0;font-size:28px;overflow-wrap:anywhere}.challenge-steps{display:grid;gap:0;margin:24px 0;padding:0;list-style:none}.challenge-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--line)}.challenge-steps li>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#eaf1fb;color:var(--accent-dark);font-size:11px;font-weight:900}.challenge-steps b{display:block}.challenge-steps p{margin:6px 0;color:var(--muted);font-size:13px;line-height:1.55}.challenge-steps code{display:block;margin-top:10px;border:1px solid #cbd6e5;border-radius:5px;background:#f5f7fa;padding:12px;color:#203653;font:700 11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.copy-button{margin-top:8px;border:0;background:transparent;color:var(--accent);padding:4px 0;font-size:12px;font-weight:800;cursor:pointer}.verify-message{min-height:22px;margin:13px 0 0;color:var(--muted);font-size:13px}.verify-message.success{color:var(--success);font-weight:800}.verify-message.error{color:var(--danger);font-weight:800}.expiry{display:block;margin-top:8px;color:var(--muted)}.gtm-notice{display:grid;grid-template-columns:160px 1fr;gap:24px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#eaf1fb}.gtm-notice p{margin:0;color:#425673;line-height:1.65}
.gtm-footer{display:flex;justify-content:space-between;gap:20px;padding:26px max(24px,calc((100% - 1120px)/2));border-top:1px solid var(--line);color:var(--muted);font-size:11px}.gtm-footer span:first-child{font-weight:850;color:var(--ink)}[hidden]{display:none!important}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(22,93,197,0)}100%{box-shadow:0 0 0 0 rgba(22,93,197,0)}}
@media(max-width:760px){.gtm-shell{width:min(100% - 28px,1120px);padding:48px 0 68px}.gtm-nav{padding-inline:14px}.gtm-nav nav{gap:14px}.gtm-nav nav a{font-size:12px}.gtm-intro h1{font-size:42px;overflow-wrap:anywhere}.gtm-search>div,.claim-layout,.gtm-report-actions,.gtm-notice{grid-template-columns:minmax(0,1fr)}.claim-layout>*{min-width:0}.gtm-search button{width:100%}.gtm-report-head{align-items:flex-start}.gtm-scores{grid-template-columns:1fr 1fr}.gtm-score:nth-child(2){border-right:0}.gtm-evidence-grid{grid-template-columns:1fr}.gtm-evidence-grid section+section{border-left:0;border-top:1px solid var(--line)}.gtm-footer{display:grid}.challenge-panel{min-height:0}}
@media(max-width:430px){.gtm-brand small{display:none}.gtm-nav nav a:first-child{display:none}.gtm-intro h1{font-size:36px}.gtm-report-head{display:grid}.gtm-scores{grid-template-columns:1fr}.gtm-score{min-height:96px;border-right:0;border-bottom:1px solid var(--line)}.gtm-score:last-child{border-bottom:0}.claim-form,.challenge-panel{padding:20px}}
@media(prefers-reduced-motion:reduce){.gtm-pulse{animation:none}}

/* ── Apple-design refinement, applied over the rules above ─────────────────
 * Unlayered on purpose: these rules must beat the flat defaults earlier in
 * this file, and unlayered styles win over @layer ones regardless of order.
 * Foundation tokens come from /assets/foundation.css. */

/* Type. The heading above was set at letter-spacing:0 while rendering at up
 * to 68px, where the eye reads the gaps rather than the letters. */
.gtm-intro h1{font-size:var(--type-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:660}
.gtm-report-head h2,.challenge-panel h2{font-size:var(--type-title);line-height:var(--leading-title);letter-spacing:var(--tracking-title);font-weight:640}
.gtm-evidence-grid h3{font-size:var(--type-heading);letter-spacing:var(--tracking-heading);font-weight:640}
.gtm-kicker{font-size:var(--type-label);letter-spacing:var(--tracking-label);font-weight:700}
.gtm-intro>p:last-of-type{font-size:1.1875rem;line-height:var(--leading-body);letter-spacing:var(--tracking-body)}
.gtm-score b{font-size:2.375rem;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;font-weight:600}

/* Chrome becomes a material the page scrolls under, with a lit top edge and
 * a scroll-edge fade instead of the hard 1px rule it had. */
.gtm-nav{position:sticky;top:0;z-index:30;background:var(--material-chrome);-webkit-backdrop-filter:var(--material-blur);backdrop-filter:var(--material-blur);border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent);box-shadow:inset 0 1px 0 var(--material-edge)}
.gtm-nav::after{content:"";position:absolute;inset:100% 0 auto 0;height:14px;background:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 60%,transparent),transparent);pointer-events:none}
/* Vibrancy: flat grey over a blurred surface loses legibility, so nav text
 * gains weight and a touch of tracking rather than more grey. */
.gtm-nav nav a{color:color-mix(in srgb,var(--ink) 78%,transparent);font-weight:590;letter-spacing:0.002em;transition:color var(--response-base) var(--ease-out)}
.gtm-nav nav a:hover{color:var(--ink)}

/* Surfaces gain depth and size-appropriate radii. Hard borders everywhere
 * flatten the hierarchy; a card and a chip should not read as the same
 * thickness. */
.gtm-report{border-radius:var(--radius-panel);box-shadow:var(--lift-panel);border-top-width:1px;border-top-color:var(--line);overflow:hidden}
.gtm-report::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--accent-dark),var(--accent))}
.gtm-state,.gtm-error,.claim-form,.challenge-panel,.gtm-notice{border-radius:var(--radius-card);box-shadow:var(--lift-card)}
.gtm-pending{border-radius:var(--radius-chip)}
.gtm-verdict,.challenge-status{border-radius:var(--radius-pill);box-shadow:var(--lift-chip);font-size:var(--type-small);font-weight:620;letter-spacing:0.004em}
.method{border-radius:var(--radius-chip);transition:border-color var(--response-base) var(--ease-out),background-color var(--response-base) var(--ease-out),box-shadow var(--response-base) var(--ease-out)}
.method:has(input:checked){box-shadow:var(--lift-chip)}
.challenge-steps code{border-radius:var(--radius-chip)}

/* Press feedback: scale, not a 1px nudge. Fast on the way down, eased on the
 * way back, so the control reads as taking the press. */
.gtm-search button,.gtm-button,.copy-button{border-radius:var(--radius-chip);font-weight:620;letter-spacing:0.002em;transition:transform var(--response-base) var(--ease-out),background-color var(--response-base) var(--ease-out),box-shadow var(--response-base) var(--ease-out);will-change:transform}
.gtm-search button,.gtm-button{box-shadow:var(--lift-chip)}
.gtm-search button:active,.gtm-button:active,.copy-button:active{transform:scale(0.972);transition-duration:var(--response-fast);transition-timing-function:var(--ease-in)}
.gtm-search input,.field input{border-radius:var(--radius-chip);transition:border-color var(--response-base) var(--ease-out),box-shadow var(--response-base) var(--ease-out)}

/* The primary score is the one number the page exists to show. */
.gtm-score.primary{background:linear-gradient(160deg,#153a6b,#0e2647)}

@media (prefers-reduced-motion:reduce){
  .gtm-search button,.gtm-button,.copy-button{transition:background-color var(--response-fast) linear;will-change:auto}
  .gtm-search button:active,.gtm-button:active,.copy-button:active{transform:none;filter:brightness(0.95)}
}
@media (prefers-reduced-transparency:reduce){
  .gtm-nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .gtm-nav::after{display:none}
}
@media (prefers-contrast:more){
  .gtm-nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:2px solid var(--ink)}
  .gtm-report,.gtm-state,.gtm-error,.claim-form,.challenge-panel,.gtm-notice{box-shadow:none;border-color:var(--ink)}
  .gtm-report::before{display:none}
}

/* ── Visible pass: motion, hierarchy, materials ───────────────────────────
 * The first refinement pass changed tracking, radii and shadows, which is
 * real but invisible on a page that was already laid out. The thing actually
 * making this feel like a document rather than an interface is that every
 * state change is a hidden-attribute hard cut: results appear fully formed,
 * with no arrival. This pass fixes that, and gives the one number the page
 * exists to show the size it deserves. */

/* Materialize, do not fade. A glass surface arriving animates blur and scale
 * together so it reads as a real material, not an opacity ramp. Toggling
 * [hidden] moves the element from display:none, which restarts the
 * animation, so no JS change is needed. */
@keyframes materialize{
  from{opacity:0;transform:translateY(14px) scale(0.985);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.gtm-report:not([hidden]){animation:materialize 460ms cubic-bezier(0.22,0.61,0.36,1) both}
.gtm-state:not([hidden]),.gtm-error:not([hidden]){animation:rise 300ms cubic-bezier(0.22,0.61,0.36,1) both}
.challenge-panel [data-challenge-result]:not([hidden]){animation:materialize 420ms cubic-bezier(0.22,0.61,0.36,1) both}

/* Hint in the direction of the gesture: the evidence arrives in reading
 * order, so the eye is led down the list rather than hit with all of it. */
.gtm-evidence-grid section:nth-child(1){animation:rise 380ms cubic-bezier(0.22,0.61,0.36,1) 120ms both}
.gtm-evidence-grid section:nth-child(2){animation:rise 380ms cubic-bezier(0.22,0.61,0.36,1) 200ms both}

/* Hierarchy. The overall score was one cell in a four-column table, at the
 * same weight as the axes beside it. It is the answer the visitor came for,
 * so it gets the size of an answer and the axes become its support. */
.gtm-scores{grid-template-columns:1.55fr repeat(3,1fr);border-block:0}
.gtm-score{min-height:170px;padding:28px;border-right:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.gtm-score span{font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:680;opacity:.72}
.gtm-score b{font-size:3rem;line-height:1;letter-spacing:-0.03em;font-weight:600;font-variant-numeric:tabular-nums}
.gtm-score.primary{background:linear-gradient(155deg,#1c4478 0%,#0d2445 100%)}
.gtm-score.primary b{font-size:clamp(4rem,7.5vw,6rem);letter-spacing:-0.045em;font-weight:620}

/* Continuous progress, not a blinking dot. A pulse says "something is on";
 * a sweep says "this is still going", which is what a 20-second audit needs
 * to communicate. */
.gtm-state{position:relative;overflow:hidden}
.gtm-state::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:sweep 1.5s cubic-bezier(0.4,0,0.6,1) infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Type: the display heading was set at weight 660, which reads tentative at
 * 68px. Confidence at this size comes from weight, not more size. */
.gtm-intro h1{font-weight:700}
.gtm-report-head h2{font-weight:680}

@media(max-width:760px){
  .gtm-scores{grid-template-columns:1fr 1fr}
  .gtm-score.primary{grid-column:1/-1}
  .gtm-score.primary b{font-size:clamp(3.25rem,16vw,5rem)}
}

/* Reduced motion: the arrival still happens, it just stops moving in space. */
@media(prefers-reduced-motion:reduce){
  .gtm-report:not([hidden]),.gtm-state:not([hidden]),.gtm-error:not([hidden]),
  .gtm-evidence-grid section,.challenge-panel [data-challenge-result]:not([hidden]){
    animation:none;opacity:1;transform:none;filter:none}
  .gtm-state::after{animation:none;opacity:.5}
}

/* Align the row. With four different type sizes in one band, centring each
 * cell independently leaves the labels on four different lines and the
 * numbers on four different baselines. Pin the labels to a shared top and
 * the numbers to a shared bottom so the row reads as one measurement. */
.gtm-score{display:grid;grid-template-rows:auto 1fr;align-content:stretch;gap:0;padding:26px 28px 24px}
.gtm-score span{align-self:start}
.gtm-score b{align-self:end;display:block}

/* ── Apple skin: responsive scale and control sizing ──────────────────────
 * Layout now scales with the reader's text size. The gutter is a clamp, so
 * there is no width where the page is suddenly cramped or suddenly loose,
 * and no breakpoint doing the work a fluid value can do on its own. */
.gtm-shell{width:min(var(--content-max),100% - var(--gutter)*2);margin-inline:auto;padding-block:var(--space-2xl) var(--space-3xl)}
.gtm-nav{height:auto;min-height:var(--space-xl);padding:var(--space-2xs) var(--gutter);gap:var(--space-s)}
.gtm-footer{padding:var(--space-m) var(--gutter);gap:var(--space-s)}
.gtm-intro{max-width:var(--measure)}
.gtm-intro>p:last-of-type{max-width:var(--measure);margin-block:var(--space-m) 0;font-size:var(--type-body)}
.gtm-search{margin-top:var(--space-l)}
.gtm-search>div{gap:var(--space-2xs)}
.gtm-report{margin-top:var(--space-l)}
.gtm-report-head{padding:var(--space-m)}
.gtm-score{padding:var(--space-m)}
.gtm-evidence-grid section{padding:var(--space-m)}
.gtm-report-actions{padding:var(--space-m);gap:var(--space-s)}
.gtm-boundaries{padding:var(--space-s) var(--space-m)}
.gtm-state,.gtm-error{margin-top:var(--space-l);padding:var(--space-m);gap:var(--space-s)}
.gtm-pending{margin:0 var(--space-m) var(--space-m);padding:var(--space-m)}
.claim-layout{gap:var(--space-m);margin-top:var(--space-l)}
.claim-form,.challenge-panel{padding:var(--space-m)}
.gtm-notice{padding:var(--space-m);gap:var(--space-m);margin-top:var(--space-m)}

/* Controls clear the 44px floor, in rem so they grow with the text rather
 * than staying thumb-sized beside thumb-and-a-half type. */
.gtm-search input,.field input,.gtm-search button,.gtm-button{min-height:var(--control-min);padding-inline:var(--control-pad-x)}
.gtm-brand{min-height:var(--control-min)}
.gtm-nav nav a{min-height:var(--control-min);display:inline-flex;align-items:center}
.copy-button{min-height:var(--control-min);padding-inline:var(--space-2xs)}
.method{padding:var(--space-s);gap:var(--space-2xs);min-height:var(--control-min)}
.gtm-boundaries summary{min-height:var(--control-min);display:flex;align-items:center}

/* Nothing overflows, whatever the hostname. These pages exist to display
 * URLs a stranger typed, so long unbroken strings are the normal case. */
.gtm-report-head h2,.challenge-panel h2,.gtm-score b,.challenge-steps code{overflow-wrap:anywhere;min-width:0}
.gtm-scores,.gtm-evidence-grid,.claim-layout,.gtm-search>div{min-width:0}
.gtm-scores>*,.gtm-evidence-grid>*,.claim-layout>*{min-width:0}

/* One breakpoint, at the width where a four-column measurement band stops
 * being readable rather than at a device size. */
@media(max-width:52rem){
  .gtm-nav{flex-wrap:wrap;padding-block:var(--space-2xs)}
  .gtm-intro h1{font-size:var(--type-display)}
}

/* ── Apple palette ────────────────────────────────────────────────────────
 * Apple uses near-black on two greys and one blue. Everything else is the
 * content. What this replaces was navy headings on a blue-grey ground with a
 * green eyebrow, which reads as a corporate template no matter what the
 * spacing does.
 *
 * The values are apple.com's own: #1d1d1f text, #6e6e73 secondary, #f5f5f7
 * ground, #d2d2d7 rules, #0071e3 for anything you can press.
 *
 * Declared last and unlayered so it wins over the :root above without editing
 * 250 call sites one at a time. */
:root{
  --ink:#1d1d1f; --ink-strong:#1d1d1f; --forest:#1d1d1f;
  --muted:#6e6e73; --ink-muted:#6e6e73;
  --paper:#f5f5f7; --surface-base:#f5f5f7;
  --surface:#fff; --surface-raised:#fff; --surface-sunken:#f5f5f7;
  --line:#d2d2d7; --line-soft:#d2d2d7;
  --accent:#0071e3; --accent-dark:#0066cc; --accent-strong:#0066cc;
  /* Apple keeps no green or gold in its chrome. The eyebrow is grey, and
   * colour is reserved for the one thing a reader can act on. */
  --leaf:#6e6e73; --sun:#6e6e73; --coral:#6e6e73; --sky:#f5f5f7;
  --brand-cream:#f5f5f7; --focus:#0071e3;
  --tint-info:#f5f5f7; --tint-success:#f5f5f7;
  --material-chrome:rgba(255,255,255,.72);
}
/* Anything pressable is a capsule. Apple has used a radius large enough to
 * round fully since 2017, so the shape reads the same at every height rather
 * than as a rounded rectangle at some of them. */
.btn,.gtm-button,.gtm-search button,.wizard-actions button,.lang-switch,
.status-pill,.gtm-verdict,.challenge-status,.copy-button{border-radius:980px}
.btn.primary,.gtm-search button,.gtm-button{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover,.gtm-search button:hover,.gtm-button:hover{background:#0077ed;border-color:#0077ed}
.btn.secondary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.secondary:hover{background:rgba(0,113,227,.06)}
.nav-links a:hover,.gtm-nav nav a:hover{color:var(--accent)}
/* Eyebrows are grey and tracked, not a coloured label. */
.eyebrow,.gtm-kicker{color:var(--muted)}
/* Semibold, not black: weight carries the emphasis, and past 600 a heading
 * starts to read as a poster. */
h1,h2,h3,.hero h1,.dash-title h1,.section-head h2,.install-copy h2,
.demo-cta h2,.cap h3,.gtm-intro h1,.gtm-report-head h2,.challenge-panel h2{font-weight:600;color:var(--ink)}
/* Dark blocks go to Apple's near-black rather than navy. */
.gtm-score.primary{background:#1d1d1f}
.demo-cta{background:#1d1d1f}
.demo-cta .btn{background:var(--accent);color:#fff}
/* The eyebrow was set in a monospace face, which reads as a developer console
 * rather than as Apple. Apple sets these in the system sans, uppercase and
 * tracked, so the label recedes instead of announcing itself. */
.gtm-kicker{font-family:inherit;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.gtm-brand small{font-family:inherit;letter-spacing:.04em}

/* Below 430px the first nav link was hidden, removing a destination with no
   replacement anywhere on the page. Wrap the row instead of dropping items. */
@media(max-width:430px){
  .gtm-nav{flex-wrap:wrap;row-gap:8px}
  .gtm-nav nav{flex-wrap:wrap;gap:16px}
  .gtm-nav nav a:first-child{display:inline-flex}
  .gtm-nav nav a{min-height:44px;align-items:center}
}