/* Bionary Iraq: everything below the hero. Built on tokens.css. RTL, logical properties only. */

/* ---------- primitives ---------- */
.wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad)}
.skip{position:absolute;inset-inline-start:16px;top:-64px;z-index:100;height:44px;display:inline-flex;align-items:center;padding-inline:16px;background:var(--paper);color:var(--ink-000);border:1px solid var(--ink-000);font:var(--type-ui-s);letter-spacing:var(--tracking-label);transition:top var(--dur-base) var(--ease-standard)}
.skip:focus{top:14px;outline:1px solid var(--ink-000);outline-offset:2px}
/* the skip link's programmatic target: focus is announced, never outlined around the whole page */
#main:focus,#main:focus-visible{outline:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-h);min-height:44px;padding:0 var(--control-pad-x);font:var(--type-ui-s);letter-spacing:var(--tracking-label);border-radius:var(--radius-1);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:var(--transition-control);user-select:none}
.btn:active{opacity:.88}
.btn--lg,.btn-lg{height:var(--control-h-l);padding:0 28px}
.btn--block{width:100%}
.btn--solid{background:var(--control-solid-bg);color:var(--control-solid-fg);border-color:var(--control-solid-bg)}
.btn--solid:hover{background:var(--control-solid-bg-hover);border-color:var(--control-solid-bg-hover)}
.btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--ink-000);color:var(--paper)}
.btn--inverse,.btn-inverse{background:var(--paper);color:var(--ink-000);border-color:var(--paper)}
.btn--inverse:hover,.btn-inverse:hover{background:var(--ink-050);border-color:var(--ink-050)}
/* .btn-lg, .btn-inverse and .btn-outline-inverse are the hero markup's spelling of the same three variants */
.btn--outline-inverse,.btn-outline-inverse{background:transparent;color:var(--text-inverse);border-color:var(--border-inverse-strong)}
.btn--outline-inverse:hover,.btn-outline-inverse:hover{background:rgba(255,255,255,.1);border-color:var(--paper)}
.btn[disabled],.btn:disabled{background:var(--control-disabled-bg);color:var(--control-disabled-fg);border-color:transparent;cursor:not-allowed}
.on-ink .btn[disabled],.on-ink .btn:disabled{background:rgba(255,255,255,.12);color:var(--ink-500)}
.btn:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.on-ink .btn:focus-visible{outline-color:var(--focus-ring-inverse)}

.eyebrow{display:grid;gap:10px;justify-items:start;font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.on-ink .eyebrow{color:var(--text-inverse)}
.eyebrow--rule::before{content:"";display:block;width:32px;height:2px;background:var(--ink-000);transform-origin:100% 50%;transform:scaleX(1)}
.on-ink .eyebrow--rule::before{background:var(--paper)}
.eyebrow--origin::before{background:var(--swiss-red) !important}
.eyebrow--origin{color:var(--text-primary)}
.on-ink .eyebrow--origin{color:var(--text-inverse)}
.eyebrow-mono{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-muted);display:block}
.on-ink .eyebrow-mono{color:var(--text-inverse-muted)}
.mono{font-family:var(--font-mono)}

