/* ============================================================
   AAMS design system
   Tokens, type, radii and components inherited from
   AIActGuide_GENERIC_V1.html (the AI Act Compliance Guide).
   Dark mode follows the difesapenaleacademy.it pattern:
   a body.dark class swaps the token values.
   ============================================================ */

:root{
  /* brand, stable across themes */
  --primary:            #0a2540;
  --primary-light:      #1a3a5c;
  --secondary:          #c9a227;
  --secondary-light:    #e8c547;
  --accent-green:       #2d8a6e;
  --accent-green-light: #3da882;
  --warning:            #d64545;

  /* surfaces and text, swapped in dark mode */
  --bg-cream:           #faf8f5;
  --bg-white:           #ffffff;
  --bg-sunk:            #f2efe9;
  --heading:            #0a2540;
  --text-dark:          #1a1a2e;
  --text-muted:         #5a5a6e;
  --text-light:         #8a8a9e;
  --border-light:       #e8e6e3;
  --border-strong:      #d9d5cf;

  --shadow-soft:  0 4px 20px rgba(10,37,64,.08);
  --shadow-card:  0 2px 12px rgba(10,37,64,.06);
  --shadow-lift:  0 12px 32px rgba(10,37,64,.10);

  --tint-gold:  rgba(201,162,39,.15);
  --tint-green: rgba(45,138,110,.12);
  --tint-red:   rgba(214,69,69,.10);
  --tint-navy:  rgba(10,37,64,.08);

  --display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1140px;
  --pad: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.4,0,.2,1);
}

body.dark{
  --secondary:          #d9b451;
  --secondary-light:    #ecd07a;
  --accent-green:       #46b18d;
  --accent-green-light: #63c8a5;
  --warning:            #e8706e;

  --bg-cream:           #0d141d;
  --bg-white:           #151f2b;
  --bg-sunk:            #101923;
  --heading:            #f2f6fb;
  --text-dark:          #e9eef5;
  --text-muted:         #a6b4c4;
  --text-light:         #7c8b9c;
  --border-light:       #26313f;
  --border-strong:      #33404f;

  --shadow-soft:  0 4px 20px rgba(0,0,0,.42);
  --shadow-card:  0 2px 12px rgba(0,0,0,.32);
  --shadow-lift:  0 14px 36px rgba(0,0,0,.5);

  --tint-gold:  rgba(217,180,81,.16);
  --tint-green: rgba(70,177,141,.16);
  --tint-red:   rgba(232,112,110,.14);
  --tint-navy:  rgba(255,255,255,.06);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:var(--body);
  background:var(--bg-cream);
  color:var(--text-dark);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease), color .25s var(--ease);
}

h1,h2,h3,h4,h5{ font-family:var(--display); font-weight:700; color:var(--heading); line-height:1.3; }
h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); font-weight:800; letter-spacing:-1px; }
h2{ font-size:clamp(1.55rem,3vw,2.1rem); font-weight:800; letter-spacing:-.6px; }
h3{ font-size:1.32rem; }
h4{ font-size:1.1rem; }
h5{ font-size:.95rem; }

p{ color:var(--text-muted); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
::selection{ background:var(--secondary); color:var(--primary); }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.container-narrow{ max-width:860px; margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(52px,6.5vw,88px); }
.section--tight{ padding-block:clamp(36px,4.5vw,58px); }
.section--white{ background:var(--bg-white); border-block:1px solid var(--border-light); }
.section--sunk{ background:var(--bg-sunk); border-block:1px solid var(--border-light); }

.text-muted{ color:var(--text-muted); }
.center{ text-align:center; }
.mt-1{ margin-top:8px } .mt-2{ margin-top:16px } .mt-3{ margin-top:24px } .mt-4{ margin-top:36px }
.mb-1{ margin-bottom:8px } .mb-2{ margin-bottom:16px } .mb-3{ margin-bottom:24px }
.hidden{ display:none !important; }

.eyebrow{
  font-family:var(--display); font-size:.75rem; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--secondary); font-weight:700; margin-bottom:10px;
}
.sect-head{ max-width:680px; margin-bottom:clamp(28px,3.6vw,42px); }
.sect-head.center{ margin-inline:auto; text-align:center; }
.sect-head p{ margin-top:13px; font-size:1.04rem; }

