/* ==========================================================================
   سماي 2 — the stylesheet every page carries
   One rule per line. A lesson adds its own rules after these (src/lessons/u{u}l{n}.css) and a shared
   component brings its own (src/components/<name>.css); neither restyles what is here.

     1. Tokens       the brand and the closed scales everything is built from
     2. Document     defaults
     3. Primitives   card, tile, badge, card head, grid
     4. Chrome       progress, brand bar, tabs, sections, hero, headings
     5. Common       the few blocks many lessons share: hint tag, keyline, button
     6. Summary      recap cards, bridge, references
     7. Overview     goals, contents, terms
     8. Responsive, motion, print
   ========================================================================== */


/* ==== 1 · Tokens ========================================================= */

/* The five official SAMAI 2 brand colours. Nothing else counts as brand. */
:root{--primary:#2F3068;--teal:#00AD8B;--green:#7FC242;--grey:#7B868C;--black:#101820}

/* Brand ramp: tints and shades of the five, for gradients and hover states. */
:root{--primary-2:#3E4089;--teal-2:#00806A;--green-2:#5E9430;--green-3:#A8DC7C}

/* Text and surfaces. Muted text is the brand grey taken down to 4.9:1 on white; the grey itself is 3.7:1. */
:root{--ink:#101820;--muted:#66727A;--page:#F4F7F9;--page-top:#FBFDFF;--surface:#FFFFFF;--surface-soft:#F7FAFB;--surface-veil:#FFFFFFFA}

/* On a dark or brand-coloured ground. */
:root{--on-dark:#FFFFFF;--on-dark-soft:#FFFFFFF2;--on-dark-muted:#FFFFFF9E;--on-dark-accent:#A8DC7C}

/* Translucent tints: the way one brand colour is laid over another. */
:root{--border:#2F30681C;--border-strong:#00AD8B45;--tint-primary:#2F30680D;--tint-primary-2:#2F30681A;--tint-teal:#00AD8B12;--tint-teal-2:#00AD8B21;--tint-green:#7FC2421F;--tint-green-2:#7FC2422B;--veil:#FFFFFF1F;--veil-strong:#FFFFFF38;--veil-line:#FFFFFF29;--veil-sheen:#FFFFFF59;--tint-danger:#C0392B0F;--border-danger:#C0392B66;--tint-warning:#B789001F;--border-warning:#B7890059;--border-green:#7FC2428C;--scrim:#10182030}

/* Glows: soft brand light, only ever behind or under something. */
:root{--glow-teal:#00AD8B2E;--glow-green:#7FC2421F;--glow-hero:#7FC2424D}

/* State colours, outside the brand: correctness feedback only. */
:root{--danger:#C0392B;--warning:#B78900;--success:#00806A}

/* Category colours for the classification activities. */
:root{--cat-r:#00AD8B;--cat-i:#7FC242;--cat-c:#E0A128;--cat-e:#8E5FB0;--tint-cat-c:#E0A1281F;--tint-cat-e:#8E5FB01F;--border-cat-e:#8E5FB066}

/* Scales. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px}
:root{--radius-2xs:9px;--radius-xs:11px;--radius-sm:14px;--radius-md:18px;--radius-lg:22px;--radius-xl:24px;--radius-pill:999px}
:root{--shadow:0 14px 30px #2F306812,0 2px 8px #10182008;--shadow-hover:0 22px 46px #2F306824;--shadow-card:0 4px 12px #2F30680F;--shadow-bar:0 8px 24px #1018204D;--shadow-nav:0 8px 22px #2F306817;--shadow-active:0 6px 16px #2F306829;--shadow-hero:0 18px 40px #2F306838,0 2px 6px #2F30681A;--shadow-text:0 2px 10px #10182026;--shadow-logo:drop-shadow(0 2px 6px #10182073);--shadow-raised:0 10px 24px #2F306838}
:root{--text-3xs:10.5px;--text-2xs:11.5px;--text-xs:12.5px;--text-sm:13px;--text-md:14px;--text-base:14.5px;--text-lg:15.5px;--text-xl:17px;--text-2xl:20px;--text-3xl:22px;--text-h2:clamp(21px,2.3vw,27px);--text-hero:min(42px,calc(4.3vw - 3px));--text-hero-lead:clamp(15px,1.3vw,18px);--text-nav:clamp(11.5px,1.05vw,13.5px)}
:root{--leading-tight:1.35;--leading-snug:1.5;--leading-relaxed:1.75;--leading-normal:1.85;--leading-loose:1.95;--weight-normal:500;--weight-medium:700;--weight-bold:800;--weight-black:900}
:root{--font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;--width:1180px;--gutter:14px;--scroll-offset:88px;--logo-height:36px}

/* The names the lessons' own stylesheets were written with, as the brand. */
:root{--g1:var(--primary);--g2:var(--teal);--g3:var(--green);--body:var(--ink);--card:var(--surface);--soft:var(--surface-soft);--hover:var(--shadow-hover);--bad:var(--danger);--warn:var(--warning);--good:var(--success);--R:var(--cat-r);--I:var(--cat-i);--C:var(--cat-c);--E:var(--cat-e)}

/* A tone recolours a block and the primitives inside it together. */
:root{--tone:var(--primary);--tone-2:var(--teal);--tone-ink:var(--primary);--tone-tint:var(--tint-primary)}
.tone-primary{--tone:var(--primary);--tone-2:var(--primary-2);--tone-ink:var(--primary);--tone-tint:var(--tint-primary)}
.tone-teal{--tone:var(--teal);--tone-2:var(--teal-2);--tone-ink:var(--teal-2);--tone-tint:var(--tint-teal)}
.tone-green{--tone:var(--green);--tone-2:var(--green-2);--tone-ink:var(--green-2);--tone-tint:var(--tint-green)}
.tone-warning{--tone:var(--warning);--tone-2:var(--cat-c);--tone-ink:var(--warning);--tone-tint:var(--tint-warning)}
.tone-danger{--tone:var(--danger);--tone-2:var(--danger);--tone-ink:var(--danger);--tone-tint:var(--tint-danger)}


/* ==== 2 · Document ======================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%;margin:0;padding:0;overflow-x:clip}
body{font-family:var(--font);color:var(--ink);line-height:var(--leading-normal);background:radial-gradient(1100px 560px at 92% -12%,var(--tint-teal),transparent 60%),radial-gradient(900px 500px at -8% 34%,var(--tint-green),transparent 55%),linear-gradient(180deg,var(--page-top) 0%,var(--page) 100%);background-origin:border-box}
button,input,textarea,select{font-family:inherit}
button,a,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:var(--tint-primary)}
code,kbd,pre,samp{font-family:inherit}
a{color:var(--primary)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}


/* ==== 3 · Primitives ===================================================== */

/* The one bordered surface. A block that needs a border, a corner, a ground and a shadow is a card. */
.card{position:relative;min-width:0;padding:var(--space-5);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow)}
.card-bare{padding:0}
.card-tight{padding:var(--space-3);border-radius:var(--radius-xs);box-shadow:var(--shadow-card)}
.card-snug{padding:var(--space-4);border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}
.card-wide{padding:var(--space-6);border-radius:var(--radius-lg)}
.card-soft{background:linear-gradient(180deg,var(--surface),var(--surface-soft));background-origin:border-box}
.card-sunken{background:var(--surface-soft);box-shadow:none}
.card-dark{border-color:transparent;background:linear-gradient(140deg,var(--black),var(--primary));color:var(--on-dark);box-shadow:var(--shadow-hero);background-origin:border-box}
.card.is-center{text-align:center}
.card.has-rule::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--tone),var(--tone-2),var(--green));background-origin:border-box}
.card.is-lift{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card.is-lift:hover{border-color:var(--border-strong);box-shadow:var(--shadow-hover);transform:translateY(-4px)}

/* The gradient square a card leads with. */
.tile{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--tone),var(--tone-2));color:var(--on-dark);font-size:var(--text-xl);background-origin:border-box}
.tile-xs{width:28px;height:28px;border-radius:var(--radius-2xs);font-size:var(--text-2xs)}
.tile-sm{width:36px;height:36px;border-radius:var(--radius-2xs);font-size:var(--text-sm)}
.tile-md{width:46px;height:46px;font-size:var(--text-xl)}
.tile-lg{width:52px;height:52px;font-size:var(--text-2xl)}
.tile-xl{width:58px;height:58px;border-radius:var(--radius-md);font-size:var(--text-3xl)}

.badge{padding:5px 13px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--tone),var(--tone-2));color:var(--on-dark);font-size:var(--text-xs);font-weight:var(--weight-black);letter-spacing:.02em;white-space:nowrap;background-origin:border-box}
.badge>i{font-size:10px}
.badge.is-plain{border:1px solid var(--border);background:var(--tone-tint);color:var(--tone-ink)}

.card-head{margin-block-end:var(--space-3);display:flex;align-items:center;gap:var(--space-3)}
.card-head.is-center{flex-direction:column;text-align:center}
.card-head-body{min-width:0;flex:1}
.card-eyebrow{margin-block-end:2px;display:block;color:var(--teal-2);font-size:var(--text-3xs);font-weight:var(--weight-black)}
.card-title{margin:0;min-width:0;color:var(--primary);font-size:var(--text-lg);font-weight:var(--weight-black);line-height:var(--leading-tight)}
.card-trail{margin-inline-start:auto;flex:none}
.card-head.is-center .card-trail{margin-inline-start:0}

/* Equal columns that fit the screen: grid-* says how narrow one may get, cols-* pins the count. */
.grid{display:grid;gap:14px}
.gap-tight{gap:var(--space-2)}
.gap-loose{gap:var(--space-5)}
.grid-xs{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.grid-sm{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grid-md{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-lg{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-xl{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* A link that leaves the lesson. */
.away{color:var(--teal);font-weight:var(--weight-black);text-decoration:none}
.away:hover{text-decoration:underline}
.away>i{margin-inline-start:var(--space-1);font-size:10px}


/* ==== 4 · Chrome ========================================================= */

.progress{position:fixed;inset-inline-start:0;inset-block-end:0;z-index:120;width:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--teal),var(--green));pointer-events:none;background-origin:border-box}

/* The brand bar: fullscreen at the start, the unit and the page in the middle, the logo at the end. */
.brand-bar{position:relative;z-index:80;width:min(var(--width),calc(100% - var(--gutter) * 2));min-height:72px;margin:0 auto;padding:14px 28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--black);color:var(--on-dark);box-shadow:var(--shadow-bar)}
.brand-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px 180px at 80% 50%,var(--glow-teal),transparent 70%),radial-gradient(420px 180px at 20% 50%,var(--glow-green),transparent 70%);background-origin:border-box}
.brand-bar>*{position:relative;z-index:1}
.brand-heading{min-width:0;text-align:center;line-height:var(--leading-tight)}
.brand-title{overflow:hidden;font-size:15px;font-weight:var(--weight-black);text-overflow:ellipsis;white-space:nowrap}
.brand-sub{margin-block-start:3px;overflow:hidden;color:var(--on-dark-muted);font-size:var(--text-2xs);font-weight:var(--weight-medium);text-overflow:ellipsis;white-space:nowrap}
.brand-logo{width:auto;height:var(--logo-height);display:block;filter:var(--shadow-logo)}
.fullscreen{appearance:none;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid var(--veil-line);border-radius:var(--radius-xs);background:var(--veil);color:var(--on-dark);font-size:var(--text-md);cursor:pointer;transition:background .2s ease,transform .2s ease}
.fullscreen:hover{background:var(--veil-strong);transform:scale(1.06)}

/* The tabs say which part of the page is being read. They do not navigate. */
.tabs{position:sticky;inset-block-start:0;z-index:70;width:min(var(--width),calc(100% - var(--gutter) * 2));margin:var(--space-4) auto 0;padding:7px;display:flex;gap:5px;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface-veil);box-shadow:var(--shadow-nav);backdrop-filter:blur(10px)}
.tab{min-width:0;flex:1 1 0;padding:10px var(--space-2);overflow:hidden;border-radius:12px;color:var(--muted);font-size:var(--text-nav);font-weight:var(--weight-black);line-height:normal;text-align:center;text-overflow:ellipsis;white-space:nowrap;user-select:none;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.tab.active{background:linear-gradient(135deg,var(--primary),var(--teal));color:var(--on-dark);box-shadow:var(--shadow-active);background-origin:border-box}

.section{position:relative;scroll-margin-block-start:var(--scroll-offset);width:min(var(--width),calc(100% - var(--gutter) * 2));margin:22px auto;padding:30px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}
.js .section:not(.in-view){opacity:0;transform:translateY(14px)}
.js .section{transition:opacity .55s ease,transform .55s ease}

/* The opening section is the hero alone, with no card around it. */
.section.opening{margin-block-start:18px;padding:0;border:0;background:transparent;box-shadow:none}
.hero{position:relative;overflow:hidden;padding:40px 34px;border-radius:var(--radius-xl);background:linear-gradient(125deg,var(--primary) 0%,var(--primary-2) 48%,var(--teal) 100%);color:var(--on-dark);box-shadow:var(--shadow-hero);background-origin:border-box}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 95% -20%,var(--glow-hero),transparent 60%),radial-gradient(420px 220px at -5% 110%,var(--tint-green-2),transparent 60%),radial-gradient(420px 260px at 45% 55%,#FFFFFF0F,transparent 65%);background-origin:border-box}
.hero>*{position:relative;z-index:1}
.hero h1{margin:0 0 13px;color:var(--on-dark);font-size:var(--text-hero);font-weight:var(--weight-black);line-height:1.25;letter-spacing:-.02em;text-shadow:var(--shadow-text);white-space:nowrap}
.hero p{margin:0;color:var(--on-dark-soft);font-size:var(--text-hero-lead);font-weight:var(--weight-normal);line-height:1.9}

.h2{margin:0 0 8px;color:var(--primary);font-size:var(--text-h2);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:-.01em}
.lead{max-width:120ch;margin:0 0 24px;color:var(--muted);font-size:var(--text-base);font-weight:var(--weight-medium);line-height:1.9}
.lead b{color:var(--primary)}


/* ==== 5 · Common blocks ================================================== */

/* Tells the learner a block answers to their hand. */
.dotag{margin-block-end:14px;padding:7px 14px;display:inline-flex;align-items:center;gap:8px;border:1px dashed #2F306838;border-radius:10px;background:var(--tint-primary);color:var(--primary);font-size:var(--text-2xs);font-weight:var(--weight-black)}
.dotag i{color:var(--teal)}

/* The sentence a section lands on. */
.keyline{margin-block-start:20px;padding:18px 20px;display:flex;align-items:flex-start;gap:14px;border:1px solid #00AD8B38;border-radius:var(--radius-md);background:linear-gradient(135deg,#2F30680B,#00AD8B13);background-origin:border-box}
.keyline>i{margin-block-start:4px;flex:none;color:var(--teal);font-size:18px}
.keyline p{margin:0;color:var(--primary);font-size:var(--text-base);font-weight:var(--weight-bold);line-height:var(--leading-loose)}
.keyline p b{color:var(--teal)}
/* The one idea a section turns on, said before what explains it. */
.keyline.focus{margin-block:0 var(--space-5);padding:19px var(--space-6);align-items:center;gap:15px;border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2) 58%,var(--teal));background-origin:border-box}
.keyline.focus>i{width:38px;height:38px;margin:0;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--veil);color:var(--on-dark-accent);font-size:var(--text-lg)}
.keyline.focus p{color:var(--on-dark)}
.keyline.focus p b{color:var(--on-dark-accent)}
/* A rule to carry out of the block above it. */
.keyline.note{padding:14px var(--space-5);gap:var(--space-3);border:0;border-inline-start:4px solid var(--teal);border-radius:var(--radius-sm);background:var(--tint-teal)}
.keyline.note>i{margin-block-start:5px;font-size:inherit}
.keyline.note p{color:var(--teal-2)}
.keyline.warn{border-color:#E8952A4D;background:linear-gradient(135deg,#E8952A12,#E8952A1C);background-origin:border-box}
.keyline.warn>i{color:var(--warning)}
.keyline.warn p{color:#8A5510}
.keyline.warn p b{color:#A5620A}

.btn{height:42px;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;appearance:none;border:none;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--primary),var(--teal));color:var(--on-dark);font-size:13.5px;font-weight:var(--weight-black);cursor:pointer;box-shadow:0 8px 18px #2F306829;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;background-origin:border-box}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{border:1.5px solid var(--border);background:var(--surface);color:var(--primary);box-shadow:none}
.btn.ghost:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}


/* ==== 6 · Summary ======================================================== */

.recap{display:grid;grid-template-columns:repeat(var(--recap-columns,3),minmax(0,1fr));gap:14px}
.rc{min-width:0;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.rc:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.rc .tile{margin-block-end:13px}
.rc .tile b{font-size:var(--text-xl)}
.rc h3{margin:0 0 6px;color:var(--primary);font-size:var(--text-lg);font-weight:var(--weight-black);line-height:1.45}
.rc p{margin:0;color:var(--muted);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:var(--leading-normal)}

.bridge{margin-block-start:18px;padding:16px 21px;display:flex;align-items:center;gap:12px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-dark);font-size:var(--text-md);font-weight:var(--weight-bold);line-height:1.8;background-origin:border-box}
.bridge>i{flex:none;color:var(--on-dark-accent);font-size:var(--text-xl)}
.bridge b{color:var(--on-dark-accent)}

.refs{margin-block-start:26px;padding-block-start:16px;border-block-start:1px dashed var(--border)}
.refs summary{padding:9px 16px;display:inline-flex;align-items:center;gap:9px;border:1px solid #00AD8B52;border-radius:var(--radius-pill);background:#00AD8B0F;color:var(--teal);font-size:var(--text-xs);font-weight:var(--weight-black);list-style:none;cursor:pointer;user-select:none;transition:background .2s ease}
.refs summary::-webkit-details-marker{display:none}
.refs summary::marker{content:""}
.refs summary:hover{background:var(--tint-teal-2)}
.refs summary .chev{font-size:10px;transition:transform .25s ease}
.refs[open] summary .chev{transform:rotate(180deg)}
.refs-body{margin-block-start:13px;display:grid;gap:9px;animation:refs-open .28s ease}
.refs-body a{display:inline-flex;align-items:flex-start;gap:8px;color:var(--teal);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:var(--leading-normal);text-decoration:none}
.refs-body a:hover{text-decoration:underline}
.refs-body a>i{margin-block-start:5px;flex:none;font-size:9px}
.refs-body p{margin:0;color:var(--muted);font-size:12px;font-weight:var(--weight-medium);line-height:var(--leading-normal)}
@keyframes refs-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}


/* ==== 7 · Overview ======================================================= */

.ov-lead{margin:0 0 var(--space-6);color:var(--muted);font-size:var(--text-base);font-weight:var(--weight-medium)}
.goal .tile{margin-block-end:14px;transition:transform .4s ease}
.goal:hover .tile{transform:rotate(-8deg) scale(1.1)}
.goal p{margin:0;color:var(--ink);font-size:var(--text-md);font-weight:var(--weight-medium);line-height:var(--leading-normal)}
.plan-num{position:relative;min-width:42px;height:42px;margin-block-end:var(--space-3);padding-inline:10px;display:inline-grid;place-items:center;overflow:hidden;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),var(--teal));color:var(--on-dark);font-size:var(--text-lg);font-weight:var(--weight-black);background-origin:border-box}
.plan-num::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,var(--veil-sheen) 50%,transparent 70%);transform:translateX(100%);transition:transform .8s ease;background-origin:border-box}
.plan-card:hover .plan-num::before{transform:translateX(-100%)}
.plan-card h3{margin:0 0 var(--space-3);color:var(--primary);font-size:var(--text-lg);font-weight:var(--weight-black);line-height:var(--leading-tight)}
.plan-items{margin:0;padding:0;display:grid;gap:var(--space-2);list-style:none}
.plan-items li{padding:var(--space-2) 10px;display:flex;align-items:flex-start;gap:7px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--surface);color:var(--primary);font-size:var(--text-xs);font-weight:var(--weight-black);line-height:var(--leading-relaxed)}
.plan-items li>i{margin-block-start:5px;flex:none;color:var(--teal);font-size:10px}
.terms{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow)}
.terms table{width:100%;min-width:560px;border-collapse:collapse;text-align:start}
.terms th{padding:13px 15px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-dark);font-size:var(--text-sm);font-weight:var(--weight-black);text-align:start;background-origin:border-box}
.terms td{padding:13px 15px;border-block-start:1px solid var(--border);color:var(--ink);font-size:var(--text-md);font-weight:var(--weight-medium);line-height:var(--leading-relaxed);vertical-align:top}
.terms tbody tr:nth-child(even){background:var(--surface-soft)}
.terms .term,.terms .term-en{color:var(--primary);font-weight:var(--weight-black);white-space:nowrap}
.terms .term-en{font-weight:var(--weight-bold)}
.terms-note{margin:var(--space-3) 0 0;color:var(--muted);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-normal)}


/* ==== 8 · Responsive, motion, print ===================================== */

@media (max-width:960px){.recap{grid-template-columns:1fr}}
@media (max-width:720px){.brand-bar{min-height:60px;padding:10px var(--space-4);border-radius:0 0 var(--radius-md) var(--radius-md)}}
@media (max-width:720px){.brand-title,.brand-sub{overflow:visible;text-overflow:clip;white-space:normal}}
@media (max-width:720px){.brand-logo{height:20px}}
@media (max-width:720px){.tabs{display:none}}
@media (max-width:720px){.section{padding:20px 17px;border-radius:var(--radius-md)}}
@media (max-width:720px){.section.opening{padding:0}}
@media (max-width:720px){.hero{padding:28px 20px}}
@media (max-width:720px){.grid,.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
@media (hover:none){.card.is-lift:hover,.rc:hover{transform:none}}
@media (hover:none){.goal:hover .tile{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media (prefers-reduced-motion:reduce){.js .section:not(.in-view){opacity:1;transform:none}}
@media print{.brand-bar,.tabs,.progress,.fullscreen{display:none!important}}
@media print{.js .section:not(.in-view){opacity:1;transform:none}}