.h2{font:var(--type-display-m);letter-spacing:0;color:inherit;text-wrap:balance}
.h3{font:var(--type-display-s);letter-spacing:0;color:inherit}
.lede{font:var(--type-body-l);color:var(--text-secondary);max-width:var(--measure)}
.on-ink .lede{color:var(--text-inverse-secondary)}
.body{font:var(--type-body);color:var(--text-secondary);max-width:var(--measure)}
.on-ink .body{color:var(--text-inverse-secondary)}
.body-s{font:var(--type-body-s);color:var(--text-secondary);max-width:var(--measure)}
.on-ink .body-s{color:var(--text-inverse-secondary)}
.link{border-bottom:1px solid var(--border-quiet);color:var(--text-primary);padding-bottom:1px}
.link:hover{border-bottom-color:var(--border-strong);color:var(--text-link-hover)}
.on-ink .link{color:var(--paper);border-bottom-color:var(--border-inverse-strong)}
.on-ink .link:hover{border-bottom-color:var(--paper);color:var(--ink-300)}
/* a contact anchor waiting for its setting (or with none) is plain text, not a dead link */
.link:not([href]),.on-ink .link:not([href]){border-bottom-color:transparent;color:inherit;cursor:default}
.h2 .num,.h3 .num,.lede .num,.body .num{font-size:.82em}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--ink-000);color:var(--paper);border-bottom:1px solid var(--border-inverse)}
.hdr-in{height:100%;display:flex;align-items:center;gap:32px}
.hdr-logo{display:block;flex:0 0 auto;border:0}
.hdr-logo img{width:148px;height:auto}
.hdr-nav{display:flex;align-items:center;gap:28px;margin-inline-start:16px}
.hdr-nav a{position:relative;display:inline-flex;align-items:center;height:44px;font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--ink-500);border:0}
.hdr-nav a::after{content:"";position:absolute;inset-inline:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--dur-fast) var(--ease-standard)}
.hdr-nav a:hover{color:var(--paper)}
.hdr-nav a:hover::after,.hdr-nav a.is-active::after{transform:scaleX(1)}
.hdr-nav a.is-active{color:var(--paper)}
.hdr-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.hdr-menu{display:none;margin-inline-start:auto;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:7px;border-radius:var(--radius-1)}
.hdr-menu span{display:block;width:22px;height:1px;background:var(--paper);transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.hdr-menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hdr-menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:60;background:var(--ink-000);color:var(--paper);visibility:hidden;opacity:0;transform:translateX(24px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);display:flex;flex-direction:column;padding:0 var(--page-pad) 40px;overflow:auto}
.menu.open{visibility:visible;opacity:1;transform:none;transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.menu-top{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-inverse);flex:0 0 auto}
.menu-top img{width:148px;height:auto}
.menu-close{width:44px;height:44px;display:grid;place-items:center;font:400 22px/1 var(--font-text);color:var(--paper);border-radius:var(--radius-1)}
.menu-nav{display:grid;padding-top:24px;flex:1 1 auto}
.menu-nav a{display:flex;align-items:center;min-height:56px;font:var(--type-display-s);letter-spacing:0;color:var(--paper);border-bottom:1px solid var(--border-inverse)}
.menu-nav a.is-active{color:var(--ink-300)}
.menu-actions{display:grid;gap:12px;padding-top:32px}
body.menu-open{overflow:hidden}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:var(--section-y);isolation:isolate}
.sec::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--border-hairline);pointer-events:none}
.sec--ink{background:var(--ink-000);color:var(--paper)}
.sec--ink::before{background:var(--border-inverse)}
.sec--paper{background:var(--paper);color:var(--ink-000)}
.sec--sunken{background:var(--ink-050);color:var(--ink-000)}
.sec--sunken::before{background:var(--ink-200)}
.sec.live::before{animation:bn-breathe 6s var(--ease-standard) -2.4s infinite}
@keyframes bn-breathe{0%,100%{opacity:1}50%{opacity:.3}}
.sec-head{display:grid;gap:16px;justify-items:start;margin-bottom:56px}
.sec-head .lede{margin-top:4px}

/* two-column rail: narrow rail (eyebrow + heading) on the start side, wide column for the rest */
.rail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px var(--rail-gutter);align-items:start}
.rail-head{display:grid;gap:16px;justify-items:start;position:sticky;top:calc(var(--header-h) + 32px)}
.rail-body{display:grid;gap:40px;min-width:0}