/* ============================================================
   PILLS AND BUTTONS
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:20px;
  font-size:.8rem; font-weight:600; font-family:var(--display); white-space:nowrap;
  /* A pill is also used as a link, where the UA underline reads as a mistake. */
  text-decoration:none;
}
a.pill{ transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
a.pill:hover{ transform:translateY(-1px); text-decoration:none; }
a.pill.outline:hover{ border-color:rgba(255,255,255,.6); }
.pill.gold{ background:var(--secondary); color:#0a2540; }
.pill.green{ background:var(--accent-green); color:#fff; }
.pill.outline{ background:transparent; border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.9); }
.pill.soft{ background:var(--tint-gold); color:var(--secondary); }
.pill.neutral{ background:var(--bg-cream); color:var(--text-muted); border:1px solid var(--border-light); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  padding:14px 26px; border-radius:10px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg{ transition:transform .2s var(--ease); flex:none; }
.btn:hover svg.arrow{ transform:translateX(3px); }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none !important; }

.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(10,37,64,.18); }
.btn-primary:hover{ background:var(--primary-light); transform:translateY(-1px); box-shadow:0 8px 22px rgba(10,37,64,.22); }
body.dark .btn-primary{ background:var(--secondary); color:#12202e; box-shadow:0 4px 14px rgba(217,180,81,.22); }
body.dark .btn-primary:hover{ background:var(--secondary-light); }

.btn-gold{ background:var(--secondary); color:#0a2540; box-shadow:0 4px 14px rgba(201,162,39,.28); }
.btn-gold:hover{ background:var(--secondary-light); transform:translateY(-1px); box-shadow:0 8px 22px rgba(201,162,39,.32); }

.btn-green{ background:var(--accent-green); color:#fff; box-shadow:0 4px 14px rgba(45,138,110,.24); }
.btn-green:hover{ background:var(--accent-green-light); transform:translateY(-1px); }

.btn-ghost{ background:var(--bg-white); color:var(--heading); border-color:var(--border-light); box-shadow:var(--shadow-card); }
.btn-ghost:hover{ border-color:var(--secondary); transform:translateY(-1px); box-shadow:var(--shadow-soft); }

.btn-onnavy{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
.btn-onnavy:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); }

.btn-sm{ padding:10px 18px; font-size:.88rem; border-radius:8px; }
.btn-full{ width:100%; }

.textlink{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--heading);
}
.textlink svg{ width:15px; height:15px; stroke:var(--secondary); stroke-width:2.4; fill:none; transition:transform .2s var(--ease); }
.textlink:hover svg{ transform:translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  /* High enough that a hero's own glow (panel-navy::before, positioned close
     beneath the header on every page-head) does not blur through as a stray
     colour band; still translucent enough to keep the frosted-glass edge. */
  background:color-mix(in srgb, var(--bg-cream) 97%, transparent);
  backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--border-light);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .site-header{ background:var(--bg-cream); }
}
/* Off on the way down, back on the way up. The class is only ever set by
   JavaScript, so a page without it keeps a header that simply stays put.
   translateY of its own height rather than a fixed value: the bar is 68px on
   the front end and 100px once the admin bar is on top of it. */
.site-header.is-hidden{ transform:translateY(-100%); box-shadow:none; }
/* Once the page has moved, the bar earns an edge. The border alone reads as a
   seam at rest and disappears entirely over a white section. */
.site-header.is-stuck{ box-shadow:0 1px 16px rgba(10,37,64,.07); }
body.dark .site-header.is-stuck{ box-shadow:0 1px 16px rgba(0,0,0,.4); }
/* A hidden header must not take the focus ring with it: anything focused
   inside brings the whole bar back, which the script handles, but the
   transition would otherwise animate a focused control off screen first. */
@media(prefers-reduced-motion:reduce){
  .site-header{ transition:none; }
}
.header-in{ display:flex; align-items:center; gap:18px; height:68px; }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
/* The gauge is roughly 1.9:1, so it is sized by height and left to find its own
   width. Pinning it into a square slot would letterbox it. */
.logo-mark,.custom-logo{ height:30px; width:auto; flex:none; display:block; }
.logo-text{ font-family:var(--display); font-weight:800; font-size:.86rem; color:var(--heading); letter-spacing:-.2px; display:block; white-space:nowrap; }
.logo-sub{ font-size:.72rem; color:var(--text-light); font-weight:500; display:none; }
@media(min-width:1120px){ .logo-sub{ display:block; } }
@media(min-width:520px){ .logo-text{ font-size:1.08rem; letter-spacing:-.3px; } }

.main-nav{ display:none; align-items:center; gap:26px; }
@media(min-width:1000px){ .main-nav{ display:flex; } }
.main-nav ul{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.main-nav li{ list-style:none; }
.main-nav a{
  font-size:.91rem; font-weight:600; color:var(--text-muted); text-decoration:none;
  transition:color .18s var(--ease);
}
.main-nav a:hover,.main-nav a[aria-current="page"]{ color:var(--heading); }
.main-nav a[aria-current="page"]{ color:var(--secondary); }

/* ============================================================
   GHOST BAR
   The workspace's own minimal top bar, used instead of .site-header
   on ghost templates (page-dashboard.php): brand mark plus the theme
   toggle only, no nav, no CTA, no mobile menu.
   ============================================================ */
.ghost-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:60px; padding-inline:clamp(16px,4vw,32px);
  border-bottom:1px solid var(--border-light);
  background:color-mix(in srgb, var(--bg-cream) 88%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .ghost-bar{ background:var(--bg-cream); }
}
.ghost-bar__logo{ display:flex; align-items:center; }
.ghost-bar .logo-mark{ height:26px; width:auto; display:block; }

.header-actions{ display:flex; align-items:center; gap:9px; }
.tbtn{
  width:38px; height:38px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  background:var(--bg-white); border:1px solid var(--border-light);
  color:var(--text-muted); cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tbtn:hover{ color:var(--heading); border-color:var(--secondary); }
.tbtn svg{ width:17px; height:17px; }
.i-sun{ display:none; }
body.dark .i-moon{ display:none; }
body.dark .i-sun{ display:block; }

.header-actions .btn{ display:none; }
@media(min-width:760px){ .header-actions .btn{ display:inline-flex; } }
.menu-btn{ display:grid; }
@media(min-width:1000px){ .menu-btn{ display:none; } }

.mobile-nav{
  position:fixed; left:0; right:0; top:68px; z-index:55;
  background:var(--bg-white); border-bottom:1px solid var(--border-light);
  padding:12px var(--pad) 22px; box-shadow:var(--shadow-lift);
  transform:translateY(-115%); transition:transform .32s var(--ease);
  max-height:calc(100vh - 68px); overflow-y:auto;
}
.mobile-nav[data-open="true"]{ transform:translateY(0); }
.mobile-nav a{
  display:block; padding:13px 0; text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:1rem; color:var(--heading);
  border-bottom:1px solid var(--border-light);
}
.mobile-nav a:last-of-type{ border-bottom:0; }
.mobile-nav .btn{ width:100%; margin-top:14px; }

/* ============================================================
   LANGUAGE SWITCH-BACK

   Shown only to a visitor the browser redirected, and only on
   that arrival. It sits above the hero rather than floating
   over it: a strip you read once and scroll past, not a thing
   to dismiss.
   ============================================================ */
.lang-switchback{
  background:var(--bg-sunk); border-bottom:1px solid var(--border-light);
  padding-block:11px; font-size:.88rem;
}
.lang-switchback .container{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; }
.lang-switchback p{ margin:0; color:var(--text-muted); }
.lang-switchback a{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--display); font-weight:700; color:var(--heading);
}
.lang-switchback a svg{ stroke:var(--secondary); stroke-width:2.4; fill:none; transition:transform .2s var(--ease); }
.lang-switchback a:hover svg{ transform:translateX(3px); }

/* ============================================================
   PANELS: navy hero and page headers
   ============================================================ */
.panel-navy{
  background:linear-gradient(135deg,#0a2540 0%,#1a3a5c 100%);
  border-radius:18px; position:relative; overflow:hidden;
  box-shadow:0 10px 36px rgba(10,37,64,.16);
  padding:clamp(40px,5.5vw,80px) clamp(24px,5vw,60px);
}
.panel-navy::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 85% 8%, rgba(201,162,39,.18) 0%, transparent 62%),
    radial-gradient(55% 60% at 8% 96%, rgba(45,138,110,.20) 0%, transparent 62%);
}
.panel-navy > *{ position:relative; z-index:1; }
.panel-navy h1,.panel-navy h2{ color:#fff; }
.panel-navy p{ color:rgba(255,255,255,.85); }

.hero{ padding-top:clamp(18px,2.6vw,32px); padding-bottom:clamp(8px,1.6vw,16px); }
.hero-panel{ text-align:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  padding:7px 18px; border-radius:50px; color:#e8c547;
  font-family:var(--display); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:24px;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:#3da882; flex:none; }
.hero-rotate{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.3; letter-spacing:-1px;
  color:#e8c547; min-height:1.3em;
}
#rotator{ display:inline-block; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.hero-sub{ font-size:clamp(1rem,1.5vw,1.18rem); max-width:620px; margin:16px auto 30px; line-height:1.65; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:30px; }

/* compact page header for inner pages */
.page-head{ padding-top:clamp(18px,2.6vw,32px); }
.page-head .panel-navy{ padding-block:clamp(34px,4.4vw,58px); }
.page-head h1{ margin-bottom:10px; }
.page-head p{ max-width:660px; font-size:1.04rem; }
.page-head .hero-meta{ justify-content:flex-start; margin-top:24px; }
.breadcrumb{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:var(--display); font-size:.76rem; font-weight:600;
  text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.6);
}
.breadcrumb a{ text-decoration:none; color:#e8c547; }

/* ============================================================
   CARDS, STATS, GRIDS
   ============================================================ */
.grid-2{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.card{
  background:var(--bg-white); border-radius:12px; padding:26px;
  box-shadow:var(--shadow-card); border:1px solid var(--border-light);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.card h4{ margin-bottom:8px; letter-spacing:-.3px; }
.card p{ font-size:.95rem; }
a.card{ text-decoration:none; display:block; }
a.card:hover{ border-color:var(--secondary); }

.card-icon{ width:44px; height:44px; border-radius:10px; margin-bottom:15px; background:var(--bg-cream); display:grid; place-items:center; }
.card-icon svg{ width:21px; height:21px; stroke:var(--heading); stroke-width:2; fill:none; }
.card-icon.gold{ background:var(--tint-gold); } .card-icon.gold svg{ stroke:var(--secondary); }
.card-icon.green{ background:var(--tint-green); } .card-icon.green svg{ stroke:var(--accent-green); }
.card-icon.red{ background:var(--tint-red); } .card-icon.red svg{ stroke:var(--warning); }
.card-icon.navy{ background:var(--tint-navy); } .card-icon.navy svg{ stroke:var(--heading); }

.stat-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.stat-card{
  background:var(--bg-white); border-radius:14px; padding:26px 20px; text-align:center;
  box-shadow:var(--shadow-card); border:1px solid var(--border-light);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.stat-card:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.stat-value{
  font-family:var(--display); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800;
  color:var(--heading); letter-spacing:-1px; margin-bottom:6px; line-height:1.1;
}
.stat-label{ font-size:.9rem; color:var(--text-muted); font-weight:500; line-height:1.5; }

.badge-number{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 14px; border-radius:50px;
  background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-light) 100%);
  color:#0a2540; font-family:var(--display); font-size:1.1rem; font-weight:800;
  box-shadow:0 4px 12px rgba(201,162,39,.20); flex:none;
}
.badge-number.navy{ background:linear-gradient(135deg,#0a2540 0%,#1a3a5c 100%); color:#fff; }
.badge-number.green{ background:linear-gradient(135deg,var(--accent-green) 0%,var(--accent-green-light) 100%); color:#fff; }
.badge-number.sm{ min-width:34px; height:34px; font-size:.88rem; padding:0 10px; }

/* ============================================================
   RISK PYRAMID AND ROLES
   ============================================================ */
.panel{
  background:var(--bg-white); border-radius:14px; padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--border-light); box-shadow:var(--shadow-card);
}
.panel-title{ display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--border-light); }
.panel-title h3{ font-size:1.15rem; }
.panel-title svg{ width:20px; height:20px; stroke:var(--secondary); stroke-width:2; fill:none; flex:none; }

.risk-pyramid{ display:flex; flex-direction:column; gap:10px; }
.risk-level{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:10px; border-left:5px solid; transition:transform .2s var(--ease); }
.risk-level:hover{ transform:translateX(4px); }
.risk-level.prohibited{ background:linear-gradient(90deg,var(--tint-red) 0%,transparent 100%); border-left-color:var(--warning); }
.risk-level.high{ background:linear-gradient(90deg,var(--tint-gold) 0%,transparent 100%); border-left-color:var(--secondary); }
.risk-level.limited{ background:linear-gradient(90deg,var(--tint-navy) 0%,transparent 100%); border-left-color:var(--primary-light); }
.risk-level.minimal{ background:linear-gradient(90deg,var(--tint-green) 0%,transparent 100%); border-left-color:var(--accent-green); }
.risk-label{ font-family:var(--display); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; min-width:104px; flex:none; }
.risk-level.prohibited .risk-label{ color:var(--warning); }
.risk-level.high .risk-label{ color:var(--secondary); }
.risk-level.limited .risk-label{ color:var(--heading); }
.risk-level.minimal .risk-label{ color:var(--accent-green); }
.risk-level > span:last-child{ font-size:.93rem; color:var(--text-muted); }

.role-list{ display:grid; gap:10px; }
.role-item{
  display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:10px;
  background:var(--bg-cream); border:1px solid var(--border-light);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.role-item:hover{ border-color:var(--secondary); }
.role-key{ font-family:var(--display); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--heading); min-width:98px; flex:none; padding-top:1px; }
.role-item p{ font-size:.93rem; margin:0; }

/* ============================================================
   CALLOUTS
   ============================================================ */
.callout{ display:flex; gap:15px; padding:20px 24px; border-radius:11px; border-left:5px solid; margin-top:22px; }
.callout svg{ width:21px; height:21px; stroke-width:2; fill:none; flex:none; margin-top:3px; }
.callout p{ font-size:.94rem; margin:0; }
.callout p + p{ margin-top:10px; }
.callout.note{ background:linear-gradient(90deg,var(--tint-gold) 0%,transparent 100%); border-left-color:var(--secondary); border-top:1px solid var(--tint-gold); border-right:1px solid var(--tint-gold); border-bottom:1px solid var(--tint-gold); }
.callout.note svg{ stroke:var(--secondary); }
.callout.tip{ background:linear-gradient(90deg,var(--tint-green) 0%,transparent 100%); border-left-color:var(--accent-green); border-top:1px solid var(--tint-green); border-right:1px solid var(--tint-green); border-bottom:1px solid var(--tint-green); }
.callout.tip svg{ stroke:var(--accent-green); }
.callout.warning{ background:linear-gradient(90deg,var(--tint-red) 0%,transparent 100%); border-left-color:var(--warning); border-top:1px solid var(--tint-red); border-right:1px solid var(--tint-red); border-bottom:1px solid var(--tint-red); }
.callout.warning svg{ stroke:var(--warning); }

/* ============================================================
   SCREENSHOT GALLERY (eu-access-blocker previews on the AI Engine
   Pro page: three small figures, not a full lightbox)
   ============================================================ */
.eu-gallery{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.eu-gallery figure{ margin:0; border:1px solid var(--border-light); border-radius:10px; overflow:hidden; background:var(--bg-cream); }
.eu-gallery img{ display:block; width:100%; height:auto; }
.eu-gallery figcaption{ padding:8px 10px; font-size:.78rem; color:var(--text-light); border-top:1px solid var(--border-light); }

/* ============================================================
   CHECKLISTS
   ============================================================ */
.checklist{ display:grid; }
.checklist li{ display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-bottom:1px solid var(--border-light); font-size:.94rem; color:var(--text-muted); }
.checklist li:last-child{ border-bottom:0; }
.check-icon{
  width:24px; height:24px; border-radius:7px; flex:none; margin-top:1px;
  background:linear-gradient(135deg,var(--accent-green) 0%,var(--accent-green-light) 100%);
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(45,138,110,.20);
}
.check-icon svg{ width:13px; height:13px; stroke:#fff; stroke-width:3; fill:none; }
.check-icon.empty{ background:transparent; border:2px solid var(--border-strong); box-shadow:none; }

.icon-list{ display:grid; gap:11px; }
.icon-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; color:var(--text-muted); }
.icon-list li svg{ width:17px; height:17px; stroke:var(--accent-green); stroke-width:2.6; fill:none; flex:none; margin-top:4px; }

/* ============================================================
   TIMELINE: structure from the production site
   ============================================================ */
.update-pill{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  margin-top:16px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--tint-green); background:var(--tint-green);
  color:var(--accent-green); font-family:var(--display); font-size:.76rem; font-weight:700; line-height:1.45;
}
.update-pill svg{ width:14px; height:14px; stroke:var(--accent-green); stroke-width:2.4; fill:none; flex:none; }

.aams-timeline{ position:relative; display:grid; gap:0; max-width:900px; }
.aams-timeline::before{
  content:""; position:absolute; top:18px; bottom:18px; left:154px; width:2px;
  background:linear-gradient(180deg,var(--secondary) 0%,var(--accent-green) 62%,var(--border-light) 100%);
  opacity:.6; border-radius:2px;
}
.aams-timeline li{ position:relative; display:grid; grid-template-columns:132px minmax(0,1fr); gap:44px; padding:14px 0; }
.aams-timeline li::before{
  content:""; position:absolute; top:24px; left:148px; width:14px; height:14px; border-radius:50%;
  border:3px solid var(--bg-cream); background:var(--border-strong); box-shadow:0 0 0 1px var(--border-light);
}
.aams-timeline li[data-state="past"]::before{ background:var(--secondary); box-shadow:0 0 0 1px rgba(201,162,39,.45); }
.aams-timeline li[data-state="current"]::before{ background:var(--accent-green); box-shadow:0 0 0 1px rgba(45,138,110,.45); }
.aams-timeline time{ padding-top:6px; text-align:right; font-family:var(--display); font-size:.76rem; font-weight:700; letter-spacing:.3px; color:var(--text-light); }
.aams-timeline li[data-state="past"] time{ color:var(--secondary); }
.aams-timeline li[data-state="current"] time{ color:var(--accent-green); }
.tl-card{
  padding:17px 22px; border:1px solid var(--border-light); border-radius:16px;
  background:var(--bg-white); box-shadow:var(--shadow-card);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.tl-card:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.aams-timeline li[data-state="current"] .tl-card{ border-color:var(--tint-green); }
.tl-card strong{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--heading); line-height:1.35; }
/* One milestone has a page behind it. The affordance goes on the title rather
   than the whole card, because the other five are not clickable and should not
   spend the hover pretending otherwise. */
.tl-card.has-link strong a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--heading); transition:color .18s var(--ease);
}
.tl-card.has-link strong a svg{ stroke:var(--secondary); stroke-width:2.4; flex:none; transition:transform .2s var(--ease); }
.tl-card.has-link strong a:hover{ color:var(--secondary); }
.tl-card.has-link strong a:hover svg{ transform:translateX(3px); }
.tl-card span{ display:block; margin-top:5px; color:var(--text-muted); font-size:.89rem; line-height:1.65; }

.timeline-now{
  position:relative; grid-column:2; display:flex; width:max-content; max-width:100%;
  align-items:center; gap:10px; margin:2px 0 8px; padding:8px 14px;
  border:1px solid var(--tint-green); border-radius:999px;
  background:linear-gradient(100deg,var(--tint-green),var(--tint-gold));
  box-shadow:0 4px 14px rgba(45,138,110,.12);
}
.timeline-now::before{ content:""; position:absolute; top:50%; right:100%; width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--accent-green)); }
.timeline-now strong{ font-family:var(--display); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-green); white-space:nowrap; }
.timeline-now time{ padding:0; text-align:left; font-size:.7rem; font-weight:700; color:var(--heading); white-space:nowrap; }

