/* ForiForeign landing · Clear Sky. Every colour, size and duration is a token from /ff-tokens.css. Built for /landing.html; cache-busted by the build. */
/* ForiForeign landing · Clear Sky. Every colour, size and duration is a token from /ff-tokens.css. */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--color-ground);color:var(--color-text);font:var(--fs-base)/var(--lh-body) var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:'kern','liga'}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);margin:0;color:var(--color-text);text-wrap:balance}
p{margin:0}a{color:var(--color-brand-text);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-xs)}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.skip:focus{width:auto;height:auto;clip:auto;clip-path:none;inset-inline-start:12px;top:12px;background:var(--color-surface);padding:8px 12px;border-radius:var(--radius-md);z-index:99}
.wrap{max-width:var(--container-lg);margin:0 auto;padding:0 var(--sp-5)}
.eyebrow{font:var(--fw-medium) var(--fs-2xs)/1 var(--font-data);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-muted)}
.mono{font-family:var(--font-data);font-size:var(--fs-sm);letter-spacing:var(--ls-data);font-variant-numeric:tabular-nums}
.lead{font-size:var(--fs-xl);line-height:1.5;color:var(--color-text-2);max-width:var(--measure)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:0 var(--sp-5);border-radius:var(--radius-md);font:var(--fw-semibold) var(--fs-base) var(--font-ui);border:1px solid transparent;cursor:pointer;text-decoration:none!important;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);white-space:nowrap}
.btn:active{transform:scale(.98)}.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.primary{background:var(--color-brand);color:#fff}.primary:hover{background:var(--color-brand-strong)}
.ghost{background:var(--color-surface);border-color:var(--color-hair-2);color:var(--color-text)}.ghost:hover{background:var(--color-brand-soft);border-color:var(--color-hair-brand)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--radius-sm);font:var(--fw-semibold) var(--fs-xs)/1 var(--font-ui);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{background:var(--color-ok-soft);color:var(--color-ok)}.info{background:var(--color-info-soft);color:var(--color-info)}.warn{background:var(--color-warn-soft);color:var(--color-warn)}.nt{background:var(--color-neutral-soft);color:var(--color-neutral)}
.iso{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:var(--radius-xs);border:1px solid var(--color-hair-2);font:var(--fw-medium) 11px var(--font-data);letter-spacing:.06em;color:var(--color-text-2);background:var(--color-surface)}
/* header */
header.top{position:sticky;top:0;z-index:var(--z-header);background:rgba(245,247,251,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-hair)}
.bar{max-width:var(--container-lg);margin:0 auto;display:flex;align-items:center;gap:var(--sp-5);padding:10px var(--sp-5);min-height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--color-text);font:var(--fw-bold) var(--fs-xl) var(--font-display);letter-spacing:var(--ls-heading);text-decoration:none!important}.brand img{width:32px;height:32px;display:block}.brand b{color:var(--color-mark)}
.bar nav{margin-left:auto;display:flex;gap:var(--sp-1);align-items:center}
.bar nav a{font:var(--fw-medium) var(--fs-md) var(--font-ui);color:var(--color-text-2);padding:8px 12px;border-radius:var(--radius-md);text-decoration:none!important}.bar nav a:hover{background:var(--color-well);color:var(--color-text)}
.bar nav a.cta{background:var(--color-brand);color:#fff;font-weight:var(--fw-semibold);padding:9px 14px}.bar nav a.cta:hover{background:var(--color-brand-strong)}
@media(max-width:640px){.brand span{display:none}
  .bar{position:relative;flex-wrap:wrap;row-gap:4px;padding-right:96px}
  .bar nav{width:100%;order:3;margin-left:0;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a:not(.cta){display:inline-flex;flex:0 0 auto;font-size:13.5px;padding:6px 9px;white-space:nowrap}
  .bar nav a.cta{position:absolute;top:8px;right:14px;padding:9px 16px}}
/* sections */
section{padding-block:var(--ffx-section-space-md)}
@media(max-width:640px){section{padding-block:var(--ffx-section-space-sm)}}@media(min-width:1100px){section{padding-block:var(--ffx-section-space-lg)}}
.sec-head{max-width:var(--measure);margin-bottom:var(--sp-6)}.sec-head h2{font-size:var(--fs-4xl);margin-top:var(--sp-2)}.sec-head p{margin-top:var(--sp-3);color:var(--color-text-2);font-size:var(--fs-lg)}
/* 1 · hero: the horizon */
.hero{padding-top:var(--sp-6);padding-bottom:0;position:relative;overflow:hidden}
/* R23: the decorative globe was removed, so the hero is one focused column rather than a
   two-column grid with an empty half. Centred, with a comfortable measure so the headline
   and the promise read as a single thought. */
.hero .wrap{display:block;max-width:780px;margin:0 auto;text-align:center;padding-top:var(--sp-6);min-height:0}
.hero .wrap .lead{margin-left:auto;margin-right:auto;max-width:60ch}
.hero .acts{justify-content:center}
.hero .facts{justify-content:center}
.hero .try{margin-left:auto;margin-right:auto;max-width:620px;text-align:left}
.hero h1{font-size:clamp(var(--ffx-hero-size-min),4.6vw + 1rem,var(--ffx-hero-size-max));font-weight:var(--fw-bold);letter-spacing:var(--ffx-hero-tracking);line-height:1.05;margin-top:var(--sp-4)}
.hero h1 em{font-style:normal;color:var(--color-brand-text)}
/* THE HERO LINE (owner, 2026-09-14): the same three lines as sign-in. OR sits centred between the statements, in red, with hairlines. */
.hero h1.hero-or{display:inline-grid;justify-items:start;font-size:clamp(34px,9.4vw,72px);font-weight:800;letter-spacing:-.038em;line-height:1}
.hero h1.hero-or .ho-l{display:block;white-space:nowrap;padding-bottom:.04em}
/* Colour in the headline (owner, 2026-09-14): the world in sky blue to teal, home in warm amber to rose, OR stays red. */
.hero h1.hero-or .ho-l:first-child{color:#0B5ED7}.hero h1.hero-or .ho-l:last-child{color:#D9480F}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero h1.hero-or .ho-l{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.14em;margin-bottom:-.1em}
.hero h1.hero-or .ho-l:first-child{background-image:linear-gradient(92deg,#0A3FB8 0%,#1668E3 45%,#0E9AA7 100%)}
.hero h1.hero-or .ho-l:last-child{background-image:linear-gradient(92deg,#D97706 0%,#EA580C 45%,#C2255C 100%)}}
/* The hero is two columns on a wide screen: copy left, a campus photo right. On a phone the photo sits under the copy. */
.hero .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-8);align-items:center}
.hero-photo{margin:0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;max-width:100%;box-shadow:0 24px 60px -24px rgba(11,40,100,.45),0 0 0 1px rgba(11,94,215,.10);transform:rotate(1.2deg)}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px rgba(255,255,255,.55);pointer-events:none}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hero .wrap.hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}.hero-photo{transform:none;max-width:560px}}
.hero h1.hero-or .ho-or{justify-self:stretch;display:flex;align-items:center;gap:.55em;margin:.2em 0 .16em;font-size:.56em;line-height:1;color:#D7263D}
.hero h1.hero-or .ho-or b{font-weight:800;letter-spacing:.2em;margin-right:-.2em}
.hero h1.hero-or .ho-or::before,.hero h1.hero-or .ho-or::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(215,38,61,0),rgba(215,38,61,.55))}
.hero h1.hero-or .ho-or::after{background:linear-gradient(90deg,rgba(215,38,61,.55),rgba(215,38,61,0))}
.hero .lead{margin-top:var(--sp-5)}
.hero .acts{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero .facts{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5);color:var(--color-muted);font-size:var(--fs-sm)}.hero .facts span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-ok);margin-right:8px;vertical-align:middle}
.horizon{position:relative;aspect-ratio:1/1;max-width:560px;justify-self:end;width:100%}
.horizon svg{width:100%;height:100%;display:block;overflow:visible}
.horizon .lbl{font:var(--fw-medium) 11px var(--font-data);letter-spacing:.08em;fill:var(--color-muted)}
.horizon .earth{fill:var(--color-surface);stroke:var(--color-hair-2);stroke-width:1.2}
.horizon .land{fill:var(--color-well);stroke:none}
.horizon .grat{fill:none;stroke:var(--color-hair);stroke-width:.8}
.horizon .term{fill:url(#ff-term)}
.horizon .arc{fill:none;stroke:var(--color-hair-2);stroke-width:1.5;stroke-dasharray:3 6}
.horizon .route{fill:none;stroke:var(--route-color);stroke-width:var(--ffx-route-stroke);stroke-linecap:round}
.horizon .pin{fill:var(--route-color)}.horizon .dest{fill:var(--color-surface);stroke:var(--route-color);stroke-width:2.5}
.horizon .mark{fill:var(--route-color)}
html.ffn-js .horizon.is-in .route{stroke-dasharray:var(--_len,600);stroke-dashoffset:var(--_len,600);animation:ff-draw calc(var(--ffx-route-draw-ms) * 2 * var(--ffx-motion-k)) var(--ease-out) .4s forwards}
@keyframes ff-draw{to{stroke-dashoffset:0}}
html.ffn-js .horizon.is-in .mark{offset-path:var(--_path,none);offset-rotate:auto;animation:ff-travel calc(var(--ffx-route-draw-ms) * 2 * var(--ffx-motion-k) / var(--ffx-route-mark-speed)) var(--ease-out) .4s forwards;transform:scale(var(--ffx-route-mark-scale))}
@keyframes ff-travel{from{offset-distance:0%}to{offset-distance:100%}}
html.ffn-js .horizon.is-in .earth-g{animation:ff-settle calc(var(--dur-4) * var(--ffx-motion-k)) var(--ease-out) forwards}
@keyframes ff-settle{from{transform:rotate(-4deg) translateY(10px)}to{transform:none}}
.horizon .earth-g{transform-origin:70% 80%}
.dest-word{display:inline-block;min-width:8ch}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;min-height:0}.horizon{max-width:420px;justify-self:center;margin-top:var(--sp-4)}}
.faq{max-width:760px;margin-top:var(--sp-6)}details{background:var(--color-surface);border:1px solid var(--color-hair);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:8px}summary{cursor:pointer;font:var(--fw-semibold) var(--fs-base) var(--font-ui);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--color-muted);font-weight:400}details[open] summary::after{content:"\2013"}details p{color:var(--color-text-2);margin:8px 0 0;font-size:var(--fs-md);max-width:var(--measure)}
.try{margin-top:var(--sp-6);max-width:640px}.try-row{display:grid;grid-template-columns:1fr 130px auto;gap:var(--sp-2);margin-top:var(--sp-2)}.try input,.try select{min-height:48px;padding:10px 12px;border:1px solid var(--color-edge);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:var(--fs-base) var(--font-ui)}.try input:focus,.try select:focus{outline:0;border-color:var(--color-brand);box-shadow:var(--shadow-focus)}.try-out:not(:empty){margin-top:var(--sp-3);background:var(--color-surface);border:1px solid var(--color-hair);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4)}.try-out .r{padding:10px 0;border-top:1px solid var(--color-hair)}.try-out .r:first-child{border-top:0}.try-out .r b{display:block;font-size:var(--fs-md)}.try-out .m{color:var(--color-muted);font-size:var(--fs-sm);margin-top:2px}.try-out .p{color:var(--color-brand-text);font-weight:var(--fw-semibold);font-size:var(--fs-sm);margin-top:3px}.try-out .v{color:var(--color-muted);font-size:var(--fs-xs);margin-top:4px}.try-out .note{color:var(--color-muted);font-size:var(--fs-md)}@media(max-width:560px){.try-row{grid-template-columns:1fr}}
/* 2 · doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-hair);background:var(--color-surface);color:var(--color-text);text-decoration:none!important;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.door:hover{border-color:var(--color-hair-brand);box-shadow:var(--shadow-md);text-decoration:none!important}
.door .ffn-slot{position:absolute;inset:0;background:var(--_tint)}
.door .ffn-slot svg{position:absolute;inset:auto 0 0 0;width:100%;height:58%;display:block}
.door .ffn-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ffx-img-x) var(--ffx-img-y);transform:scale(var(--ffx-img-zoom));transition:transform var(--dur-4) var(--ease-out)}
.door:hover .ffn-slot img{transform:scale(calc(var(--ffx-img-zoom) * 1.02))}
.door .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,var(--color-surface) 78%)}
.door .body{position:relative;padding:var(--sp-5)}
.door .code{font:var(--fw-bold) 56px/1 var(--font-display);letter-spacing:var(--ls-display);color:var(--color-text);opacity:.9;position:absolute;top:var(--sp-5);left:var(--sp-5)}
.door h3{font-size:var(--fs-2xl);margin-top:var(--sp-2)}
.door .d{color:var(--color-text-2);margin-top:var(--sp-2);font-size:var(--fs-md)}
.door .go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);color:var(--color-brand-text);font-weight:var(--fw-semibold);font-size:var(--fs-md)}
.door.study{--_tint:linear-gradient(160deg,#E8F0FE 0%,#F5F7FB 60%)}.door.work{--_tint:linear-gradient(160deg,#EEF2F8 0%,#F5F7FB 60%)}.door.settle{--_tint:linear-gradient(160deg,#FBF4E6 0%,var(--color-paper) 60%)}
.door .sky{fill:none;stroke:var(--color-hair-2);stroke-width:1.2}
@media(max-width:900px){.doors{grid-template-columns:1fr}.door{min-height:300px}}
/* 3 · prepared for you */
/* R78. The two-column split existed to put a mocked study document beside a single list of
   steps. The document is gone: it was a study-lane artefact sitting above a two-lane
   comparison, quietly telling a remote visitor this product was about universities. The
   comparison now takes the full width, which is what a comparison needs. */