/* ---------- 6.1 program: three columns, mono numerals, a hairline connector ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-7);padding-top:32px}
.steps::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--ink-000);transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.1s var(--ease-standard)}
.reveal.in .steps::before{transform:scaleX(1)}
.step{display:grid;gap:18px;align-content:start;position:relative}
.step-num{font:500 13px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-muted);direction:ltr;display:inline-block;justify-self:start}
.step-title{font:var(--type-display-s);letter-spacing:0}
.step-body{font:var(--type-body);color:var(--text-secondary);max-width:38ch}
.note{margin-top:56px;padding-top:24px;border-top:1px solid var(--border-hairline);font:var(--type-body-s);color:var(--text-secondary);max-width:var(--measure)}

/* ---------- 6.2 prizes: rail + inverse cards on black ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tier{display:grid;grid-template-rows:auto auto 1fr;gap:14px;align-content:start;padding:var(--card-pad);background:var(--surface-card-inverse);border:1px solid var(--border-inverse);transition:border-color var(--dur-base) var(--ease-standard);min-height:220px}
.tier:hover{border-color:var(--border-inverse-strong)}
.tier-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--paper)}
.tier-winners{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-inverse-muted)}
.tier-prize{font:var(--type-display-s);letter-spacing:0;color:var(--paper);align-self:end}
.countdown{display:grid;gap:12px;justify-items:start;padding-top:24px;border-top:1px solid var(--border-inverse);margin-top:8px}
.countdown[hidden]{display:none}
.cd-title{font:var(--type-body-s);color:var(--text-inverse-secondary)}
.cd-date{font:var(--type-body-s);color:var(--paper)}
.cd-date:empty{display:none}
/* the live player: a 16:9 plate with a hairline, only when live_url is set */
.live{display:grid;gap:16px}
.live[hidden]{display:none}
.live-plate{aspect-ratio:16/9;border:1px solid var(--border-inverse);background:var(--surface-card-inverse);overflow:hidden}
.live-plate iframe{display:block;width:100%;height:100%;border:0}
.cd-row{display:flex;gap:24px;direction:ltr;flex-wrap:wrap}
.cd-unit{display:grid;gap:8px;justify-items:center;min-width:56px}
.cd-num{font:400 34px/1 var(--font-mono);color:var(--paper);font-variant-numeric:tabular-nums}
.cd-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-inverse-muted)}
.rules{display:grid;gap:12px;padding-top:32px;border-top:1px solid var(--border-inverse)}
.rules p{font:var(--type-body-s);color:var(--text-inverse-secondary);max-width:var(--measure)}
.winners{display:grid;gap:12px;padding-top:32px;border-top:1px solid var(--border-inverse)}
.winners-list{display:grid}
.winners-empty{font:var(--type-body-s);color:var(--text-inverse-secondary)}
.winner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border-inverse);font:var(--type-body-s);color:var(--paper)}
.winner .w-tier{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-inverse-muted)}
.winner .w-gov{color:var(--text-inverse-secondary)}
.winner-draw{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-inverse-muted);padding:12px 0 6px}
.winner-draw .w-video{display:inline-flex;align-items:center;min-height:44px;font:var(--type-body-s);letter-spacing:0}

/* ---------- 6.3 clinics: the map plus a panel ---------- */
/* source order is map then panel (reading and tab order agree on phones); on desktop the areas put the panel
   on the start side, the right column in RTL, with no order property */
