/* ==========================================================================
   coding-global.css
   International growth cluster. Six half-built markets plus fourteen
   sub-national spokes. Spec:
   docs/superpowers/specs/2026-08-15-international-growth-cluster-design.md

   Identity: "The Ledger". Ruled rows, ledger hairlines, mono authority
   labels. Brand tokens only (Ledger & Proof), never the retired dark neon.

   Deliberately NOT ai-global.css:
     - no numbered protocol spine (ag-protocol / ag-stage / ag-band-num)
     - no timezone slot table (ag-slots / ag-slot-time as a promise)
     - courses and the age ladder come first, the local project sits mid page
   The two files must not read as twins, because six markets carry a page
   from each cluster on the same domain.

   Signature: .cg-align, the alignment column. Left is what the market's own
   curriculum authority already asks of the student, right is the course that
   answers it. Every market has a different left column by definition.

   Per-market accent: --cg-accent / --cg-accent-soft on .cg-root.cg-<code>
   Each accent derives from something real about the place, not a rotation.
   ========================================================================== */

:root {
  /* Brand tokens. Source: src/css/editorial-theme.css */
  --cg-paper:    #FBF8F2;
  --cg-paper-2:  #F5F1E8;
  --cg-paper-3:  #EDE7DA;
  --cg-ink:      #1C1814;
  --cg-ink-2:    #3A332C;
  --cg-muted:    #6B6259;
  --cg-rule:     #DDD5C6;
  --cg-rule-2:   #C9BFAC;
  --cg-amber:    #A34A08;
  --cg-amber-2:  #D97706;

  --cg-accent:      #2E5A88;
  --cg-accent-soft: rgba(46, 90, 136, 0.09);

  --cg-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --cg-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --cg-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cg-measure: 68ch;
  --cg-gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   Per-market accents. Derivation noted so a future editor does not treat
   these as arbitrary and reshuffle them.
   -------------------------------------------------------------------------- */
.cg-root.cg-nj  { --cg-accent: #2E5A88; --cg-accent-soft: rgba(46,90,136,.09); }   /* Jersey blue, state flag */
.cg-root.cg-ca  { --cg-accent: #A34A17; --cg-accent-soft: rgba(163,74,23,.10); }   /* California poppy */
.cg-root.cg-tx  { --cg-accent: #9B2335; --cg-accent-soft: rgba(155,35,53,.09); }   /* Texas flag red */
.cg-root.cg-ny  { --cg-accent: #2F6B5E; --cg-accent-soft: rgba(47,107,94,.09); }   /* Hudson green */
.cg-root.cg-il  { --cg-accent: #4C5B8A; --cg-accent-soft: rgba(76,91,138,.09); }   /* Illinois flag blue */
.cg-root.cg-ga  { --cg-accent: #7B3F2E; --cg-accent-soft: rgba(123,63,46,.09); }   /* Georgia clay */
.cg-root.cg-va  { --cg-accent: #3D6B47; --cg-accent-soft: rgba(61,107,71,.09); }   /* Virginia pine */
.cg-root.cg-wa  { --cg-accent: #1F5F63; --cg-accent-soft: rgba(31,95,99,.09); }    /* Cascade evergreen */
.cg-root.cg-md  { --cg-accent: #8A4B14; --cg-accent-soft: rgba(138,75,20,.09); }   /* Maryland gold, state flag */
.cg-root.cg-on  { --cg-accent: #A32A2A; --cg-accent-soft: rgba(163,42,42,.09); }   /* Ontario trillium red */
.cg-root.cg-bc  { --cg-accent: #275C87; --cg-accent-soft: rgba(39,92,135,.09); }   /* BC flag blue */
.cg-root.cg-ab  { --cg-accent: #7A4A86; --cg-accent-soft: rgba(122,74,134,.09); }  /* Alberta wild rose */
.cg-root.cg-lei { --cg-accent: #1D5C9B; --cg-accent-soft: rgba(29,92,155,.09); }   /* Leicester blue */
.cg-root.cg-bhm { --cg-accent: #1A5AA8; --cg-accent-soft: rgba(26,90,168,.09); }   /* Birmingham blue */
.cg-root.cg-om  { --cg-accent: #A5202C; --cg-accent-soft: rgba(165,32,44,.09); }   /* Omani red */
.cg-root.cg-mct { --cg-accent: #7A2E3B; --cg-accent-soft: rgba(122,46,59,.09); }   /* Muscat */
.cg-root.cg-kw  { --cg-accent: #1D7544; --cg-accent-soft: rgba(29,117,68,.10); }   /* Kuwait flag green */
.cg-root.cg-bh  { --cg-accent: #B02A30; --cg-accent-soft: rgba(176,42,48,.09); }   /* Bahrain flag red */
.cg-root.cg-hk  { --cg-accent: #BA2026; --cg-accent-soft: rgba(186,32,38,.09); }   /* Hong Kong red */
.cg-root.cg-nl  { --cg-accent: #A64B17; --cg-accent-soft: rgba(166,75,23,.10); }   /* Dutch orange */

/* Brunei cluster. Every hex clears 4.5:1 on paper, tint and deep, which is the
   hard requirement. The separation target is deliberately measured against the
   OTHER BRUNEI ACCENTS rather than against all seventy-nine in this file: with
   that many muted accents already allocated, maximising distance across the whole
   set drives the solver into saturated blues and near-blacks, which is exactly the
   look the brand rejects. Nobody views the Seria page beside the Illinois one. */
.cg-root.cg-bn  { --cg-accent: #01502A; --cg-accent-soft: rgba(1,80,42,.09); }     /* Brunei, the green of the state crest */
.cg-root.cg-bsb { --cg-accent: #535A29; --cg-accent-soft: rgba(83,90,41,.09); }    /* Bandar Seri Begawan, the river olive */
.cg-root.cg-kb  { --cg-accent: #7F3066; --cg-accent-soft: rgba(127,48,102,.09); }  /* Kuala Belait, the Belait plum */
.cg-root.cg-tut { --cg-accent: #1B4F17; --cg-accent-soft: rgba(27,79,23,.09); }    /* Tutong, the Tasek Merimbun canopy */
.cg-root.cg-tem { --cg-accent: #781B1E; --cg-accent-soft: rgba(120,27,30,.09); }   /* Temburong, the ironwood of the interior */
.cg-root.cg-ser { --cg-accent: #2E4372; --cg-accent-soft: rgba(46,67,114,.09); }   /* Seria, the slate of the crude terminal */
.cg-root.cg-lia { --cg-accent: #8A3E12; --cg-accent-soft: rgba(138,62,18,.09); }   /* Liang, burnt copper of the flare */
.cg-root.cg-gad { --cg-accent: #12586B; --cg-accent-soft: rgba(18,88,107,.09); }   /* Gadong, the teal of a market awning */
.cg-root.cg-jer { --cg-accent: #6B4226; --cg-accent-soft: rgba(107,66,38,.09); }   /* Jerudong, chestnut of the coastal scrub */

/* Oman cluster. Every hex below clears 4.5:1 on all three paper tints and
   they are spread so no two a visitor sees in sequence look alike. */
.cg-root.cg-bwh { --cg-accent: #7053A4; --cg-accent-soft: rgba(112,83,164,.09); }   /* Bawshar, the violet the sands take at dusk */
.cg-root.cg-seb { --cg-accent: #004E5C; --cg-accent-soft: rgba(0,78,92,.09); }   /* Seeb, deep water off the corniche */
.cg-root.cg-mut { --cg-accent: #683100; --cg-accent-soft: rgba(104,49,0,.09); }   /* Muttrah, the dark timber of the souq */
.cg-root.cg-qur { --cg-accent: #367154; --cg-accent-soft: rgba(54,113,84,.09); }   /* Qurum, the nature reserve */
.cg-root.cg-mou { --cg-accent: #006BA9; --cg-accent-soft: rgba(0,107,169,.09); }   /* Al Mouj, the marina water */
.cg-root.cg-msq { --cg-accent: #6C683C; --cg-accent-soft: rgba(108,104,60,.09); }   /* Madinat Al Sultan Qaboos, the diplomatic quarter olive */
.cg-root.cg-khw { --cg-accent: #2D3985; --cg-accent-soft: rgba(45,57,133,.09); }   /* Al Khuwair, the ministries district */
.cg-root.cg-ghb { --cg-accent: #374924; --cg-accent-soft: rgba(55,73,36,.09); }   /* Al Ghubrah, the palm strip behind the beach */
.cg-root.cg-azb { --cg-accent: #5B6C00; --cg-accent-soft: rgba(91,108,0,.09); }   /* Azaiba, coastal scrub */
.cg-root.cg-irf { --cg-accent: #632C73; --cg-accent-soft: rgba(99,44,115,.09); }   /* Madinat Al Irfan, new build */
.cg-root.cg-maw { --cg-accent: #9C4E02; --cg-accent-soft: rgba(156,78,2,.09); }   /* Mawaleh, the produce market */
.cg-root.cg-hal { --cg-accent: #005207; --cg-accent-soft: rgba(0,82,7,.09); }   /* Al Hail, wadi green */
.cg-root.cg-khd { --cg-accent: #994373; --cg-accent-soft: rgba(153,67,115,.09); }   /* Al Khoudh, the university quarter */
.cg-root.cg-shr { --cg-accent: #8A3214; --cg-accent-soft: rgba(138,50,20,.09); }   /* Sohar, copper */
.cg-root.cg-brk { --cg-accent: #3F7320; --cg-accent-soft: rgba(63,115,32,.09); }   /* Barka, palm groves behind the fort */
.cg-root.cg-sll { --cg-accent: #0D7134; --cg-accent-soft: rgba(13,113,52,.09); }   /* Salalah, the green khareef turns the hills */
.cg-root.cg-nzw { --cg-accent: #5A3928; --cg-accent-soft: rgba(90,57,40,.09); }   /* Nizwa, the fired clay of the fort */
.cg-root.cg-sur { --cg-accent: #004789; --cg-accent-soft: rgba(0,71,137,.09); }   /* Sur, dhow indigo */
.cg-root.cg-iba { --cg-accent: #963950; --cg-accent-soft: rgba(150,57,80,.09); }   /* Ibra, the old Beit al-Qufl doors */
.cg-root.cg-ibr { --cg-accent: #965131; --cg-accent-soft: rgba(150,81,49,.09); }   /* Ibri, desert ochre */
.cg-root.cg-duq { --cg-accent: #196B7D; --cg-accent-soft: rgba(25,107,125,.09); }   /* Duqm, the port water */
.cg-root.cg-kha { --cg-accent: #225146; --cg-accent-soft: rgba(34,81,70,.09); }   /* Khasab, the Hormuz fjords */
.cg-root.cg-dhf { --cg-accent: #755417; --cg-accent-soft: rgba(117,84,23,.09); }   /* Dhofar, frankincense resin */
.cg-root.cg-btn { --cg-accent: #007461; --cg-accent-soft: rgba(0,116,97,.09); }   /* Al Batinah North, the shallow coast */
.cg-root.cg-bts { --cg-accent: #2B5E01; --cg-accent-soft: rgba(43,94,1,.09); }   /* Al Batinah South, the date belt */
.cg-root.cg-dak { --cg-accent: #513F8F; --cg-accent-soft: rgba(81,63,143,.09); }   /* Ad Dakhiliyah, Jebel Akhdar at altitude */
.cg-root.cg-shn { --cg-accent: #3864AE; --cg-accent-soft: rgba(56,100,174,.09); }   /* Ash Sharqiyah North, Wadi Bani Khalid pools */
.cg-root.cg-shs { --cg-accent: #4E6180; --cg-accent-soft: rgba(78,97,128,.09); }   /* Ash Sharqiyah South, the water off Ras Al Hadd */
.cg-root.cg-dhr { --cg-accent: #734E5E; --cg-accent-soft: rgba(115,78,94,.09); }   /* Adh Dhahirah, the iron-red western Hajar */
.cg-root.cg-bur { --cg-accent: #7B5781; --cg-accent-soft: rgba(123,87,129,.09); }   /* Al Buraimi, the escarpment at dusk */
.cg-root.cg-msd { --cg-accent: #413E5E; --cg-accent-soft: rgba(65,62,94,.09); }   /* Musandam, shadowed fjord walls */
.cg-root.cg-suw { --cg-accent: #0F6E5C; --cg-accent-soft: rgba(15,110,92,.09); }   /* As Suwaiq, the shallow water over the long shore */
.cg-root.cg-sah { --cg-accent: #8C6A00; --cg-accent-soft: rgba(140,106,0,.09); }   /* Saham, the lemon rind the wilayat exported */
.cg-root.cg-amr { --cg-accent: #7A3E13; --cg-accent-soft: rgba(122,62,19,.09); }   /* Al Amarat, the wadi rock behind the range */
.cg-root.cg-rus { --cg-accent: #1F5B8F; --cg-accent-soft: rgba(31,91,143,.09); }   /* Rustaq, the falaj water under the Hajar */
.cg-root.cg-jbb { --cg-accent: #7A4E86; --cg-accent-soft: rgba(122,78,134,.09); }   /* Jalan Bani Bu Ali, the shade inside the domes */
.cg-root.cg-mus { --cg-accent: #00577A; --cg-accent-soft: rgba(0,87,122,.09); }   /* Al Musanaah, the water off the marina */
.cg-root.cg-bhl { --cg-accent: #8A4A2E; --cg-accent-soft: rgba(138,74,46,.09); }   /* Bahla, the fired clay of the pottery */
.cg-root.cg-mdh { --cg-accent: #6B4E00; --cg-accent-soft: rgba(107,78,0,.09); }   /* Al Mudhaibi, the golden sand of the interior */
.cg-root.cg-khb { --cg-accent: #155E75; --cg-accent-soft: rgba(21,94,117,.09); }   /* Al Khaburah, the wadi water off the Hajar */
.cg-root.cg-shs2 { --cg-accent: #0E6E4E; --cg-accent-soft: rgba(14,110,78,.09); }   /* Shinas, the green of the irrigated plain */
.cg-root.cg-sml { --cg-accent: #4C4A9C; --cg-accent-soft: rgba(76,74,156,.09); }   /* Samail, the shadow in the mountain gap */
.cg-root.cg-izk { --cg-accent: #7A3A5E; --cg-accent-soft: rgba(122,58,94,.09); }   /* Izki, the plum of the old walled quarter */
.cg-root.cg-liw { --cg-accent: #1C5E3F; --cg-accent-soft: rgba(28,94,63,.09); }   /* Liwa, the mangrove green at Harmul */
.cg-root.cg-qry { --cg-accent: #00636B; --cg-accent-soft: rgba(0,99,107,.09); }   /* Qurayyat, the turquoise of the sinkhole */
.cg-root.cg-jbh { --cg-accent: #8A4B0F; --cg-accent-soft: rgba(138,75,15,.09); }   /* Jalan Bani Bu Hassan, the mudbrick of Al Muhaywil */
.cg-root.cg-bdy { --cg-accent: #9A5000; --cg-accent-soft: rgba(154,80,0,.09); }   /* Bidiyah */
.cg-root.cg-kml { --cg-accent: #0B6070; --cg-accent-soft: rgba(11,96,112,.09); }   /* Al Kamil Wal Wafi */
.cg-root.cg-bdb { --cg-accent: #3B4C99; --cg-accent-soft: rgba(59,76,153,.09); }   /* Bidbid */
.cg-root.cg-adm { --cg-accent: #93313A; --cg-accent-soft: rgba(147,49,58,.09); }   /* Adam */
.cg-root.cg-nkl { --cg-accent: #16653A; --cg-accent-soft: rgba(22,101,58,.09); }   /* Nakhal */
.cg-root.cg-hmr { --cg-accent: #0A6455; --cg-accent-soft: rgba(10,100,85,.09); }   /* Al Hamra */
.cg-root.cg-dwa { --cg-accent: #14567E; --cg-accent-soft: rgba(20,86,126,.09); }   /* Dima Wa Attayeen */
.cg-root.cg-ynq { --cg-accent: #7A5F00; --cg-accent-soft: rgba(122,95,0,.09); }   /* Yanqul */
.cg-root.cg-mnh { --cg-accent: #4A6212; --cg-accent-soft: rgba(74,98,18,.09); }   /* Manah */
.cg-root.cg-qbl { --cg-accent: #7E3576; --cg-accent-soft: rgba(126,53,118,.09); }   /* Al Qabil */
.cg-root.cg-tqh { --cg-accent: #62409B; --cg-accent-soft: rgba(98,64,155,.09); }   /* Taqah */
.cg-root.cg-dnk { --cg-accent: #8E2F52; --cg-accent-soft: rgba(142,47,82,.09); }   /* Dhank */
.cg-root.cg-wam { --cg-accent: #7D4A18; --cg-accent-soft: rgba(125,74,24,.09); }   /* Wadi Al Maawil */
.cg-root.cg-awb { --cg-accent: #2F5E2A; --cg-accent-soft: rgba(47,94,42,.09); }   /* Al Awabi */
.cg-root.cg-mht { --cg-accent: #0D5E66; --cg-accent-soft: rgba(13,94,102,.09); }   /* Mahout */
.cg-root.cg-thm { --cg-accent: #8A5A12; --cg-accent-soft: rgba(138,90,18,.09); }   /* Thumrait */
.cg-root.cg-mrb { --cg-accent: #1E4F86; --cg-accent-soft: rgba(30,79,134,.09); }   /* Mirbat */
.cg-root.cg-msr { --cg-accent: #00606B; --cg-accent-soft: rgba(0,96,107,.09); }   /* Masirah */
.cg-root.cg-wbk { --cg-accent: #3A6B33; --cg-accent-soft: rgba(58,107,51,.09); }   /* Wadi Bani Khalid */
.cg-root.cg-dba { --cg-accent: #6B3E8E; --cg-accent-soft: rgba(107,62,142,.09); }   /* Daba Al Bayah */
.cg-root.cg-mhd { --cg-accent: #8B3560; --cg-accent-soft: rgba(139,53,96,.09); }   /* Mahdah */
.cg-root.cg-hym { --cg-accent: #5E5216; --cg-accent-soft: rgba(94,82,22,.09); }   /* Haima */
.cg-root.cg-mzy { --cg-accent: #A03C2E; --cg-accent-soft: rgba(160,60,46,.09); }   /* Al Mazyunah */
.cg-root.cg-shl { --cg-accent: #0F5A75; --cg-accent-soft: rgba(15,90,117,.09); }   /* Shalim */
.cg-root.cg-mda { --cg-accent: #4A4E9E; --cg-accent-soft: rgba(74,78,158,.09); }   /* Madha */
.cg-root.cg-wst { --cg-accent: #4A4800; --cg-accent-soft: rgba(74,72,0,.09); }   /* Al Wusta, the khaki scrub of the Jiddat al-Harasis */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.cg-root {
  margin: 0;
  background: var(--cg-paper);
  color: var(--cg-ink);
  font-family: var(--cg-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cg-root *,
.cg-root *::before,
.cg-root *::after { box-sizing: border-box; }

.cg-root h1, .cg-root h2, .cg-root h3 {
  font-family: var(--cg-serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.cg-root h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
.cg-root h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.cg-root h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.3; }
.cg-root p  { margin: 0 0 1.1em; max-width: var(--cg-measure); }
.cg-root a  { color: var(--cg-accent); }

.cg-root a:focus-visible,
.cg-root button:focus-visible,
.cg-root input:focus-visible,
.cg-root select:focus-visible,
.cg-root textarea:focus-visible {
  outline: 2px solid var(--cg-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.cg-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cg-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}

.cg-section { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--cg-rule); }
/* The nav is sticky, so an anchor jump would otherwise land the heading
   underneath it. 62px nav plus breathing room. */
.cg-root [id] { scroll-margin-top: 82px; }
.cg-root { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .cg-root { scroll-behavior: auto; } }
.cg-section--tint { background: var(--cg-paper-2); }
.cg-section--deep { background: var(--cg-paper-3); }
.cg-section-head { max-width: var(--cg-measure); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* Eyebrow. Mono because these label real things (standards, codes, regions). */
.cg-eyebrow {
  font-family: var(--cg-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cg-accent);
  margin: 0 0 0.9rem;
  display: block;
}

.cg-inline-link { color: var(--cg-accent); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.cg-nav {
  border-bottom: 1px solid var(--cg-rule-2);
  background: var(--cg-paper);
  position: sticky; top: 0; z-index: 40;
  /* Without a cast shadow the paper-coloured bar reads as a mismatched band
     when it sits over a tinted section rather than as a bar floating above it. */
  box-shadow: 0 6px 18px -14px rgba(28, 24, 20, 0.55);
}
.cg-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 62px;
}
.cg-nav-brand {
  font-family: var(--cg-serif);
  font-size: 1.12rem; font-weight: 600;
  color: var(--cg-ink); text-decoration: none; white-space: nowrap;
}
.cg-nav-brand span { color: var(--cg-accent); }
.cg-nav-links { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.cg-nav-links a {
  font-size: 0.88rem; color: var(--cg-ink-2); text-decoration: none;
  padding: 0.2rem 0; border-bottom: 1px solid transparent;
}
.cg-nav-links a:hover { color: var(--cg-accent); border-bottom-color: var(--cg-accent); }
/* On a phone the section links are noise, but dropping the whole nav would
   leave a lead-gen page with no call to action above the fold. Keep the one
   link that matters. */
/* The primary action on the page. It was rendering as plain bold text among the
   section links, which made the one thing we want a visitor to click the least
   distinguishable item in the bar. Give it a button at every width. */
/* Specificity note: .cg-nav-links a is (0,1,1) and beats a bare .cg-nav-cta
   (0,1,0), which silently kept the link colour and produced dark text on the
   dark accent fill. Match the parent selector so the button colour actually
   lands. */
.cg-nav-links a.cg-nav-cta {
  font-weight: 600;
  color: #fff; background: var(--cg-accent);
  border: 1px solid var(--cg-accent); border-radius: 2px;
  min-height: 38px; padding: 0 0.95rem;
  display: inline-flex; align-items: center;
  transition: opacity 0.15s ease;
}
.cg-nav-links a.cg-nav-cta:hover { color: #fff; opacity: 0.9; border-bottom-color: var(--cg-accent); }
@media (max-width: 720px) {
  .cg-nav-links a:not(.cg-nav-cta) { display: none; }
  /* 44px minimum on a phone: this is the primary call to action. */
  .cg-nav-links a.cg-nav-cta { min-height: 44px; padding: 0 0.9rem; }
  /* At the narrowest widths the brand and the CTA crowd each other. */
  .cg-nav-brand { font-size: 1rem; }
  .cg-nav-inner { gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.cg-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }
/* .cg-root a is (0,1,1) and beats a bare .cg-btn (0,1,0). Without matching that
   specificity the button inherited the accent as its TEXT colour on an accent
   background: a solid block with invisible words on it. Measured at 1.00
   contrast. Every primary call to action was affected. */
.cg-root .cg-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  background: var(--cg-accent); color: #fff;
  font-family: var(--cg-sans); font-size: 0.94rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--cg-accent);
  border-radius: 2px; cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.cg-root .cg-btn:hover { color: #fff; opacity: 0.92; transform: translateY(-1px); }
.cg-root .cg-btn--ghost { background: transparent; color: var(--cg-ink); border-color: var(--cg-rule-2); }
.cg-root .cg-btn--ghost:hover { border-color: var(--cg-accent); color: var(--cg-accent); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.cg-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); border-top: 0; }
.cg-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .cg-hero-grid { grid-template-columns: 1fr; } }
.cg-lede { font-size: clamp(1.06rem, 1.6vw, 1.2rem); color: var(--cg-ink-2); max-width: 60ch; }
.cg-hero-note { font-size: 0.85rem; color: var(--cg-muted); margin-top: 1.1rem; }

.cg-crumbs { font-size: 0.8rem; color: var(--cg-muted); margin-bottom: 1.4rem; font-family: var(--cg-mono); }
.cg-crumbs a { color: var(--cg-muted); text-decoration: none; }
.cg-crumbs a:hover { color: var(--cg-accent); }

/* Answer capsule. The block AI engines lift, so it gets real prominence. */
.cg-capsule {
  border-left: 3px solid var(--cg-accent);
  background: var(--cg-accent-soft);
  padding: 1.15rem 1.35rem;
  margin: 0 0 1.5rem;
}
.cg-capsule-q {
  font-family: var(--cg-mono);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cg-accent);
  margin: 0 0 0.5rem;
}
.cg-capsule p { margin: 0; font-size: 0.98rem; color: var(--cg-ink-2); max-width: 62ch; }

/* Trust facts. Brand-facts driven, so the markup is deliberately plain. */
.cg-trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--cg-rule);
  border: 1px solid var(--cg-rule); margin-top: 1.75rem;
}
.cg-fact { background: var(--cg-paper); padding: 0.95rem 1rem; }
.cg-fact-k { font-family: var(--cg-serif); font-size: 1.32rem; font-weight: 600; display: block; }
.cg-fact-l { font-size: 0.78rem; color: var(--cg-muted); letter-spacing: 0.03em; }

/* --------------------------------------------------------------------------
   SIGNATURE: the alignment column
   Left  = what this market's curriculum authority already asks for
   Right = the course that answers it
   Ruled like a ledger. No numbers: these are pairings, not a sequence.
   -------------------------------------------------------------------------- */
.cg-align { border-top: 2px solid var(--cg-ink); margin-top: 0.5rem; }
.cg-align-row {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--cg-rule);
  align-items: start;
}
@media (max-width: 760px) {
  .cg-align-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.15rem 0; }
}
.cg-align-req { position: relative; }
.cg-align-code {
  font-family: var(--cg-mono);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--cg-accent); text-transform: uppercase;
  display: block; margin-bottom: 0.35rem;
}
.cg-align-req p,
.cg-align-ours p { margin: 0; font-size: 0.94rem; }
.cg-align-req p { color: var(--cg-ink); font-weight: 500; }
.cg-align-ours p { color: var(--cg-ink-2); }
.cg-align-ours { border-left: 2px solid var(--cg-accent-soft); padding-left: clamp(0.9rem, 2vw, 1.5rem); }
@media (max-width: 760px) {
  .cg-align-ours { border-left: 2px solid var(--cg-accent); padding-left: 0.9rem; margin-left: 0.1rem; }
}
.cg-align-ours a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Courses
   -------------------------------------------------------------------------- */
.cg-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--cg-rule); border: 1px solid var(--cg-rule); }
.cg-course-card { background: var(--cg-paper); padding: 1.3rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cg-course-card h3 { margin: 0; font-size: 1.05rem; }
.cg-course-card p { margin: 0; font-size: 0.88rem; color: var(--cg-muted); }
.cg-course-code {
  font-family: var(--cg-mono); font-size: 0.75rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cg-accent);
}
.cg-course-link {
  margin-top: auto; font-size: 0.9rem; font-weight: 600; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; /* finger-sized */
}
.cg-course-link:hover { text-decoration: underline; }

/* Age ladder */
.cg-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.cg-ladder-col { border-top: 2px solid var(--cg-accent); padding-top: 1rem; }
.cg-ladder-col h3 { margin-bottom: 0.4rem; }
.cg-ladder-col ul { margin: 0.6rem 0 0; padding-left: 1.05rem; }
.cg-ladder-col li { font-size: 0.9rem; color: var(--cg-ink-2); margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   Local project
   -------------------------------------------------------------------------- */
.cg-proj { border: 1px solid var(--cg-rule-2); background: var(--cg-paper); padding: clamp(1.4rem, 3.5vw, 2.25rem); }
.cg-proj-meta {
  font-family: var(--cg-mono); font-size: 0.75rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cg-muted);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  padding-bottom: 0.9rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--cg-rule);
}
.cg-proj-body p:last-child { margin-bottom: 0; }

/* Data tables, hairline ruled */
.cg-table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--cg-rule); }
.cg-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 440px; }
.cg-table th, .cg-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--cg-rule); }
.cg-table th { font-family: var(--cg-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cg-muted); background: var(--cg-paper-2); }
.cg-table tr:last-child td { border-bottom: 0; }

.cg-spec { border-left: 3px solid var(--cg-rule-2); padding-left: 1.2rem; margin: 1.5rem 0; }
.cg-spec-title { font-family: var(--cg-mono); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cg-muted); margin-bottom: 0.4rem; }

.cg-chip {
  display: inline-block; font-family: var(--cg-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--cg-rule-2); border-radius: 2px;
  padding: 0.22rem 0.55rem; margin: 0 0.35rem 0.35rem 0; color: var(--cg-ink-2);
}

.cg-band-head { font-family: var(--cg-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cg-muted); margin-bottom: 0.6rem; }
.cg-slot-time { font-family: var(--cg-mono); font-size: 0.88rem; color: var(--cg-ink-2); }

/* --------------------------------------------------------------------------
   Pricing. USD only in this cluster.
   -------------------------------------------------------------------------- */
.cg-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--cg-rule); border: 1px solid var(--cg-rule); }
.cg-price > div { background: var(--cg-paper); padding: 1.4rem 1.3rem; }
.cg-price--feature { box-shadow: inset 0 3px 0 var(--cg-accent); }
.cg-price-name { font-family: var(--cg-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cg-muted); }
.cg-price-amt { font-family: var(--cg-serif); font-size: 2.1rem; font-weight: 600; display: block; margin: 0.35rem 0 0.15rem; }
.cg-price-alt { font-size: 0.84rem; color: var(--cg-muted); }

/* --------------------------------------------------------------------------
   Reviews. Only the real verified ones, ever.
   -------------------------------------------------------------------------- */
.cg-review { border-top: 1px solid var(--cg-rule); padding-top: 1.15rem; }
.cg-review-text { font-size: 0.94rem; color: var(--cg-ink-2); }
.cg-review-name { font-weight: 600; font-size: 0.88rem; }
.cg-review-role { font-size: 0.8rem; color: var(--cg-muted); }
.cg-stars { color: var(--cg-amber); letter-spacing: 0.08em; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   FAQ. Text here must match FAQPage schema character for character.
   -------------------------------------------------------------------------- */
.cg-faq { border-top: 2px solid var(--cg-ink); }
.cg-faq-item { border-bottom: 1px solid var(--cg-rule); padding: 1.3rem 0; }
.cg-faq-item h3 { margin-bottom: 0.45rem; font-size: 1.06rem; }
.cg-faq-item p { margin: 0; font-size: 0.94rem; color: var(--cg-ink-2); }

/* --------------------------------------------------------------------------
   Lead form
   -------------------------------------------------------------------------- */
.cg-form-panel { border: 1px solid var(--cg-rule-2); background: var(--cg-paper); padding: clamp(1.35rem, 3vw, 2rem); }
.cg-field { margin-bottom: 1rem; }
.cg-field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--cg-ink-2); }
.cg-field input, .cg-field select, .cg-field textarea {
  width: 100%; padding: 0.65rem 0.75rem;
  border: 1px solid var(--cg-rule-2); border-radius: 2px;
  background: var(--cg-paper); color: var(--cg-ink);
  font-family: var(--cg-sans); font-size: 0.94rem;
}
.cg-field textarea { min-height: 90px; resize: vertical; }
.cg-field .cg-err { color: #9B2335; font-size: 0.78rem; margin-top: 0.25rem; display: block; min-height: 1em; }
.cg-form-note { font-size: 0.78rem; color: var(--cg-muted); margin-top: 0.85rem; }
.cg-form-ok { color: #1D7544; font-weight: 600; font-size: 0.9rem; margin-top: 0.8rem; }

/* --------------------------------------------------------------------------
   Sibling markets
   -------------------------------------------------------------------------- */
.cg-markets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cg-market {
  font-size: 0.88rem; text-decoration: none; color: var(--cg-ink-2);
  border: 1px solid var(--cg-rule-2); border-radius: 2px; padding: 0 0.85rem;
  min-height: 44px; display: inline-flex; align-items: center; /* finger-sized */
}
.cg-market:hover { border-color: var(--cg-accent); color: var(--cg-accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.cg-footer { background: var(--cg-paper-3); border-top: 1px solid var(--cg-rule-2); padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem; }
.cg-footer h3 { font-family: var(--cg-sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cg-muted); margin-bottom: 0.8rem; }
.cg-footer ul { list-style: none; margin: 0; padding: 0; }
.cg-footer li { margin-bottom: 0.4rem; }
.cg-footer a { font-size: 0.88rem; color: var(--cg-ink-2); text-decoration: none; }
.cg-footer a:hover { color: var(--cg-accent); }
.cg-footer-bottom { border-top: 1px solid var(--cg-rule-2); margin-top: 2rem; padding-top: 1.25rem; font-size: 0.8rem; color: var(--cg-muted); }

.cg-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
.cg-mt-2 { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .cg-root *, .cg-root *::before, .cg-root *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .cg-btn:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   Course picks. Sits immediately below the hero on every page in this cluster.
   A visitor should see the actual product, with pictures, before they are asked
   to read a paragraph about state curriculum policy. Cards carry the real
   course thumbnails from /images, the same artwork used on the course atlas.

   Named cg-pick so check-cluster-uniqueness.js can strip it: the catalogue is
   identical across markets by design and must not count as duplicated prose.
   -------------------------------------------------------------------------- */
.cg-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.cg-root .cg-pick {
  display: flex; flex-direction: column;
  background: var(--cg-paper);
  border: 1px solid var(--cg-rule);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cg-pick:hover { border-color: var(--cg-accent); transform: translateY(-2px); }
.cg-pick:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
.cg-pick-shot {
  display: block; width: 100%;
  /* height:auto is load-bearing. The <img> carries a height attribute, which
     acts as a presentational hint and beats aspect-ratio without it. Omitting
     it made the box 240x250 against a 1.78 image, so object-fit:cover sliced
     the poster titles off at both edges. */
  height: auto;
  /* Matches the source artwork (800x450), so nothing is cropped at all. */
  aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--cg-paper-3);
  border-bottom: 1px solid var(--cg-rule);
}
.cg-pick-body { padding: 0.95rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.cg-pick-band {
  font-family: var(--cg-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cg-accent);
}
.cg-pick-title {
  font-family: var(--cg-serif); font-size: 1.05rem; font-weight: 600;
  line-height: 1.25; margin: 0; color: var(--cg-ink);
}
.cg-pick-note { font-size: 0.88rem; color: var(--cg-muted); margin: 0; }
/* The card CTA is a real button rather than a line of accent text. Written at
   .cg-root .cg-pick-go (0,2,0) so it beats `.cg-root a` (0,1,1): that exact
   specificity trap once shipped invisible button labels on six live pages.
   White on the accent was measured across all 67 accents in this file before
   this was written; the worst is 5.03 to 1, so every page clears 4.5. */
.cg-root .cg-pick-go {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  /* 0.72rem gives a 44px tap target, which the project QA checklist
     requires and 0.5rem missed at 38px. */
  padding: 0.72rem 1.05rem;
  border-radius: 3px;
  background: var(--cg-accent);
  color: #fff;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cg-root .cg-pick:hover .cg-pick-go { filter: brightness(1.12); }
.cg-root .cg-pick:focus-visible .cg-pick-go { outline: 2px solid var(--cg-ink); outline-offset: 2px; }
.cg-pick-body { gap: 0.5rem; }

/* The flagship strip: Python, AI, vibe coding and agentic coding, marked so a
   reader can see at a glance that these four are the spine of the catalogue.
   It sits BELOW the per-page picks under its own heading rather than inside
   that grid, because 34 pages open the section with a sentence naming how many
   cards follow, and mixing the two made every one of those sentences false. */
.cg-root .cg-flaghead {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(0.9rem, 2vw, 1.25rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--cg-rule);
}
.cg-root .cg-flaghead h3 {
  font-family: var(--cg-serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600; line-height: 1.2; margin: 0.35rem 0 0.5rem; color: var(--cg-ink);
}
.cg-root .cg-flaghead p:last-child {
  margin: 0; max-width: 62ch; color: var(--cg-muted); font-size: 0.97rem;
}
.cg-root .cg-pick--flag { border-color: var(--cg-accent); }
.cg-root .cg-pick-tag {
  align-self: flex-start;
  font-family: var(--cg-mono, ui-monospace, monospace);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--cg-accent);
}
.cg-picks-more { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

@media (prefers-reduced-motion: reduce) {
  .cg-root .cg-pick-go { transition: none; }
}

@media (prefers-reduced-motion: reduce) { .cg-pick:hover { transform: none; } }


/* ==========================================================================
   Oman cluster components.
   The Oman pages introduced these. They are defined here, never inline: rule
   6.6 of the build guide forbids inline style, so an undefined class ships as
   naked markup. Anything that paints text on the accent is written at
   .cg-root .x so it beats `.cg-root a` (0,1,1). That specificity trap once
   shipped invisible button text on six live pages.
   ========================================================================== */

/* --- primary button alias. The pages use cg-btn--primary for the same look
       cg-btn already has; define it so it can never fall through. --- */
.cg-root .cg-btn--primary {
  background: var(--cg-accent); color: #fff; border-color: var(--cg-accent);
}
.cg-root .cg-btn--primary:hover { color: #fff; }

/* --- WhatsApp button. Secondary weight so it sits beside the primary CTA
       without competing with it. --- */
.cg-root .cg-btn-wa {
  background: transparent; color: var(--cg-accent);
  border: 1px solid var(--cg-accent);
}
.cg-root .cg-btn-wa:hover { background: var(--cg-accent-soft); color: var(--cg-accent); }

/* --- hero --- */
.cg-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.cg-hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6;
  color: var(--cg-ink); max-width: var(--cg-measure); margin: 0 0 1rem;
}

/* --- breadcrumb --- */
.cg-breadcrumb {
  font-family: var(--cg-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--cg-muted); margin-bottom: 1rem;
}
.cg-root .cg-breadcrumb a { color: var(--cg-muted); text-decoration: none; }
.cg-root .cg-breadcrumb a:hover { color: var(--cg-accent); text-decoration: underline; }

/* --- layout helpers --- */
.cg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--cg-gap); }

/* --- callout, a ruled aside rather than a coloured box --- */
.cg-callout {
  border-left: 3px solid var(--cg-accent);
  background: var(--cg-accent-soft);
  padding: 1rem 1.15rem; border-radius: 2px;
}
.cg-callout h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.cg-callout p  { margin: 0; }

/* --- pricing --- */
.cg-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--cg-gap); }
.cg-price-label {
  display: block; font-family: var(--cg-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cg-accent);
  margin-bottom: 0.3rem;
}
.cg-price-grid .cg-price strong {
  display: block; font-family: var(--cg-serif); font-size: 1.6rem;
  font-weight: 600; line-height: 1.1; margin-bottom: 0.35rem;
}
.cg-price-grid .cg-price p { margin: 0; font-size: 0.9rem; color: var(--cg-muted); }

/* --- the lead form and its contact card --- */
.cg-form-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.cg-form { display: block; }
.cg-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--cg-gap); }
.cg-contact-card {
  border: 1px solid var(--cg-rule-2); border-radius: 2px;
  padding: 1.15rem 1.25rem; background: var(--cg-paper);
}
.cg-contact-card h3 { margin: 0 0 0.7rem; font-size: 1.05rem; }
.cg-contact-card p  { margin: 0 0 0.5rem; font-size: 0.92rem; }
.cg-contact-card .cg-btn { margin-top: 0.5rem; }
.cg-phone { font-family: var(--cg-mono); font-size: 0.95rem; }
.cg-privacy { font-size: 0.82rem; color: var(--cg-muted); margin: 0.6rem 0 0; }
.cg-error   { color: #9B2335; font-size: 0.82rem; }
.cg-success { color: #1E6B4E; font-size: 0.9rem; }

/* --- verified / source attribution. These carry the citations that make the
       page quotable, so they must stay legible, not shrink into grey noise. --- */
.cg-verified,
.cg-source-note {
  font-family: var(--cg-mono); font-size: 0.78rem; line-height: 1.5;
  color: var(--cg-muted); margin: 0.6rem 0 0;
}
.cg-boiler { color: var(--cg-muted); margin: 0.35rem 0 0; }

/* --- the data-project verdict block --- */
.cg-verdict {
  border-top: 2px solid var(--cg-accent); padding-top: 0.85rem; margin-top: 1rem;
}
.cg-verdict-k {
  font-family: var(--cg-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cg-accent);
  display: block; margin-bottom: 0.25rem;
}

/* --- mobile contact bar. Two variants exist because the pages were written in
       two passes: cg-sticky and cg-contact-bar. Both are styled so neither can
       ship naked. Desktop hides them; body padding is added in the SAME query
       so the bar can never cover the last paragraph or the submit button. --- */
.cg-contact-bar, .cg-sticky { display: none; }

@media (max-width: 767px) {
  .cg-contact-bar,
  .cg-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--cg-paper);
    border-top: 1px solid var(--cg-rule-2);
    box-shadow: 0 -2px 10px rgba(28,24,20,.08);
    padding: 0.5rem max(0.75rem, env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom));
  }
  .cg-contact-bar[hidden], .cg-sticky[hidden] { display: none; }

  .cg-contact-bar-in,
  .cg-sticky { display: flex; gap: 0.5rem; }
  .cg-contact-bar-in > *, .cg-sticky > a { flex: 1 1 0; }

  /* 44px minimum tap target, guide rule 6.6 */
  .cg-root .cg-sticky a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 44px; padding: 0.6rem 0.75rem;
    font-family: var(--cg-sans); font-size: 0.88rem; font-weight: 600;
    text-decoration: none; border-radius: 2px;
    border: 1px solid var(--cg-accent);
  }
  .cg-root .cg-sticky a:first-child { background: var(--cg-accent); color: #fff; }
  .cg-root .cg-sticky a:last-child  { background: transparent; color: var(--cg-accent); }
  .cg-root .cg-contact-bar .cg-btn { min-height: 44px; justify-content: center; width: 100%; }

  /* clear the bar */
  .cg-root { padding-bottom: 68px; }
}

/* --- responsive collapses --- */
@media (max-width: 900px) {
  .cg-form-layout { grid-template-columns: 1fr; }
  .cg-price-grid  { grid-template-columns: 1fr; }
  .cg-grid-2, .cg-contact-grid { grid-template-columns: 1fr; }
}

.cg-contact-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; }
.cg-root .cg-contact-row a { color: var(--cg-accent); font-weight: 600; }