.timeline-note{
  max-width:900px; margin-top:26px; padding:24px 26px;
  border:1px solid var(--tint-green); border-left:3px solid var(--accent-green);
  border-radius:16px; background:var(--bg-white); box-shadow:var(--shadow-card);
}
.timeline-note h3{ font-size:1.16rem; margin-bottom:9px; }
.timeline-note p{ font-size:.94rem; }
.source-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.source-links a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px;
  text-decoration:none; border:1px solid var(--border-light); background:var(--bg-cream);
  font-family:var(--display); font-size:.81rem; font-weight:600; color:var(--heading);
  transition:border-color .18s var(--ease);
}
.source-links a:hover{ border-color:var(--secondary); }
.source-links svg{ width:13px; height:13px; stroke:var(--secondary); stroke-width:2.4; fill:none; }

@media(max-width:640px){
  .aams-timeline::before{ left:7px; }
  .aams-timeline li{ grid-template-columns:1fr; gap:7px; padding:11px 0 11px 30px; }
  .aams-timeline li::before{ top:18px; left:1px; }
  .aams-timeline time{ text-align:left; padding-top:0; }
  .tl-card{ padding:15px 17px; }
  .timeline-now{ grid-column:1; }
  .timeline-now::before{ display:none; }
}

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq{ max-width:820px; display:grid; gap:12px; }
.faq details{
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:12px;
  box-shadow:var(--shadow-card); overflow:hidden; transition:border-color .2s var(--ease);
}
.faq details[open]{ border-color:var(--secondary); }
.faq summary{
  list-style:none; cursor:pointer; padding:19px 54px 19px 24px; position:relative;
  font-family:var(--display); font-weight:700; font-size:1rem; color:var(--heading); line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:25px; width:9px; height:9px;
  border-right:2px solid var(--secondary); border-bottom:2px solid var(--secondary);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:29px; }