.prep{display:block}

.doc{background:var(--color-paper);border:1px solid var(--color-hair);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.doc .dh{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--color-hair);margin-bottom:var(--sp-3)}
.doc .ffn-line{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:6px 0;font-size:var(--fs-md);color:var(--color-text-2)}
.doc .ffn-inner{white-space:nowrap;overflow:hidden;display:inline-block}
.doc .ffn-stamp{flex:none}
.waypoints{display:flex;flex-direction:column;gap:var(--sp-4)}
.wp{display:grid;grid-template-columns:28px 1fr;gap:var(--sp-3);align-items:start;position:relative}
.wp::before{content:"";position:absolute;left:13px;top:28px;bottom:-16px;width:2px;background:var(--color-hair-2)}
.wp:last-child::before{display:none}
.wp i{width:28px;height:28px;border-radius:50%;border:2px solid var(--color-hair-2);background:var(--color-surface);display:grid;place-items:center;font:var(--fw-semibold) 12px var(--font-data);color:var(--color-muted);position:relative;z-index:1}
.wp.now i{border-color:var(--route-color);color:var(--route-color);box-shadow:0 0 0 4px var(--color-brand-soft)}
.wp b{display:block;font-size:var(--fs-lg);font-family:var(--font-display);letter-spacing:var(--ls-heading)}.wp span{display:block;color:var(--color-text-2);font-size:var(--fs-md);margin-top:2px}
@media(max-width:900px){.prep{grid-template-columns:minmax(0,1fr)}.doc{min-width:0}}@media(max-width:640px){html.ffn-js .doc .ffn-line>.ffn-inner,.doc .ffn-inner{width:auto!important;white-space:normal!important;transition:none!important}.doc .ffn-line{white-space:normal;flex-wrap:wrap}}
/* 4 · atlas — THE DESTINATION TRAIN (R78)
   Was a grid of 54 chips, which read as a list of buttons rather than as reach. The same 54
   countries now travel as one continuous train, so the scale is felt rather than counted.
   The whole movement is ONE transform on ONE element. The browser can hand that to the GPU and
   keep it at 60fps; a JavaScript timer repositioning 108 cards could not. */
