/* =========================================================
   ĐẢO SỐ — DESIGN TOKENS v1
   Final consistency layer: spacing, radius, borders, shadows,
   control sizing and micro-typography.
   ========================================================= */

:root{
  /* Core palette */
  --ds-black:#03050d;
  --ds-navy:#08101d;
  --ds-navy-2:#0b1424;
  --ds-paper:#f7f9fc;
  --ds-paper-2:#eef2f7;
  --ds-ink:#121d32;
  --ds-cyan:#00f5ff;
  --ds-blue:#5572ff;
  --ds-violet:#8b5cf6;
  --ds-magenta:#ff3cac;
  --ds-lime:#c7ff3d;
  --ds-white:#f7faff;

  /* Accessible text hierarchy — WCAG AA on studio light/dark surfaces */
  --ds-text-muted-light:#4f5b72;
  --ds-text-subtle-light:#56637a;
  --ds-text-muted-dark:#c0cbdf;
  --ds-text-subtle-dark:#a6b4cd;
  --ds-accent-text-light:#405bd6;
  --ds-accent-text-dark:#7890ff;
  --ds-teal-text-light:#087365;
  --ds-magenta-text-light:#b51f78;
  --ds-signal-ink:#01030a;

  /* Spacing scale — 4px base */
  --ds-space-1:.25rem;
  --ds-space-2:.5rem;
  --ds-space-3:.75rem;
  --ds-space-4:1rem;
  --ds-space-5:1.5rem;
  --ds-space-6:2rem;
  --ds-space-7:3rem;
  --ds-space-8:4rem;
  --ds-space-9:6rem;
  --ds-space-10:8rem;

  /* Radius system */
  --ds-radius-control:10px;
  --ds-radius-card-sm:14px;
  --ds-radius-card:18px;
  --ds-radius-card-lg:24px;
  --ds-radius-stage:28px;
  --ds-radius-pill:999px;

  /* Borders */
  --ds-line-light:#dfe6f1;
  --ds-line-light-strong:#ccd6e4;
  --ds-line-dark:rgba(145,164,203,.14);
  --ds-line-dark-strong:rgba(145,164,203,.24);
  --ds-line-accent:color-mix(in srgb,var(--vh-accent,#5572ff) 30%,transparent);

  /* Shadows */
  --ds-shadow-soft:0 12px 34px rgba(30,44,78,.055);
  --ds-shadow-card:0 18px 48px rgba(30,44,78,.085);
  --ds-shadow-float:0 28px 72px rgba(15,26,55,.16);
  --ds-shadow-dark:0 24px 64px rgba(0,0,0,.24);
  --ds-shadow-shell:0 12px 36px rgba(0,0,0,.16);

  /* Controls */
  --ds-control-sm:40px;
  --ds-control-md:46px;
  --ds-control-lg:52px;
  --ds-focus:0 0 0 3px color-mix(in srgb,var(--vh-accent,#5572ff) 20%,transparent);

  /* Motion choreography */
  --ds-motion-fast:.16s;
  --ds-motion-base:.28s;
  --ds-motion-reveal:.62s;
  --ds-ease-out:cubic-bezier(.16,1,.3,1);

  /* Type details */
  --ds-label-size:.62rem;
  --ds-label-tracking:.11em;
  --ds-label-leading:1.35;

  /* Layout rhythm */
  --ds-section-y:clamp(5.75rem,9vw,8.5rem);
  --ds-section-y-compact:clamp(4.4rem,7vw,6.25rem);
  --ds-content-gap:clamp(2rem,4vw,4rem);

  /* Bridge legacy variables to the locked system */
  --radius:var(--ds-radius-card);
  --radius-sm:var(--ds-radius-card-sm);
  --shadow:var(--ds-shadow-card);
}

/* ---------------------------------------------------------
   SECTION RHYTHM
   Hero/signal/note/closing retain their own composition.
   --------------------------------------------------------- */
section[data-chapter="paper"],
section[data-chapter="editorial"],
section[data-chapter="visual"],
section[data-chapter="data"],
section[data-chapter="timeline"]{
  padding-block:var(--ds-section-y)!important;
}

/* Projects is an app-like gallery, not a long-form chapter.
   Its opening stage must sit directly under the desktop shell. */
body.projects-page main section.project-showcase[data-chapter="visual"]{
  min-height:calc(100svh - 78px);
  padding-block-start:clamp(1.1rem,2.4vh,1.7rem)!important;
  padding-block-end:clamp(.9rem,1.6vh,1.25rem)!important;
}

section[data-chapter="paper"],
section[data-chapter="data"]{
  --ds-local-line:var(--ds-line-light);
  --ds-local-shadow:var(--ds-shadow-soft);
}

section[data-chapter="editorial"],
section[data-chapter="visual"],
section[data-chapter="timeline"]{
  --ds-local-line:var(--ds-line-dark);
  --ds-local-shadow:var(--ds-shadow-dark);
}

/* ---------------------------------------------------------
   CARD / PANEL GEOMETRY
   Use chapter type to determine visual density.
   --------------------------------------------------------- */
section[data-chapter="paper"] :where(
  .card,.price-card,.form-card,
  [class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "]
){
  border-radius:var(--ds-radius-card)!important;
}

section[data-chapter="data"] :where(
  .card,.price-card,.form-card,
  [class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "]
){
  border-radius:var(--ds-radius-card-sm)!important;
}

section[data-chapter="editorial"] :where(
  .card,[class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "]
),
section[data-chapter="visual"] :where(
  .card,[class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "]
),
section[data-chapter="timeline"] :where(
  .card,[class$="-card"],[class*="-card "],
  [class$="-panel"],[class*="-panel "]
){
  border-radius:var(--ds-radius-card)!important;
}

/* Large standalone product/art stages get one larger radius only. */
.visual-asset-inline,
.guest-mode-card,
.audit-form-shell,
.project-explorer,
.selector-stage{
  border-radius:var(--ds-radius-card-lg)!important;
}

.visual-asset-inline{
  border-color:var(--ds-line-dark)!important;
  box-shadow:var(--ds-shadow-dark);
}

.visual-asset-hero img,
.visual-asset-inline img{
  border-radius:var(--ds-radius-card-lg)!important;
}

/* ---------------------------------------------------------
   STANDARD CONTROLS
   --------------------------------------------------------- */
.btn{
  min-height:var(--ds-control-md);
  padding:.72rem 1.05rem;
  border-radius:var(--ds-radius-pill);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible{
  outline:0;
  box-shadow:var(--ds-focus);
}

.field input,
.field select,
.field textarea{
  border-radius:var(--ds-radius-control)!important;
  border-color:var(--ds-line-light-strong);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}

.field input,
.field select{
  min-height:var(--ds-control-md);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:0!important;
  border-color:var(--vh-accent,#5572ff)!important;
  box-shadow:var(--ds-focus);
}

/* Pills are limited to true compact controls; price-chip is intentionally excluded. */
.tag,
.category-pill,
.guest-mode-tabs button,
.project-filter-tabs button{
  border-radius:var(--ds-radius-pill)!important;
}

.selector-tabs button{
  min-height:var(--ds-control-lg);
}

/* ---------------------------------------------------------
   MICRO TYPOGRAPHY
   --------------------------------------------------------- */
:where(
  .eyebrow,
  [class$="-kicker"],
  [class*="-kicker "]
){
  font-size:var(--ds-label-size);
  line-height:var(--ds-label-leading);
  letter-spacing:var(--ds-label-tracking);
  font-weight:900;
  text-transform:uppercase;
}

:where(
  .eyebrow,
  [class$="-kicker"],
  [class*="-kicker "]
)::selection{
  background:color-mix(in srgb,var(--vh-accent,#5572ff) 24%,transparent);
}

/* ---------------------------------------------------------
   BASE COMPONENT CONSISTENCY
   --------------------------------------------------------- */
.card{
  padding:var(--ds-space-5);
  border-color:var(--ds-line-light);
  box-shadow:var(--ds-shadow-soft);
}

.form-card{
  border-radius:var(--ds-radius-card)!important;
  border-color:var(--ds-line-light);
  box-shadow:var(--ds-shadow-card);
}

details{
  padding:var(--ds-space-5) 0;
}

summary{
  min-height:var(--ds-control-sm);
  display:flex;
  align-items:center;
}

.notice,
.form-status{
  border-radius:var(--ds-radius-control);
}

.empty{
  border-radius:var(--ds-radius-card);
}

/* Shared light/dark card surfaces get stable line/shadow language. */
section[data-chapter="paper"] :where(.card,.form-card,.price-card),
section[data-chapter="data"] :where(.card,.form-card,.price-card){
  border-color:var(--ds-line-light);
}

section[data-chapter="editorial"] :where(.card,[class$="-card"]),
section[data-chapter="visual"] :where(.card,[class$="-card"]),
section[data-chapter="timeline"] :where(.card,[class$="-card"]){
  border-color:var(--ds-line-dark);
}

/* ---------------------------------------------------------
   SHARED SHELL + MICRO DETAILS
   --------------------------------------------------------- */
.site-header .studio-brand .studio-brand-mark{
  border-radius:var(--ds-radius-control);
}

.shell-audit-cta,
.studio-nav-toggle{
  border-radius:var(--ds-radius-control);
}

.studio-nav-links{
  border-radius:var(--ds-radius-card);
}

.footer-main-cta{
  box-shadow:none;
}

.footer-title{
  letter-spacing:.02em;
}

/* ---------------------------------------------------------
   RESPONSIVE TOKEN TUNING
   --------------------------------------------------------- */
@media(max-width:980px){
  :root{
    --ds-section-y:clamp(5rem,10vw,7rem);
  }
}

@media(max-width:760px){
  :root{
    --ds-section-y:clamp(4.1rem,14vw,5.4rem);
    --ds-radius-card-sm:13px;
    --ds-radius-card:17px;
    --ds-radius-card-lg:20px;
    --ds-radius-stage:22px;
    --ds-control-md:48px;
  }

  .visual-asset-hero img,
  .visual-asset-inline img{
    border-radius:var(--ds-radius-card)!important;
  }

  .card{
    padding:var(--ds-space-4);
  }

  details{
    padding:1.1rem 0;
  }
}

@media(max-width:430px){
  :root{
    --ds-radius-card:16px;
    --ds-radius-card-lg:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .field input,
  .field select,
  .field textarea{
    transition:none!important;
  }
}


/* ---------------------------------------------------------
   ICONOGRAPHY + TYPOGRAPHIC QA
   --------------------------------------------------------- */
:where(h1,h2,h3){text-wrap:balance}
:where(p,.lead){text-wrap:pretty}

.ds-icon{
  width:1.2em;
  height:1.2em;
  display:block;
  flex:0 0 auto;
  overflow:visible;
  color:inherit;
}
.impact-icon,
.deliverable-icon{
  display:inline-grid;
  place-items:center;
  width:2.45rem;
  height:2.45rem;
}
.impact-icon .ds-icon,
.deliverable-icon .ds-icon{
  width:1.45rem;
  height:1.45rem;
}
:where(.impact-cards,.price-grid-cinematic,.deliverable-grid,.solution-map-grid)>*{
  height:100%;
}

@media(min-width:1360px){
  :where(.impact-cards,.price-grid-cinematic,.deliverable-grid,.solution-map-grid){align-items:stretch}
  :where(.section-heading,.solution-section-heading,.impact-intro) h2{max-width:16ch}
}
@media(min-width:981px) and (max-width:1100px){
  .container{width:min(var(--max),calc(100% - 48px))}
  .studio-nav-links{gap:.18rem}
  .site-header .studio-nav-links .shell-nav-link{padding:.58rem .62rem}
  .studio-footer-statement{gap:clamp(2rem,4vw,3.5rem)}
}
@media(min-width:761px) and (max-width:820px){
  .container{width:min(var(--max),calc(100% - 40px))}
  :where(.solution-map-grid,.impact-cards,.price-grid-cinematic,.deliverable-grid){gap:1rem}
  .studio-footer-statement{padding-block:4.6rem 3.6rem}
  .footer-statement-copy h2{max-width:12ch}
}

/* ---------------------------------------------------------
   ACCESSIBLE SURFACE ISOLATION
   Protect light cards nested inside dark chapter sections.
   --------------------------------------------------------- */
:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .rest-menu-panel,
  .tour-language-grid > article,
  .language-card,
  .live-menu-screen,
  .qr-phone-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .gbp-card,
  .direct-flow article
){
  color:var(--ds-ink);
}
:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .rest-menu-panel,
  .tour-language-grid > article,
  .language-card,
  .live-menu-screen,
  .qr-phone-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .gbp-card,
  .direct-flow article
) p{
  color:var(--ds-text-muted-light);
}
:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .rest-menu-panel,
  .tour-language-grid > article,
  .language-card,
  .live-menu-screen,
  .qr-phone-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .gbp-card,
  .direct-flow article
) small{
  color:var(--ds-text-subtle-light);
}


/* ---------------------------------------------------------
   READABILITY HARDENING v2
   Small text gets extra headroom beyond bare AA compliance.
   --------------------------------------------------------- */
:root{
  --ds-text-micro-light:#455269;
  --ds-text-micro-dark:#b9c5dc;
  --ds-hero-meta:#b8c4da;
}

/* Hero metadata / proof chips */
:where(
  .about-page,.audit-page,.pricing-page,.projects-page,.privacy-page,.terms-page,
  .restaurant-solution-page,.homestay-solution-page,.tourism-solution-page,
  .qr-solution-page,.maps-solution-page,.solutions-page
) .breadcrumb{
  color:var(--ds-hero-meta);
}
:where(
  .about-proof-row,.audit-proof-row,.pricing-proof-row,.projects-proof-row,
  .privacy-proof-row,.terms-proof-row,.rest-proof-row,.stay-proof-row,
  .tour-proof-row,.maps-hero-proof,.qr-capability-row
) > span,
.solution-chips span,
.hero-proof span{
  color:var(--ds-hero-meta);
}

/* Dark visual / orbit microcopy */
:where(
  .brand-node,.diagnostic-node,.vault-node,.privacy-node,.terms-node,
  .cap-node,.profile-layer
) small,
:where(
  .about-float-card,.audit-float-card,.pricing-float-card,.projects-float-card,
  .privacy-float-card,.terms-float-card,.rest-float-card,.stay-float-card,
  .tour-float-card,.qr-float-card,.maps-float-card
) small,
.name-block p,
.system-loop-core small,
.cap-core small,
.audit-check-grid small,
.rest-audit-grid small,
.stay-audit-grid small,
.visual-asset-inline figcaption{
  color:var(--ds-text-micro-dark);
}

/* Dashboards / analytical mockups */
:where(
  .audit-form-head small,.audit-form-head > span,
  .rest-dash-head small,.rest-dash-head > span,
  .stay-dash-head small,.stay-dash-head > span,
  .tour-dash-head small,.tour-dash-head > span,
  .qr-dashboard-head small,.qr-dashboard-head > span,
  .dashboard-top small,.dashboard-legend,
  .metric-chart-head > span,.dashboard-disclaimer
){
  color:var(--ds-text-micro-dark);
}
:where(
  .rest-dash-grid,.stay-dash-grid,.tour-dash-grid,.qr-dashboard-grid,.dashboard-grid
) small,
:where(
  .rest-dash-grid,.stay-dash-grid,.tour-dash-grid,.qr-dashboard-grid,.dashboard-grid
) article > span,
.metric-card > span{
  color:var(--ds-text-micro-dark);
}

/* Forms: placeholders and helper text must remain legible */
.audit-form-card input::placeholder,
.audit-form-card textarea::placeholder,
.audit-form-card .privacy-note{
  color:var(--ds-text-micro-dark);
  opacity:1;
}

/* Light-surface microcopy */
:where(
  .project-card-copy,.privacy-contact-card,.terms-contact-card,
  .pricing-package-card:not(.featured),.language-card,.live-menu-screen
) small,
.project-tags span,
.privacy-data-flow small,
.terms-lifecycle-flow small{
  color:var(--ds-text-micro-light);
}

/* Dark lifecycle/data cards */
.privacy-data-flow p,
.terms-lifecycle-flow p,
.privacy-data-flow small,
.terms-lifecycle-flow small{
  color:var(--ds-text-micro-dark);
}

/* Remaining small dark-section labels that were borderline at 4.3–4.7:1 */
.guest-card-footer span,
.dish-info > small,
.room-spec-grid span,
.room-detail-footer small,
.distance-node small,
.trust-review small,
.trust-policy small,
.pickup-zone small,
.menu-arch-categories small,
.menu-arch-meta span,
.stack-level small{
  color:var(--ds-text-micro-dark);
}

/* Footer secondary content should be comfortably readable, not merely decorative. */
.studio-footer :where(.muted,.footer-links,.copyright,.footer-brand-note,.footer-statement-action p){
  color:var(--ds-text-subtle-dark);
}


/* ---------------------------------------------------------
   READABILITY HARDENING v3
   Variable backgrounds need explicit foreground treatment.
   --------------------------------------------------------- */

/* Text sitting directly on multicolor / image-like gradients */
.storefront-feature-copy > span,
.storefront-feature-copy p,
.storefront-phone-hero small,
.rest-food-hero small,
.stay-room-hero > small,
.stay-price small,
.tour-feature-card > small,
.feature-copy p,
.mini-hero-dish small{
  color:#ffffff;
  text-shadow:0 1px 8px rgba(0,0,0,.72);
}

/* Tiny labels on translucent dark chips / rails */
.storefront-sidebar-foot span,
.storefront-floating-chip,
.case-meta-row > span,
.case-disclaimer{
  color:var(--ds-text-micro-dark);
}

/* Green status text inside light phone mockups */
.rest-app-head small{
  color:#2f6f50;
}

/* Cyan→violet→magenta gradients require dark ink for small text. */
.package-badge,
.menu-language-tabs button.active,
.menu-category-tabs button.active,
.room-tabs button.active,
.room-detail-footer button{
  color:var(--ds-signal-ink);
  text-shadow:none;
}

/* QR demo controls / insights */
.menu-control-group small,
.menu-demo-insights p{
  color:var(--ds-text-micro-dark);
}

/* Price visualization microcopy */
.price-chip small,
.price-chip span{
  color:var(--ds-text-micro-dark);
}
.pricing-package-card:not(.featured) .package-price small,
.pricing-package-card:not(.featured) .package-price span,
.pricing-package-card:not(.featured) .package-fit p{
  color:var(--ds-text-micro-light);
}
.pricing-package-card.featured .package-price small,
.pricing-package-card.featured .package-price span,
.pricing-package-card.featured .package-fit p{
  color:var(--ds-text-micro-dark);
}


/* ---------------------------------------------------------
   READABILITY HARDENING v4 — SCREENSHOT-DRIVEN SURFACE THEMING
   Fixes inherited foreground colors after chapter backgrounds
   are changed by chapter-rhythm.css.
   --------------------------------------------------------- */
:root{
  --ds-light-cyan:#007987;
  --ds-light-blue:#405bd6;
  --ds-light-violet:#5b3fc9;
  --ds-light-magenta:#b51f78;
  --ds-light-lime:#5a7000;
}

/* Accent colors are surface-aware. Bright neon stays on dark chapters;
   light chapters receive darker brand-equivalent tones. */
section[data-chapter="paper"],
section[data-chapter="data"]{
  --plasma:var(--ds-light-cyan);
  --mint:var(--ds-light-cyan);
  --electric:var(--ds-light-blue);
  --violet:var(--ds-light-violet);
  --magenta:var(--ds-light-magenta);
  --acid:var(--ds-light-lime);
  --vh-accent:var(--ds-light-blue);
}

section[data-chapter="paper"] :where(.eyebrow,[class*="kicker"]),
section[data-chapter="data"] :where(.eyebrow,[class*="kicker"]){
  color:var(--ds-teal-text-light)!important;
}

/* Large emphasized headline spans on bright sections must not use neon cyan. */
section[data-chapter="paper"] :where(h1,h2) > span,
section[data-chapter="data"] :where(h1,h2) > span{
  color:transparent!important;
  background:linear-gradient(
    90deg,
    var(--ds-light-cyan) 0%,
    var(--ds-light-blue) 38%,
    var(--ds-light-violet) 68%,
    var(--ds-light-magenta) 100%
  )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:none!important;
}

/* Main copy on bright chapters gets comfortable contrast, not bare-minimum AA. */
section[data-chapter="paper"] :where(.lead,p,li),
section[data-chapter="data"] :where(.lead,p,li){
  color:var(--ds-text-muted-light);
}

/* Light surfaces nested inside dark/editorial/visual/timeline chapters.
   Force descendants too, because chapter-rhythm explicitly colors h3/p. */
:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .project-filter-shell,
  .audit-output-stack article,
  .system-panel,
  .pricing-package-card:not(.featured),
  .cost-card,
  .diagnostic-grid article,
  .privacy-summary-grid article,
  .terms-summary-grid article,
  .rest-menu-panel,
  .rest-menu-link,
  .rest-ops-grid article,
  .rest-deliverable-grid article,
  .stay-deliverable-grid article,
  .tour-service-card,
  .tour-language-grid article,
  .tour-audit-grid > div,
  .qr-problem-card,
  .language-card,
  .language-sample,
  .qr-audit-grid > div,
  .qr-fit-grid article,
  .maps-fit-grid article,
  .photo-story,
  .gbp-card,
  .direct-flow article,
  .live-menu-screen,
  .restaurant-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .qr-phone-screen,
  .journey-content,
  .rest-step-panel,
  .stay-step-panel,
  .tour-step-panel,
  .form-card-modern,
  .metric-badge,
  .audit-input-guide article,
  .privacy-contact-card > div,
  .terms-contact-card > div
){
  color:var(--ds-ink)!important;
}

:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .project-filter-shell,
  .audit-output-stack article,
  .system-panel,
  .pricing-package-card:not(.featured),
  .cost-card,
  .diagnostic-grid article,
  .privacy-summary-grid article,
  .terms-summary-grid article,
  .rest-menu-panel,
  .rest-menu-link,
  .rest-ops-grid article,
  .rest-deliverable-grid article,
  .stay-deliverable-grid article,
  .tour-service-card,
  .tour-language-grid article,
  .tour-audit-grid > div,
  .qr-problem-card,
  .language-card,
  .language-sample,
  .qr-audit-grid > div,
  .qr-fit-grid article,
  .maps-fit-grid article,
  .photo-story,
  .gbp-card,
  .direct-flow article,
  .live-menu-screen,
  .restaurant-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .qr-phone-screen,
  .journey-content,
  .rest-step-panel,
  .stay-step-panel,
  .tour-step-panel,
  .form-card-modern,
  .metric-badge,
  .audit-input-guide article,
  .privacy-contact-card > div,
  .terms-contact-card > div
) :where(h1,h2,h3,h4,b,strong,summary,label){
  color:var(--ds-ink)!important;
  -webkit-text-fill-color:currentColor;
}

:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .project-filter-shell,
  .audit-output-stack article,
  .system-panel,
  .pricing-package-card:not(.featured),
  .cost-card,
  .diagnostic-grid article,
  .privacy-summary-grid article,
  .terms-summary-grid article,
  .rest-menu-panel,
  .rest-menu-link,
  .rest-ops-grid article,
  .rest-deliverable-grid article,
  .stay-deliverable-grid article,
  .tour-service-card,
  .tour-language-grid article,
  .tour-audit-grid > div,
  .qr-problem-card,
  .language-card,
  .language-sample,
  .qr-audit-grid > div,
  .qr-fit-grid article,
  .maps-fit-grid article,
  .photo-story,
  .gbp-card,
  .direct-flow article,
  .live-menu-screen,
  .restaurant-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .qr-phone-screen,
  .journey-content,
  .rest-step-panel,
  .stay-step-panel,
  .tour-step-panel,
  .form-card-modern,
  .metric-badge,
  .audit-input-guide article,
  .privacy-contact-card > div,
  .terms-contact-card > div
) :where(p,small,li){
  color:var(--ds-text-muted-light)!important;
}

/* Dark cards/panels nested inside bright chapters. */
:where(
  .impact-card,
  .principles-grid article,
  .pricing-package-card.featured,
  .pricing-selector,
  .selector-recommendation,
  .selector-signals article,
  .about-not-list article,
  .audit-privacy-card,
  .audit-form-shell,
  .audit-form-card,
  .performance-dashboard,
  .restaurant-dashboard,
  .stay-dashboard,
  .tour-dashboard,
  .qr-dashboard,
  .stay-ops-grid article,
  .privacy-data-flow article,
  .terms-lifecycle-flow article
){
  color:var(--ds-white)!important;
}

:where(
  .impact-card,
  .principles-grid article,
  .pricing-package-card.featured,
  .pricing-selector,
  .selector-recommendation,
  .selector-signals article,
  .about-not-list article,
  .audit-privacy-card,
  .audit-form-shell,
  .audit-form-card,
  .performance-dashboard,
  .restaurant-dashboard,
  .stay-dashboard,
  .tour-dashboard,
  .qr-dashboard,
  .stay-ops-grid article,
  .privacy-data-flow article,
  .terms-lifecycle-flow article
) :where(h1,h2,h3,h4,b,strong,summary,label){
  color:var(--ds-white)!important;
  -webkit-text-fill-color:currentColor;
}

:where(
  .impact-card,
  .principles-grid article,
  .pricing-package-card.featured,
  .pricing-selector,
  .selector-recommendation,
  .selector-signals article,
  .about-not-list article,
  .audit-privacy-card,
  .audit-form-shell,
  .audit-form-card,
  .performance-dashboard,
  .restaurant-dashboard,
  .stay-dashboard,
  .tour-dashboard,
  .qr-dashboard,
  .stay-ops-grid article,
  .privacy-data-flow article,
  .terms-lifecycle-flow article
) :where(p,small,li){
  color:var(--ds-text-muted-dark)!important;
}

/* Explicitly repair two transparent matrix systems whose parent chapter is now light. */
.problem-matrix,
.pricing-matrix-wrap{
  background:#fff!important;
  border-color:var(--ds-line-light)!important;
  color:var(--ds-ink)!important;
  box-shadow:var(--ds-shadow-soft);
}

.problem-matrix .matrix-head,
.pricing-matrix-wrap .pm-head{
  background:linear-gradient(
    90deg,
    rgba(0,121,135,.10),
    rgba(64,91,214,.08),
    rgba(181,31,120,.07)
  )!important;
}

.problem-matrix .matrix-head span{
  color:var(--ds-teal-text-light)!important;
  border-right-color:var(--ds-line-light)!important;
}

.problem-matrix .matrix-row span{
  color:var(--ds-text-muted-light)!important;
  border-top-color:var(--ds-line-light)!important;
  border-right-color:var(--ds-line-light)!important;
}
.problem-matrix .matrix-row span:first-child{
  color:var(--ds-ink)!important;
}
.problem-matrix .matrix-row span:nth-child(3){
  color:var(--ds-accent-text-light)!important;
}
.problem-matrix .matrix-row span:last-child{
  color:#4f6800!important;
}

.pricing-matrix-wrap .pm-row{
  border-bottom-color:var(--ds-line-light)!important;
}
.pricing-matrix-wrap .pm-row > div{
  color:var(--ds-text-muted-light)!important;
  border-right-color:var(--ds-line-light)!important;
}
.pricing-matrix-wrap .pm-row > div:first-child,
.pricing-matrix-wrap .pm-head > div{
  color:var(--ds-ink)!important;
}

/* Keep meaningful links/controls recognizably interactive on bright surfaces. */
section[data-chapter="paper"] :where(a:not(.btn),button:not(.btn)),
section[data-chapter="data"] :where(a:not(.btn),button:not(.btn)){
  --ds-local-link:var(--ds-accent-text-light);
}

/* Avoid ultra-faint functional microcopy seen in the screenshot pass. */
:where(
  .project-card-copy small,
  .project-card-topline span,
  .project-card-topline b,
  .diagnostic-grid small,
  .package-price small,
  .package-fit small,
  .matrix-head span,
  .pm-row > div,
  .audit-output-stack p,
  .principles-grid p,
  .industry-copy p
){
  opacity:1!important;
}


/* ---------------------------------------------------------
   READABILITY HARDENING v5 — REMAINING SCREENSHOT COMPONENTS
   --------------------------------------------------------- */

/* Project explorer is intentionally dark even though its chapter is bright. */
.project-explorer-copy,
.project-explorer-copy .case-columns article,
.case-scene-label{
  color:var(--ds-white)!important;
}
.project-explorer-copy :where(h1,h2,h3,h4,b,strong),
.case-scene-label :where(b,strong){
  color:var(--ds-white)!important;
  -webkit-text-fill-color:currentColor;
}
.project-explorer-copy :where(p,small,li),
.project-explorer-copy .case-summary,
.project-explorer-copy .case-disclaimer,
.case-scene-label small{
  color:var(--ds-text-muted-dark)!important;
}

/* The pricing selector should remain a coherent dark component on a light DATA chapter. */
.pricing-selector{
  background:#071126!important;
  color:var(--ds-white)!important;
}
.pricing-selector :where(h1,h2,h3,h4,b,strong,label){
  color:var(--ds-white)!important;
}
.pricing-selector :where(p,small,li){
  color:var(--ds-text-muted-dark)!important;
}

/* Functional controls that use a bright multicolor fill need dark ink. */
.project-filter-tabs button.active,
.itinerary-tabs button.active{
  color:var(--ds-signal-ink)!important;
  text-shadow:none!important;
}

/* White project cards in the dark VISUAL chapter need explicit card-copy ink. */
.project-vault-card .project-card-copy h3,
.solution-layer h3,
.industry-panel h3,
.audit-output-stack article b{
  color:var(--ds-ink)!important;
  -webkit-text-fill-color:currentColor;
}


/* ---------------------------------------------------------
   READABILITY HARDENING v6 — LOCAL PALETTE PER NESTED SURFACE
   --------------------------------------------------------- */

/* Light nested surfaces always use darker accessible brand accents. */
:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .project-filter-shell,
  .audit-output-stack article,
  .system-panel,
  .pricing-package-card:not(.featured),
  .cost-card,
  .diagnostic-grid article,
  .privacy-summary-grid article,
  .terms-summary-grid article,
  .rest-menu-panel,
  .rest-menu-link,
  .rest-ops-grid article,
  .rest-deliverable-grid article,
  .stay-deliverable-grid article,
  .tour-service-card,
  .tour-language-grid article,
  .tour-audit-grid > div,
  .qr-problem-card,
  .language-card,
  .language-sample,
  .qr-audit-grid > div,
  .qr-fit-grid article,
  .maps-fit-grid article,
  .photo-story,
  .gbp-card,
  .direct-flow article,
  .live-menu-screen,
  .restaurant-screen,
  .stay-phone-screen,
  .tour-phone-screen,
  .qr-phone-screen,
  .journey-content,
  .rest-step-panel,
  .stay-step-panel,
  .tour-step-panel,
  .form-card-modern,
  .metric-badge,
  .audit-input-guide article,
  .privacy-contact-card > div,
  .terms-contact-card > div
){
  --plasma:var(--ds-light-cyan);
  --mint:var(--ds-light-cyan);
  --electric:var(--ds-light-blue);
  --violet:var(--ds-light-violet);
  --magenta:var(--ds-light-magenta);
  --acid:var(--ds-light-lime);
  --vh-accent:var(--ds-light-blue);
}

/* Dark nested surfaces restore the high-luminance neon palette. */
:where(
  .impact-card,
  .principles-grid article,
  .pricing-package-card.featured,
  .pricing-selector,
  .selector-recommendation,
  .selector-signals article,
  .about-not-list article,
  .audit-privacy-card,
  .audit-form-shell,
  .audit-form-card,
  .performance-dashboard,
  .restaurant-dashboard,
  .stay-dashboard,
  .tour-dashboard,
  .qr-dashboard,
  .stay-ops-grid article,
  .privacy-data-flow article,
  .terms-lifecycle-flow article,
  .project-explorer-copy,
  .project-explorer-copy .case-columns article,
  .case-scene-label
){
  --plasma:#00f5ff;
  --mint:#00f5ff;
  --electric:#5572ff;
  --violet:#8b5cf6;
  --magenta:#ff3cac;
  --acid:#c7ff3d;
  --vh-accent:#5572ff;
}

/* Small text placed directly on the brand spectrum uses dark ink across the
   cyan→violet range; this keeps contrast stable at every gradient stop. */
:where(
  .system-loop-core,
  .cap-core,
  .region-origin,
  .anatomy-core,
  .menu-arch-root,
  .transfer-node
){
  color:var(--ds-signal-ink)!important;
}
:where(
  .system-loop-core,
  .cap-core,
  .region-origin,
  .anatomy-core,
  .menu-arch-root,
  .transfer-node
) :where(small,span,b,strong){
  color:var(--ds-signal-ink)!important;
  -webkit-text-fill-color:currentColor;
  text-shadow:none!important;
}


/* ---------------------------------------------------------
   READABILITY HARDENING v7 — TABS / STACKS / LIGHT PANELS
   --------------------------------------------------------- */

/* Dark stack cards inside the light DATA chapter. */
.stack-level{
  color:var(--ds-white)!important;
  --plasma:#00f5ff;
  --mint:#00f5ff;
  --electric:#5572ff;
  --violet:#8b5cf6;
  --magenta:#ff3cac;
  --acid:#c7ff3d;
}
.stack-level :where(h1,h2,h3,h4,b,strong){
  color:var(--ds-white)!important;
  -webkit-text-fill-color:currentColor;
}
.stack-level :where(p,small,li){
  color:var(--ds-text-muted-dark)!important;
}

/* Journey/system tab bars are light surfaces even when their chapter is dark. */
:where(
  .system-tabs,
  .journey-nav,
  .rest-journey-tabs,
  .stay-journey-tabs,
  .tour-journey-tabs
){
  --plasma:var(--ds-light-cyan);
  --mint:var(--ds-light-cyan);
  --electric:var(--ds-light-blue);
  --violet:var(--ds-light-violet);
  --magenta:var(--ds-light-magenta);
  --acid:var(--ds-light-lime);
  --vh-accent:var(--ds-light-blue);
  color:var(--ds-ink)!important;
}

.system-tabs button,
.journey-tab,
.rest-journey-tabs button,
.stay-journey-tabs button,
.tour-journey-tabs button{
  color:var(--ds-text-muted-light)!important;
}

.system-tabs span,
.journey-tab span,
.rest-journey-tabs span,
.stay-journey-tabs span,
.tour-journey-tabs span,
.system-kicker,
.journey-kicker,
.rest-step-kicker,
.stay-step-kicker,
.tour-step-kicker{
  color:var(--ds-accent-text-light)!important;
}

.system-tabs small,
.journey-tab small,
.rest-journey-tabs small,
.stay-journey-tabs small,
.tour-journey-tabs small{
  color:var(--ds-text-subtle-light)!important;
}

/* Stronger copy inside white journey/system content panels. */
:where(
  .system-panel,
  .journey-content,
  .rest-step-panel,
  .stay-step-panel,
  .tour-step-panel
) :where(p,ul,li){
  color:var(--ds-text-muted-light)!important;
}


/* ---------------------------------------------------------
   READABILITY HARDENING v8 — HOME + GRADIENT CONTROL CLEANUP
   --------------------------------------------------------- */

/* Featured home pricing card is a dark island inside a bright PAPER chapter. */
.price-grid-cinematic .price-card.featured{
  color:var(--ds-white)!important;
  --plasma:#00f5ff;
  --mint:#00f5ff;
  --electric:#5572ff;
  --violet:#8b5cf6;
  --magenta:#ff3cac;
  --acid:#c7ff3d;
  --vh-accent:#5572ff;
}
.price-grid-cinematic .price-card.featured :where(h2,h3,h4,b,strong){
  color:var(--ds-white)!important;
  -webkit-text-fill-color:currentColor;
}
.price-grid-cinematic .price-card.featured :where(p,small,li){
  color:var(--ds-text-muted-dark)!important;
}

/* Audit chips are light controls after the DATA chapter switches the section to paper. */
.audit-points span{
  color:var(--ds-text-micro-light)!important;
  border-color:var(--ds-line-light-strong)!important;
  background:#ffffff!important;
  opacity:1!important;
}

/* Remaining active gradient pills use dark ink across the bright cyan stop. */
.guest-mode-tabs button.active{
  color:var(--ds-signal-ink)!important;
  text-shadow:none!important;
}

/* Explicitly protect common dark mini-panels embedded in light chapters. */
:where(
  .price-grid-cinematic .price-card.featured,
  .project-explorer-copy,
  .pricing-selector,
  .performance-dashboard,
  .restaurant-dashboard,
  .stay-dashboard,
  .tour-dashboard,
  .qr-dashboard
) :where(.eyebrow,[class*="kicker"],[class*="label"],[class*="status"]){
  color:var(--ds-accent-text-dark)!important;
}


/* ---------------------------------------------------------
   READABILITY HARDENING v9 — RANDOM-SPOT AUDIT FOLLOW-UP
   Direct fixes for homepage audit copy + dark cards living in
   PAPER/DATA chapters, plus same-structure components site-wide.
   --------------------------------------------------------- */

/* Homepage audit: DATA chapter makes the real background light.
   Never allow the lead to inherit the old white cinematic color. */
.audit-cinematic[data-chapter="data"] .audit-copy > .lead{
  color:var(--ds-text-muted-light)!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
}
.audit-cinematic[data-chapter="data"] .audit-copy h2{
  color:var(--ds-ink)!important;
  -webkit-text-fill-color:currentColor!important;
}
.form-card-modern .privacy-note{
  color:var(--ds-text-subtle-light)!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
}
.form-card-modern input::placeholder,
.form-card-modern textarea::placeholder{
  color:#657087!important;
  opacity:1!important;
}

/* These components keep a genuinely dark card surface even when their
   parent chapter is PAPER/DATA. Lock a local dark-surface palette so
   headings, body copy and accents cannot inherit light-chapter colors. */
:where(
  .name-block,
  .conversion-card,
  .rest-audit-grid > div,
  .stay-audit-grid > div,
  .audit-check-grid > div,
  .trust-card,
  .transparency-stack article,
  .guest-mode-card,
  .room-detail-card,
  .stay-distance-card
){
  color:var(--ds-white)!important;
  --plasma:#00f5ff;
  --mint:#00f5ff;
  --electric:#7890ff;
  --violet:#a78bfa;
  --magenta:#ff70bd;
  --acid:#d7ff73;
  --vh-accent:#00f5ff;
}

:where(
  .name-block,
  .conversion-card,
  .rest-audit-grid > div,
  .stay-audit-grid > div,
  .audit-check-grid > div,
  .trust-card,
  .transparency-stack article,
  .guest-mode-card,
  .room-detail-card,
  .stay-distance-card
) :where(h2,h3,h4,b,strong,label){
  color:var(--ds-white)!important;
  -webkit-text-fill-color:currentColor!important;
}

:where(
  .name-block,
  .conversion-card,
  .rest-audit-grid > div,
  .stay-audit-grid > div,
  .audit-check-grid > div,
  .trust-card,
  .transparency-stack article,
  .guest-mode-card,
  .room-detail-card,
  .stay-distance-card
) :where(p,small,li){
  color:var(--ds-text-muted-dark)!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
}

/* Direct accent labels inside the dark islands. */
.name-block > small,
.conversion-card > span,
.rest-audit-grid > div > span,
.stay-audit-grid > div > span,
.audit-check-grid > div > span,
.trust-card > span,
.transparency-stack > article > span,
.guest-card-top > span,
.room-detail-head > span{
  color:#00f5ff!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
}

/* Operators between About name cards sit on a bright PAPER surface. */
.about-name-section .name-plus,
.about-name-section .name-equals{
  color:var(--ds-accent-text-light)!important;
  opacity:1!important;
}

/* A few tiny dark-card utility colors were visually borderline. */
.conversion-card i,
.room-detail-footer strong,
.guest-card-footer b{
  color:var(--ds-accent-text-dark)!important;
}


/* ---------------------------------------------------------
   LIGHT CHAPTER DEPTH — EDITORIAL SURFACES
   Keep bright sections airy, but remove the flat document feel.
   --------------------------------------------------------- */
:where(
  .solution-layer,
  .industry-panel,
  .project-vault-card,
  .project-filter-shell,
  .audit-output-stack article,
  .system-panel,
  .pricing-package-card:not(.featured),
  .cost-card,
  .diagnostic-grid article,
  .privacy-summary-grid article,
  .terms-summary-grid article,
  .rest-menu-panel,
  .rest-menu-link,
  .rest-ops-grid article,
  .rest-deliverable-grid article,
  .stay-deliverable-grid article,
  .tour-service-card,
  .tour-language-grid article,
  .tour-audit-grid > div,
  .qr-problem-card,
  .language-card,
  .language-sample,
  .qr-audit-grid > div,
  .qr-fit-grid article,
  .maps-fit-grid article,
  .photo-story,
  .gbp-card,
  .direct-flow article,
  .live-menu-screen,
  .journey-content,
  .rest-step-panel,
  .stay-step-panel,
  .tour-step-panel,
  .form-card-modern,
  .metric-badge,
  .audit-input-guide article,
  .privacy-contact-card > div,
  .terms-contact-card > div,
  .problem-matrix,
  .pricing-matrix-wrap
){
  border-color:rgba(183,195,216,.62)!important;
  box-shadow:
    0 1px 2px rgba(29,43,76,.035),
    0 16px 42px rgba(29,43,76,.075),
    0 36px 90px rgba(52,68,112,.045),
    inset 0 1px rgba(255,255,255,.9)!important;
}

/* PAPER cards feel slightly softer; DATA cards feel more engineered. */
section[data-chapter="paper"] :where(
  .solution-layer,.industry-panel,.project-vault-card,.audit-output-stack article,
  .pricing-package-card:not(.featured),.cost-card,.privacy-summary-grid article,
  .terms-summary-grid article,.rest-menu-panel,.rest-deliverable-grid article,
  .stay-deliverable-grid article,.tour-service-card,.language-card,.qr-problem-card,
  .qr-fit-grid article,.maps-fit-grid article,.photo-story,.direct-flow article,
  .form-card-modern,.audit-input-guide article
){
  box-shadow:
    0 2px 4px rgba(29,43,76,.03),
    0 22px 58px rgba(29,43,76,.085),
    inset 0 1px rgba(255,255,255,.95)!important;
}

section[data-chapter="data"] :where(
  .card,.form-card,.price-card,
  .problem-matrix,.pricing-matrix-wrap,.metric-badge,
  .diagnostic-grid article,.audit-output-stack article,
  .privacy-summary-grid article,.terms-summary-grid article,
  .qr-audit-grid > div,.tour-audit-grid > div
){
  border-color:rgba(165,180,205,.7)!important;
  box-shadow:
    0 1px 2px rgba(29,43,76,.04),
    0 12px 34px rgba(29,43,76,.07),
    inset 0 1px rgba(255,255,255,.92)!important;
}

/* Give bright chapter headings an editorial anchor without adding clutter. */
section[data-chapter="paper"] :where(.section-heading,[class*="-section-heading"]),
section[data-chapter="data"] :where(.section-heading,[class*="-section-heading"]){
  position:relative;
  padding-left:clamp(.9rem,1.4vw,1.25rem);
  border-left:2px solid color-mix(in srgb,var(--vh-accent,#5572ff) 34%,#dfe6f1);
}

@media(max-width:760px){
  section[data-chapter="paper"] :where(.section-heading,[class*="-section-heading"]),
  section[data-chapter="data"] :where(.section-heading,[class*="-section-heading"]){
    padding-left:.8rem;
  }

  :where(
    .solution-layer,.industry-panel,.project-vault-card,.audit-output-stack article,
    .pricing-package-card:not(.featured),.cost-card,.diagnostic-grid article,
    .privacy-summary-grid article,.terms-summary-grid article,.rest-menu-panel,
    .rest-deliverable-grid article,.stay-deliverable-grid article,.tour-service-card,
    .language-card,.qr-problem-card,.qr-fit-grid article,.maps-fit-grid article,
    .form-card-modern,.problem-matrix,.pricing-matrix-wrap
  ){
    box-shadow:
      0 1px 2px rgba(29,43,76,.03),
      0 12px 28px rgba(29,43,76,.06),
      inset 0 1px rgba(255,255,255,.9)!important;
  }
}

/* =========================================================
   READABILITY GOVERNANCE v1
   Tiny type is reserved for illustrative microcopy only:
   mockup internals, visual nodes, map labels, dashboard ornaments,
   indices and non-essential decorative metadata.
   Any text that users must read, choose, navigate or act on gets
   an explicit readable floor below.
   ========================================================= */
:root{
  --ds-readable-meta:.70rem;
  --ds-readable-note:.76rem;
  --ds-readable-ui:.80rem;
  --ds-readable-copy:.84rem;
}

/* Hero proof / trust lines are real content, not decoration. */
[class$="-proof-row"] span,
.maps-hero-proof span,
.qr-capability-row span{
  font-size:var(--ds-readable-ui)!important;
}
[class$="-proof-row"] b,
.maps-hero-proof b,
.qr-capability-row b{
  font-size:var(--ds-readable-meta)!important;
}

/* Controls that require reading before interaction. */
.system-tabs button,
.friction-tabs button,
.selector-tabs button,
.rest-journey-tabs button,
.stay-journey-tabs button,
.tour-journey-tabs button,
.journey-tab,
.guest-mode-tabs button,
.room-tabs button,
.itinerary-tabs button,
.menu-language-tabs button,
.menu-category-tabs button,
.project-filter-dock button,
.case-story-actions button,
.case-dialog-actions .btn,
.case-next-project{
  font-size:var(--ds-readable-ui)!important;
}

/* Secondary copy inside multi-line navigation tabs. */
.system-tabs span,
.rest-journey-tabs span,
.stay-journey-tabs span,
.tour-journey-tabs span,
.journey-tab span{
  font-size:.68rem!important;
}
.system-tabs small,
.rest-journey-tabs small,
.stay-journey-tabs small,
.tour-journey-tabs small,
.journey-tab small{
  font-size:.72rem!important;
}

/* Homepage editorial runway contains real explanatory copy. */
.runway-label small,
.runway-stage p,
.runway-outcome small{
  font-size:var(--ds-readable-note)!important;
  line-height:1.55!important;
}
.runway-stage small,
.runway-outcome>span,
.hero-editorial .hero-proof strong{
  font-size:.68rem!important;
}
.hero-editorial .hero-proof span{
  font-size:.78rem!important;
}
.hero-editorial-footnote{
  font-size:.70rem!important;
}

/* Forms and validation must never depend on micro type. */
.audit-form-card label{
  font-size:.82rem!important;
}
.audit-form-card .field-error,
.audit-form-note{
  font-size:var(--ds-readable-note)!important;
}
.audit-input-guide small{
  font-size:.74rem!important;
}

/* Legal / policy navigation and contact labels are meant to be read. */
.privacy-toc a,
.terms-toc a{
  font-size:.82rem!important;
  line-height:1.45!important;
}
.privacy-contact-card small,
.terms-contact-card small{
  font-size:.70rem!important;
}
.privacy-version span,
.terms-version span{
  font-size:.66rem!important;
}

/* Demo / analytics disclaimers communicate meaning, not decoration. */
.stay-demo-note,
.tour-demo-note,
.stay-dash-note,
.tour-dash-note,
.dashboard-disclaimer{
  font-size:var(--ds-readable-note)!important;
  line-height:1.55!important;
}

/* Pricing labels that affect purchase comprehension. */
.package-badge{
  font-size:.66rem!important;
}
.package-price small,
.package-fit small{
  font-size:.70rem!important;
}
.package-price span{
  font-size:.76rem!important;
}

/* Shared shell: actions and legal text must be legible. */
.shell-audit-cta strong{
  font-size:.80rem!important;
}
.footer-main-cta small{
  font-size:.66rem!important;
}
.footer-brand-lockup span{
  font-size:.70rem!important;
}
.footer-system-status{
  font-size:.76rem!important;
}
.studio-footer .footer-title{
  font-size:.78rem!important;
}
.studio-footer .copyright,
.footer-legal a{
  font-size:.76rem!important;
}
.footer-system-note{
  font-size:.68rem!important;
}

/* Projects gallery: navigation and disclosures are user-facing. */
.project-showcase-copy .breadcrumb{
  font-size:.78rem!important;
}
.project-showcase-status>a{
  font-size:.80rem!important;
}
.project-gallery-bottom small{
  font-size:.74rem!important;
}
.project-gallery-bottom em{
  font-size:.68rem!important;
}
.project-gallery-hint small{
  font-size:.70rem!important;
}
.project-integrity-note b{
  font-size:.66rem!important;
}
.project-integrity-note span{
  font-size:.72rem!important;
}
.case-dialog-status{
  font-size:.68rem!important;
}
.case-dialog-media figcaption small{
  font-size:.66rem!important;
}
.case-dialog-disclaimer span{
  font-size:.66rem!important;
}
.case-dialog-disclaimer p{
  font-size:.78rem!important;
  line-height:1.6!important;
}
.case-story-progress-meta span,
.case-story-progress-meta small{
  font-size:.70rem!important;
}
.case-story-kicker{
  font-size:.72rem!important;
}
.case-story-details summary{
  font-size:.80rem!important;
}
.case-story-facts span{
  font-size:.62rem!important;
}
.case-story-facts strong{
  font-size:.78rem!important;
}
.case-story-chapter span{
  font-size:.60rem!important;
}
.case-story-chapter b{
  font-size:.70rem!important;
}

/* Mobile: readable content grows slightly rather than shrinking. */
@media(max-width:820px){
  :root{
    --ds-readable-meta:.72rem;
    --ds-readable-note:.78rem;
    --ds-readable-ui:.82rem;
    --ds-readable-copy:.86rem;
  }
  .project-gallery-bottom small{font-size:.76rem!important}
  .case-story-chapter b{font-size:.72rem!important}
  .case-story-facts strong{font-size:.80rem!important}
}