:root{
    --red:#BF0A30;        /* Liberian flag red  */
    --red-deep:#8E0722;
    --blue:#002868;       /* Liberian flag blue */
    --blue-mid:#1B4B8A;
    --grey:#5B6470;
    --grey-line:#D9DDE3;
    --grey-soft:#EAECEF;
    --paper:#F5F6F8;
    --white:#FFFFFF;
    --ink:#14171C;
    --ok:#1E7B46;
    --ok-soft:#E4F2E9;
    --err:#BF0A30;
    --err-soft:#FBE7EB;
    --shadow:0 1px 2px rgba(20,23,28,.06),0 8px 24px rgba(20,23,28,.07);
    --shadow-rest:0 1px 2px rgba(20,23,28,.05),0 2px 8px rgba(20,23,28,.04);
    --shadow-lift:0 2px 4px rgba(20,23,28,.07),0 16px 34px rgba(20,23,28,.11);
    --radius:14px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Public Sans",system-ui,sans-serif;font-size:17px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:"Archivo",system-ui,sans-serif;letter-spacing:-.01em;line-height:1.05;margin:0}
  a{color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}

  /* official banner */
  .gov{background:var(--blue);color:#cdd8ea;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
  .gov .wrap{display:flex;gap:10px;align-items:center;min-height:34px}
  .gov .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}

  /* Header. Red at Philip's request (the footer stays blue), which puts the
     Liberian flag colours in order down the page: blue banner, red header,
     white body, blue footer. */
  header{background:var(--red);border-bottom:1px solid var(--red-deep);position:sticky;top:0;z-index:20}
  header .wrap{display:flex;align-items:center;gap:14px;min-height:70px}
  /* min-width:0 lets the flex item shrink; without it the text forces the
     header wider than the phone and everything wraps. */
  .mark{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
  .mark span{min-width:0}
  /* display:block matters. <small> is inline by default, and overflow/
     text-overflow do nothing on an inline box - so the brand truncated and
     the sub-line did not, running underneath the sign-in button on any
     phone narrower than about 390px. */
  .mark b,.mark small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* The emblem's outermost ring is red, so on a red header it loses its edge.
     A white disc behind it restores the boundary and reads as an official seal
     on the band. On the old white header no plate was needed. */
  .badge{width:44px;height:44px;flex:none;display:block;object-fit:contain;
    background:var(--white);border-radius:50%;padding:2px}
  .mark b{font-family:"Archivo";font-weight:800;font-size:19px;letter-spacing:-.02em;display:block;line-height:1;color:var(--white)}
  .mark small{color:#f3d3d9;font-size:12px;font-weight:600;letter-spacing:.02em}
  header .spacer{flex:1}
  .ghost{display:none}
  @media(min-width:720px){.ghost{display:inline-block;color:#f6dde2;font-weight:600;font-size:14px;text-decoration:none}
    .ghost:hover{color:var(--white)}}

  /* Sign in. Deliberately minimal: the visual pass is still pending, so this is
     sized and coloured from the existing tokens and nothing more. */
  .authbtn{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:var(--white);
    font:inherit;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:9px;cursor:pointer}
  .authbtn:hover{background:rgba(255,255,255,.14)}
  .authbtn{white-space:nowrap}
  .authwho{color:#f6dde2;font-weight:700;font-size:13px;margin-left:10px;max-width:9ch;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* On a phone the header has room for the emblem, the name and ONE control.
     Adding the button squeezed the brand onto two lines and truncated the
     greeting to "Mo...", so below 600px the greeting goes and the button
     shrinks: "Sign out" already says you are signed in. */
  @media(max-width:600px){
    .authwho{display:none}
    .authbtn{padding:7px 11px;font-size:12.5px}
  }
  /* Below 380px there is not room for the emblem, two lines of text and a
     control. Truncation alone left the product name itself as "I Drive
     Safel...", so the secondary line goes instead and the name keeps its space.
     The name is what identifies the platform; the strapline is not. */
  @media(max-width:380px){
    .mark small{display:none}
    .mark b{font-size:17px}
  }
  /* 320px, the oldest phones still in use. One more step down is what fits
     "I Drive Safely Lib" whole rather than "I Drive Safely ...". */
  @media(max-width:340px){
    .mark b{font-size:15px}
    .badge{width:38px;height:38px}
    .authbtn{padding:6px 9px;font-size:12px}
  }

  /*
   * THE hidden ATTRIBUTE MUST WIN.
   *
   * The browser's own rule is `[hidden]{display:none}` - no !important, a single
   * attribute selector, and the weakest thing in the cascade that can lose. Any
   * author rule with its own `display` beats it, so `el.hidden = true` did nothing to
   * #aRegOnly (`#aRegOnly{display:flex}`) and nothing to .timedbar
   * (`.timedbar{display:flex}`).
   *
   * That is why the Sign in tab still rendered Full name, Phone and the nine
   * categories: the tab switch was correct JavaScript, silently overruled here.
   * The same bug was hiding the timed-mode toggle in plain sight - it was
   * showing on categories with no questions, which is the exact accuracy rule
   * Brief 18 was built to enforce.
   *
   * !important because the whole point is to outrank a future rule written
   * without knowing the element is ever hidden. Anything that must be laid out
   * AND toggled belongs behind a class, not the attribute.
   */
  [hidden]{display:none!important}

  dialog#authDlg{border:0;border-radius:var(--radius);padding:0;width:min(400px,calc(100vw - 32px));
    box-shadow:var(--shadow-lift);color:var(--ink)}
  dialog#authDlg::backdrop{background:rgba(10,14,24,.55)}
  #authForm{padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px}
  #authForm h3{font-family:"Archivo";font-weight:800;font-size:21px}
  #authForm label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--grey)}
  #authForm input,#authForm select{font:inherit;font-size:16px;color:var(--ink);padding:11px 12px;
    border:1.5px solid var(--grey-line);border-radius:10px;background:var(--white);width:100%}
  #authForm input:focus,#authForm select:focus{outline:none;border-color:var(--blue)}
  #aRegOnly,#aConfirmOnly{display:flex;flex-direction:column;gap:12px}

  /* Show/hide sits inside the field's box rather than beside it, so the input
     keeps its full width on a narrow phone. */
  .pwwrap{position:relative;display:block}
  .pwwrap input{padding-right:64px}
  .pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    font:inherit;font-weight:700;font-size:12.5px;letter-spacing:.02em;
    background:none;border:0;color:var(--blue);cursor:pointer;padding:8px 8px;
    /* 44px of touch target inside a 45px-tall input. */
    min-width:44px;min-height:40px;border-radius:8px}
  .pwtoggle:hover{background:var(--grey-soft)}
  .pwtoggle:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

  /* The message under the field it belongs to. The banner still says how many
     fields are wrong; this says what is wrong with THIS one. */
  .fielderr{font-size:12.5px;font-weight:600;color:var(--err);line-height:1.35}
  #authForm input.bad,#authForm select.bad{border-color:var(--err)}
  /* Colour alone would say nothing to a red-green colour-blind user and nothing
     at all in bright sun on a phone, so the border thickens as well. */
  #authForm input.bad,#authForm select.bad{border-width:2px}
  #authForm input.bad:focus,#authForm select.bad:focus{border-color:var(--err)}
  .authtabs{display:flex;gap:8px}
  .authtabs button{flex:1;font:inherit;font-weight:700;font-size:13.5px;padding:9px;cursor:pointer;
    border:1.5px solid var(--grey-line);background:var(--white);color:var(--grey);border-radius:9px}
  .authtabs button.on{border-color:var(--blue);color:var(--blue);background:#f2f6fd}
  .autherr{margin:0;background:var(--err-soft);color:var(--err);font-size:13.5px;font-weight:600;
    padding:10px 12px;border-radius:9px;line-height:1.4}
  .authacts{display:flex;gap:10px;align-items:center;margin-top:2px}
  .authacts .cta{flex:1;justify-content:center;padding:13px 18px}
  .authcancel{font:inherit;font-weight:700;font-size:14px;background:none;border:0;
    color:var(--grey);cursor:pointer;padding:10px}

  /* hero */
  .hero{padding:38px 0 26px;position:relative}
  @media(min-width:720px){.hero{padding:52px 0 30px}}
  /* wrap-reverse: side by side on desktop with the emblem to the right, and on
     a narrow screen the emblem lands ABOVE the headline instead of stranded
     between the button and the stats. flex-basis on the copy is what forces
     the wrap before the text gets squeezed. */
  .hero-top{display:flex;align-items:center;gap:34px;flex-wrap:wrap-reverse}
  .hero-copy{flex:1 1 340px;min-width:0}
  .hero-mark{flex:none;display:block;margin:0 auto;height:auto;
    width:clamp(116px,20vw,228px);filter:drop-shadow(0 6px 18px rgba(20,23,28,.10))}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
  .eyebrow .line{width:34px;height:2px;background:var(--red)}
  .hero h1{font-size:clamp(38px,6.5vw,68px);font-weight:800;max-width:15ch}
  .hero h1 em{font-style:normal;color:var(--red)}
  .hero p.lead{font-size:clamp(17px,2.2vw,21px);color:#3a414b;max-width:52ch;margin:22px 0 30px}
  .cta{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:var(--white);text-decoration:none;
    font-weight:700;font-size:16px;padding:15px 26px;border-radius:11px;border:none;cursor:pointer;transition:transform .12s ease,background .18s ease;font-family:inherit}
  .cta:hover{background:var(--red-deep);transform:translateY(-1px)}
  .cta.alt{background:var(--blue)}
  .cta.alt:hover{background:var(--blue-mid)}
  .cta.line{background:transparent;color:var(--blue);border:1.5px solid var(--grey-line)}
  .cta.line:hover{background:var(--white);border-color:var(--blue)}

  /* Road divider. Previously a lone dashed stripe, which read as a stray rule;
     giving it a carriageway with a dashed centre line makes it legible as the
     road marking it was always meant to be. */
  .road{height:10px;margin:40px 0 0;border-radius:5px;background:var(--grey-soft);position:relative;overflow:hidden}
  .road::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
     background:repeating-linear-gradient(90deg,var(--blue) 0 26px,transparent 26px 48px);opacity:.8}

  /* stats */
  /* auto-fit, not repeat(3,1fr): three fixed columns on a 360px phone leave
     each stat 52px of content, which overflows "Road-user categories". Same
     idiom as the category tiles below; still three across on desktop. */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:44px}
  .stat{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);padding:20px 22px}
  .stat b{font-family:"Archivo";font-weight:800;font-size:34px;color:var(--blue);display:block;line-height:1}
  .stat span{color:var(--grey);font-weight:600;font-size:13.5px;letter-spacing:.02em}

  /* Timed mode. Rendered only when a category can actually be started, so this
     never appears above a grid of "Coming soon" cards. */
  /* Quiet on purpose: it is a third option under two real actions, and it must
     not compete with Retake. */
  .rhome{display:block;margin:14px auto 0;font:inherit;font-weight:700;
    font-size:14px;background:none;border:0;color:var(--blue);cursor:pointer;
    padding:10px 12px;border-radius:9px}
  .rhome:hover{background:var(--grey-soft)}
  .rhome:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

  .timedbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
  .timedbar label{display:inline-flex;align-items:center;gap:8px;font-weight:700;
    font-size:14px;color:var(--ink);cursor:pointer}
  .timedbar input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
  .timednote{color:var(--grey);font-size:13px}

  /* The countdown. A display of the server's allowance, never the authority. */
  .clock{font-family:"Archivo";font-weight:800;font-size:14px;letter-spacing:.02em;
    color:#cdd8ea;margin-left:12px;font-variant-numeric:tabular-nums}
  .clock.low{color:#ffb3c0}

  /* Past attempts. Signed-in learners only. */
  .attempts{list-style:none;margin:0;padding:0;border:1px solid var(--grey-line);
    border-radius:var(--radius);overflow:hidden;background:var(--white)}
  .att{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 15px;
    border-top:1px solid var(--grey-soft)}
  .att:first-child{border-top:0}
  .att b{font-family:"Archivo";font-weight:700;font-size:15px;flex:1 1 170px;min-width:0}
  .ameta{color:var(--grey);font-size:12.5px;flex:1 1 100%;order:3}
  .ascore{font-family:"Archivo";font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
  .averdict{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    padding:4px 9px;border-radius:20px;white-space:nowrap}
  .att.pass .ascore{color:var(--ok)}
  .att.pass .averdict{background:var(--ok-soft);color:var(--ok)}
  .att.fail .ascore{color:var(--err)}
  .att.fail .averdict{background:var(--err-soft);color:var(--err)}
  @media(min-width:560px){.ameta{flex:0 1 auto;order:0}}

  /* Administration. Plain on purpose: the visual pass has not landed and there
     is no admin screen in the wireframes, so this will be redrawn. */
  .ablock{margin:0 0 22px}
  .ablock h3{font-family:"Archivo";font-weight:800;font-size:16px;margin:0 0 6px}
  .anote{margin:0 0 10px;color:var(--grey);font-size:13px;line-height:1.45;max-width:70ch}
  /* Tables are the one thing that genuinely need to scroll sideways on a phone,
     so they scroll inside their own box and the page never does. */
  .atable{width:100%;border-collapse:collapse;background:var(--white);
    border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;
    font-size:13.5px;display:block;overflow-x:auto;white-space:nowrap}
  .atable th{text-align:left;font-weight:700;font-size:11.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--grey);padding:10px 12px;background:#fbfbfc}
  .atable td{padding:10px 12px;border-top:1px solid var(--grey-soft)}
  .atable tr.isadmin td{font-weight:700;color:var(--blue)}

  /* categories */
  section.cats{padding:64px 0 30px}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
  .sec-head h2{font-size:clamp(26px,4vw,38px);font-weight:800}
  .sec-head p{margin:8px 0 0;color:var(--grey);max-width:44ch}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
  .tile{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);padding:22px 20px 20px;box-shadow:var(--shadow-rest);
    text-align:left;cursor:pointer;font:inherit;color:inherit;position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease}
  .tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blue)}
  .tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#c3c9d2}
  /* SVG icons: same 30px box and spacing the emoji occupied, so no layout
     shift. currentColor lets .tile.soon's greyscale/opacity keep working. */
  /* Philip's course code, e.g. LDVRS08. Sits above the icon, left-aligned,
     quiet enough not to compete with the category name. */
  .tile .code{display:block;font-family:"Archivo";font-weight:700;font-size:11px;
    letter-spacing:.09em;color:var(--grey);margin-bottom:10px}
  .tile.soon .code{color:#9aa3ae}
  .tile .ico{line-height:1;margin-bottom:14px;display:block;color:var(--blue)}
  .tile .ico svg{width:30px;height:30px;display:block}
  .qtop .ic svg{width:24px;height:24px;display:block}
  .tile h3{font-size:19px;font-weight:700;font-family:"Archivo"}
  .tile p{margin:6px 0 0;color:var(--grey);font-size:14px;line-height:1.45}
  .tile .go{margin-top:16px;font-weight:700;font-size:13px;color:var(--red);letter-spacing:.03em;display:flex;align-items:center;gap:6px}
  .tile.soon{cursor:default;background:#fbfbfc}
  .tile.soon::before{background:var(--grey-line)}
  .tile.soon{box-shadow:none}
  .tile.soon:hover{transform:none;box-shadow:none;border-color:var(--grey-line)}
  .tile.soon .ico{filter:grayscale(1);opacity:.5}
  .tile.soon h3,.tile.soon p{color:var(--grey)}
  /* Outbound link on a resource card. The card is still "Coming soon" for our
     own details, so this stays quieter than a .go call to action. */
  .tile .out{display:inline-block;margin-top:14px;font-weight:700;font-size:13px;
    color:var(--blue);text-decoration:none;border-bottom:1px solid var(--grey-line)}
  .tile .out:hover{color:var(--red);border-bottom-color:currentColor}
  /* Several links in one tile, as on the social media card. .out on its own is
     inline-block, so without this they run together on one line and read as a
     sentence rather than a list. */
  .tile .links{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:14px}
  .tile .links .out{margin-top:0}
  .pill{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    padding:4px 8px;border-radius:20px}
  .pill.soon{background:var(--grey-soft);color:var(--grey)}

  /* quiz */
  .stage{display:none;padding:40px 0 60px;min-height:60vh}
  .stage.on{display:block}
  .qcard{background:var(--white);border:1px solid var(--grey-line);border-radius:18px;box-shadow:var(--shadow);max-width:720px;margin:0 auto;overflow:hidden}
  .qtop{padding:18px 26px;border-bottom:1px solid var(--grey-line);display:flex;align-items:center;gap:14px;background:var(--blue);color:var(--white)}
  .qtop .ic{font-size:22px}
  .qtop b{font-family:"Archivo";font-weight:700;font-size:17px}
  .qtop .count{margin-left:auto;font-size:13px;font-weight:600;color:#c7d2e6;letter-spacing:.03em}
  .bar{height:5px;background:var(--grey-soft)}
  .bar i{display:block;height:100%;background:var(--red);width:0;transition:width .3s ease}
  .qbody{padding:30px 26px}
  .qnum{font-weight:700;color:var(--red);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
  .qtext{font-family:"Archivo";font-weight:600;font-size:22px;line-height:1.25;margin-bottom:24px}
  .opts{display:flex;flex-direction:column;gap:11px}
  .opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--white);border:1.5px solid var(--grey-line);
    border-radius:11px;padding:15px 17px;font:inherit;font-size:16px;cursor:pointer;transition:border-color .15s,background .15s;width:100%}
  .opt:hover:not(:disabled){border-color:var(--blue-mid);background:#f7f9fc}
  .opt .key{width:28px;height:28px;border-radius:7px;background:var(--grey-soft);color:var(--grey);font-weight:700;
    display:grid;place-items:center;flex:none;font-size:14px;font-family:"Archivo"}
  .opt:disabled{cursor:default}
  .opt.correct{border-color:var(--ok);background:var(--ok-soft)}
  .opt.correct .key{background:var(--ok);color:#fff}
  .opt.wrong{border-color:var(--err);background:var(--err-soft)}
  .opt.wrong .key{background:var(--err);color:#fff}
  .explain{margin-top:20px;padding:16px 18px;border-left:4px solid var(--blue);background:#eef2f8;border-radius:0 10px 10px 0;font-size:15px;display:none}
  .explain.on{display:block}
  .explain b{color:var(--blue)}
  .explain .src{display:block;margin-top:6px;color:var(--grey);font-size:12.5px;font-weight:600;letter-spacing:.02em}
  .qfoot{padding:18px 26px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px}
  .qfoot .back{background:none;border:none;color:var(--grey);font:inherit;font-weight:600;cursor:pointer;font-size:14px}

  /* result */
  .result{max-width:720px;margin:0 auto;text-align:center}
  .scorewrap{background:var(--white);border:1px solid var(--grey-line);border-radius:18px;box-shadow:var(--shadow);padding:44px 30px;position:relative;overflow:hidden}
  .scorewrap::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--verdict,var(--blue))}
  .verdict-tag{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--verdict,var(--blue))}
  .ring{--val:0;width:150px;height:150px;border-radius:50%;margin:20px auto 8px;display:grid;place-items:center;
    background:conic-gradient(var(--verdict,var(--blue)) calc(var(--val)*1%),var(--grey-soft) 0);position:relative}
  .ring::after{content:"";position:absolute;inset:12px;background:var(--white);border-radius:50%}
  /* z-index because ::after is a positioned pseudo-element generated AFTER this
     one, so without it the white inner disc paints OVER the number and hides
     everything except whatever overflows the disc. That is what produced a
     score reading as "5" and "%" with the middle missing. */
  .ring b{position:relative;z-index:1;font-family:"Archivo";font-weight:800;
    font-size:clamp(26px,9vw,40px);color:var(--ink);line-height:1}
  .result h2{font-size:30px;font-weight:800;margin-top:6px}
  .result .sub{color:var(--grey);margin:8px 0 22px}
  .rbreak{display:flex;justify-content:center;gap:26px;margin:14px 0 26px}
  .rbreak div b{font-family:"Archivo";font-size:26px;display:block}
  .rbreak div span{color:var(--grey);font-size:13px;font-weight:600}
  .ractions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .review{margin-top:34px;text-align:left}
  .review h3{font-family:"Archivo";font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:14px}
  .ritem{background:var(--white);border:1px solid var(--grey-line);border-left:4px solid var(--err);border-radius:0 12px 12px 0;padding:16px 18px;margin-bottom:12px}
  .ritem .q{font-weight:700;margin-bottom:8px}
  .ritem .line{font-size:14.5px;margin:3px 0}
  .ritem .you{color:var(--err)}
  .ritem .corr{color:var(--ok)}
  .ritem .ex{color:var(--grey);font-size:13.5px;margin-top:7px}

  .note{max-width:720px;margin:18px auto 0;text-align:center;color:var(--grey);font-size:13.5px}

  /* footer */
  footer{background:var(--blue);color:#c4cfe2;margin-top:40px;padding:38px 0}
  footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
  footer b{color:var(--white);font-family:"Archivo"}
  footer .fnote{font-size:13px;max-width:52ch}
  /* The footer is the only always-visible route to the legal page: the header
     copy of the link is .ghost, which is hidden below 720px. */
  footer .flink{display:inline-block;margin-top:8px;color:var(--white);font-weight:600;
    text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
  footer .flink:hover{border-bottom-color:var(--white)}
  footer .pwr{font-size:12.5px;letter-spacing:.03em}
  footer .pwr b{color:#fff}

  :focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px;border-radius:6px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}