.map-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"panel map";gap:40px var(--space-8);align-items:start}
.gov-select{display:grid;gap:8px;max-width:360px;margin-bottom:32px}
.map{position:relative;grid-area:map}
.map svg{width:100%;height:auto;max-height:78vh;overflow:visible}
/* the draw-in transition is enabled (.ready) only after JS has written --len, so the first paint never erases the strokes */
.iq-gov{fill:var(--ink-050);fill-opacity:0;stroke:var(--ink-150);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;outline:none;stroke-dasharray:var(--len,none);stroke-dashoffset:var(--len,0);transition:fill-opacity .6s var(--ease-standard),fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard)}
.map.ready .iq-gov{transition:stroke-dashoffset 1.4s var(--ease-standard),fill-opacity .6s var(--ease-standard),fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard)}
.map .iq-gov{transition-delay:calc(var(--i,0) * 45ms)}
.map.in .iq-gov{stroke-dashoffset:0;fill-opacity:1}
.map.in.drawn .iq-gov{transition-delay:0ms}
.iq-gov:hover,.iq-gov.is-hover,.iq-gov:focus-visible{fill:var(--ink-000);stroke:var(--ink-000)}
.iq-gov.is-active{fill:var(--ink-000);stroke:var(--ink-000)}
.iq-gov:focus-visible{stroke:var(--ink-000);stroke-width:2}
.iq-label{fill:var(--ink-000);font:500 17px/1 var(--font-display);pointer-events:none;transition:fill var(--dur-base) var(--ease-standard)}
.iq-label.is-hover,.iq-label.is-active{fill:var(--paper)}
.iq-dots{pointer-events:none}
.iq-dot{fill:var(--ink-000);stroke:var(--paper);stroke-width:1.5;transition:fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard)}
.iq-dots.is-hover .iq-dot,.iq-dots.is-active .iq-dot{fill:var(--paper);stroke:var(--ink-000)}
.iq-more{fill:var(--ink-000);font:500 12px/1 var(--font-mono);transition:fill var(--dur-base) var(--ease-standard)}
.iq-dots.is-hover .iq-more,.iq-dots.is-active .iq-more{fill:var(--paper)}
.map-panel{display:grid;grid-area:panel;gap:20px;align-content:start;border-top:1px solid var(--ink-000);padding-top:20px;position:sticky;top:calc(var(--header-h) + 32px)}
.panel-head{display:grid;gap:8px}
.panel-title{font:var(--type-display-s);letter-spacing:0}
.panel-count{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-muted)}
.panel-list{display:grid}
.gov-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:10px 0;border-bottom:1px solid var(--border-hairline);font:var(--type-body-s);color:var(--text-primary);text-align:start;transition:var(--transition-control)}
.gov-row:hover{color:var(--text-link-hover)}
.gov-row .num{color:var(--text-muted);font-size:12px}
.clinic{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--border-hairline)}
.clinic-name{font:var(--type-title-s);color:var(--text-primary)}
.clinic-where{font:var(--type-body-s);color:var(--text-secondary)}
.clinic-links{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font:var(--type-body-s)}
.clinic-links a{display:inline-flex;align-items:center;min-height:44px}
.panel-empty{font:var(--type-body-s);color:var(--text-secondary);padding:18px 0}
.map-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:40px;padding-top:20px;border-top:1px solid var(--border-hairline);font:var(--type-body-s);color:var(--text-secondary)}
.map-foot .link{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 6.4 products: featured cards two up; the hairline list of the other products, when there is one, spans the row ---------- */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.products[hidden]{display:none}
.products-empty{font:var(--type-body-s);color:var(--text-inverse-secondary)}
.products-empty[hidden]{display:none}
.product{display:grid;grid-template-rows:auto 1fr;background:var(--surface-card-inverse);border:1px solid var(--border-inverse);transition:border-color var(--dur-base) var(--ease-standard)}
.product:hover{border-color:var(--border-inverse-strong)}
.product-plate{aspect-ratio:4/5;overflow:hidden;background:var(--ink-900)}
.product-plate img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-standard)}
.product:hover .product-plate img{transform:scale(1.02)}
.product-body{padding:var(--card-pad);display:grid;gap:14px;align-content:start}
.product-name{font:var(--type-display-s);letter-spacing:0;direction:ltr;text-align:end;color:var(--paper)}
.product-tagline{font:var(--type-label);letter-spacing:var(--tracking-label);line-height:1.6;color:var(--text-inverse-muted);margin-top:-4px}
.product-blurb{font:var(--type-body-s);color:var(--text-inverse-secondary)}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:12px;padding-top:16px;border-top:1px solid var(--border-inverse)}
.stat{display:grid;gap:8px}
.stat-value{font:400 26px/1 var(--font-mono);color:var(--paper);direction:ltr;display:inline-block;justify-self:start}
.stat-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-inverse-muted)}
.proto{font:var(--type-caption);color:var(--text-inverse-secondary);padding-top:12px;border-top:1px solid var(--border-inverse)}
.others{grid-column:1 / -1;display:grid;align-content:start;border-top:1px solid var(--border-inverse)}
/* on wide screens a hairline list sits as a third column beside the two cards, as in round one; without one there is no empty column */
@media (min-width:1101px){
  .products:has(.others){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr)}
  .products:has(.others) .others{grid-column:auto}
}
.other{display:grid;gap:8px;padding:22px 0;border-bottom:1px solid var(--border-inverse)}
.other-name{font:var(--type-display-s);direction:ltr;text-align:end;color:var(--paper)}
.other-desc{font:var(--type-body-s);color:var(--text-inverse-secondary)}
.pro-line{font:var(--type-body-s);color:var(--paper);margin-top:32px;padding-top:22px;border-top:1px solid var(--border-inverse)}
.foot-note{margin-top:20px;font:var(--type-label-mono);letter-spacing:.04em;line-height:1.7;color:var(--text-inverse-muted);max-width:var(--measure)}