.faq .answer{ padding:0 24px 22px; }
.faq .answer p{ font-size:.95rem; }
.faq .answer p + p{ margin-top:11px; }

/* ============================================================
   FORMS
   ============================================================ */
.input,.select,.textarea{
  width:100%; padding:12px 14px; border-radius:10px; font-family:var(--body); font-size:.96rem;
  background:var(--bg-cream); color:var(--text-dark);
  border:1px solid var(--border-light); transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px var(--tint-gold); }
.textarea{ min-height:120px; resize:vertical; }
.check-row{ display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; font-size:.9rem; color:var(--text-muted); }
.check-row input{ margin-top:4px; accent-color:var(--accent-green); width:16px; height:16px; flex:none; }

.auth-wrap{ display:grid; gap:clamp(24px,3.5vw,44px); grid-template-columns:1fr; align-items:start; max-width:1000px; margin-inline:auto; }
@media(min-width:900px){ .auth-wrap{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); } }
.auth-card{ background:var(--bg-white); border:1px solid var(--border-light); border-radius:16px; padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lift); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#0a2540; color:rgba(255,255,255,.7); padding-block:clamp(42px,5vw,60px) 24px; margin-top:clamp(52px,6.5vw,88px); }
body.dark .site-footer{ background:#08111b; border-top:1px solid var(--border-light); }
.site-footer a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .18s var(--ease); }
.site-footer a:hover{ color:#e8c547; }
.footer-grid{ display:grid; gap:30px; grid-template-columns:1fr; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.14); }
@media(min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer-brand .logo-text{ color:#fff; }
.footer-brand p{ margin-top:13px; font-size:.92rem; color:rgba(255,255,255,.6); max-width:34ch; }
.site-footer h5{ font-family:var(--display); font-size:.75rem; text-transform:uppercase; letter-spacing:1.2px; color:#e8c547; font-weight:700; margin-bottom:13px; }
.site-footer ul{ display:grid; gap:10px; font-size:.92rem; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding-top:21px; font-size:.84rem; color:rgba(255,255,255,.45); }
.footer-langs{ display:flex; gap:16px; margin-left:auto; font-weight:600; }
.footer-langs a[aria-current="true"]{ color:#e8c547; }

/* ============================================================
   CLOSING PANEL
   ============================================================ */
.closing{
  background:linear-gradient(135deg,#2d8a6e 0%,#3da882 100%);
  border-radius:18px; padding:clamp(40px,5.5vw,66px) clamp(24px,5vw,56px);
  text-align:center; color:#fff; box-shadow:0 8px 28px rgba(45,138,110,.18);
}
.closing h2{ color:#fff; margin-bottom:15px; }
.closing p{ color:rgba(255,255,255,.92); max-width:560px; margin:0 auto 26px; font-size:1.03rem; }
.closing .btn-ghost{ background:#fff; color:#0a2540; border-color:#fff; }
.closing .cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ============================================================
   READING LAYOUT (guide, legal, article pages)
   ============================================================ */
.reading{ display:grid; gap:clamp(26px,3.5vw,52px); grid-template-columns:1fr; align-items:start; }
@media(min-width:1000px){ .reading{ grid-template-columns:260px minmax(0,1fr); } }
.toc{
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:14px;
  padding:22px; box-shadow:var(--shadow-card);
}
@media(min-width:1000px){ .toc{ position:sticky; top:88px; max-height:calc(100vh - 120px); overflow-y:auto; } }
.toc h5{ font-family:var(--display); font-size:.74rem; text-transform:uppercase; letter-spacing:1.3px; color:var(--secondary); margin-bottom:14px; }
.toc ol{ display:grid; gap:2px; counter-reset:toc; }
.toc a{
  display:flex; gap:11px; align-items:baseline; padding:8px 10px; border-radius:8px;
  text-decoration:none; font-size:.89rem; color:var(--text-muted); line-height:1.45;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.toc a:hover,.toc a.is-active{ background:var(--bg-cream); color:var(--heading); }
.toc a.is-active{ font-weight:600; }
.toc a .n{ font-family:var(--display); font-weight:700; font-size:.76rem; color:var(--secondary); min-width:16px; flex:none; }

.chapter{ margin-bottom:clamp(38px,5vw,62px); scroll-margin-top:92px; }
.chapter-header{ display:flex; align-items:center; gap:20px; margin-bottom:24px; padding-bottom:20px; border-bottom:2px solid var(--border-light); }
.chapter-number{
  width:56px; height:56px; border-radius:14px; flex:none;
  background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-light) 100%);
  display:grid; place-items:center; color:#0a2540;
  font-family:var(--display); font-size:1.5rem; font-weight:800;
  box-shadow:0 4px 12px rgba(201,162,39,.18);
}
.chapter-label{ font-family:var(--display); font-size:.73rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--secondary); font-weight:700; margin-bottom:3px; }
.chapter h2{ font-size:clamp(1.4rem,2.4vw,1.85rem); }
.prose p{ margin-bottom:15px; font-size:1rem; line-height:1.75; }
.prose h3{ margin:28px 0 12px; }
.prose h4{ margin:22px 0 9px; }
.prose ul{ display:grid; gap:9px; margin:0 0 16px; }
.prose ul li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:var(--text-muted); }
.prose ul li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--secondary); flex:none; margin-top:.62em; }
.prose strong{ color:var(--heading); }
.prose a{ color:var(--accent-green); text-underline-offset:3px; }

/* Definition pairs in a reading column: legal terms, contact rows. The term
   carries the weight and the definition sits under it, indented enough to read
   as subordinate without becoming a second column that breaks on a phone. */
.legal-dl{ margin:0 0 18px; display:grid; gap:0; }
.legal-dl dt{
  font-family:var(--display); font-weight:700; font-size:.97rem; color:var(--heading);
  padding-top:14px;
}
.legal-dl dd{
  margin:4px 0 0; padding-bottom:14px; border-bottom:1px solid var(--border-light);
  font-size:.97rem; line-height:1.7; color:var(--text-muted);
}
.legal-dl dd:last-of-type{ border-bottom:0; }

/* ============================================================
   ASSESSMENT (RRCS) FLOW
   ============================================================ */
.rrcs-shell{ max-width:760px; margin-inline:auto; }
.progress{ margin-bottom:26px; }
.progress-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; font-family:var(--display); font-size:.78rem; font-weight:700; }
.progress-meta .step{ color:var(--secondary); text-transform:uppercase; letter-spacing:1.1px; }
.progress-meta .pct{ color:var(--text-light); }
.progress-track{ height:6px; border-radius:99px; background:var(--border-light); overflow:hidden; }
.progress-bar{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--secondary),var(--accent-green)); transition:width .4s var(--ease); }