.atlas-static{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}.atlas-static a{color:var(--color-brand-text)}
.atlas{position:relative}
.train-track{position:relative;overflow:hidden;padding:14px 0 16px;
  /* The track fades at both ends so cards enter and leave rather than being cut off, which is
     what makes it read as a train passing rather than a list in a box. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* The rail beneath the carriages. Suggestion, not illustration. */
.train-track::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,var(--color-hair-brand),transparent);opacity:.5}
/* STEADY AND READABLE (owner, 2026-09-14: "blurry, vibrating, difficult to read"). The rail moves in whole-pixel steps, one step
   per pixel travelled, so a name is never drawn between two pixels and shimmering; and it travels at 40 px a second, slow enough
   to read each country as it passes. */
.train-rail{display:flex;gap:8px;width:max-content;will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased;
  animation:train-run var(--train-t,120s) steps(var(--train-steps,4000),end) infinite}
/* Travels exactly the width of ONE pass of the sequence. Because the sequence is rendered
   twice, at that moment the second copy sits precisely where the first began, so the reset is
   invisible and there is no jump. */
@keyframes train-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--train-w,2000px) * -1),0,0)}}
.train-track:hover .train-rail,.train-track:focus-within .train-rail{animation-play-state:paused}
/* Every carriage is the same size, whatever the country is called, so the train stays even.
   Long names shrink inside the card rather than stretching it. */
