/* =========================================================
   TechniCollege Australia — logo-led theme
   Loaded ONLY by en-US pages, after css/style.css.

   Taken from the TechniCollege logo:
     logo blue  #2160b2  (the "T", the "C", the open book, tagline)
     logo navy  #050c36  (monitor and book outline)
     ink black  #0b0b10  (the "echni" / "ollege" letters)
   Type: wordmark serif → Tinos (Times-style bold serif)
         tagline sans  → Open Sans
   Motif: the logo's "pixel squares" (navy + blue).
   ========================================================= */

:root{
  /* Logo colours */
  --logo-blue: #2160b2;
  --logo-blue-dark: #194a8c;
  --logo-navy: #050c36;
  --logo-ink: #0b0b10;

  /* Mapped onto the shared variables used by css/style.css */
  --navy: var(--logo-navy);
  --navy-2: #0d1a52;
  --blue: var(--logo-blue);
  --blue-light: #eaf1fb;
  --blue-lighter: #f4f8fd;
  --ink: var(--logo-ink);
  --muted: #4b5262;
  --bg: #ffffff;
  --bg-alt: #f4f7fc;
  --paper: #ffffff;
  --border-soft: #dbe3ef;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #c9d4ea;

  /* Shades of the logo colours */
  --blue-soft: #8fb4ec;              /* blue for text/lines on navy (>= 7:1) */
  --navy-line: rgba(143,180,236,0.10);
  --navy-line-strong: rgba(143,180,236,0.22);
  --blue-line: rgba(33,96,178,0.07);
  --blue-line-strong: rgba(33,96,178,0.16);
  --steel-50: #f4f7fc;
  --steel-100: #eaf0f8;
  --steel-200: #dbe3ef;
  --steel-500: #5d6678;

  /* Type */
  --font-serif: 'Tinos', 'Times New Roman', Times, Georgia, serif;
  --font-sans: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --font-head: var(--font-serif);
  --font-body: var(--font-sans);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(5,12,54,0.06), 0 0 0 1px rgba(5,12,54,0.04);
  --shadow-md: 0 10px 28px rgba(5,12,54,0.10);
  --shadow-lg: 0 22px 54px rgba(5,12,54,0.18);
  --container-w: 1200px;
}