.question-card{
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:16px;
  padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lift);
}
.question-card .q-label{ font-family:var(--display); font-size:.74rem; text-transform:uppercase; letter-spacing:1.3px; color:var(--secondary); font-weight:700; margin-bottom:10px; }
.question-card h2{ font-size:clamp(1.3rem,2.3vw,1.65rem); margin-bottom:8px; }
.question-card > p{ font-size:.96rem; margin-bottom:22px; }
.options{ display:grid; gap:10px; }
.option{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px; cursor:pointer;
  border:1px solid var(--border-light); border-radius:12px; background:var(--bg-cream);
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.option:hover{ border-color:var(--secondary); }
.option input{ position:absolute; opacity:0; pointer-events:none; }
.option .mark{
  width:22px; height:22px; border-radius:7px; flex:none; margin-top:2px;
  border:2px solid var(--border-strong); display:grid; place-items:center;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.option .mark svg{ width:12px; height:12px; stroke:#fff; stroke-width:3.2; fill:none; opacity:0; transition:opacity .18s var(--ease); }
.option input:checked ~ .mark{ background:var(--accent-green); border-color:var(--accent-green); }
.option input:checked ~ .mark svg{ opacity:1; }
.option:has(input:checked){ border-color:var(--accent-green); background:var(--tint-green); box-shadow:0 0 0 3px var(--tint-green); }
.option .opt-text{ display:grid; gap:3px; }
.option .opt-title{ font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--heading); }

.q-nav{ display:flex; gap:12px; align-items:center; margin-top:24px; }
.q-nav .btn-back{ margin-right:auto; }

.result-panel{ background:var(--bg-white); border:1px solid var(--border-light); border-radius:16px; padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lift); }
.signal-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:20px 0; }
.signal{ padding:18px 20px; border-radius:12px; border:1px solid var(--border-light); background:var(--bg-cream); }
.signal .k{ font-family:var(--display); font-size:.72rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-light); font-weight:700; margin-bottom:6px; }
.signal .v{ font-family:var(--display); font-size:1.24rem; font-weight:800; color:var(--heading); line-height:1.25; }
.signal.is-gold{ border-color:var(--tint-gold); background:linear-gradient(135deg,var(--tint-gold),transparent); }
.signal.is-gold .v{ color:var(--secondary); }
.signal.is-green{ border-color:var(--tint-green); background:linear-gradient(135deg,var(--tint-green),transparent); }
.signal.is-green .v{ color:var(--accent-green); }
.signal.is-red{ border-color:var(--tint-red); background:linear-gradient(135deg,var(--tint-red),transparent); }
.signal.is-red .v{ color:var(--warning); }

/* ============================================================
   DASHBOARD / WORKSPACE
   ============================================================ */