/* A carriage is a shade off the ground - white over the ivory page, with a warm edge and a
   soft shadow - so the eye finds it without it shouting. No backdrop blur: blurring a moving
   backdrop smeared every name and cost a filter pass per card per frame. */
.cty{flex:0 0 auto;width:186px;height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F1E7 100%);
  border:1px solid #E4D9C6;border-left:3px solid #C99A4B;border-radius:12px;
  box-shadow:0 1px 0 #fff inset,0 4px 12px -6px rgba(92,72,44,.28);
  text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cty:hover,.cty:focus-visible{transform:translateY(-3px);border-color:var(--color-hair-brand);border-left-color:#0B5ED7;
  box-shadow:0 1px 0 #fff inset,0 10px 22px -10px rgba(11,94,215,.35);outline:none}
.cty .flg{flex:none;width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(11,27,58,.14)}
.cty .nm{min-width:0;font-weight:var(--fw-semibold,600);font-size:calc(var(--fs-sm) * 1.05);color:var(--color-text);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important}
.cty .lanes{display:none}
.train-note{text-align:center;color:var(--color-muted);font-size:var(--fs-xs);margin-top:2px}
/* Mobile keeps the train. Turning it into a vertical list would lose the one thing the section
   exists to say, so the carriages narrow instead. */
@media(max-width:640px){.cty{width:158px;height:48px;padding:0 12px}}
/* Someone who has asked their system for less motion gets none of it, and can push the train
   along themselves instead of losing access to the countries. */
@media(prefers-reduced-motion:reduce){
  .train-rail{animation:none;flex-wrap:nowrap}
  .train-track{overflow-x:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:none;mask-image:none}
}
/* 5 · one case */
.case-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-8);align-items:center}
.case{background:var(--color-surface);border:1px solid var(--color-hair);border-radius:var(--radius-xl);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.tl{position:relative;padding-left:22px;margin-top:var(--sp-3)}.tl::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--color-hair-2)}
.tl-i{position:relative;padding:6px 0 12px}.tl-i::before{content:'';position:absolute;left:-19px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--dot,var(--route-color));box-shadow:0 0 0 3px var(--color-surface)}
.tl-i b{display:block;font-size:var(--fs-md)}.tl-i span{color:var(--color-muted);font-size:var(--fs-sm)}
.tl-i .when{font-family:var(--font-data);font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--color-muted);text-transform:uppercase}
@media(max-width:900px){.case-wrap{grid-template-columns:1fr}}
/* 6 · desk */
.desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:center}
.deskshot{background:var(--color-paper);border:1px solid var(--color-hair);border-radius:var(--radius-xl);padding:var(--sp-6);position:relative;overflow:hidden}
.deskshot .win{background:var(--color-surface);border:1px solid var(--color-hair-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(-2deg) translateY(clamp(-40px,calc(var(--_scroll,0px) * var(--ffx-parallax-k) * -1),40px))}
.deskshot .win .ttl{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--color-hair)}.deskshot .win .ttl i{width:8px;height:8px;border-radius:50%;background:var(--color-hair-2)}
.deskshot table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.deskshot th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--color-hair);font:var(--fw-medium) var(--fs-2xs) var(--font-data);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-muted)}.deskshot td{padding:9px 10px;border-bottom:1px solid var(--color-hair);color:var(--color-text-2)}
.claims{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-5)}.claims>div{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}.claims svg{width:22px;height:22px;stroke:var(--color-ok);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.claims b{display:block;font-size:var(--fs-lg)}.claims span{color:var(--color-text-2);font-size:var(--fs-md)}
@media(max-width:900px){.desk{grid-template-columns:1fr}}
/* 7 · ledger */
.ledger{background:var(--color-surface);border:1px solid var(--color-hair);border-radius:var(--radius-xl);padding:var(--sp-6);max-width:760px}
.ledger .row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-4);align-items:center;padding:10px 0;border-bottom:1px solid var(--color-hair);font-size:var(--fs-md)}.ledger .row:last-of-type{border-bottom:0}
.ledger .row .mono{color:var(--color-muted)}
.ledger .sum{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:2px solid var(--color-text)}
.ledger .sum b{font:var(--fw-bold) var(--fs-4xl) var(--font-display);letter-spacing:var(--ls-display);font-variant-numeric:tabular-nums}
/* 8 · close */
.close{background:var(--color-ink-surface);color:#fff;border-radius:var(--radius-xl);padding:var(--sp-10) var(--sp-6);text-align:center}
.close h2{color:#fff;font-size:var(--fs-4xl)}.close p{color:#B7C2D9;margin-top:var(--sp-3);font-size:var(--fs-lg)}.close .acts{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-6)}
.close .ghost{background:transparent;color:#fff;border-color:var(--color-hair-2)}.close .ghost:hover{background:rgba(255,255,255,.08)}
.close .route-rest{width:min(360px,100%);height:24px;margin:0 auto var(--sp-5);display:block}
footer{border-top:1px solid var(--color-hair);padding:var(--sp-6) 0;color:var(--color-muted);font-size:var(--fs-sm)}footer .wrap{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}footer a{color:var(--color-text-2);margin-right:14px}
.sticky{display:none}
.wa{position:fixed;right:18px;bottom:18px;z-index:var(--z-fab);display:inline-flex;align-items:center;gap:8px;background:var(--color-surface);color:var(--color-text);font:var(--fw-semibold) var(--fs-md) var(--font-ui);padding:10px 14px;border-radius:var(--radius-pill);text-decoration:none!important;border:1px solid var(--color-hair-2);box-shadow:var(--shadow-md)}.wa svg{width:20px;height:20px;fill:#25D366}
@media(max-width:560px){.sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);background:var(--color-surface);border-top:1px solid var(--color-hair);padding:10px 14px calc(10px + env(safe-area-inset-bottom));justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--color-text-2);gap:var(--sp-3)}.wa{bottom:78px}}
/* reveal: visible at rest; only animates when scenes.js marks the root */
html.ffn-js .ffn-reveal{opacity:0;transform:translateY(var(--ffx-reveal-rise))}
html.ffn-js .ffn-reveal.is-in{opacity:1;transform:none;transition:opacity calc(var(--ffx-reveal-ms) * var(--ffx-motion-k)) var(--ease-out),transform calc(var(--ffx-reveal-ms) * var(--ffx-motion-k)) var(--ease-out)}
@media (prefers-reduced-motion:reduce){html.ffn-js .ffn-reveal,html.ffn-js .ffn-reveal.is-in{opacity:1!important;transform:none!important;transition:none!important}html.ffn-js .horizon .route,html.ffn-js .horizon .mark,html.ffn-js .horizon .earth-g{animation:none!important;stroke-dashoffset:0!important;offset-distance:100%}.deskshot .win{transform:rotate(-2deg)!important}}

/* ===== R24: VIDEO SURFACE FOR THE SIGNED-OUT PAGES =====
   The marketing pages are the first thing a visitor sees and they now run on the same
   cinematic surface as the product, so the experience is continuous from landing to sign-in.
   Text is opaque and sharp throughout: the blur belongs to the panel, never to the type. */
#mktBg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;overflow:hidden}
#mktOverlay{position:fixed;inset:0;z-index:-1;pointer-events:none}
body{}
main,section,.wrap{}

/* Type: opaque, sharp, uniform. No shadow, no glow, no faded greys. */
h1,h2,h3,h4,h5,b,strong,legend,summary,th,label{opacity:1!important}
p,li,td,figcaption,.lead,.sub,.muted,.small,.facts span{opacity:1!important}
.eyebrow{letter-spacing:.10em;opacity:1!important}
a{}
*{}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Panels become navy glass rather than white cards. */
.card,.panel,.tile,.box,.quote,.plan,.faq,.step,.stat,.door,.price,.testimonial{border:1px solid var(--color-hair-2)!important}

/* Header sits on the glass, not on a white bar. */
.top,header.top{border-bottom:1px solid var(--color-hair)!important}
.top a,.top .brand span{}
.top .cta{}

/* Buttons and inputs. */
.btn.primary{border:0!important}
.btn.ghost{border:1px solid var(--color-hair-2)!important}
input,select,textarea{border:1px solid var(--color-hair-2)!important}
input::placeholder{opacity:1}

/* Dark sections that were already dark must not double up. */
.dark,.band.dark{}

/* Respect data saver and reduced motion: the gradient alone is used, never a download. */

/* ============================================================================
   R24 — THE PUBLIC SITE ON THE PRODUCT'S OWN SURFACE
   A visitor now sees the same cinematic identity as the signed-in app: video
   background, navy glass panels, fully opaque text. No haze, no blur on type.
   ============================================================================ */
#ff-bgvideo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* A veil keeps every headline readable over any frame of the video. */
#ff-bgveil{position:fixed;inset:0;z-index:1;pointer-events:none}
body{}
header.top,main,footer{position:relative;z-index:2}
header.top{border-bottom:1px solid var(--color-hair)!important}
header.top .brand span,header.top nav a{}
header.top nav a.cta{}

/* Sections are transparent; only real panels carry glass. */
section{}
.sec-head h2,h1,h2,h3,h4{}
p,.lead,.sub,li,span,dd,dt{}
.lead,.sec-head p{}
.eyebrow{letter-spacing:.10em}
h1 em,h2 em{font-style:normal}
.facts span{}

/* Cards, panels and the case mock become glass rather than white slabs. */
.card,.panel,.wp,.door,.tier,.quote,.case,.step,.faq,.note,.box{border:1px solid var(--color-hair-2)!important}
.card *,.panel *,.wp *,.door *,.tier *,.quote *,.case *{}

/* Forms on glass. */
input,select,textarea{border:1px solid var(--color-hair-2)!important}
input::placeholder{opacity:1}
.btn.primary{border:0!important}
.btn.ghost{border:1px solid var(--color-hair-2)!important}

/* (The old pill-chip destination grid lived here. It is gone: its rules came later in the
   file than the train's and silently overrode the carriage design.) */

/* Footer on the same surface. */
footer{border-top:1px solid var(--color-hair)!important}
footer,footer a,footer p,footer span{}

/* Reduced motion / data saver: the gradient alone carries it. */

/* ============================================================================
   R25 — LEGIBILITY REPAIR AND MEASURE CONTROL FOR THE SIGNED-OUT PAGES

   R24 put the marketing pages on the dark video surface and painted every p, li
   and td #DCE9FF with !important. Two of those pages still drew white tables,
   white call-out boxes, white segmented controls and a white sticky contents
   list underneath that paint. Pale blue on white is a contrast ratio of about
   1.2 to 1, so the CRM comparison table, the pricing table, the closing call to
   action and the help contents were being painted invisible. The bold half of
   the wordmark went white-on-white in the same way.

   The repair puts those last white surfaces on the same glass as everything
   else, then hands the semantic colours (ticks, prices, quiet notes) back to
   the dark surface, and finally caps the measure so no paragraph runs past a
   comfortable reading width or spills out of its panel.
   ============================================================================ */

/* --- 1. The last white surfaces become glass ------------------------------ */
.cta,.seg,.addon,.contact,.toc,.notes .note,.kill div{border:1px solid var(--color-hair-2)!important}
.kill div,.kill div span{}
.kill div span{}

/* A bare <header> (the CRM and pricing pages predate .top) got no treatment at
   all, so it stayed a white bar under white text. */
header:not(.top){border-bottom:1px solid var(--color-hair)!important}
header .brand,header .brand span,header .brand b{}
header .brand b{}
header nav a{}
header nav a.cta{border:0!important}

/* --- 2. Tables read on the dark surface ----------------------------------- */
table{}
thead th{border-bottom:1px solid var(--color-hair-2)!important}
tbody td{border-bottom:1px solid var(--color-hair)!important}
tbody td:first-child{font-weight:600}
td.ok,td .ok{}
.cmp td{}
.cmp tr.ff td{}
.cmp th.g{}
.cmp .y{font-weight:800}
.cmp .n{}
.cmp .h{}
/* The row label stays put while nineteen columns scroll past it. */
.cmp th:first-child{}
.cmp td:first-child{}
.cmp tr.ff td:first-child{}

/* --- 3. Measure: no line runs wider than the eye can track ---------------- */
p,li,dd{overflow-wrap:break-word}
.lead,.sub,.fineprint,.tbl-hint,.cta p,.top p,.hero p{max-width:74ch;text-wrap:pretty}
.hero p,.top p,.cta p{margin-left:auto;margin-right:auto}
.notes .note p,.card p,.card li,.plan li{max-width:46ch}

/* --- 4. Nothing spills out of its own column ------------------------------ */
.grid>*,.diff>*,.stats-in>*,.notes>*,.kill>*,.cols>*,.plan,.card{min-width:0}
main,section,.wrap{max-width:100%}
table:not(.cmp){table-layout:auto}

/* ============================================================================
   R26 — THE SIGNED-OUT LANDING PAGE

   Five sections, nothing else: the hero, the three doors, the four steps, the
   destinations and the closing call. Everything removed from this page still
   exists on its own page; it was simply competing for attention here.

   Four things were wrong on screen and are fixed below.

   The doors were 440px tall because each one reserved space for a photograph
   that is not there, so two thirds of every card was empty tinted gradient.
   The photograph slot is gone and the card is now the height of its own words.

   Those cards were also painted from a white gradient with a scrim fading to a
   white surface, which is why they read as pale slabs against a dark page.
   They are navy glass now, like every other panel.

   Type was set in the light-theme greys (#8A98B5 and friends). On a dark video
   background a mid grey is not "quiet", it is unreadable. Everything is white,
   with one dimmer white for genuine supporting print.

   The video sat at 55% opacity under two stacked veils totalling roughly 70%
   black, so a bright clip arrived as a grey wash. The video is brighter and the
   veil is lighter; contrast for text is held by the panels instead.
   ============================================================================ */

/* --- 1. The three doors, at the size of their own content ---------------- */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.door{position:relative;display:block;min-height:0!important;padding:var(--sp-5);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-hair-2)!important;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.door:hover{text-decoration:none!important}
.door .body{position:relative;padding:0}
/* The 01/02/03 sat at 56px in the corner of an empty photo area. It is now a small
   marker on the same line as the lane it numbers. */
.door .code{position:static;display:inline-block;font:var(--fw-bold) 13px/1 var(--font-data);letter-spacing:.14em;opacity:1;margin-bottom:var(--sp-2)}
.door .eyebrow{display:inline-block;margin-left:8px}
.door h3{font-size:var(--fs-lg);margin-top:4px;line-height:1.3}
.door .d{margin-top:6px;font-size:var(--fs-sm);line-height:1.55;max-width:42ch}
.door .go{margin-top:var(--sp-3);font-size:var(--fs-sm)}
@media(max-width:900px){.doors{grid-template-columns:1fr}.door{min-height:0!important}}

/* --- 2. Pure white type. No greys anywhere on this surface --------------- */
.hero h1,.sec-head h2,h1,h2,h3,h4,.door h3,.wp b,.close h2{}
.hero .lead,.sec-head p,.lead,.sub,p,li,dd,dt,.wp span,.cty .nm,.facts span,
.close p,.closing-note{}
/* One dimmer white, still white, for print that genuinely sits behind the rest. */
.closing-note,.facts span,footer,footer a,footer span{}
.eyebrow,.mono{}
.hero .lead{font-size:var(--fs-xl);line-height:1.55;max-width:62ch}

/* --- 3. The four steps, as one clean list ------------------------------- */
/* The four steps. Boxes are transparent, so the video carries them rather than a slab of
   navy sitting on top of it; a hairline is enough to hold each step apart. The step name is
   cyan, the sentence beneath it is pure white, and there is no third grey tone. */
.waypoints{display:grid;gap:2px}
.wp{display:flex;gap:16px;align-items:flex-start;padding:16px 4px;min-width:0;border:0!important;border-bottom:1px solid var(--color-hair)!important;border-radius:0!important}
.wp:last-child{border-bottom:0!important}
.wp i{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font:var(--fw-bold) 13px/1 var(--font-data);font-style:normal;border:1px solid rgba(126,230,255,.55)}
.wp b{display:block;font-size:var(--fs-xl);line-height:1.25;letter-spacing:var(--ls-heading)}
.wp span{display:block;margin-top:5px;font-size:var(--fs-md);line-height:1.6;max-width:70ch}
.wp.now{}
.wp.now i{}

/* --- 4. Destinations: a real flag, not an emoji the OS may not have ------ */
/* Destination carriages are styled once, with the train, in section 4 above. */

/* --- 5. The closing line carries somewhere to go ------------------------ */
.closing-note{margin-top:var(--sp-5);font-size:var(--fs-sm);max-width:64ch;margin-left:auto;margin-right:auto}
.ask{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:var(--sp-4)}
.ask a{font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-ui);text-decoration:none!important;border-bottom:1px solid rgba(126,230,255,.35);padding-bottom:1px}
.ask a:hover{}