/* ---------- 6.4a voices: paper cards on the sunken band, a rail beside them ---------- */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.voice{display:grid;gap:20px;align-content:start;margin:0;padding:var(--card-pad);background:var(--paper);border:1px solid var(--border-hairline)}
.voice-quote{margin:0}
.voice-quote p{font:var(--type-body-l);color:var(--text-primary)}
.voice-who{display:flex;flex-wrap:wrap;gap:4px 12px;font:var(--type-label);letter-spacing:var(--tracking-label);line-height:1.6;color:var(--text-muted);padding-top:16px;border-top:1px solid var(--border-hairline)}

/* ---------- 6.5 source: a full-bleed plate and a stats row ---------- */
.plate-bleed{position:relative;margin-bottom:64px;background:var(--ink-050);overflow:hidden}
.plate-bleed img{width:100%;height:auto;aspect-ratio:1749/694;object-fit:cover;filter:grayscale(1)}
.source-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px var(--rail-gutter);align-items:start}
.source-head{display:grid;gap:16px;justify-items:start}
.source-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px;padding-top:24px;border-top:1px solid var(--ink-000)}
.source-stats .stat{gap:10px;padding-inline-end:16px;border-inline-end:1px solid var(--border-hairline)}
.source-stats .stat:last-child{border-inline-end:0}
.source-stats .stat-value{font:400 34px/1 var(--font-mono);color:var(--ink-000)}
.source-stats .stat-label{color:var(--text-muted)}
.origin{display:grid;gap:8px;justify-items:start;margin-top:40px}
.origin-cert{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-muted);direction:ltr}

/* ---------- 6.6 enter: a sunken form band ---------- */
.enter-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px var(--rail-gutter);align-items:start}
.form{display:grid;gap:24px;background:var(--paper);border:1px solid var(--border-hairline);padding:var(--card-pad-lg)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field--full{grid-column:1 / -1}
.field-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-primary)}
.req{color:var(--swiss-red)}
.input,.select{width:100%;height:var(--control-h);padding:0 14px;font:var(--type-body-s);color:var(--text-primary);background:var(--paper);border:1px solid var(--border-quiet);border-radius:var(--radius-1);outline:none;transition:var(--transition-control);appearance:none;-webkit-appearance:none}
.input:focus,.select:focus{border-color:var(--border-strong)}
.input:focus-visible,.select:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--state-critical)}
.input--mono{font-family:var(--font-mono);direction:ltr;text-align:start}
/* LTR mono is for typed values only: while an Arabic placeholder shows, the field reads RTL in the text face
   (the placeholder inherits the font); the phone field keeps its Latin pattern LTR */
