/* The home page's stylesheet. Lifted out of index.html so the site can run under a
   Content-Security-Policy whose style-src does not include 'unsafe-inline' — an inline <style>
   block is exactly what that directive exists to refuse. */
:root{
  --ink:#16120F; --ink2:#4A4340; --muted:#7A716C; --hint:#A29993;
  --line:#E8E2DD; --wash:#F7F4F1; --paper:#FFFFFF;
  --orange:#F26522; --orange-deep:#C2410C; --orange-wash:#FFF1E9;
  --screen:#16120F; --screen-2:#241D18;
  --r:14px; --r-sm:9px; --r-xs:5px;
  --disp:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  /* The brand card's strapline. A geometric face in the Futura/Bernhard line, which is what
     Berlin Sans FB is drawn from — that font is bundled with Windows and Office, is absent on
     Mac, iOS, Android and Linux, and its licence does not allow web embedding, so naming it
     would have looked right on one machine and fallen back to the default sans everywhere else. */
  --tag:'Jost','Century Gothic','Avenir Next',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}

/* The same lockup the sign-in page shows, served from the shared UI library rather than
   inlined — one file, so the site and the console can never drift to two different logos.
   690x180, ratio 3.83:1; the boxes below hold that ratio or background-size:contain
   letterboxes it and the mark renders smaller than the space it was given. */
.brand-img{display:block;background-repeat:no-repeat;background-position:center;
  background-size:contain;background-image:url("/_content/IRISBOARD.Shared.Ui/img/irisboard-logo-black.png")}
.brand-hd{width:168px;height:44px;flex-shrink:0}
.brand-card{width:min(74%,420px);height:min(19.3vw,110px)}

/* ── header ── */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:14px;height:74px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.hd-link{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none}
.hd-link:hover{color:var(--orange-deep)}
.hd-sp{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14px;font-weight:600;padding:11px 20px;
  border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--wash)}
.btn-sm{padding:9px 16px;font-size:13px}

/* ── hero ── */
.hero{padding-block:34px 14px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);
  background:var(--orange-wash);border-radius:999px;padding:5px 13px;margin-bottom:15px}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.06;
  letter-spacing:-.03em;max-width:22ch;margin:0 auto}
h1 em{font-style:normal;color:var(--orange)}
.lede{font-size:clamp(14.5px,1.5vw,16.5px);color:var(--ink2);max-width:58ch;margin:13px auto 0;line-height:1.55}

/* ── the screen (signature) ── */
/*── The screen mockup: an actual television ──

  It was a dark rounded rectangle with a stubby foot and a fixed 312px-tall panel. Two things gave
  it away as a graphic rather than a TV: the panel was whatever height its content needed, so it was
  never 16:9, and the copy inside was sized in viewport units — so on a narrow window the "screen"
  held type at nearly the same physical size as the page around it, which no television does.

  Now the panel is a real 16:9 box and everything inside is sized in cqw — container-query width —
  so the whole composition scales with the panel exactly as it would on a wall. Narrow the window
  and the TV gets smaller with its content, instead of the content reflowing inside a fixed frame. */
.stage{padding-block:24px}

/* min(780px, 76vh) rather than a flat max-width: a 16:9 panel that is 872px wide is 490px tall, and
   on a laptop that pushes the section below it off the screen. Bounding by viewport height keeps
   the whole television visible without scrolling, which is the point of showing one. */
.screen{position:relative;max-width:min(780px,76vh);margin:0 auto;background:var(--screen);
  border-radius:13px;padding:10px 10px 15px;
  box-shadow:0 30px 60px -28px rgba(22,18,15,.55),0 2px 8px rgba(22,18,15,.10)}

/* The stand, in two parts: a short neck under the middle of the chin, then a wider foot below it.
   One element could not do both — a single block reads as a plinth, and the gap between neck and
   foot is what makes it read as a television rather than a monitor on a box. */
.screen::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-15px;
  width:64px;height:16px;background:var(--screen);opacity:.92}
