/* ==========================================================================
   Reglynn — content page stylesheet
   Shared by all long-form reference pages (/eu-ai-act-*, /our-ai-act-status).
   Tokens, orbs, halo, grain and glass copied from index.html — keep in sync.
   ========================================================================== */

:root {
  --coral: #E35A3C; --coral-deep: #C9462B;
  --powder: #AECBEB;
  --char: #161310; --char-2: #1E1B17; --char-3: #26221D;
  --ink: #1D1B18; --muted: #6E675D; --line: #E5E0D6;
  --bone: #F4F1EA; --card: #FFFFFF;
}

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

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bone);
  line-height: 1.6;
  font-size: 17px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.wrap   { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px;  margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

/* ==========================================================================
   DYNAMIC BACKGROUND SYSTEM — identical to index.html
   ========================================================================== */

.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.orb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; opacity: .55; }
.orb-coral  { background: radial-gradient(circle, rgba(227,90,60,.55) 0%, rgba(227,90,60,0) 70%); }
.orb-ember  { background: radial-gradient(circle, rgba(240,161,132,.35) 0%, rgba(240,161,132,0) 70%); }
.orb-powder { background: radial-gradient(circle, rgba(174,203,235,.4) 0%, rgba(174,203,235,0) 70%); }
.orb-sky    { background: radial-gradient(circle, rgba(174,203,235,.35) 0%, transparent 70%); filter: blur(80px); opacity: .7; }
.orb-sun    { background: radial-gradient(circle, rgba(227,90,60,.32) 0%, rgba(240,161,132,.14) 45%, transparent 70%); filter: blur(80px); opacity: .8; }

.orb.a1 { animation: drift1 22s ease-in-out infinite alternate; }
.orb.a2 { animation: drift2 28s ease-in-out infinite alternate; }
.orb.a3 { animation: drift3 34s ease-in-out infinite alternate; }

/* Rotating halo ring */
.halo {
  position: absolute; left: 50%; top: 46%;
  width: 880px; height: 880px; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(227,90,60,0) 0deg, rgba(227,90,60,.5) 70deg,
              rgba(240,161,132,.35) 140deg, rgba(174,203,235,.45) 220deg, rgba(227,90,60,0) 320deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, black 60%, black 64%, transparent 66%);
          mask: radial-gradient(circle, transparent 58%, black 60%, black 64%, transparent 66%);
  animation: spin 40s linear infinite;
  opacity: .8; filter: blur(1.5px);
}

/* Light-section ambient tint */
.ambient {
  position: absolute; width: 780px; height: 780px; border-radius: 50%;
  filter: blur(90px); opacity: .5; pointer-events: none;
  background: radial-gradient(circle, rgba(227,90,60,.1) 0%, rgba(174,203,235,.08) 45%, transparent 70%);
  animation: drift2 30s ease-in-out infinite alternate;
}

/* Film grain */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation: grainShift 9s steps(6) infinite;
}

@keyframes drift1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,-70px) scale(1.15); } 100% { transform: translate(-50px,50px) scale(.95); } }
@keyframes drift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-110px,60px) scale(1.1); } 100% { transform: translate(70px,-40px) scale(1.05); } }
@keyframes drift3 { 0% { transform: translate(0,0) scale(.9); } 50% { transform: translate(60px,80px) scale(1.2); } 100% { transform: translate(-80px,-60px) scale(1); } }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes grainShift { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-4%); } 60% { transform: translate(-2%,-3%); } 80% { transform: translate(4%,2%); } }

@media (prefers-reduced-motion: reduce) {
  .orb, .halo, .grain, .ambient { animation: none !important; }
}
@media (max-width: 700px) {
  .halo { width: 560px; height: 560px; }
  .halo.h2 { width: 680px; height: 680px; }
}

/* ==========================================================================
   NAV — mirrors index.html
   ========================================================================== */