.ws{ display:grid; gap:clamp(20px,2.6vw,32px); grid-template-columns:1fr; align-items:start; }
@media(min-width:960px){ .ws{ grid-template-columns:250px minmax(0,1fr); } }
.ws-welcome{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.ws-avatar{ width:44px; height:44px; border-radius:11px; flex:none; background:linear-gradient(135deg,#0a2540,#1a3a5c); display:grid; place-items:center; font-family:var(--display); font-weight:800; color:#e8c547; overflow:hidden; }
.ws-avatar-mark{ width:100%; height:100%; object-fit:cover; display:block; }
.ws-welcome .t{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:1rem; }
.ws-welcome .s{ font-size:.86rem; color:var(--text-light); }
.empty-state{ text-align:center; padding:38px 24px; border:1px dashed var(--border-strong); border-radius:14px; background:var(--bg-cream); }
.empty-state .card-icon{ margin:0 auto 14px; }
.empty-state h4{ margin-bottom:7px; }
.empty-state p{ font-size:.93rem; max-width:44ch; margin:0 auto 18px; }

/* ============================================================
   LANGUAGE GATEWAY
   ============================================================ */
.gateway-note{
  display:flex; gap:13px; align-items:flex-start; max-width:640px; margin:22px auto 0;
  padding:16px 20px; border-radius:12px; text-align:left;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.gateway-note svg{ width:19px; height:19px; stroke:#e8c547; stroke-width:2; fill:none; flex:none; margin-top:3px; }
.gateway-note p{ font-size:.92rem; color:rgba(255,255,255,.85); margin:0; }

/* ============================================================
   REVEAL AND MOTION
   ============================================================ */
html.js .rv{ opacity:0; transform:translateY(16px); }
html.js .rv.in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }

[id]{ scroll-margin-top:86px; }

@media(max-width:600px){
  .hero-cta .btn,.closing .cta .btn{ width:100%; }
  .risk-level{ flex-direction:column; align-items:flex-start; gap:6px; }
  .role-item{ flex-direction:column; gap:4px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .footer-langs{ margin-left:0; }
  .chapter-header{ flex-direction:column; align-items:flex-start; gap:12px; }
  .q-nav{ flex-direction:column-reverse; align-items:stretch; }
  .q-nav .btn{ width:100%; }
}

@media(prefers-reduced-motion:reduce){
  html.js .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed !important; top:12px; left:12px; z-index:200;
  width:auto; height:auto; clip:auto; margin:0; padding:12px 20px;
  background:var(--primary); color:#fff; border-radius:9px;
  font-family:var(--display); font-weight:700; font-size:.9rem; text-decoration:none;
}
:focus-visible{ outline:2px solid var(--secondary); outline-offset:2px; }

/* WordPress alignment and caption defaults */
.alignleft{ float:left; margin:0 1.4em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.4em; }
.aligncenter{ display:block; margin-inline:auto; }
.wp-caption-text{ font-size:.85rem; color:var(--text-light); margin-top:7px; }

/* ============================================================
   HOMEPAGE COMPOSITIONS
   ============================================================ */
.concepts{ display:grid; gap:clamp(20px,2.6vw,32px); grid-template-columns:1fr; align-items:start; }
@media(min-width:960px){ .concepts{ grid-template-columns:1fr 1fr; } }

.rrcs-wrap{ display:grid; gap:clamp(24px,3.2vw,42px); grid-template-columns:1fr; align-items:start; }
@media(min-width:1000px){ .rrcs-wrap{ grid-template-columns:minmax(0,1fr) minmax(320px,.78fr); } }
.rrcs-steps{ display:grid; gap:14px; }
.rrcs-step{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  background:var(--bg-cream); border:1px solid var(--border-light); border-radius:12px;
  padding:20px 22px; box-shadow:var(--shadow-card);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.rrcs-step:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.rrcs-step h4{ margin-bottom:4px; }
.rrcs-step p{ font-size:.94rem; margin:0; }

.price-card{
  background:var(--bg-cream); border-radius:16px; padding:clamp(24px,2.8vw,32px);
  border:1px solid var(--border-light); box-shadow:var(--shadow-lift);
  position:relative; overflow:hidden;
}
.price-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--secondary) 0%,var(--accent-green) 100%);
}
.price-value{
  font-family:var(--display); font-size:clamp(2.4rem,4.5vw,3rem); font-weight:800;
  color:var(--heading); letter-spacing:-1.5px; line-height:1; margin:12px 0 4px;
}
.price-note{ font-size:.88rem; color:var(--text-light); margin-bottom:20px; }
.price-card .checklist{ margin-bottom:22px; }
.price-card small{ display:block; text-align:center; margin-top:13px; font-size:.81rem; color:var(--text-light); }

.res-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--bg-cream); border:1px solid var(--border-light); border-radius:14px;
  padding:clamp(22px,2.8vw,30px); box-shadow:var(--shadow-card);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.res-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); border-color:var(--secondary); }
.res-card h3{ margin:12px 0 9px; }
.res-card p{ font-size:.96rem; }
.res-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.res-tags .pill{ font-size:.75rem; font-weight:600; }
.res-go{
  margin-top:auto; padding-top:20px;
  font-family:var(--display); font-weight:700; font-size:.91rem; color:var(--heading);
  display:flex; align-items:center; gap:8px;
}
.res-go svg{ stroke:var(--secondary); transition:transform .2s var(--ease); }
.res-card:hover .res-go svg{ transform:translateX(4px); }

.auth-band-grid{ display:grid; gap:clamp(24px,3.6vw,50px); grid-template-columns:1fr; align-items:center; }
@media(min-width:920px){ .auth-band-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.author-head{ display:flex; align-items:center; gap:15px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border-light); }
.author-name{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:1.06rem; }
.author-role{ font-size:.89rem; color:var(--text-muted); }

/* On a white section the nested cream cards need to read as raised, not sunk. */
.section--white .rrcs-step,
.section--white .res-card,
.section--white .price-card{ background:var(--bg-white); }
body.dark .section--white .rrcs-step,
body.dark .section--white .res-card,
body.dark .section--white .price-card{ background:var(--bg-sunk); }

.site-footer li{ list-style:none; }
.mobile-nav li{ list-style:none; }

/* Ghost button on the green closing panel needs a firmer edge than it does on navy. */
.closing .btn-onnavy{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); }
.closing .btn-onnavy:hover{ background:rgba(255,255,255,.26); border-color:#fff; }

/* ============================================================
   MATRIX TABLES (library)
   ============================================================ */
.matrix{ width:100%; border-collapse:separate; border-spacing:0; font-size:.93rem; }
.matrix-wrap{ overflow-x:auto; border:1px solid var(--border-light); border-radius:14px; background:var(--bg-white); box-shadow:var(--shadow-card); }
.matrix th,.matrix td{ padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border-light); }
.matrix thead th{
  font-family:var(--display); font-size:.73rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1.1px; color:var(--secondary); background:var(--bg-cream); white-space:nowrap;
}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{ border-bottom:0; }
.matrix tbody th{ font-family:var(--display); font-weight:700; color:var(--heading); white-space:nowrap; }
.matrix td{ color:var(--text-muted); }
.matrix tbody tr:hover td,.matrix tbody tr:hover th{ background:var(--bg-cream); }