.input--mono:not([type="tel"]):placeholder-shown{direction:rtl;font-family:var(--font-text)}
.input--code{text-transform:uppercase}
.input::placeholder{color:var(--text-muted);opacity:1}
.select-wrap{position:relative}
.select{padding-inline-end:38px}
.select-wrap::after{content:"";position:absolute;inset-inline-end:14px;top:50%;width:8px;height:8px;border-right:1px solid var(--text-primary);border-bottom:1px solid var(--text-primary);transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* the receipt box: two buttons (camera, gallery) in front of two visually hidden file inputs */
.file{position:relative;display:grid;gap:14px;padding:16px;border:1px solid var(--border-quiet);border-radius:var(--radius-1);background:var(--paper);transition:var(--transition-control)}
.file:focus-within{border-color:var(--border-strong)}
.file[data-invalid="true"]{border-color:var(--state-critical)}
.file-btns{display:flex;flex-wrap:wrap;gap:12px}
.file-text{font:var(--type-body-s);color:var(--text-muted)}
.file-name{font:var(--type-label-mono);letter-spacing:.04em;color:var(--text-primary);direction:ltr;justify-self:start;word-break:break-all}
.file-name:empty{display:none}
.field-hint{font:var(--type-caption);color:var(--text-muted)}
.field-error{font:var(--type-caption);color:var(--state-critical)}
.field-error:empty{display:none}
.check{position:relative;display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;min-height:44px;padding-top:6px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check-box{width:18px;height:18px;flex:0 0 auto;margin-top:3px;border-radius:var(--radius-1);border:1px solid var(--border-quiet);background:var(--paper);display:grid;place-items:center;transition:var(--transition-control)}
.check-box::after{content:"";width:9px;height:5px;border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:translateY(-1px) rotate(-45deg);opacity:0}
.check input:checked + .check-box{background:var(--ink-000);border-color:var(--ink-000)}
.check input:checked + .check-box::after{opacity:1}
.check input:focus-visible + .check-box{outline:1px solid var(--focus-ring);outline-offset:2px}
.check-text{font:var(--type-body-s);color:var(--text-primary)}
.form-foot{display:grid;gap:16px;justify-items:start}
.form-msg{font:var(--type-body-s);color:var(--state-critical)}
.form-msg:empty{display:none}
.hp{position:absolute;inset-inline-start:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.success{display:grid;gap:16px;justify-items:start;background:var(--paper);border:1px solid var(--border-hairline);padding:var(--card-pad-lg)}
.success .ref{font:400 28px/1 var(--font-mono);color:var(--ink-000);direction:ltr;display:inline-block;padding-top:8px}

/* ---------- 6.6a terms: paragraphs and hairline-marked lists from the setting ---------- */
.terms{display:grid;gap:18px;max-width:var(--measure)}
.terms p{font:var(--type-body);color:var(--text-inverse-secondary)}
.terms ul{display:grid;gap:10px}
.terms li{position:relative;padding-inline-start:22px;font:var(--type-body);color:var(--text-inverse-secondary)}
.terms li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:10px;height:1px;background:var(--paper)}

/* ---------- 6.7 faq: a single-column accordion ---------- */
.faq-wrap{max-width:820px;margin-inline:auto}
.faq{border-top:1px solid var(--ink-000)}
.faq-item{border-bottom:1px solid var(--border-hairline)}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;width:100%;min-height:64px;padding:20px 0;text-align:start;font:500 18px/1.5 var(--font-text);color:var(--text-primary);transition:var(--transition-control)}
.faq-q:hover{color:var(--text-link-hover)}
.faq-sym{flex:0 0 auto;width:24px;height:27px;display:grid;place-items:center;font:400 22px/1 var(--font-mono);color:var(--text-muted)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-standard)}
.faq-a > div{overflow:hidden}
.faq-a p{font:var(--type-body);color:var(--text-secondary);max-width:var(--measure);padding-bottom:24px}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* ---------- 6.8 footer: the brand block plus the link columns (the contact column collapses while hidden) ---------- */
.ftr{background:var(--ink-000);color:var(--paper);padding-block:var(--space-8) var(--space-6);border-top:1px solid var(--border-inverse)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr));gap:40px 32px;padding-bottom:48px;border-bottom:1px solid var(--border-inverse)}
.ftr-brand{display:grid;gap:28px;justify-items:start;align-content:start}
.ftr-brand img{width:148px;height:auto}
.ftr-origin{display:grid;gap:8px;justify-items:start}
.ftr-origin .origin-cert{color:var(--text-inverse-muted)}
.ftr-col{display:grid;gap:0;align-content:start}
.ftr-col h3{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-inverse-muted);margin-bottom:12px}
.ftr-col a{display:inline-flex;align-items:center;min-height:44px;font:var(--type-body-s);color:var(--paper);border-bottom:1px solid transparent}
.ftr-col a:hover{color:var(--ink-300)}
.ftr-col a:not([href]){color:var(--text-inverse-muted);cursor:default}
.ftr-col[hidden],.ftr-col a[hidden]{display:none}
.ftr-legal{display:grid;gap:10px;padding-top:24px;font:var(--type-label-mono);letter-spacing:.04em;line-height:1.8;color:var(--text-inverse-muted)}
.ftr-legal .num{font-size:inherit}

/* ---------- entrances ---------- */
.reveal > *{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-standard),transform .6s var(--ease-standard)}
.reveal.in > *{opacity:1;transform:none}
.reveal > :nth-child(2){transition-delay:80ms}
.reveal > :nth-child(3){transition-delay:160ms}
.reveal > :nth-child(4){transition-delay:240ms}
.reveal > :nth-child(5){transition-delay:320ms}
.reveal > :nth-child(6){transition-delay:400ms}
.reveal > :nth-child(7){transition-delay:480ms}
.reveal > :nth-child(8){transition-delay:560ms}
.reveal > :nth-child(n+9){transition-delay:640ms}
.reveal.in.done > *{transition-delay:0ms}
.reveal--fast > :nth-child(2){transition-delay:60ms}
.reveal--fast > :nth-child(3){transition-delay:120ms}
.reveal--fast > :nth-child(4){transition-delay:180ms}
.reveal--fast > :nth-child(5){transition-delay:240ms}
.reveal--fast > :nth-child(6){transition-delay:300ms}
.reveal--fast > :nth-child(7){transition-delay:360ms}
.reveal--fast > :nth-child(n+8){transition-delay:420ms}
.reveal--fast.in.done > *{transition-delay:0ms}
.reveal .eyebrow--rule::before{transform:scaleX(0);transition:transform .7s var(--ease-standard) .1s}
.reveal.in .eyebrow--rule::before{transform:scaleX(1)}
.reveal.in.done .eyebrow--rule::before{transition-delay:0s}
/* inverse cards keep their hover border ease under the entrance transition (longhands, so the stagger delays stay) */
.reveal > .tier,.reveal > .product{transition-property:opacity,transform,border-color;transition-duration:.6s,.6s,var(--dur-base);transition-timing-function:var(--ease-standard)}