.screen::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-19px;
  width:186px;height:7px;background:var(--screen);border-radius:4px;opacity:.92}

.bezel-bar{height:3px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;
  margin-bottom:9px;display:flex;justify-content:flex-start}
.bezel-fill{height:100%;width:0;background:#E8A33D;border-radius:999px;
  transition:background .55s ease}
.bezel-bar.act2 .bezel-fill{background:var(--orange)}

/* container-type:size, not inline-size: the panes are absolutely positioned, so the container needs
   a resolved height for cqw to mean anything — and aspect-ratio is what gives it one. */
.panes{position:relative;border-radius:7px;background:var(--screen-2);overflow:hidden;
  aspect-ratio:16/9;container-type:size;container-name:tv}
.pane{position:absolute;inset:0;padding:5cqw 6cqw;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;opacity:0;pointer-events:none;z-index:1;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.pane.on{opacity:1;pointer-events:auto;z-index:2}

/* Every size below carries a px value first and a cqw value second. The px is the fallback for a
   browser without container queries, which would otherwise render every line at zero. */
.chip{align-self:flex-start;font-family:var(--mono);font-size:10px;font-size:1.6cqw;letter-spacing:.14em;
  text-transform:uppercase;color:#FFC9A8;border:1px solid rgba(242,101,34,.45);
  background:rgba(242,101,34,.12);border-radius:999px;padding:0.7cqw 1.8cqw;margin-bottom:2.2cqw}
.pane h2{font-family:var(--disp);font-weight:600;font-size:24px;font-size:4.9cqw;line-height:1.14;
  letter-spacing:-.02em;color:#fff;max-width:24ch}
.pane p{color:#C9BFB8;font-size:13px;font-size:2.3cqw;max-width:58ch;margin-top:2cqw;line-height:1.62}
.pane p b{color:#fff;font-weight:600}
.pane ul{list-style:none;margin-top:2cqw;display:grid;gap:1.1cqw}
.pane li{display:flex;gap:1.5cqw;color:#C9BFB8;font-size:12px;font-size:2.1cqw;align-items:flex-start;line-height:1.5}
.pane li svg{width:2.6cqw;height:2.6cqw;flex-shrink:0;margin-top:0.5cqw}
.src{position:absolute;right:3cqw;bottom:2.4cqw;font-family:var(--mono);font-size:9px;font-size:1.5cqw;color:#6B615B}


/* ── act one: the problem — sombre, amber on near-black ── */
.panes{transition:background .55s ease}
.pane[data-act="1"] .chip{color:#E8A33D;border-color:rgba(232,163,61,.42);background:rgba(232,163,61,.10)}
.pane[data-act="1"] h2{color:#E8A33D}
.pane[data-act="1"] p{color:#8C817A}
.pane[data-act="1"] p b{color:#C9BFB8}

/* ── act two: the answer — bright, vibrant orange on warm white ── */
.panes.act2{background:#FFF6EF}
.pane[data-act="2"] .chip{color:#fff;border-color:var(--orange);background:var(--orange);font-weight:500}
.pane[data-act="2"] h2{color:var(--ink)}
.pane[data-act="2"] p{color:var(--ink2)}
.pane[data-act="2"] p b{color:var(--orange-deep)}
.pane[data-act="2"] .src{color:var(--hint)}
/* a vibrant rule that only the answer slides carry */
.pane[data-act="2"] h2::after{content:"";display:block;width:52px;height:4px;border-radius:999px;
  background:var(--orange);margin-top:14px}

/* dots grouped by act, so the turn in the story is visible */
.dot-gap{width:1px;height:14px;background:var(--line);margin:0 4px}


/* ── end-of-cycle brand card ── */
.logo-card{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;opacity:0;pointer-events:none;
  transform:scale(.985);transition:opacity .6s ease,transform .6s ease;padding:24px}
.logo-card.on{opacity:1;transform:none;pointer-events:auto}
/* Jost runs a shade narrower and lighter than Plex at the same size, so it takes a nudge up and
   a little tracking to hold the same weight on the card. */
.lc-tag{font-family:var(--tag);font-weight:500;font-size:clamp(12px,1.5vw,16px);
  letter-spacing:.01em;color:var(--ink2);text-align:center}

/* ── controls ── */
.ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.dots{display:flex;gap:7px}
.dot{width:9px;height:9px;border-radius:999px;border:none;background:var(--line);cursor:pointer;padding:0;
  transition:background .2s ease,width .25s ease}
.dot.on{background:var(--orange);width:26px}
.nav{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);
  transition:border-color .2s ease,color .2s ease}
.nav:hover{border-color:var(--ink);color:var(--ink)}
.nav svg{width:17px;height:17px}


/* ── benefits ── */
.sec{padding-block:58px}
.sec-head{max-width:60ch;margin-bottom:26px}
h3{font-family:var(--disp);font-weight:600;font-size:clamp(23px,2.8vw,31px);
  letter-spacing:-.025em;line-height:1.14}
.sec-head p{color:var(--ink2);margin-top:12px;font-size:16.5px}

/* ── FAQ ──
   Native <details>, so it opens with a keyboard, reads correctly to a screen reader and needs no
   script. Same bordered, hairline-divided card as the benefits grid above it. */
/* Follows another .sec directly, and both carry 58px of padding-block — together that doubled the
   gap to 116px. The section above already supplies the space. */
#faq{padding-top:0}
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:18px 22px;font-family:var(--disp);font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--wash)}
.faq summary::after{content:"";flex-shrink:0;margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq .a{padding:0 22px 20px;color:var(--ink2);max-width:72ch}
.faq .a p+p{margin-top:10px}
.faq .a a{color:var(--orange-deep)}
.ben{display:grid;grid-template-columns:repeat(auto-fit,minmax(318px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ben-i{background:var(--paper);padding:26px 24px}
.ben-ic{width:34px;height:34px;border-radius:var(--r-xs);background:var(--orange-wash);
  color:var(--orange-deep);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.ben-ic svg{width:18px;height:18px}
.ben-i h4{font-family:var(--disp);font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.ben-i p{color:var(--ink2);font-size:14.5px;margin-top:7px;line-height:1.6}

/* ── form ── */
.cta{background:var(--screen);color:#fff;border-radius:var(--r);padding:clamp(26px,4vw,44px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.cta h3{color:#fff}
.cta-lede{color:#C9BFB8;margin-top:14px;font-size:16px;max-width:40ch}
.cta-pts{list-style:none;margin-top:22px;display:grid;gap:13px}
.cta-pts li{display:flex;gap:11px;color:#C9BFB8;font-size:14px;align-items:flex-start;line-height:1.55}
.cta-pts b{color:#fff;font-weight:600}
.cta-pts svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--orange)}
.cta-mail{margin-top:28px;font-family:var(--mono);font-size:13px;color:#9E938C;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cta-mail a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
/* The brochure. A bordered chip rather than another underlined link: it downloads a file where
   the line beside it opens a mail client, and two identical-looking links doing different things
   is how someone ends up with a PDF they did not ask for.

   A plain anchor, not a script-driven save — the file is served from this origin, so the browser
   handles it and it still works with JavaScript off. The type and size are printed beside it
   because a click that silently starts a download is a small ambush. */
.cta-dl{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.22);
  border-bottom-color:rgba(255,255,255,.22);border-radius:999px;padding:7px 15px;color:#fff;
  text-decoration:none;white-space:nowrap;transition:border-color .2s ease,background .2s ease;
  /* The body face, not the mono this line is set in. Inherited, the chip measured 287px against
     192px of free space beside the address and wrapped to its own line at every width. */
  font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:0}
.cta-dl:hover{border-color:var(--orange);background:rgba(242,101,34,.14)}
.cta-dl svg{width:15px;height:15px;flex-shrink:0;color:var(--orange)}
form{background:var(--paper);border-radius:var(--r);padding:26px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f{margin-bottom:13px}
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.req{color:var(--orange)}
input,select,textarea{width:100%;font-family:var(--body);font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-wash)}
input.bad,select.bad{border-color:#DC2626;box-shadow:0 0 0 3px #FEE2E2}
textarea{resize:vertical;min-height:74px}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24'%3E%3Cpath fill='%237A716C' d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.err{font-size:12.5px;color:#DC2626;margin-top:5px;display:none}
.err.on{display:block}
/* Moved off-screen rather than display:none — a script worth defending against skips hidden
   fields but follows the DOM. Nobody sees it, and tabindex -1 keeps it out of the tab order.
   Its label is deliberately not "Website": url is a real autocomplete token, and a password
   manager filling this in would silently discard a genuine lead. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .btn{width:100%;margin-top:6px;padding:13px}
.fine{font-size:12px;color:var(--hint);margin-top:12px;line-height:1.5;text-align:center}
.done{display:none;text-align:center;padding:34px 12px}
.done.on{display:block}
.done-ic{width:50px;height:50px;border-radius:999px;background:var(--orange-wash);
  color:var(--orange-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.done-ic svg{width:24px;height:24px}
.done h4{font-family:var(--disp);font-weight:600;font-size:20px}
.done p{color:var(--ink2);font-size:14.5px;margin-top:9px}

/* ── closing quote ──
   A wide, thin banner, so it is given its own width rather than a card's padding. The image is
   already a finished composition with its own border and white ground, so nothing is drawn around
   it — a second border would read as a frame inside a frame.

   No aspect-ratio and no object-fit. The width/height attributes on the tag already reserve the
   right box from the artwork's own proportions, and a ratio written here is a second copy of that
   fact which silently rots the moment the file is re-exported: a wrong one letterboxes the image
   inside its own box, which reads as unexplained blank space above and below the picture.

   The margin matches the footer's own 58px, so the banner sits evenly between the section above
   it and the rule below. */
.quote{margin-top:58px}
.quote img{display:block;width:100%;height:auto}

/* ── footer ──
   Columns, not one long line. Everything used to sit on a single row — company, site, blog, two
   policies and a hover menu — which read as an undifferentiated string of links and pushed the
   legal pages up against a button. Grouped under headings, each item is found by what it is for.

   The hover menu for the player is gone with it: a menu that has to be hovered to reveal two links
   is a worse version of showing both, and it could not be used at all by a finger on a TV. */
.ft{border-top:1px solid var(--line);padding:44px 0 26px;margin-top:58px}
.ft-cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:40px;align-items:start}
.ft-brand .brand-ft{width:150px;height:40px;margin-bottom:14px}
.ft-brand p{font-size:13px;color:var(--muted);line-height:1.6;max-width:30ch;margin-bottom:12px}
.ft-brand .ft-by{font-size:12.5px;color:var(--muted)}
.ft-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hint);margin-bottom:12px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft-col a{font-size:13.5px;color:var(--ink2);text-decoration:none}
.ft-col a:hover{color:var(--orange-deep)}
.ft-col a small{display:block;font-size:11.5px;color:var(--muted)}

/* The bar under the columns: the ownership line, and the app button at the other end of it. */
.ft-base{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ft-base a{color:var(--muted);text-decoration:none}
.ft-base a:hover{color:var(--orange-deep)}
.ft-sp{flex:1}

/* IRIS Application: one button, two ways to run the player. Opens upward because it sits at the
   foot of the page. Hover for a mouse; focus-within so a tap, a TV remote or Tab opens it too. */
.app-menu{position:relative}
.app-menu>button{cursor:pointer;font:inherit;font-weight:600}
.app-pop{position:absolute;right:0;bottom:100%;padding-bottom:8px;display:none;z-index:20}
.app-pop-in{display:flex;flex-direction:column;gap:6px;min-width:250px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(22,18,15,.12)}
.app-menu:hover .app-pop,.app-menu:focus-within .app-pop{display:block}
.ft-base .app-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-xs);
  color:var(--ink);font-weight:600;font-size:13px}
.ft-base .app-pop a:hover,.ft-base .app-pop a:focus-visible{background:var(--orange-wash);color:var(--orange-deep);outline:none}
.app-pop small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}

@media (max-width:860px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1 / -1}
}
@media (max-width:480px){
  .ft-cols{grid-template-columns:1fr;gap:28px}
}

@media (max-width:860px){
  .cta{grid-template-columns:1fr}
  /*  No min-height on .panes.

      It used to carry one, back when the panes box had no intrinsic height of its own. The
      mockup now sets aspect-ratio:16/9, which means a floor on the height is also a floor on
      the width — 404px tall forced 718px wide inside a 342px screen, and the whole set of
      panes hung off the right of a phone. The ratio is the size now; nothing else may set it. */
  .pane{padding:22px 24px}
}
@media (max-width:560px){
  .f-row{grid-template-columns:1fr}
  .screen{padding:8px 8px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ── From the blog ──
   A row of cards that scrolls sideways with scroll-snap, so it works by touch and keyboard with no
   script at all; home.js only adds the two buttons. Three across on a laptop, one and a bit on a
   phone so the next card shows and the row is obviously scrollable. The cards use the benefits
   grid's own idiom — paper, hairline border, the same radius — with the photograph on top. */
#blog{padding-top:0}
.bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:none}
.bl-head p{margin-top:12px}
.bl-ctl{display:flex;gap:8px;flex-shrink:0}
.bl-ctl .nav:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--ink2)}
.bl-track{list-style:none;display:grid;grid-auto-flow:column;gap:18px;
  grid-auto-columns:calc((100% - 36px) / 3);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.bl-track::-webkit-scrollbar{display:none}
.bl-track:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:var(--r)}
.bl-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.bl-card:hover{border-color:var(--orange);box-shadow:0 10px 30px rgba(22,18,15,.08);transform:translateY(-2px)}
.bl-img{display:block;aspect-ratio:3/2;background:var(--wash);overflow:hidden}
.bl-img img{display:block;width:100%;height:100%;object-fit:cover}
.bl-body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1}
.bl-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep)}
.bl-card h4{font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.28;letter-spacing:-.01em}
.bl-card h4 a{text-decoration:none}
.bl-card h4 a:hover{color:var(--orange-deep)}
.bl-more{margin-top:auto;padding-top:4px;font-size:14px;font-weight:600;color:var(--orange-deep);text-decoration:none}
.bl-more:hover{text-decoration:underline}
.bl-all{margin-top:18px;text-align:right;font-size:14px;font-weight:600}
.bl-all a{color:var(--orange-deep);text-decoration:none}
.bl-all a:hover{text-decoration:underline}
@media (max-width:900px){.bl-track{grid-auto-columns:calc((100% - 18px) / 2)}}
@media (max-width:600px){
  .bl-track{grid-auto-columns:84%}
  .bl-ctl{display:none}            /* swiped on a phone; the buttons would only sit in the way */
  .bl-head{display:block}
}
@media (prefers-reduced-motion:reduce){
  .bl-track{scroll-behavior:auto}
  .bl-card{transition:none}
  .bl-card:hover{transform:none}
}

/* ── skip link, header actions, tap targets ── */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{top:10px}

.hd-in{gap:10px}
.hd-in .btn{white-space:nowrap}
.hd-link{padding:12px 8px}                       /* a 44px-tall target, not the 22px line of text */
.hero-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}

@media (max-width:600px){
  .hd-in{gap:6px;height:68px}
  .brand-hd{width:132px;height:35px}
  .btn-sm{min-height:44px;padding:10px 14px}     /* 44px: the smallest target a thumb hits reliably */
  .hero-cta .btn{flex:1 1 100%;min-height:48px}
}