/* ============================================================
   GLOSSARY
   ============================================================ */
.glossary-tools{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.glossary-tools .input{ max-width:320px; }
.alpha{ display:flex; flex-wrap:wrap; gap:5px; }
.alpha button{
  min-width:30px; height:30px; padding:0 7px; border-radius:8px; cursor:pointer;
  background:var(--bg-white); border:1px solid var(--border-light); color:var(--text-muted);
  font-family:var(--display); font-weight:700; font-size:.79rem;
  transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.alpha button:hover:not(:disabled){ border-color:var(--secondary); color:var(--heading); }
.alpha button[aria-pressed="true"]{ background:var(--secondary); border-color:var(--secondary); color:#0a2540; }
.alpha button:disabled{ opacity:.3; cursor:default; }
.glossary{ display:grid; gap:10px; }
.glossary-item{
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:12px;
  padding:16px 20px; box-shadow:var(--shadow-card);
}
.glossary-item[hidden]{ display:none; }
.glossary-item dt{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:1rem; margin-bottom:4px; }
.glossary-item dd{ margin:0; font-size:.93rem; color:var(--text-muted); line-height:1.6; }
.glossary-item .ref{ display:inline-block; margin-top:7px; font-family:var(--display); font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--secondary); }
.glossary-empty{ text-align:center; padding:30px; color:var(--text-light); font-size:.94rem; }

/* ============================================================
   GUIDE: chapter list and edition picker
   ============================================================ */
.chapter-list{ display:grid; gap:12px; max-width:900px; }
.chapter-row{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:12px;
  padding:20px 22px; box-shadow:var(--shadow-card);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.chapter-row:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); border-color:var(--secondary); }
.chapter-row .chapter-number{ width:46px; height:46px; border-radius:12px; font-size:1.2rem; }
.chapter-row h3{ font-size:1.14rem; margin-bottom:5px; }
.chapter-row p{ font-size:.93rem; margin:0; }

/* The dropdown fast path, above the twelve cards. */
.edition-picker{
  max-width:900px; margin-bottom:26px; padding:22px clamp(18px,2.4vw,26px);
  background:var(--bg-cream); border:1px solid var(--border-light); border-radius:14px;
  box-shadow:var(--shadow-card);
}
body.dark .section--white .edition-picker{ background:var(--bg-sunk); }
.picker-label{
  display:block; margin-bottom:10px;
  font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--heading);
}
.picker-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.picker-row .select{ flex:1 1 260px; width:auto; }
.picker-row .picker-go{ flex:none; }
.picker-result{
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--border-light);
}
.picker-result h4{ margin-bottom:4px; }
.picker-result p{ font-size:.91rem; margin:0; max-width:52ch; }
.picker-result .btn{ flex:none; }
.picker-or{
  max-width:900px; margin-bottom:16px;
  font-family:var(--display); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.1px; color:var(--text-light);
}

.edition-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.edition{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--bg-cream); border:1px solid var(--border-light); border-radius:14px;
  padding:22px; box-shadow:var(--shadow-card);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.edition:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); border-color:var(--secondary); }
.edition h4{ margin-bottom:7px; }
.edition p{ font-size:.91rem; flex:1; }
.edition-go{
  display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--border-light);
  font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--heading);
}
.edition-go svg{ stroke:var(--accent-green); transition:transform .2s var(--ease); }
.edition:hover .edition-go svg{ transform:translateY(2px); }
.edition.is-wanted{
  border-color:var(--accent-green); box-shadow:0 0 0 3px var(--tint-green), var(--shadow-lift);
}
body.dark .section--white .edition{ background:var(--bg-sunk); }

/* ============================================================
   [hidden] must actually hide.
   The UA rule is [hidden]{display:none}, which any class that sets
   display (.btn, .pill, .option, .card...) outranks on specificity.
   Anything toggled by JS needs this or it stays visible.
   ============================================================ */
[hidden]{ display:none !important; }

/* ============================================================
   RRCS intake
   ============================================================ */
.rrcs-field{ margin-bottom:20px; }
.rrcs-field:last-of-type{ margin-bottom:0; }
.rrcs-q{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:6px;
  font-family:var(--display); font-weight:700; font-size:1rem; color:var(--heading); line-height:1.45;
}
.rrcs-field .hint{ font-size:.87rem; color:var(--text-light); margin-bottom:10px; line-height:1.55; }
.rrcs-field .input,
.rrcs-field .textarea{ margin-top:4px; }
.rrcs-error{
  margin-top:9px; font-size:.86rem; font-weight:600; color:var(--warning);
  font-family:var(--display);
}

/* The character counter sits under its field, quiet until it matters.
   text-align:right keeps it out of the reading path: the eye follows the
   left edge down the question, and the count waits at the end of the box
   where the cursor already is. */
.char-count{
  margin:6px 0 0; text-align:right;
  font-family:var(--display); font-size:.76rem; font-weight:600;
  color:var(--text-light); font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}
.char-count.is-near{ color:var(--secondary); }
.char-count.is-full{ color:var(--warning); }
.rrcs-field.has-error .option,
.rrcs-field.has-error .input,
.rrcs-field.has-error .textarea{ border-color:var(--warning); }
.question-card h2:focus{ outline:none; }
.question-card h2:focus-visible{ outline:2px solid var(--secondary); outline-offset:3px; }

/* ============================================================
   RRCS report

   The snapshot the visitor leaves with, and often the first thing
   they show a colleague. It reads as a short document rather than a
   dashboard: a masthead, a few analysed sections, their own answers
   back, and an honest statement of what it is not.

   Deliberately absent: a readiness percentage and a gap chart. The
   number belongs to the signed-in workspace, the chart to paid work.
   ============================================================ */

/* The result container is a card in its own right. When it holds a report,
   the report supplies the surface, so the outer one steps aside. */
.result-panel.is-report{
  padding:0; border:0; background:none; box-shadow:none; border-radius:0;
}