nav { background: var(--char); padding: 18px 0; position: sticky; top: 0; z-index: 60;
      border-bottom: 1px solid rgba(244,241,234,.07);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      background: rgba(22,19,16,.86); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none;
        font-family: 'Clash Display','Satoshi',sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.logo span { color: var(--coral); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: rgba(244,241,234,.72); text-decoration: none; font-size: 15px; transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-cta { background: var(--coral); color: #fff !important; padding: 9px 18px; border-radius: 8px;
           font-weight: 500; box-shadow: 0 4px 20px rgba(227,90,60,.35); transition: background .2s, box-shadow .2s; }
.nav-cta:hover { background: var(--coral-deep); box-shadow: 0 6px 26px rgba(227,90,60,.5); }
@media (max-width: 720px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ==========================================================================
   PAGE HEAD — dark, orbs + halo behind
   ========================================================================== */
.page-head { position: relative; background: var(--char); color: #fff;
             padding: 66px 0 74px; overflow: hidden; isolation: isolate; }

.chip { display: inline-flex; align-items: center; gap: 8px;
        background: rgba(244,241,234,.07); color: rgba(244,241,234,.85);
        font-size: 13px; font-weight: 500; padding: 7px 18px; border-radius: 100px;
        margin-bottom: 26px; border: 1px solid rgba(244,241,234,.14);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
                background: var(--coral); box-shadow: 0 0 10px var(--coral); }

.page-head h1 {
  font-family: 'Clash Display', 'Satoshi', sans-serif; font-weight: 600;
  font-size: clamp(33px, 5.2vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
  color: #fff; margin: 0 0 18px;
}
.grad { display: block; /* gradient half of a headline always starts its own line */
       background: linear-gradient(100deg, var(--coral) 0%, #F0A184 50%, var(--powder) 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent; }
.standfirst { font-size: 20px; line-height: 1.5; color: rgba(244,241,234,.74); margin: 0; max-width: 620px; }
.meta { margin-top: 28px; font-size: 14px; color: rgba(244,241,234,.42); }
.meta b { color: rgba(244,241,234,.7); font-weight: 500; }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
article { position: relative; padding: 56px 0 20px; overflow: hidden; }
article h2 {
  font-family: 'Clash Display', 'Satoshi', sans-serif; font-weight: 600;
  font-size: clamp(25px, 3.2vw, 34px); letter-spacing: -0.02em; color: var(--char);
  line-height: 1.15; margin: 54px 0 14px; text-align: left;
}
article h3 { font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: var(--char); margin: 34px 0 10px; }
article p { margin: 0 0 20px; }
article ul, article ol { margin: 0 0 22px; padding-left: 22px; }
article li { margin-bottom: 9px; }
article a { color: var(--coral-deep); text-decoration: underline; text-underline-offset: 2px; }
article a:hover { color: var(--coral); }
hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

/* tables */
.t-scroll { overflow-x: auto; margin: 0 0 26px; border-radius: 16px; }
table { width: 100%; border-collapse: collapse; background: var(--card);
        border: 1px solid var(--line); border-radius: 16px; font-size: 15.5px; overflow: hidden; }
th { text-align: left; padding: 13px 15px; background: #EFEBE1; font-weight: 600; font-size: 13px;
     text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
td { padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* glass callouts — same card language as .b-card on the landing page */
.note, .warn, .key {
  border-radius: 20px; padding: 20px 24px; margin: 0 0 26px; font-size: 16px;
  background: rgba(255,255,255,.72); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(29,27,24,.05);
  transition: transform .25s ease, box-shadow .25s;
}
.note:hover, .warn:hover, .key:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(29,27,24,.08); }
.note { border-left: 3px solid var(--powder); }
.warn { border-left: 3px solid var(--coral); background: rgba(253,243,240,.8); }
.key  { border-left: 3px solid var(--char); background: rgba(239,235,225,.8); }
.note p:last-child, .warn p:last-child, .key p:last-child { margin-bottom: 0; }

.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-live  { background: #FBE3DD; color: var(--coral-deep); }
.pill-soon  { background: #FDF0D9; color: #8A5A12; }
.pill-later { background: #E7EDF4; color: #3C556F; }

/* ==========================================================================
   CTA — dark glass, orbs behind
   ========================================================================== */
.cta-box { position: relative; overflow: hidden; isolation: isolate;
           background: var(--char); border-radius: 24px; padding: 42px 34px;
           margin: 50px 0; text-align: center; }
.cta-box > * { position: relative; z-index: 2; }
.cta-box h3 { color: #fff; font-size: 26px; margin: 0 0 10px; letter-spacing: -0.02em;
              font-family: 'Clash Display','Satoshi',sans-serif; font-weight: 600; }
.cta-box p { color: rgba(244,241,234,.7); margin: 0 0 22px; font-size: 16px; }
.btn { display: inline-block; background: var(--coral); color: #fff; text-decoration: none;
       padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: 16px;
       box-shadow: 0 6px 26px rgba(227,90,60,.42); transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { background: var(--coral-deep); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(227,90,60,.55); }
.btn-glass { background: rgba(244,241,234,.07); color: #F4F1EA;
             border: 1px solid rgba(244,241,234,.25);
             box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 24px rgba(0,0,0,.2);
             -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(244,241,234,.13); border-color: rgba(244,241,234,.45); }
.cta-note { margin: 14px 0 0 !important; font-size: 13px !important; color: rgba(244,241,234,.45) !important; }
.cta-note a { color: rgba(244,241,234,.62); }

/* related */
.related { background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 24px;
           padding: 28px 30px; margin: 44px 0;
           -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
           box-shadow: 0 10px 34px rgba(29,27,24,.05); }
.related h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase;
              letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.related ul { margin: 0; padding-left: 20px; }

/* disclaimer */
.disclaimer { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.disclaimer-block { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 50px; }

/* footer */
footer { position: relative; padding: 26px 0 46px; text-align: center; font-size: 13px;
         color: rgba(244,241,234,.35); background: var(--char); margin-top: 60px; }
footer a { color: rgba(244,241,234,.55); text-decoration: none; }
footer a:hover { color: rgba(244,241,234,.85); }

/* >>> REGLYNN LANG SWITCHER START <<< */
/* ==========================================================================
   LANGUAGE SWITCHER  (generated block - edit _build/lang.css, not here)
   Primary codes inline; full 25-language list in a no-JS <details> popover.
   ========================================================================== */
.nav-lang { display: flex; align-items: center; gap: 10px; margin-left: 14px;
            font-size: 12px; letter-spacing: .06em; }
.nav-lang > a { color: rgba(244,241,234,.62); text-decoration: none; font-weight: 500; }
.nav-lang > a:hover { color: #fff; }
.nav-lang > a.lang-on { color: #fff; font-weight: 700; }
.lang-sep { color: rgba(244,241,234,.28); }

.lang-picker { position: relative; }
.lang-picker > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: rgba(244,241,234,.62); font-size: 12px; letter-spacing: .06em;
  padding: 5px 9px; border: 1px solid rgba(244,241,234,.16); border-radius: 7px;
  transition: color .2s, border-color .2s, background .2s; white-space: nowrap; }
.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary::after { content: " \25BE"; opacity: .6; }
.lang-picker > summary:hover { color: #fff; border-color: rgba(244,241,234,.34); }
.lang-picker > summary:focus-visible { outline: 2px solid var(--coral, #E35A3C); outline-offset: 2px; }
.lang-picker[open] > summary { color: #fff; background: rgba(244,241,234,.07);
                               border-color: rgba(244,241,234,.34); }

.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 90;
  width: min(430px, calc(100vw - 32px));
  background: #1d1a16; border: 1px solid rgba(244,241,234,.13); border-radius: 13px;
  padding: 15px 16px 13px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lang-menu-head { margin: 0 0 9px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .13em; color: rgba(244,241,234,.42); font-weight: 600; }
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px;
             max-height: 340px; overflow-y: auto; }

.lang-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 9px; border-radius: 7px; text-decoration: none;
  font-size: 13.5px; letter-spacing: 0; line-height: 1.3; }
.lang-row b { font-weight: 500; }
.lang-row i { font-style: normal; font-size: 10.5px; letter-spacing: .09em; opacity: .5; }
a.lang-row { color: rgba(244,241,234,.86); transition: background .16s, color .16s; }
a.lang-row:hover { background: rgba(244,241,234,.09); color: #fff; }
a.lang-row.lang-on { background: rgba(227,90,60,.17); color: #fff; }
a.lang-row.lang-on b { font-weight: 700; }
.lang-row.lang-off { color: rgba(244,241,234,.3); cursor: not-allowed; }

.lang-note { margin: 11px 0 0; padding-top: 10px; font-size: 11.5px; line-height: 1.5;
  color: rgba(244,241,234,.42); letter-spacing: 0;
  border-top: 1px solid rgba(244,241,234,.09); }


/* --- defensive reset -------------------------------------------------------
   index.html styles bare `details`/`summary` for its FAQ accordion:
     details { background: var(--card); border: 1px solid var(--line);
               border-radius: 18px; padding: 22px 28px; margin: 0 auto 12px;
               max-width: 820px; }
     summary { display: flex; justify-content: space-between; font-size: 16.5px;
               color: var(--char); font-weight: 600; }
     summary::after { content: "+"; color: var(--coral); font-size: 22px; }
   Unscoped, so it hits the language switcher and paints it as a big white card
   with a "+" on a dark nav bar. Re-declare every property those rules set, so
   the switcher renders identically wherever it is dropped in.
   --------------------------------------------------------------------------- */
.nav-lang .lang-picker {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  max-width: none; box-shadow: none; }
.nav-lang .lang-picker[open] { box-shadow: none; }
.nav-lang .lang-picker > summary {
  display: inline-block; justify-content: initial; align-items: initial;
  font-weight: 500; font-size: 12px; letter-spacing: .06em;
  color: rgba(244,241,234,.62); margin: 0; max-width: none;
  background: none; line-height: 1.5; }
.nav-lang .lang-picker > summary::after {
  content: " \25BE"; font-size: 11px; font-weight: 400;
  color: inherit; opacity: .6; transform: none; transition: none; }
.nav-lang .lang-picker[open] > summary::after { transform: none; }
.nav-lang .lang-menu p { margin: 0 0 9px; font-size: 10.5px; color: rgba(244,241,234,.42); }
.nav-lang .lang-menu .lang-note { margin: 11px 0 0; font-size: 11.5px; }
.nav-lang .lang-row b { color: inherit; }

@media (max-width: 720px) {
  .nav-lang { margin-left: auto; gap: 8px; }
  .nav-lang > a, .lang-sep { display: none; }
  .lang-menu { right: -8px; width: calc(100vw - 24px); }
  .lang-grid { grid-template-columns: 1fr; max-height: 60vh; }
}
/* >>> REGLYNN LANG SWITCHER END <<< */

/* >>> REGLYNN GUIDE GRID + FOOTER START <<< */
/* ---- guide hub cards ---- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
              gap: 14px; margin: 22px 0 34px; }
.guide-card { display: flex; flex-direction: column; gap: 7px; padding: 18px 19px;
  border: 1px solid rgba(22,19,16,.11); border-radius: 13px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s; }
.guide-card:hover { border-color: rgba(227,90,60,.5); transform: translateY(-2px);
                    box-shadow: 0 10px 30px rgba(22,19,16,.09); }
.guide-card b { font-family: 'Clash Display','Satoshi',sans-serif; font-weight: 600;
                font-size: 16.5px; letter-spacing: -0.01em; line-height: 1.3; }
.guide-card:hover b { color: var(--coral, #E35A3C); }
.guide-card span { font-size: 14px; line-height: 1.55; opacity: .72; }

/* ---- footer, now two rows ---- */
.foot-links { margin: 0 0 9px; line-height: 2; }
.foot-links a { font-weight: 500; }
.foot-legal { margin: 0; opacity: .68; font-size: 13.5px; line-height: 1.9; }

@media (max-width: 560px) { .guide-grid { grid-template-columns: 1fr; } }
/* >>> REGLYNN GUIDE GRID + FOOTER END <<< */

/* >>> REGLYNN FOOT BADGE START <<< */
.foot-badges { margin: 0 0 16px; line-height: 0; }
.foot-badges a { display: inline-block; opacity: .85; transition: opacity .2s; }
.foot-badges a:hover { opacity: 1; }
/* >>> REGLYNN FOOT BADGE END <<< */