/* DESIGN-DIRECTION-04. Three-page opt-in; desktop composition starts at 821px.
   Stateful components, shell navigation and mobile geometry retain ownership. */
html[data-tgl-design="04"] {
  --dd-ink:#f5f7fb; --dd-muted:#c7d3e2; --dd-line:#52677d;
  --dd-top:#101827; --dd-end:#293f51; --dd-surface:#24394f;
  --dd-deep:#172b3d; --dd-raised:#30465c; --dd-field:#142437;
  --dd-teal:#29484e; --dd-lavender:#343f56; --dd-pink:#e6007e;
  --dd-focus:#f5f7fb; --dd-action-ink:#fff;
}
html[data-tgl-design="04"][data-tgl-theme="light"] {
  --dd-ink:#17263c; --dd-muted:#44576a; --dd-line:#a3b3c3;
  --dd-top:#f5f7fa; --dd-end:#e8eff5; --dd-surface:#eaf0f6;
  --dd-deep:#e0eaf1; --dd-raised:#d7e3ee; --dd-field:#fff;
  --dd-teal:#dcefeb; --dd-lavender:#e8e7f2; --dd-focus:#17263c;
  color-scheme:light;
}
/* New tool cues are desktop-only; existing mobile heading cues are retained. */
@media(max-width:820px){.dd04-new-icon{display:none!important}}
html[data-tgl-design="04"] .tgl-theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; max-width:100%; padding:8px 14px; margin:0;
  border:1px solid var(--dd-line); border-radius:9px;
  background:var(--dd-deep); color:var(--dd-ink);
  font:600 13px/1.4 Arial,Helvetica,sans-serif; cursor:pointer;
}
html[data-tgl-design="04"] .tgl-theme-toggle:focus-visible {
  outline:3px solid var(--dd-focus)!important; outline-offset:3px;
  box-shadow:0 0 0 6px var(--dd-pink)!important;
}
@media(min-width:821px) {
  html[data-tgl-design="04"] body,
  html[data-tgl-design="04"] body>main {
    --tgl-workspace-bg:var(--dd-top); --tgl-workspace-surface:var(--dd-surface);
    --tgl-workspace-deep:var(--dd-field); --tgl-workspace-muted:var(--dd-muted);
    --tgl-workspace-line:var(--dd-line); --tgl-workspace-edge:var(--dd-line);
    --tgl-visual-line:var(--dd-line); --tgl-visual-muted:var(--dd-muted);
    background:radial-gradient(ellipse at 95% 8%,#36587520,transparent 43%),linear-gradient(180deg,var(--dd-top),var(--dd-end))!important;
    color:var(--dd-ink); background-attachment:scroll; line-height:1.55;
  }
  html[data-tgl-design="04"] body>main.tgl-shell-main {
    box-sizing:border-box; max-width:1320px!important; padding:44px 56px 36px;
    margin-inline:auto; min-width:0;
  }
  html[data-tgl-design="04"] main :is(h1,h2,h3,strong,label,legend,a) {color:var(--dd-ink)}
  html[data-tgl-design="04"] main :is(p,small,.eyebrow) {color:var(--dd-muted)}
  html[data-tgl-design="04"] main h1 {font-size:64px;line-height:1.04;letter-spacing:-.055em;margin:10px 0 20px}
  html[data-tgl-design="04"] main h2 {letter-spacing:-.035em;line-height:1.15}
  html[data-tgl-design="04"] main p {line-height:1.6}
  html[data-tgl-design="04"] main .eyebrow {font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
  html[data-tgl-design="04"] main :is(.primary,.tgl-action--prominent) {
    display:inline-flex;align-items:center;justify-content:center;min-height:52px;
    max-width:100%;width:auto;padding:14px 24px;border-radius:11px;
    background:var(--dd-pink)!important;color:var(--dd-action-ink)!important;
    font-size:15px;line-height:1.5;font-weight:700;text-align:center;
    box-shadow:0 8px 24px #e6007e14;border:1px solid transparent;
  }
  html[data-tgl-design="04"] main :is(.primary,.tgl-action--prominent):hover {background:#c9006e!important}
  html[data-tgl-design="04"] main :is(a,button,input,select,textarea,summary):focus-visible {
    outline:3px solid var(--dd-focus)!important;outline-offset:3px;
    box-shadow:0 0 0 6px var(--dd-pink)!important;
  }
  html[data-tgl-design="04"] .tgl-next-step {grid-column:1/-1;background:var(--dd-surface);color:var(--dd-ink);border-color:var(--dd-line);margin:20px 0 0}

  /* Home B composition with the owner-selected A photographic hero only. */
  html[data-tgl-design="04"] body.tgl-home-workspace>main {max-width:none!important;padding:24px 0 20px}
  html[data-tgl-design="04"] .tgl-home-workspace .wrap {width:calc(100% - 112px);max-width:1280px;padding-inline:0}
  html[data-tgl-design="04"] .tgl-home-workspace .hero {
    position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
    min-height:615px;padding:10px 42px;margin-bottom:18px;border-radius:28px;
    background:#0b1626;color:#f5f7fb;
  }
  html[data-tgl-design="04"] .hero-copy {max-width:580px;position:relative;z-index:1}
  html[data-tgl-design="04"] .tgl-home-workspace .hero h1 {font-size:clamp(76px,7.05vw,102px);line-height:.98;letter-spacing:-.06em;max-width:10ch;margin:12px 0 20px;color:#f5f7fb}
  html[data-tgl-design="04"] .hero .hero-intro {font-size:22px;max-width:32ch;color:#f5f7fb!important}
  html[data-tgl-design="04"] .hero :is(.hero-detail,.home-small,.eyebrow) {color:#d4dfeb!important}
  html[data-tgl-design="04"] .hero .hero-detail {max-width:43ch;font-size:15px}
  html[data-tgl-design="04"] .hero .home-small {font-size:13px;margin-top:12px}
  html[data-tgl-design="04"] .hero .home-actions a:not(.primary) {color:#f5f7fb!important}
  html[data-tgl-design="04"] .hero-media {position:absolute;inset:0;z-index:-1;width:100%;height:100%;min-height:100%}
  html[data-tgl-design="04"] .hero-media img {width:100%;height:100%;object-fit:cover;object-position:center 42%;border-radius:0}
  html[data-tgl-design="04"] .hero-media:after {content:'';position:absolute;inset:0;width:auto;height:auto;background:linear-gradient(90deg,#0b1626 0%,#0b1626f7 23%,#0b1626bc 44%,#0b162626 69%,#0b162600 85%),linear-gradient(0deg,#0b1626b3,transparent 23%)}
  html[data-tgl-design="04"] .tgl-home-workspace {
    --home-blue:#2a4058;--home-teal:#29494f;--home-pink:#442b43;--home-lavender:#3a405c;
    --home-event:#243b51;--home-tile:#1b2f44;--home-progress:#224047;--home-progress-inner:#183039;
    --home-bike:#2c3650;--home-tool:#30445b;--home-story:#25394b;--home-icon:#132437;
  }
  html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-home-workspace {
    --home-blue:#dce7f3;--home-teal:#dcefeb;--home-pink:#f3dfe9;--home-lavender:#e7e3f3;
    --home-event:#bccbdd;--home-tile:#f4f8fc;--home-progress:#b5d2cc;--home-progress-inner:#eff8f5;
    --home-bike:#cbc9df;--home-tool:#cbd7e4;--home-story:#cbd6e1;--home-icon:#f4f8fc;
  }
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey {padding-block:0;gap:12px;border:0;margin-bottom:32px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey a {padding:22px;gap:8px 12px;min-height:132px;border:1px solid transparent;border-radius:20px;background:var(--home-blue);box-shadow:none;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey a:nth-child(2) {background:var(--home-teal)}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey a:nth-child(3) {background:var(--home-pink)}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey a:nth-child(4) {background:var(--home-lavender)}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey .journey-number {grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:var(--home-icon);border-radius:12px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey .journey-number svg {width:24px;height:24px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey strong {grid-column:2;align-self:center;font-size:21px;line-height:1.14}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey span:last-child {grid-column:2;font-size:13px;line-height:1.5;margin:0;color:var(--dd-muted)}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey a:hover {border-color:var(--dd-line);box-shadow:0 8px 20px #08132318}
  html[data-tgl-design="04"] .tgl-home-workspace .home-feature {grid-template-columns:.62fr 1.38fr;gap:40px;padding:30px;border:0;margin-bottom:30px;border-radius:28px;background:var(--home-event)}
  html[data-tgl-design="04"] .tgl-home-workspace .feature-photo img {height:414px;object-fit:cover;border-radius:20px}
  html[data-tgl-design="04"] .tgl-home-workspace .feature-copy h2 {font-size:35px;line-height:1.1}
  html[data-tgl-design="04"] .tgl-home-workspace .event-path {display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:24px}
  html[data-tgl-design="04"] .tgl-home-workspace .event-path li {padding:17px;display:flex;flex-direction:column;gap:7px;border:0;border-radius:13px;background:var(--home-tile)}
  html[data-tgl-design="04"] .tgl-home-workspace .event-path li:before {display:none}
  html[data-tgl-design="04"] .tgl-home-workspace .home-progress {background:var(--home-progress);padding:38px;grid-template-columns:1fr 1.1fr;align-items:center;gap:42px;margin-bottom:30px;border:0;border-radius:28px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-progress h2 {font-size:38px;line-height:1.1}
  html[data-tgl-design="04"] .tgl-home-workspace .tgl-visual-heading {border-left:0!important;padding-left:0!important}
  html[data-tgl-design="04"] .tgl-home-workspace .progress-explanation {border:0;border-radius:18px;padding:25px;background:var(--home-progress-inner)}
  html[data-tgl-design="04"] .tgl-home-workspace .progress-explanation h3 {font-size:24px;letter-spacing:-.025em}
  html[data-tgl-design="04"] .tgl-home-workspace .progress-explanation li {padding:10px 0;border-bottom:1px solid var(--dd-line)}
  html[data-tgl-design="04"] .tgl-home-workspace .progress-explanation strong {color:var(--dd-ink)}
  html[data-tgl-design="04"] .tgl-home-workspace .progress-explanation span {font-size:14px;color:var(--dd-muted)}
  html[data-tgl-design="04"] .tgl-home-workspace .bikes-feature {grid-template-columns:1.1fr 1fr;gap:40px;margin-bottom:30px;background:var(--home-bike)}
  html[data-tgl-design="04"] .tgl-home-workspace .bikes-feature .feature-photo img {height:auto;max-height:330px;object-fit:contain}
  html[data-tgl-design="04"] .tgl-home-workspace .home-tools {padding-block:0;margin-bottom:24px;border:0}
  html[data-tgl-design="04"] .tgl-home-workspace .home-section-heading h2 {font-size:32px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-tool-links {gap:14px;border:0;margin-top:16px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-tool-links>a {padding:24px;border:0;border-radius:20px;background:var(--home-tool);min-height:145px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-tool-links span {color:var(--dd-muted)}
  html[data-tgl-design="04"] .tgl-home-workspace .story {grid-template-columns:190px 1fr;gap:38px;padding:30px;margin-bottom:0;border:0;border-radius:28px;background:var(--home-story)}
  html[data-tgl-design="04"] .tgl-home-workspace .story img {width:190px;height:250px;border-radius:18px}
  html[data-tgl-design="04"] .tgl-home-workspace .story h2 {font-size:35px}

  /* Tools C: a category rail, symmetrical cards and coordinated tonal families. */
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-heading {max-width:800px;margin-bottom:22px}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-heading h1 {font-size:70px}
  html[data-tgl-design="04"] .tgl-tools-workspace .intro {font-size:18px;max-width:62ch}
  html[data-tgl-design="04"] .tgl-tools-workspace .workspace-jumps {gap:10px;border:0;margin:0 0 34px;padding:0}
  html[data-tgl-design="04"] .workspace-jumps a {padding:8px 14px;background:var(--dd-surface);border:1px solid var(--dd-line);border-radius:9px;text-decoration:none}
  html[data-tgl-design="04"] .tool-category {--category-surface:#1d3046;--category-card:#2a4058;--category-ink:#c1dbf5;display:grid;grid-template-columns:215px minmax(0,1fr);align-items:start;gap:30px;padding:34px 28px;margin:0 0 22px;background:var(--category-surface)}
  html[data-tgl-design="04"] .tool-category:nth-of-type(2) {--category-surface:#1e383f;--category-card:#29494f;--category-ink:#b9e5de}
  html[data-tgl-design="04"] .tool-category:nth-of-type(3) {--category-surface:#2b3049;--category-card:#3a405c;--category-ink:#ded2f8}
  html[data-tgl-design="04"] .tool-category>h2 {font-size:32px;max-width:10ch;border:0!important;padding:8px 0!important;margin:0}
  html[data-tgl-design="04"] .tgl-tools-workspace :is(.tool-heading h1,.tool-category>h2)>.tgl-heading-icon {display:none}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:18px;margin:0}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item {grid-column:span 2;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:238px;padding:25px;border:1px solid #ffffff0c;border-radius:18px;margin:0;background:linear-gradient(135deg,#ffffff05,transparent 70%),var(--category-card);box-shadow:0 6px 18px #0813230a}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item:nth-child(3n+2) {background:linear-gradient(145deg,#ffffff0d,transparent 75%),var(--category-card)}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item:nth-child(3n) {background:linear-gradient(135deg,#08132318,transparent 80%),var(--category-card)}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item:last-child:nth-child(odd) {grid-column:2/span 2}
  html[data-tgl-design="04"] .tool-directory-item h3 {display:flex;align-items:center;gap:12px;font-size:21px;line-height:1.25;margin:0 0 16px;min-height:2.5em;padding:0}
  html[data-tgl-design="04"] .tool-directory-item h3 .tgl-heading-icon {width:25px;height:25px;margin:0;flex:none;align-self:center;color:var(--category-ink)}
  html[data-tgl-design="04"] .tool-directory-item h3 a {min-width:0;flex:1;margin:0}
  html[data-tgl-design="04"] .tool-directory-item h3 a {color:var(--category-ink);text-decoration:none}
  html[data-tgl-design="04"] .tool-directory-item p {font-size:14px;line-height:1.65;margin:0 0 20px}
  html[data-tgl-design="04"] .tool-directory-item>a.tgl-accent-link {display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;max-width:100%;margin-top:auto;padding:0;background:transparent;color:var(--category-ink)!important;border:0;border-radius:0;box-shadow:none;line-height:1.4;font-size:13px;font-weight:600;text-decoration:none}
  html[data-tgl-design="04"] .tool-directory-item>a.tgl-accent-link:hover {background:transparent;text-decoration:underline;text-underline-offset:4px;text-decoration-color:currentColor!important}

  /* Account C: content-led bands; all disclosures expand in normal document flow. */
  html[data-tgl-design="04"] main.tgl-account-workspace {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  html[data-tgl-design="04"] .tgl-account-workspace> * {grid-column:1/-1;min-width:0}
  html[data-tgl-design="04"] .tgl-account-workspace:has(.account-auth--compact)>.workspace-page-heading {grid-column:1;grid-row:1;margin-bottom:28px}
  html[data-tgl-design="04"] .tgl-account-workspace>.account-auth--compact {grid-column:2;grid-row:1;justify-self:end;align-self:center;max-width:390px;margin:0 0 28px;padding:14px 18px;background:var(--dd-surface);border-radius:14px}
  html[data-tgl-design="04"] .tgl-account-workspace .account-auth--compact h2 {font-size:16px!important;line-height:1.3;margin:0}
  html[data-tgl-design="04"] .tgl-account-workspace .account-panels {gap:22px;grid-template-columns:minmax(0,1fr)}
  html[data-tgl-design="04"] .tgl-account-workspace .account-panel {border:1px solid #ffffff09;border-radius:20px;padding:28px;background:var(--dd-surface)}
  html[data-tgl-design="04"] .tgl-account-workspace .account-panel h2 {font-size:26px;border:0!important;padding-left:0!important}
  html[data-tgl-design="04"] .account-panel-heading {min-height:38px;margin-bottom:16px}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections {display:grid;grid-template-columns:minmax(0,1fr) auto 145px;gap:8px 14px;align-items:center;background:var(--dd-surface)}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>.account-panel-heading {grid-column:1;grid-row:1;min-width:0;margin:0 0 12px;align-items:center}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>label {grid-column:2;grid-row:1;display:block;font-size:13px;margin:0 0 12px}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>#strava-period {grid-column:3;grid-row:1;display:block;width:100%;max-width:145px;margin:0 0 12px;color:var(--dd-ink);background:var(--dd-field);border-color:var(--dd-line)}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>:not(.account-panel-heading):not(label):not(#strava-period) {grid-column:1/-1;min-width:0}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>.account-info:not(.strava-more):not(.strava-manage):not([open]) {grid-column:1}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>.account-actions {grid-column:2/-1;justify-self:end;max-width:100%;margin:0}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>.account-actions .tgl-action--prominent {font-size:14px;padding:12px 16px;white-space:normal}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections:has(>.account-info:not(.strava-more):not(.strava-manage)[open])>.account-actions {grid-column:1/-1;justify-self:start}
  html[data-tgl-design="04"] .tgl-account-workspace .account-connections>.strava-manage {border-top:0;margin-top:0}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-primary {grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:20px 8px;background:var(--dd-deep);border-radius:15px;margin:0 0 16px}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-primary .strava-stat {padding:12px 22px;border:0;border-right:1px solid var(--dd-line);background:transparent;border-radius:0;min-width:0}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-primary .strava-stat:last-child {border:0}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-primary .strava-stat>span {font-size:13px;min-height:2.8em;color:var(--dd-muted)}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-primary .strava-stat>strong {font-size:clamp(38px,4vw,57px);line-height:1.1;color:var(--dd-ink);overflow-wrap:anywhere}
  html[data-tgl-design="04"] .strava-stat strong small {font-size:19px}
  html[data-tgl-design="04"] .account-metric-icon {color:inherit}
  html[data-tgl-design="04"] .strava-secondary {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
  html[data-tgl-design="04"] .strava-secondary .strava-moment {padding:16px;background:var(--dd-deep);border-radius:12px;min-width:0}
  html[data-tgl-design="04"] .account-connections>.account-info {border-top:1px solid var(--dd-line)}
  html[data-tgl-design="04"] .account-info>summary {min-height:44px;line-height:1.4}
  html[data-tgl-design="04"] .tgl-account-workspace #account-details {display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 32px;background:var(--dd-surface)}
  html[data-tgl-design="04"] #account-details>h2 {grid-column:1;grid-row:1/8;margin-top:4px}
  html[data-tgl-design="04"] #account-details>:not(h2) {grid-column:2;grid-row:auto}
  html[data-tgl-design="04"] #account-details>.account-riding {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:20px 0 12px;padding:20px 0 0;border-left:0;border-top:1px solid var(--dd-line);grid-row:auto}
  html[data-tgl-design="04"] .account-riding>:is(h3,.account-lead,fieldset) {grid-column:1/-1}
  html[data-tgl-design="04"] .tgl-account-workspace .account-field {margin:0 0 18px;min-width:0}
  html[data-tgl-design="04"] .tgl-account-workspace .account-field :is(input,select) {max-width:400px;color:var(--dd-ink);background:var(--dd-field);border-color:var(--dd-line)}
  html[data-tgl-design="04"] .tgl-account-workspace .account-disciplines {margin:8px 0 18px;padding:0;border:0}
  html[data-tgl-design="04"] .tgl-account-workspace .account-disciplines label {border-radius:9px;background:var(--dd-deep);color:var(--dd-ink);border-color:var(--dd-line)}
  html[data-tgl-design="04"] .tgl-account-workspace .account-disciplines label:has(:checked) {background:var(--dd-raised);border-color:var(--dd-pink)}
  html[data-tgl-design="04"] .tgl-account-workspace #account-kit-feedback {background:var(--dd-teal)}
  html[data-tgl-design="04"] .tgl-account-workspace .kit-history-content {display:block}
  html[data-tgl-design="04"] .tgl-account-workspace .kit-history-record {max-width:none;width:100%;margin-top:14px;padding:20px 22px;border:1px solid var(--dd-line);border-radius:14px;background:color-mix(in srgb,var(--dd-teal),var(--dd-field) 55%)}
  html[data-tgl-design="04"] .tgl-account-workspace .kit-history-record h3 {font-size:20px}
  html[data-tgl-design="04"] .tgl-account-workspace .kit-history-record>button {width:auto;justify-self:start;min-height:44px}
  html[data-tgl-design="04"] .kit-history-record>details[open] {width:100%}
  html[data-tgl-design="04"] .kit-history-record .kit-snapshot-groups {grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-tgl-design="04"] .tgl-account-workspace #account-saving {display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 32px;background:var(--dd-lavender)}
  html[data-tgl-design="04"] #account-saving>h2 {grid-column:1;grid-row:1/8}
  html[data-tgl-design="04"] #account-saving>:not(h2) {grid-column:2;grid-row:auto}
  html[data-tgl-design="04"] .tgl-account-workspace:has(>.account-mailing)>.account-mailing,
  html[data-tgl-design="04"] .tgl-account-workspace:has(>.account-mailing)>.account-support {grid-column:auto;margin-top:22px;align-self:stretch;background:var(--dd-surface);padding:26px;max-width:none;width:100%}
  html[data-tgl-design="04"] .account-support .account-tool-links {flex-direction:column;align-items:flex-start;border:0}
  html[data-tgl-design="04"] .account-mailing-choice {max-width:none}
}
@media(min-width:821px) and (max-width:1150px) {
  html[data-tgl-design="04"] body>main.tgl-shell-main {padding-inline:40px}
  html[data-tgl-design="04"] .tgl-home-workspace .wrap {width:calc(100% - 80px)}
  html[data-tgl-design="04"] .tgl-home-workspace .hero {padding:18px 32px;min-height:580px}
  html[data-tgl-design="04"] .tgl-home-workspace .hero h1 {font-size:76px;max-width:9.5ch}
  html[data-tgl-design="04"] .hero-copy {max-width:500px}
  html[data-tgl-design="04"] .hero-media img {object-position:61% center}
  html[data-tgl-design="04"] .hero-media:after {background:linear-gradient(90deg,#0b1626 0%,#0b1626f7 29%,#0b1626c4 52%,#0b16261a 89%)}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey a {padding:18px 16px;column-gap:10px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-journey strong {font-size:19px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-feature {padding:26px;gap:28px}
  html[data-tgl-design="04"] .tgl-home-workspace :is(.feature-copy h2,.home-progress h2) {font-size:32px}
  html[data-tgl-design="04"] .tgl-home-workspace .feature-photo img {height:414px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-progress {padding:28px;gap:28px}
  html[data-tgl-design="04"] .tgl-home-workspace .home-tool-links {grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-tgl-design="04"] .tgl-home-workspace .event-path {gap:12px}
  html[data-tgl-design="04"] .tgl-home-workspace .event-path li {padding:14px}
  html[data-tgl-design="04"] .tgl-home-workspace .story {padding:26px;gap:28px;grid-template-columns:170px minmax(0,1fr)}
  html[data-tgl-design="04"] .tgl-home-workspace .story img {width:170px;height:235px}
  html[data-tgl-design="04"] .tool-category {grid-template-columns:155px minmax(0,1fr);gap:22px;padding:28px 22px}
  html[data-tgl-design="04"] .tool-category>h2 {font-size:28px}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item {padding:21px;min-height:260px}
  html[data-tgl-design="04"] .tool-directory-item h3 {font-size:19px}
  html[data-tgl-design="04"] .tgl-account-workspace #account-details,
  html[data-tgl-design="04"] .tgl-account-workspace #account-saving {grid-template-columns:165px minmax(0,1fr);gap:0 24px}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-primary .strava-stat {padding:12px 16px}
}
/* Light appearance changes colour only below the desktop breakpoint. */
html[data-tgl-design="04"][data-tgl-theme="light"] body,
html[data-tgl-design="04"][data-tgl-theme="light"] body>main {
  --tgl-workspace-bg:var(--dd-top);--tgl-workspace-surface:var(--dd-surface);
  --tgl-workspace-deep:var(--dd-field);--tgl-workspace-muted:var(--dd-muted);
  --tgl-workspace-line:var(--dd-line);--tgl-workspace-edge:var(--dd-line);
  --tgl-visual-line:var(--dd-line);--tgl-visual-muted:var(--dd-muted);
  background:linear-gradient(180deg,var(--dd-top),var(--dd-end))!important;color:var(--dd-ink);color-scheme:light;
}
html[data-tgl-design="04"][data-tgl-theme="light"] .tool-category {--category-surface:#bccbdd;--category-card:#f6f9fd;--category-ink:#234a71}
html[data-tgl-design="04"][data-tgl-theme="light"] .tool-category:nth-of-type(2) {--category-surface:#b5d2cc;--category-card:#f1f8f5;--category-ink:#235d58}
html[data-tgl-design="04"][data-tgl-theme="light"] .tool-category:nth-of-type(3) {--category-surface:#c5c3da;--category-card:#f7f6fc;--category-ink:#514276}
/* Beat the legacy calculator-workspace h3 a:hover {color:#fff} in every state. */
html[data-tgl-design="04"] body.tgl-tools-workspace .tool-directory-item h3 a:is(:link,:visited,:hover,:focus-visible,:active) {color:var(--category-ink,var(--dd-ink));text-decoration-color:currentColor}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(h1,h2,h3,strong,label,legend,a) {color:var(--dd-ink)}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(p,small,.eyebrow,.account-hint,.hint,.account-connected,.account-metric-icon) {color:var(--dd-muted)}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {background:var(--dd-field)!important;color:var(--dd-ink)!important;border-color:var(--dd-line)!important;color-scheme:light}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(input,textarea)::placeholder {color:#5c6c7c;opacity:1}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(button,.account-connect,.tgl-action,.primary) {background:var(--dd-raised);color:var(--dd-ink);border-color:var(--dd-line)}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(.primary,.tgl-action--prominent) {background:var(--dd-pink)!important;color:#fff!important}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(.account-connections,.account-panel,.strava-stat,.strava-moment) {background:var(--dd-surface);border-color:var(--dd-line)}
html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-account-workspace .account-disciplines label {background:var(--dd-deep);color:var(--dd-ink);border-color:var(--dd-line)}
html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-account-workspace .account-disciplines label:has(:checked) {background:var(--dd-raised);border-color:var(--dd-pink)}
html[data-tgl-design="04"][data-tgl-theme="light"] .account-riding-status--saved {background:#e4f2eb;color:#175337!important;border-color:#65937b}
html[data-tgl-design="04"][data-tgl-theme="light"] .account-riding-status--saved .account-save-icon {color:#175337}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(.account-status--error,.account-error,[aria-invalid=true],.kit-feedback-error) {color:#982947!important}
html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-account-workspace dialog {background:#fff;color:var(--dd-ink)}
html[data-tgl-design="04"][data-tgl-theme="light"] .kit-history :is(.hint,summary,.kit small) {color:var(--dd-muted)}
html[data-tgl-design="04"][data-tgl-theme="light"] .kit-history-record {border-color:var(--dd-line)}
html[data-tgl-design="04"][data-tgl-theme="light"] .kit-history .kit-history-record {background:color-mix(in srgb,var(--dd-teal),var(--dd-field) 55%)}
html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-next-step {background:var(--dd-surface);color:var(--dd-ink);border-color:var(--dd-line)}
html[data-tgl-design="04"][data-tgl-theme="light"] .kit-history-record>details:first-of-type>summary {color:var(--dd-ink)}
html[data-tgl-design="04"][data-tgl-theme="light"] main :is(a,button,input,select,textarea,summary):focus-visible {outline-color:var(--dd-focus)!important}
@media(max-width:820px) {
  html[data-tgl-design="04"][data-tgl-theme="light"] .hero-intro {color:var(--dd-ink)!important}
  html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-home-workspace :is(.event-path a,.progress-explanation strong) {color:var(--dd-ink)}
}
@media(prefers-reduced-motion:reduce) {html[data-tgl-design="04"] :is(a,button,input,select){transition:none!important;scroll-behavior:auto}}

/* DESIGN-DIRECTION-04B: light surface depth, compact status alignment and
   consistent expanded records. No theme persistence or data changes. */
@media(min-width:821px) {
  html[data-tgl-design="04"][data-tgl-theme="light"] main.tgl-account-workspace {
    --dd-surface:#bccbdd;--dd-deep:#e7eef5;--dd-teal:#b5d2cc;--dd-lavender:#cbc9df;
  }
  html[data-tgl-design="04"][data-tgl-theme="light"] .tgl-account-workspace:is(:has(>.account-mailing))>:is(.account-mailing,.account-support) {background:#d5dde6}
  html[data-tgl-design="04"] .tgl-account-workspace>.account-auth--compact {
    grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:12px 18px;
  }
  html[data-tgl-design="04"] .tgl-account-workspace>.account-auth--compact>h2 {grid-column:1;grid-row:1}
  html[data-tgl-design="04"] .tgl-account-workspace>.account-auth--compact>.account-actions {grid-column:2;grid-row:1;align-self:center;margin:0}
  html[data-tgl-design="04"] .tgl-account-workspace>.account-auth--compact>.account-status {grid-column:1/-1;grid-row:2;margin:0}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-secondary .strava-moment {
    padding:16px;background:var(--dd-deep);border-radius:12px;
  }
  html[data-tgl-design="04"] .tgl-account-workspace .strava-secondary .strava-moment>span {
    display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.4;color:var(--dd-muted);
  }
  html[data-tgl-design="04"] .tgl-account-workspace .strava-secondary .strava-moment>span svg {flex:none}
  html[data-tgl-design="04"] .tgl-account-workspace .strava-secondary .strava-moment>strong,
  html[data-tgl-design="04"] .tgl-account-workspace .strava-secondary .strava-moment:not(:has(>strong))>p {
    display:block;font-size:23px;font-weight:700;line-height:1.3;margin:4px 0;color:var(--dd-ink);overflow-wrap:anywhere;
  }
  html[data-tgl-design="04"] .tgl-account-workspace .strava-secondary .strava-moment:has(>strong)>p {
    font-size:14px;font-weight:400;line-height:1.4;margin:4px 0;color:var(--dd-muted);overflow-wrap:anywhere;
  }
}

/* UI-FINAL-02 B1: footer control gets its own quiet, aligned row. */
html[data-tgl-design="04"] body>footer .tgl-theme-toggle {
  display:flex;width:fit-content;margin:14px 0 0;
}
/* Native title links cover desktop cards; existing sibling links stay usable. */
@media(min-width:821px){
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item {
    position:relative;transition:border-color 140ms ease;
  }
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item h3 a::after {
    content:"";position:absolute;inset:0;border-radius:inherit;
  }
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item>a.tgl-accent-link {position:relative}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item:is(:hover,:focus-within) {border-color:var(--dd-pink)}
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item:has(:focus-visible) {outline:3px solid var(--dd-focus);outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){
  html[data-tgl-design="04"] .tgl-tools-workspace .tool-directory-item {transition:none}
}