.rrcs-report{
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

/* -- masthead -------------------------------------------------- */
.report-head{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
  color:#fff;
  padding:clamp(24px,3.4vw,38px);
}
/* The signature. Sized by height like the header mark, for the same reason:
   the gauge is roughly 1.9:1 and a square slot would letterbox it. */
.report-brand{
  display:flex; align-items:center; gap:11px;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.report-mark{ height:32px; width:auto; flex:none; display:block; }
.report-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.report-brand-name{
  font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:.4px; color:#fff;
}
.report-brand-sub{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.3px; color:rgba(255,255,255,.6);
}

.report-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.report-head h2{ color:#fff; margin:0 0 10px; font-size:clamp(1.5rem,3vw,2rem); }
.report-lead{
  color:rgba(255,255,255,.82); max-width:62ch; line-height:1.7; margin:0;
}
.report-meta{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.meta-item{ display:flex; flex-direction:column; gap:2px; }
.meta-k{
  font-family:var(--display); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.55);
}
.meta-v{ font-family:var(--display); font-weight:700; font-size:.92rem; color:#fff; }

/* -- body blocks ----------------------------------------------- */
.report-block{
  padding:clamp(22px,3vw,32px);
  border-bottom:1px solid var(--border-light);
}
.report-block > h3{ margin:0 0 6px; font-size:clamp(1.15rem,2vw,1.35rem); }
.report-block .eyebrow{ margin-bottom:8px; }
.block-lead{ color:var(--text-muted); max-width:66ch; margin:0 0 18px; }
.report-block .signal-grid{ margin:18px 0 0; }
.signal .why{
  margin:8px 0 0; font-size:.88rem; line-height:1.6; color:var(--text-muted);
}

/* -- provisions ------------------------------------------------ */
.provision-list{ display:grid; gap:12px; margin-top:18px; }
.provision{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; border-radius:12px;
  background:var(--bg-cream); border:1px solid var(--border-light);
  border-left:3px solid var(--secondary);
}
.provision-ref{
  font-family:var(--display); font-weight:800; font-size:.76rem;
  letter-spacing:.4px; color:var(--secondary);
  background:var(--tint-gold); border-radius:6px; padding:5px 9px; white-space:nowrap;
}
.provision-body h4{ margin:0 0 4px; font-size:1rem; }
.provision-body p{ margin:0; font-size:.92rem; line-height:1.65; color:var(--text-muted); }
/* Article 50 splits its duties between provider and deployer, and which one
   applies to the reader matters more than the wording of the duty. */
.provision-body .ref{
  display:inline-block; margin-top:9px;
  font-family:var(--display); font-size:.71rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--text-light);
}

/* -- the visitor's own answers --------------------------------- */
.answer-list{ margin:0; display:grid; gap:0; }
.answer-list dt{
  font-family:var(--display); font-weight:700; font-size:.82rem;
  color:var(--text-light); text-transform:none; letter-spacing:0;
  padding-top:14px;
}
.answer-list dd{
  margin:2px 0 0; padding-bottom:14px;
  border-bottom:1px solid var(--border-light);
  color:var(--text-dark); font-size:.95rem; line-height:1.6;
}
.answer-list dd:last-child{ border-bottom:0; padding-bottom:0; }
.answer-multi{ margin:0; padding-left:1.05em; display:grid; gap:5px; }
.answer-multi li{ margin:0; }

@media(min-width:720px){
  /* Two columns. Leaving align-items at its stretch default is what keeps the
     term and its value the same height, so their rules line up as one rule
     across the row instead of two stubs at different heights. */
  .answer-list{ grid-template-columns:minmax(180px,34%) 1fr; column-gap:24px; }
  .answer-list dt{ padding-bottom:14px; border-bottom:1px solid var(--border-light); }
  .answer-list dd{ margin-top:0; padding-top:14px; }
  .answer-list dt:last-of-type,
  .answer-list dd:last-of-type{ border-bottom:0; }
}

/* -- limits and the offer -------------------------------------- */
.report-limits{ margin:0; border-radius:0; border-left-width:3px; }
.report-cta{ padding:clamp(22px,3vw,32px); background:var(--bg-sunk); }
.report-cta h3{ margin:0 0 8px; }
.report-cta p{ margin:0; color:var(--text-muted); max-width:64ch; line-height:1.7; }
.report-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }

/* Paper only. On screen the two buttons above are the way back to us. */
.report-byline{ display:none; }

/* -- print: the snapshot is meant to be kept -------------------- */
@media print{
  /* Everything that is not the snapshot. The questionnaire, the progress bar
     the visitor has finished with, the site chrome and the intake notices all
     go: what prints is the document, starting at its masthead. */
  .site-header,.site-footer,.mobile-nav,.report-actions,
  .question-card,.progress,.q-nav,.page-head,
  #rrcsPrivacyNote,.rrcs-shell > .callout{ display:none !important; }
  .rrcs-report{ border:0; box-shadow:none; }
  .report-head{
    background:none !important; color:var(--heading) !important;
    border-bottom:2px solid var(--primary); padding-left:0; padding-right:0;
  }
  .report-head h2,.meta-v{ color:var(--heading) !important; }
  .report-lead{ color:var(--text-muted) !important; }
  .meta-k{ color:var(--text-light) !important; }
  /* Deliberately no break-inside:avoid on the block itself. A block can run
     longer than a page, and when it does the rule cannot be honoured: the
     renderer pushes the whole thing to the next page and leaves half of this
     one empty. Keeping breaks off the atoms inside is what actually works. */
  .report-block,.report-cta{ padding-left:0; padding-right:0; }
  .report-block > h3,.report-block .eyebrow,.block-lead{ break-after:avoid; }
  .block-lead{ break-inside:avoid; }
  /* No single line left stranded at the foot or head of a page. */
  p,dd{ orphans:3; widows:3; }
  .report-cta{ background:none; break-inside:avoid; }

  /* The masthead loses its navy ground, so the brand row loses the light
     rule and light text that only worked against it. */
  .report-brand{ border-bottom:0; padding-bottom:0; }
  .report-brand-name{ color:var(--heading) !important; }
  .report-brand-sub{ color:var(--text-light) !important; }

  /* Nothing should straddle a page break: not an article and its reason,
     not a step and its detail, not a question and the answer given to it. */
  .provision,.signal,.rrcs-step,.report-limits{ break-inside:avoid; }
  .answer-list dt{ break-after:avoid; }
  .answer-list dd{ break-before:avoid; }

  .report-byline{
    display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between;
    margin:18px 0 0; padding-top:12px;
    border-top:1px solid var(--border-light);
    font-family:var(--display); font-size:.72rem; color:var(--text-light);
  }

  /* The disclosure generator's document preview, printed on its own. JS
     reparents #disclosure-doc to be a direct child of <body> just before
     calling window.print(), so hiding every other direct child is enough to
     print the document alone regardless of how deep it normally sits. */
  body.printing-disclosure{ background:#fff !important; }
  body.printing-disclosure > *:not(.disclosure-doc){ display:none !important; }
  body.printing-disclosure .disclosure-doc{ border:0; box-shadow:none; padding:0; }
}

/* ============================================================
   DISCLOSURE GENERATOR (Legge 132/2025)
   ============================================================ */
.disclosure-doc{
  background:#fff; color:#1a1a1a; border:1px solid var(--border-light); border-radius:10px;
  padding:32px; font-family:Georgia,'Times New Roman',serif; line-height:1.6; font-size:.95rem;
}
.disclosure-doc h2{ font-family:Georgia,'Times New Roman',serif; font-size:1.15rem; margin-bottom:4px; color:#1a1a1a; text-align:center; }
.disclosure-doc .doc-ref{ font-size:.82rem; color:#555; margin-bottom:18px; text-align:center; }
.disclosure-doc:focus{ outline:2px solid var(--secondary); outline-offset:4px; }
.disclosure-doc .doc-small{ font-size:.8rem; color:#555; margin-top:14px; }
.disclosure-doc ol{ margin:0 0 14px; padding-left:22px; }
.disclosure-doc ol li{ margin-bottom:10px; }
.disclosure-doc .doc-sign{
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  margin-top:26px; padding-top:16px; border-top:1px solid #ddd; font-size:.85rem;
}
button.disclosure-pick{ font:inherit; color:inherit; }
button.disclosure-pick:focus-visible{ outline:2px solid var(--secondary); outline-offset:2px; }