/* --- 6. Let the video actually be seen ---------------------------------- */
#ff-bgveil{}
#mktOverlay{}


/* ============================================================================
   R78. THE TWO LANES, SIDE BY SIDE.
   The four steps used to run down a single column, which quietly said the two
   lanes were one journey. They are not: one ends at an airport and the other
   never leaves the house. Set as a grid so the SAME step sits on the SAME line
   in both columns and the difference can be read across rather than guessed.
   ========================================================================== */
.lane-compare{display:grid;gap:0;margin-top:var(--sp-4)}
.lane-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);align-items:stretch;padding:14px 0;border-bottom:1px solid var(--color-hair)}
.lane-row:last-child{border-bottom:0}
.lane-n{font:700 12px/1.9 var(--font-mono,ui-monospace,monospace);opacity:.75;letter-spacing:.06em}

/* The two panels. Glass, so the map behind stays visible and neither lane looks
   like the primary one: an applicant should feel they are choosing, not being
   steered. Each keeps its own edge colour throughout the section. */
.lane-c{position:relative;padding:12px 14px;border-radius:12px;border:1px solid var(--color-hair)}
.lane-c-study{border-left:3px solid rgba(245,184,65,.75)}
.lane-c-work{border-left:3px solid rgba(45,212,191,.75)}
.lane-c b{display:block;font:800 14px var(--font-ui);margin-bottom:4px;letter-spacing:.01em}
.lane-c span{display:block;font-size:13.5px;line-height:1.55}
.lane-c em{display:block;font-style:normal;font-size:12.5px;margin-top:6px}