/* ---------- the environment layer: removed by the lead (the design system is flat; the three-bar drift read as a visible panel over the footage) ---------- */
/* bottom-left (the inline end in RTL): the action lane, away from the text column */
.env{position:fixed;z-index:5;inset-inline-end:-6vw;bottom:-4vh;height:60vh;aspect-ratio:221/228;opacity:.03;pointer-events:none;mix-blend-mode:difference;will-change:transform;display:grid;grid-template-rows:repeat(3,1fr);gap:13%;animation:bn-drift 90s ease-in-out -30s infinite alternate}
.env span{display:block;background:var(--paper)}
@keyframes bn-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(24px,-24px,0)}}

/* ---------- pause and reduced motion ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .reveal > *{opacity:1;transform:none}
  .steps::before,.eyebrow--rule::before,.reveal .eyebrow--rule::before{transform:scaleX(1)}
  .iq-gov,.map .iq-gov{stroke-dashoffset:0;fill-opacity:1}
  .env{animation:none}
  .menu{transform:none}
}
body.rm *,body.rm *::before,body.rm *::after{animation:none !important;transition:none !important;transition-delay:0s !important}
body.rm .reveal > *{opacity:1;transform:none}
body.rm .steps::before,body.rm .reveal .eyebrow--rule::before{transform:scaleX(1)}
body.rm .iq-gov,body.rm .map .iq-gov{stroke-dashoffset:0;fill-opacity:1}

/* ---------- breakpoints ---------- */
@media (max-width:1100px){
  .hdr-nav{gap:20px}
  .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-brand{grid-column:1 / -1}
}
@media (max-width:960px){
  .hdr-nav,.hdr-actions{display:none}
  .hdr-menu{display:flex}
  .rail,.source-grid,.enter-grid,.map-grid{grid-template-columns:minmax(0,1fr)}
  .map-grid{grid-template-areas:"map" "panel"}
  .rail-head,.map-panel{position:static}
  .source-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .source-stats .stat:nth-child(2){border-inline-end:0}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier{min-height:0}
}
@media (max-width:720px){
  .h2{font-size:36px}
  .h3,.step-title,.panel-title,.product-name,.tier-prize,.other-name{font-size:30px}
  .lede{font-size:17px}
  .sec-head{margin-bottom:40px}
  .steps{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:0;padding-inline-start:24px}
  .steps::before{top:0;bottom:0;inset-inline:auto;inset-inline-start:0;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  .reveal.in .steps::before{transform:scaleY(1)}
  .products{grid-template-columns:minmax(0,1fr)}
  .winner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px}
  .winner .w-prize{grid-column:1 / -1}
  .form{padding:var(--card-pad)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form-foot .btn{width:100%}
  .file-btns{flex-direction:column}
  .file-btns .btn{width:100%}
  .voices{grid-template-columns:minmax(0,1fr)}
  .source-stats{grid-template-columns:minmax(0,1fr);gap:16px}
  .source-stats .stat{border-inline-end:0;padding-inline-end:0;padding-bottom:16px;border-bottom:1px solid var(--border-hairline)}
  .source-stats .stat:last-child{border-bottom:0}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-row{gap:16px}
  .cd-num{font-size:28px}
  .faq-q{font-size:17px}
  .env{height:50vh}
}
@media (max-height:560px){
  .env{display:none}
}

/* anchor landing under the sticky header */
.sec,#winners,#top{scroll-margin-top:var(--header-h)}
#winners{scroll-margin-top:calc(var(--header-h) + 24px)}