/* ---------- Base ---------- */
body{ font-family: var(--font-sans); font-size: 1.0625rem; color: var(--ink); background: var(--bg); }
h1, h2, h3, h4{ font-family: var(--font-serif); font-weight: 700; color: var(--logo-ink); letter-spacing: -0.2px; }
h2{ font-size: clamp(2rem, calc(3.6vw * var(--font-scale)), 2.9rem); line-height: 1.1; }
h3{ font-size: 1.35rem; line-height: 1.2; }
p{ color: var(--muted); }
::selection{ background: var(--logo-blue); color: #fff; }
.text-accent{ color: var(--logo-blue); }

/* Small uppercase label, as in a technical title block */
.section-tag, .eyebrow, .module-num, .price-badge, .process-num, .hero-price-note,
.doc-meta, .breadcrumb{
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
}

/* Pixel squares from the logo — reusable decorative motif */
.pixels{ position: relative; }
.section-tag::before, .pixel-mark{
  content: ""; display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
  background:
    linear-gradient(var(--logo-navy), var(--logo-navy)) 6px 0 / 5px 5px no-repeat,
    linear-gradient(var(--logo-blue), var(--logo-blue)) 0 6px / 7px 7px no-repeat,
    linear-gradient(var(--logo-navy), var(--logo-navy)) 9px 7px / 5px 5px no-repeat;
}

/* Blueprint grids (CSS only) */
.bp-dark, .section-dark, .cta-band, .site-footer{
  background-color: var(--logo-navy);
  background-image:
    linear-gradient(var(--navy-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line-strong) 1px, transparent 1px),
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: 700;
  font-size: 1rem; letter-spacing: .2px; padding: 14px 26px;
}
.btn-lg{ padding: 16px 30px; font-size: 1.05rem; }
.btn-sm{ padding: 10px 18px; font-size: .92rem; }
.btn:hover{ transform: none; }
.btn-primary, .btn-gold{ background: var(--logo-blue); border-color: var(--logo-blue); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-gold:hover{ background: var(--logo-blue-dark); border-color: var(--logo-blue-dark); box-shadow: none; }
.btn-outline{ border-color: var(--logo-navy); color: var(--logo-navy); }
.btn-outline:hover{ background: var(--logo-navy); color: #fff; }
.btn-outline-light{ border-color: rgba(255,255,255,.8); color: #fff; }
.btn-outline-light:hover{ background: #fff; color: var(--logo-navy); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--logo-blue); outline-offset: 3px;
}
.section-dark :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .bp-dark :focus-visible{ outline-color: #fff; }
.btn[aria-disabled="true"]{ opacity: 1; background: var(--steel-100); border-color: var(--steel-200); color: var(--logo-navy); }

/* ---------- Header ---------- */
.site-header{ background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--steel-200); }
.site-header::before{ content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--logo-blue) 0 33%, var(--logo-navy) 33%); }
.header-inner{ min-height: 96px; }
.logo-img{ height: 78px; width: auto; }
.main-nav a{ font-family: var(--font-sans); font-weight: 600; font-size: .98rem; color: var(--logo-ink); }
.main-nav a::after{ height: 2px; background: var(--logo-blue); bottom: -4px; }
.lang-switch{ color: var(--logo-blue); font-weight: 600; }
.nav-toggle{ border-radius: var(--radius-sm); border-color: var(--steel-200); }
.nav-toggle span{ background: var(--logo-navy); }
@media (max-width: 900px){ .main-nav{ inset: 100px 0 0 0; background: #fff; } }

/* ---------- Sections ---------- */
.section{ padding: 104px 0; position: relative; }
.section-alt{
  background-color: var(--bg-alt);
  background-image: linear-gradient(var(--blue-line) 1px, transparent 1px), linear-gradient(90deg, var(--blue-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.section-head{ max-width: 780px; margin-bottom: 48px; }
.section-head p{ font-size: 1.1rem; }
.section-tag{ display: inline-flex; align-items: center; gap: 10px; background: none; padding: 0; margin-bottom: 14px; font-size: .76rem; color: var(--logo-blue); }
.section-head-light .section-tag{ color: var(--blue-soft); }
.section-head-light .section-tag::before{
  background:
    linear-gradient(#fff, #fff) 6px 0 / 5px 5px no-repeat,
    linear-gradient(var(--blue-soft), var(--blue-soft)) 0 6px / 7px 7px no-repeat,
    linear-gradient(#fff, #fff) 9px 7px / 5px 5px no-repeat;
}
.section-head-light h2, .section-head-light p{ color: #fff; }
.section-head-light p{ color: var(--text-on-dark-muted); }
/* Thin ruler line between light sections */
main > .section + .section:not(.section-dark):not(.cta-band)::before{
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 8px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--blue-line-strong) 0 1px, transparent 1px 16px) top / 100% 8px no-repeat;
}

/* ---------- Hero (light, logo-like) ---------- */
.hero{
  padding: 72px 0 96px;
  background-color: #fff;
  background-image:
    radial-gradient(ellipse at 80% 30%, rgba(33,96,178,0.10), transparent 55%),
    linear-gradient(var(--blue-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line-strong) 1px, transparent 1px),
    linear-gradient(var(--blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line) 1px, transparent 1px);
  background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-bottom: 1px solid var(--steel-200);
}
.hero-shape{ display: none; }
.hero-inner{ grid-template-columns: 1.08fr .92fr; gap: 64px; }
.hero .eyebrow{
  background: var(--blue-light); color: var(--logo-blue); border-radius: var(--radius-sm);
  font-size: .74rem; padding: 8px 12px; margin-bottom: 24px;
}
.hero h1{ color: var(--logo-ink); font-size: clamp(2.7rem, calc(5.4vw * var(--font-scale)), 4.4rem); line-height: 1.02; letter-spacing: -0.8px; margin-bottom: .35em; }
.hero h1 .text-accent{ color: var(--logo-blue); display: block; }
.hero-lead{ font-family: var(--font-sans); color: var(--logo-blue); font-weight: 600; font-size: clamp(1.1rem, calc(1.9vw * var(--font-scale)), 1.35rem); max-width: 600px; }
.hero-sub{ color: var(--muted); font-size: 1.1rem; max-width: 600px; }
.hero-price{
  display: inline-flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap;
  border: 1px solid var(--steel-200); border-inline-start: 4px solid var(--logo-blue);
  border-radius: var(--radius-sm); padding: 12px 18px; margin: 0 0 28px; background: #fff; box-shadow: var(--shadow-sm);
}
.hero-price-amount{ font-family: var(--font-serif); font-weight: 700; color: var(--logo-ink); font-size: 2.3rem; }
.hero-price-note{ color: var(--muted); font-size: .72rem; }
.hero-disclosure{ color: var(--muted); font-size: .9rem; }
.hero-disclosure a{ color: var(--logo-blue); text-decoration: underline; }

/* Photo in a technical frame with dimension lines and pixel squares */
.hero-media{ position: relative; padding: 30px 30px 46px 46px; }
.hero-media img{ border-radius: var(--radius-sm); aspect-ratio: 5 / 4; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--steel-200), var(--shadow-lg); }
.hero-media::before{ /* pixel squares, top-right — as in the logo */
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px; pointer-events: none;
  background:
    linear-gradient(var(--logo-navy), var(--logo-navy)) 24px 0 / 12px 12px no-repeat,
    linear-gradient(var(--logo-blue), var(--logo-blue)) 6px 18px / 18px 18px no-repeat,
    linear-gradient(var(--logo-navy), var(--logo-navy)) 28px 16px / 18px 18px no-repeat,
    linear-gradient(var(--logo-navy), var(--logo-navy)) 34px 36px / 10px 10px no-repeat;
}
.hero-media::after{ display: none; }
.dim{ position: absolute; pointer-events: none; color: var(--logo-blue); font-family: var(--font-sans); font-weight: 700; font-size: .62rem; letter-spacing: 1.6px; text-transform: uppercase; }
.dim-h{ left: 46px; right: 30px; bottom: 14px; height: 0; border-top: 1px solid currentColor; }
.dim-h::before, .dim-h::after{ content: ""; position: absolute; top: -6px; height: 11px; border-left: 1px solid currentColor; }
.dim-h::before{ left: 0; } .dim-h::after{ right: 0; }
.dim-h > span{ position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: #fff; padding: 0 8px; line-height: 18px; }
.dim-v{ top: 30px; bottom: 46px; left: 14px; width: 0; border-left: 1px solid currentColor; }
.dim-v::before, .dim-v::after{ content: ""; position: absolute; left: -6px; width: 11px; border-top: 1px solid currentColor; }
.dim-v::before{ top: 0; } .dim-v::after{ bottom: 0; }
.dim-v > span{ position: absolute; top: 50%; left: -9px; transform: translate(-50%, -50%) rotate(-90deg); background: #fff; padding: 0 8px; line-height: 18px; white-space: nowrap; }

/* ---------- Cards ---------- */
.info-grid{ gap: 20px; }
.info-card, .feature-card{
  background: #fff; border: 1px solid var(--steel-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: 28px 26px;
}
.info-card{ border-top: 3px solid var(--logo-blue); }
.info-card h3, .feature-card h3{ margin-bottom: .45em; }
.info-card p, .info-card li{ font-size: 1rem; color: var(--ink); }
.feature-card{ text-align: start; }
.feature-card .icon-badge{ width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--logo-navy); color: #fff; margin-bottom: 18px; box-shadow: 5px 5px 0 var(--logo-blue); }

/* ---------- The method: process diagram ---------- */
.process{ list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.process::before{ content: ""; position: absolute; top: 38px; inset-inline: 10%; border-top: 1px dashed var(--navy-line-strong); }
.process-step{ position: relative; text-align: center; padding: 0 8px; }
.process-icon{
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin-bottom: 14px; color: #fff;
  background: var(--logo-blue); border-radius: var(--radius-sm); box-shadow: 5px 5px 0 rgba(255,255,255,.14);
}
.process-icon svg{ width: 34px; height: 34px; }
.process-step:not(:last-child) .process-icon::after{
  content: ""; position: absolute; top: 50%; inset-inline-end: -16px; width: 8px; height: 8px;
  border-top: 2px solid var(--blue-soft); border-right: 2px solid var(--blue-soft); transform: translateY(-50%) rotate(45deg);
}
.process-num{ display: block; color: var(--blue-soft); font-size: .72rem; margin-bottom: 4px; }
.process-label{ display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: #fff; }
.method-grid{ gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.method-step{ background: rgba(255,255,255,0.05); border: 1px solid var(--navy-line-strong); border-top: 3px solid var(--logo-blue); border-radius: var(--radius-md); }
.method-step h3{ color: #fff; }
.method-num{ border-radius: var(--radius-sm); width: 34px; height: 34px; background: #fff; color: var(--logo-navy); font-family: var(--font-serif); }

/* ---------- Costly mistakes ---------- */
.mistake-list{ counter-reset: mistake; gap: 14px; }
.mistake-list li{
  counter-increment: mistake; gap: 14px;
  border: 1px solid var(--steel-200); border-inline-start: 4px solid var(--logo-blue); border-radius: var(--radius-sm);
  padding: 16px 18px; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--logo-ink); box-shadow: var(--shadow-sm);
}
.mistake-list li::before{
  content: counter(mistake, decimal-leading-zero);
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700; color: var(--logo-blue);
  padding-inline-end: 12px; border-inline-end: 1px solid var(--steel-200);
}
#mistakes .notice{ background: var(--blue-lighter); border: 1px solid var(--steel-200); border-inline-start: 4px solid var(--logo-navy); border-radius: var(--radius-sm); }

/* ---------- What you'll learn ---------- */
.outcome-list{ gap: 0 36px; }
.outcome-list li{ padding: 16px 0 16px 44px; border-bottom: 1px solid var(--steel-200); }
.outcome-list li::before{
  content: ""; top: 18px; width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--logo-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.outcome-list strong{ color: var(--logo-ink); }

/* ---------- Modules ---------- */
.modules-list{ gap: 10px; }
.module-item{ background: rgba(255,255,255,0.05); border: 1px solid var(--navy-line-strong); border-radius: var(--radius-sm); }
.module-item[open]{ border-color: var(--blue-soft); background: rgba(255,255,255,0.08); }
.module-item summary{ display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; }
.module-num{ font-size: .82rem; color: var(--blue-soft); background: none; width: auto; height: auto; padding-inline-end: 16px; border-inline-end: 1px solid var(--navy-line-strong); border-radius: 0; }
.module-icon{ display: inline-flex; width: 30px; height: 30px; color: #fff; }
.module-icon svg{ width: 30px; height: 30px; }
.module-title{ font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem; color: #fff; }
.module-toggle{ border-radius: var(--radius-sm); border-color: var(--navy-line-strong); }
.module-body{ padding: 0 22px 20px calc(22px + 64px); }
.module-body p{ color: var(--text-on-dark-muted); }

/* ---------- Gallery ---------- */
#gallery .gallery-track{ counter-reset: photo; gap: 18px; padding-block: 8px 18px; }
#gallery .gallery-slide{ counter-increment: photo; position: relative; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); border: 1px solid var(--steel-200); background: #fff; padding: 8px 8px 34px; }
#gallery .gallery-slide img{ border-radius: 2px; }
#gallery .gallery-slide::after{
  content: "Project " counter(photo, decimal-leading-zero) " / 50"; position: absolute; left: 10px; bottom: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: .74rem; letter-spacing: .6px; color: var(--steel-500);
}
.gallery-arrow{ border-radius: var(--radius-sm); border-color: var(--steel-200); color: var(--logo-navy); }
.gallery-arrow:hover{ background: var(--logo-blue); border-color: var(--logo-blue); color: #fff; }

/* ---------- Package ---------- */
.single-package{ max-width: 600px; margin: 0 auto 56px; }
.single-package .price-card{ border-radius: var(--radius-md); border: 1px solid var(--steel-200); padding: 0 36px 32px; overflow: hidden; box-shadow: var(--shadow-md); }
.price-badge{ position: static; display: block; border-radius: 0; background: var(--logo-navy); color: #fff; font-size: .74rem; padding: 12px 36px; margin: 0 -36px 28px; border-bottom: 4px solid var(--logo-blue); }
.single-package .price-card h3{ font-size: 1.6rem; }
.price-tag{ border-block: 1px solid var(--steel-200); padding-block: 18px; margin-bottom: 8px; }
.price-amount{ font-family: var(--font-serif); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--logo-ink); }
.price-features li{ font-size: 1rem; }
.check{ color: var(--logo-blue); }
.subhead{ font-size: 1.7rem; }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 860px; gap: 0; border-top: 1px solid var(--steel-200); }
.faq-item{ background: none; border: 0; border-bottom: 1px solid var(--steel-200); border-radius: 0; padding: 0 4px; }
.faq-item summary{ font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--logo-ink); padding: 20px 0; padding-inline-end: 44px; }
.faq-item summary::after{
  content: "+"; width: 28px; height: 28px; top: 18px; border: 1px solid var(--steel-200); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 1rem; color: var(--logo-blue);
}
.faq-item[open] summary::after{ content: "−"; background: var(--logo-blue); color: #fff; border-color: var(--logo-blue); }
.faq-body p{ font-size: 1rem; color: var(--ink); }

/* ---------- CTA band + profile drawing ---------- */
.cta-band{ border-top: 4px solid var(--logo-blue); }
.cta-band .container{ position: relative; }
.cta-inner h2{ color: #fff; }
.cta-inner p{ color: var(--text-on-dark-muted); }
.profile-drawing{ position: absolute; inset-inline-end: 24px; top: 50%; transform: translateY(-50%); width: 190px; height: auto; color: var(--blue-soft); opacity: .6; pointer-events: none; }
.profile-drawing text{ font-family: var(--font-sans); font-weight: 700; font-size: 9px; letter-spacing: 1.4px; fill: currentColor; }
@media (max-width: 1100px){ .profile-drawing{ display: none; } }

/* ---------- Footer ---------- */
.site-footer{ border-top: 4px solid var(--logo-blue); }
.site-footer .footer-logo{ filter: none; opacity: 1; background: #fff; padding: 8px 12px; border-radius: var(--radius-sm); height: 74px; width: auto; }
.footer-support h2{ font-family: var(--font-sans); font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue-soft); }
.footer-nav a{ font-weight: 600; }
.footer-bottom{ background: #030824; }

/* ---------- Notices, forms, modal, cookie UI ---------- */
.notice{ border-radius: var(--radius-sm); }
.modal-card{ border-radius: var(--radius-md); border-top: 4px solid var(--logo-blue); }
.modal-card h2{ font-size: 1.8rem; }
.modal-close{ border-radius: var(--radius-sm); }
.form-row input, .form-row select, .form-row textarea{ border-radius: var(--radius-sm); border-color: #c4cfdf; background: #fff; }
.form-row label{ font-family: var(--font-sans); font-weight: 600; color: var(--logo-ink); }
.payment-placeholder{ border-radius: var(--radius-sm); border-style: solid; border-color: var(--steel-200); border-inline-start: 4px solid var(--logo-blue); }
.buy-summary{ color: var(--logo-navy); }
.cookie-banner{ border-radius: var(--radius-md); border-top: 4px solid var(--logo-blue); }
.cookie-banner h2{ font-size: 1.3rem; }
.cookie-category{ border-radius: var(--radius-sm); }
.check-row input{ accent-color: var(--logo-blue); }
.a11y-toggle{ border-radius: var(--radius-sm); background: var(--logo-blue); }
.scroll-top{ border-radius: var(--radius-sm); background: var(--logo-navy); color: #fff; }
.a11y-panel{ border-radius: var(--radius-md); border-top: 4px solid var(--logo-blue); }
.a11y-btn{ border-radius: var(--radius-sm); }

/* ---------- Legal / content pages ---------- */
.legal-page{ padding-top: 0; }
.legal-page > .container{ padding-top: 48px; }
.legal-page h1{ font-size: clamp(2.2rem, calc(4vw * var(--font-scale)), 3.1rem); line-height: 1.05; }
.legal-page h2{ font-size: 1.55rem; padding-top: 24px; border-top: 1px solid var(--steel-200); }
.legal-page .notice + h2{ border-top: 0; }
.legal-page a{ color: var(--logo-blue); }
.legal-page a.btn{ text-decoration: none; }
.legal-page a.btn-primary, .legal-page a.btn-gold{ color: #fff; }
.legal-page a.btn-outline{ color: var(--logo-navy); }
.legal-page a.btn-outline:hover{ color: #fff; }
.doc-meta{ font-size: .74rem; color: var(--steel-500); }
.breadcrumb{ font-size: .74rem; }
.legal-page th{ background: var(--logo-navy); color: #fff; font-family: var(--font-sans); }
.legal-page th[scope="row"]{ background: var(--steel-100); color: var(--logo-ink); }
.legal-page td, .legal-page th{ border-color: var(--steel-200); }
.legal-index a{ border-radius: var(--radius-sm); border-inline-start: 4px solid var(--logo-blue); font-family: var(--font-serif); font-size: 1.2rem; color: var(--logo-ink) !important; }
.legal-index a:hover{ border-inline-start-color: var(--logo-navy); }
.page-band{ padding: 48px 0 32px; border-bottom: 4px solid var(--logo-blue); }
.page-band .breadcrumb a, .page-band .breadcrumb li{ color: var(--blue-soft); }
.page-band h1{ color: #fff; margin: 0; }
.page-band .doc-meta{ color: var(--blue-soft); margin: 10px 0 0; }

/* ---------- Checkout status ---------- */
.status-panel{ border-radius: var(--radius-sm); border-inline-start-color: var(--logo-blue); box-shadow: var(--shadow-sm); }
.status-summary{ border-top: 1px solid var(--steel-200); padding-top: 16px; }
.status-summary dt{ font-size: .76rem; text-transform: uppercase; letter-spacing: 1.2px; padding-top: 3px; color: var(--logo-blue); }
/* Phones: long item names wrap instead of pushing the amounts off-screen. */
@media (max-width: 560px){ .status-summary{ grid-template-columns: minmax(0, 1fr) auto; } .status-summary dt{ overflow-wrap: anywhere; } .status-summary dd{ text-align: end; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .process-icon{ transition: transform .25s ease; }
  .process-step:hover .process-icon{ transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-inner{ gap: 40px; }
  .process-label{ font-size: 1.05rem; }
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ order: 0; max-width: 620px; }
  .main-nav a{ font-size: 1.1rem; }
  .process{ grid-template-columns: 1fr; gap: 12px; max-width: 460px; }
  .process::before{ top: 0; bottom: 0; inset-inline: auto; inset-inline-start: 38px; border-top: 0; border-inline-start: 1px dashed var(--navy-line-strong); }
  .process-step{ display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center; text-align: start; padding: 0; }
  .process-icon{ grid-row: span 2; margin: 0; }
  .process-num{ align-self: end; margin: 0; }
  .process-label{ align-self: start; }
  .process-step:not(:last-child) .process-icon::after{ inset-inline-end: auto; top: auto; bottom: -12px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 720px){
  .section{ padding: 72px 0; }
  .hero{ padding: 48px 0 72px; }
  .logo-img{ height: 54px; }
  .hero-media{ padding: 22px 22px 34px 34px; }
  .module-item summary{ grid-template-columns: auto 1fr auto; gap: 12px; padding: 16px; }
  .module-icon{ display: none; }
  .module-body{ padding: 0 16px 18px; }
  .single-package .price-card{ padding-inline: 22px; }
  .price-badge{ padding-inline: 22px; margin-inline: -22px; }
  .price-amount{ font-size: 2.8rem; }
}
@media (max-width: 480px){
  .hero h1{ font-size: 2.45rem; }
  .hero-price{ display: flex; }
  .dim{ font-size: .56rem; }
}
@media (forced-colors: active){
  .process-icon, .module-item, .info-card, .price-card{ border: 1px solid CanvasText; }
}

/* Any remaining gold from the shared stylesheet becomes logo blue. */
:root{ --gold: var(--logo-blue); }
.skip-link{ color: #fff; }
.price-card-featured{ border-color: var(--steel-200); }
.module-item[open] .module-toggle::before, .module-item[open] .module-toggle::after{ background: #fff; }