/* The header row carries the lane names, so the two products are named once,
   in their own shape, before a single step is read. */
.lane-head{border-bottom:1px solid var(--color-hair);padding-bottom:16px}
.lane-head .lane-c{}
.lane-title{display:block;font-size:16px}
.lane-name{font-weight:800;letter-spacing:.02em;line-height:1.15}
.lane-name sub,.lane-name sup{font-size:.58em;letter-spacing:.04em;opacity:.88;font-weight:800;line-height:0}
.lane-name sub{vertical-align:-.25em}
.lane-name sup{vertical-align:.55em}
/* ---------------------------------------------------------------------------
   THE LOCKUP, IN THREE COLOURS
   One structure for both lanes so they read as one family: the verb carries
   the lane's own hue, the connector carries the brand, and FOREIGN with its
   superscript stays ink. Three colours, never four, and the same three
   positions in each lane - which is what makes two different names look like
   one system rather than two logos.
   ------------------------------------------------------------------------ */
.lane-name{font-weight:800}
.lane-name .ln-a,.lane-name .ln-b{font-weight:900;letter-spacing:-.01em}
.lane-name .ln-b{color:var(--color-text)}
.lane-name sub,.lane-name sup{color:var(--color-brand);opacity:1}
.lane-name .ln-study{color:#A85B00}
.lane-name .ln-work{color:#0F766E}


/* On a phone the two columns stack, and each keeps its lane name above it so a
   reader always knows which lane they are looking at. */
@media (max-width:860px){
  .lane-row{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .lane-n{display:none}
  .lane-c-study::before{content:"Study abroad"}
  .lane-c-work::before{content:"Work remotely"}
  .lane-c-study::before,.lane-c-work::before{display:block;font:700 10px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px}
  .lane-head .lane-c-study::before,.lane-head .lane-c-work::before{content:none}
}

/* R78. The four F's, one line per lane. The words are deliberately the same in three places
   out of four: what changes is the third, because that is precisely where the two lanes part
   company — one of them flies somewhere and the other files an application from home. */
.brandline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;font:800 13.5px var(--font-display,var(--font-ui));letter-spacing:.01em}
.brandline .bl-study{}
.brandline .bl-work{}
.brandline .bl-sep{font-weight:400}
@media(max-width:560px){.brandline{flex-direction:column;align-items:flex-start;gap:4px}.brandline .bl-sep{display:none}}

/* R79 · closing action. Compact by design: the section above already sells the product, so
   this one gives the action and the useful links and then stops. */
#start .close{border-top:1px solid var(--color-hair);padding-top:var(--sp-4);text-align:center}
.close-top{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}
.close-top h2{margin:0;font-size:var(--fs-xl)}
.close-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:var(--sp-3);font-size:var(--fs-sm)}
.close-links a{text-decoration:none}
.close-links a:hover{}
.close-links span{}
.close-social{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:var(--sp-3)}
.close-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--color-hair);transition:color .15s ease,border-color .15s ease,transform .15s ease}
.close-social a:hover{transform:translateY(-2px)}
.close-social a:focus-visible{outline:2px solid var(--color-hair-brand);outline-offset:2px}
.close-social .cprt{font-size:var(--fs-xs);opacity:.75;margin-left:4px}
@media(max-width:560px){.close-top{flex-direction:column;gap:var(--sp-2)}
  .close-top .btn{width:100%}.close-links{gap:8px;font-size:var(--fs-xs)}}

/* Hero: the offer in one line, then what ForiForeign does for the person - four rows of two short bullets (owner, 2026-09-17). */
.hero .hero-tag{margin:14px 0 0;font:700 clamp(17px,2.2vw,20px)/1.35 var(--font-ui);color:var(--color-text);letter-spacing:-.01em;text-wrap:balance}
/* QUIETER (owner, 2026-09-20). These six lines were competing with the headline above them. They are supporting
   detail, not a second headline: smaller, lighter, in the reading face rather than the display one, with a smaller
   tick. Held at eleven pixels, which is as small as body text can go and still be read comfortably on a phone. */
.hero .hero-does{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;max-width:46ch;font:500 clamp(11px,.92vw,11.8px)/1.4 var(--font-ui,var(--font-display));letter-spacing:0;color:var(--color-text-2,#5b6b82)}
.hero .hero-does li{display:flex;align-items:flex-start;gap:6px;min-width:0;text-wrap:pretty}
.hero .hero-does li::before{content:"";flex:0 0 11px;width:11px;height:11px;border-radius:50%;margin-top:.2em;background:var(--color-ok) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6L9 17l-5-5%27/%3E%3C/svg%3E") center/7px no-repeat}
@media (max-width:380px){.hero .hero-does{gap:5px 9px;font-size:11px}}

/* The lane chooser is headed by the instruction itself, in brand blue (owner, 2026-09-17). */
.sec-head .lane-pick{font-size:var(--fs-4xl);line-height:1.1;margin:0;color:var(--color-brand);letter-spacing:-.01em;text-wrap:balance}

/* one compact footer (owner, 2026-09-19) */
footer.f-one{padding:18px 0 14px}
.f-one .f-top{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.f-one .f-site{font-weight:700;color:var(--color-text)!important;margin:0;text-decoration:none}
.f-one .wrap{display:block}
.f-one .close-social{margin:0;gap:8px;justify-content:flex-start}
.f-one .close-social a,.f-one .close-social .soc-soon{width:30px;height:30px}
.f-one .f-cta{margin-left:auto;min-height:38px;padding:8px 16px}
.f-one .f-links{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-hair)}
.f-one .f-links a{margin:0;min-height:30px}
@media (max-width:640px){.f-one .f-cta{margin-left:0;width:100%;justify-content:center}.f-one .f-links{gap:2px 14px}}

/* the site address in every footer, with a readable registered mark */
footer a.f-site{margin-right:0}
.f-site .reg,.reg{font-size:.85em!important;vertical-align:.35em;margin-left:1px;font-weight:600;line-height:0}
/* social row in the brand colours (owner, 2026-09-19): always in colour; inert until its link is saved in Admin, then a button */
.close-social a,.close-social .soc-soon{border:0!important;background:transparent!important;width:32px!important;height:32px!important;border-radius:50%}
.close-social .soc-soon{filter:none!important;opacity:1!important;cursor:default}
.close-social a{filter:none;opacity:1;cursor:pointer}
.close-social a:hover{transform:translateY(-2px) scale(1.06)}

/* LAPTOP AND LARGE SCREENS FILL THE WINDOW (owner, 22 September 2026: "make the laptop view full window size, fix and fit").
   The page is designed at about 1440 px wide; on wider screens the whole design is scaled up in steps, so nothing sits in a
   narrow column with empty bands either side. Below 1500 px nothing changes (phones, tablets, small laptops). The fixed
   background is sized by its insets rather than 100vw/100vh, which a zoomed page would enlarge. */
@media (min-width:1500px){body{zoom:1.14}#mktBg{width:auto;height:auto}}
@media (min-width:1800px){body{zoom:1.3}}
@media (min-width:2300px){body{zoom:1.5}}