/* ============ RESOURCES ============ */
.res-hero{position:relative;overflow:hidden}
.res-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 440px at 50% -18%,rgba(166,64,59,.08),transparent 62%);pointer-events:none}
.res-hero .top{position:relative;text-align:center;max-width:800px;margin:0 auto;padding-top:88px;padding-bottom:44px}
.res-hero h1{font-size:clamp(40px,5vw,66px);font-weight:800;letter-spacing:-0.04em;line-height:1.03;margin-bottom:18px}
.res-hero .lede{font-size:19px;color:var(--ink-2);max-width:60ch;margin:0 auto 30px;line-height:1.55}
/* .res-search removed 12 Sep 2026 with the hero search box itself - the button
   had no handler and had never done anything on click. */

/* sticky subnav */
.subnav{position:sticky;top:70px;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.subnav .sn{display:flex;gap:6px;padding:12px 0;overflow-x:auto}
.subnav a{font-size:13.5px;font-weight:600;color:var(--ink-2);padding:8px 14px;border-radius:9px;white-space:nowrap;transition:all .15s var(--ease)}
.subnav a:hover{background:var(--bg-grey);color:var(--ink)}
.subnav a.on{background:var(--ink);color:#fff}

/* documentation grid */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.doc{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.doc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.doc .di2{width:42px;height:42px;border-radius:11px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:none}
.doc h4{font-size:16px;font-weight:700;letter-spacing:-0.02em;margin-bottom:4px}
.doc p{font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* learning hub */
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.learn{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease);display:flex;flex-direction:column}
.learn:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
/* Six tints, rotated by position in resources.php so none of the six cards on
   screen repeats. b2 and b3 were written when this page was built and nothing
   ever emitted them, so every card fell back to the warm default and the grid
   read as one flat block. b4 to b6 added 30 Sep 2026 to finish the set.
   All six stay very desaturated on purpose: the icon sits on top in var(--red)
   and the card has to read as a quiet surface, not a colour swatch. */
.learn .thumb{height:120px;background:linear-gradient(135deg,var(--red-tint),var(--bronze-soft));position:relative;display:grid;place-items:center;color:var(--red);border-bottom:1px solid var(--line)}
.learn .thumb.b2{background:linear-gradient(135deg,#EEF2F7,#F4E9E8)}
.learn .thumb.b3{background:linear-gradient(135deg,#F5EFE2,#EAF2EC)}
.learn .thumb.b4{background:linear-gradient(135deg,#EDF1F6,#E9F0EA)}
.learn .thumb.b5{background:linear-gradient(135deg,#F7ECE9,#F0EEF6)}
.learn .thumb.b6{background:linear-gradient(135deg,#EFF3EE,#F8F1E5)}
.learn .lb{padding:20px;flex:1;display:flex;flex-direction:column}
.learn .tag{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--red)}
.learn h4{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin:6px 0 10px;line-height:1.25}
.learn .meta{margin-top:auto;font-size:12.5px;color:var(--ink-4);display:flex;align-items:center;gap:8px}

/* industry guides */
.guide-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guide{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.guide:hover{transform:translateX(4px);box-shadow:var(--sh)}
.guide .gi{width:46px;height:46px;border-radius:12px;background:var(--bg-grey);color:var(--red);display:grid;place-items:center;flex:none}
.guide .gt{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.guide h4{font-size:16.5px;font-weight:700;letter-spacing:-0.02em;margin-top:3px}
.guide .ga{margin-left:auto;color:var(--red);flex:none}

/* developer resources */
.dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.devc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--sh-sm);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.devc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.devc .dvi{width:34px;height:34px;border-radius:9px;background:var(--bg-grey);color:var(--red);display:grid;place-items:center;flex:none}

/* product updates timeline */
.upd{max-width:820px}
.upd-month{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.upd-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;box-shadow:var(--sh-sm);margin-bottom:16px}
.upd-card h4{font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-bottom:16px}
.upd-list{display:grid;gap:12px}
.upd-list li{list-style:none;display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-2)}
.upd-list li svg{color:var(--green);flex:none}

/* sources */
/* sources
   Replaced the .aca (Data Academy) block on 30 Sep 2026 when that section went.
   auto-fit with a max track, plus justify-content, so the row stays centred and
   the cards keep their designed width whether there are two sources or six -
   the number is read from the database, so it will change on its own. */
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:20px;justify-content:center}
.src{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.src:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.src .sp{font-size:17px;font-weight:700;letter-spacing:-0.02em}
/* min-height is two lines of this text, 5 Oct 2026. These cards sit in a grid
   and every one of them is already a flex column with the link pinned to the
   bottom, so the bottom edges lined up. The LABEL ROWS did not: the publisher's
   own product name runs to two lines on some sources and one on others, and
   everything below it moved with it, so Data up to sat 20px higher on one card
   than on its neighbour. Reserving the second line makes the rows line up
   across the row of cards without needing equal content.
   3em, not 40px: it is two lines of whatever this font-size becomes, so it
   stays correct if the type scale changes. A name long enough to need three
   lines will push its own card out again, which is rarer and more honest than
   truncating a publisher's title to make a grid tidy. */
.src .sprod{font-size:13.5px;color:var(--ink-3);line-height:1.5;margin:4px 0 16px;min-height:3em}
.src .srow{display:flex;gap:14px;font-size:13px;padding:8px 0;border-top:1px solid var(--line)}
.src .srow span{color:var(--ink-4);font-weight:600;flex:none}
.src .srow b{margin-left:auto;text-align:right;font-weight:600;color:var(--ink-2)}
/* margin-top:auto, not a fixed margin. The cards are grid items so they already
   stretch to equal height, but the content above this link does not: one
   licence name runs to three lines and another to one, which left the two links
   39px apart. auto eats the leftover space so the link sits on the card's
   bottom edge and every card's link lines up, whatever the text above does.
   padding-top keeps the breathing room the old margin gave it. */
.src .sl{margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;color:var(--red)}
.src-note{max-width:70ch;margin:26px auto 0;text-align:center;font-size:13.5px;color:var(--ink-3);line-height:1.6}

/* downloads */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dlc{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.dlc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.dlc .dli{width:42px;height:42px;border-radius:11px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}
.dlc .dt2{font-size:15px;font-weight:650;letter-spacing:-0.015em}
.dlc .ds{font-size:12.5px;color:var(--ink-4);margin-top:1px}
.dlc .dla{margin-left:auto;color:var(--ink-3);flex:none}

/* community */
/* Five fixed tracks for three cards left tracks four and five empty, so the row
   sat hard left with a third of the section blank beside it. auto-fit collapses
   the unused tracks to zero and justify-content then centres what is left, so
   the row stays centred whatever number of cards this section ends up holding.
   245 is the width a card had in the original five-across layout, kept so the
   cards are the size they were designed at rather than stretched to fill. */
.com-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,245px));gap:14px;justify-content:center}
.comc{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 16px;box-shadow:var(--sh-sm)}
.comc .ci2{width:44px;height:44px;border-radius:12px;background:var(--bg-grey);color:var(--red);display:grid;place-items:center;margin:0 auto 12px}
.comc .cn{font-size:14.5px;font-weight:650;letter-spacing:-0.01em}
.comc .soon{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--bronze);background:var(--bronze-soft);padding:2px 7px;border-radius:5px;display:inline-block;margin-top:8px}

/* final cta */
.fcta{text-align:center;background:linear-gradient(180deg,#fff,var(--bg-grey));border:1px solid var(--line);border-radius:var(--r-xl);padding:64px 40px}
.fcta h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-0.035em;margin-bottom:14px}
.fcta p{font-size:18px;color:var(--ink-2);max-width:44ch;margin:0 auto 30px}
.fcta .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:1080px){
  .doc-grid,.learn-grid,.dl-grid{grid-template-columns:repeat(2,1fr)}
  .dev-grid{grid-template-columns:repeat(2,1fr)}
  .guide-list{grid-template-columns:1fr}
  .com-grid{grid-template-columns:repeat(3,1fr)}
  .pad-y{padding-top:70px;padding-bottom:70px}
}
@media(max-width:600px){
  :root{--pad:20px}
  .doc-grid,.learn-grid,.dev-grid,.dl-grid{grid-template-columns:1fr}
  .com-grid{grid-template-columns:1fr 1fr}
  .nav-cta .signin{display:none}
  .navlink{padding:9px 10px}
}

/* empty state, shared with the content pages */
.c-empty{background:var(--bg-grey);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 32px;text-align:center;margin-top:8px}
.c-empty h3{font-size:21px;font-weight:750;letter-spacing:-0.025em;margin-bottom:10px}
.c-empty p{font-size:15.5px;color:var(--ink-3);max-width:56ch;margin:0 auto 22px;line-height:1.6}
.guide .gt .soon{margin-left:6px;vertical-align:middle}

/* not built yet: same card, no hover, no pointer, clearly inert */
.doc.pending,.dlc.pending{background:var(--bg-grey);box-shadow:none;cursor:default}
.doc.pending:hover,.dlc.pending:hover{border-color:var(--line);transform:none;box-shadow:none}
.doc.pending h4,.dlc.pending .dt2{color:var(--ink-2)}
.sec-head .eyebrow .soon{margin-left:8px;vertical-align:middle}
.devc.pending{background:var(--bg-grey);color:var(--ink-2);box-shadow:none;cursor:default}
.devc.pending:hover{border-color:var(--line);transform:none;box-shadow:none}

/* monthly timeline, driven by _data/updates/ */
/* 1600, up from 900. .container has no max-width, so this is the only thing
   keeping the timeline off the screen edges - straight doubling to 1800 would
   read as full width on a large monitor, which is not what was wanted. */
.tl{max-width:1600px}
.tl-wrap{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--r-lg);padding:26px 28px 22px}
.tl-ghost{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:74px;font-weight:800;font-style:italic;letter-spacing:-0.04em;color:rgba(255,255,255,.07);pointer-events:none;line-height:1;user-select:none}

.tl-rail{position:relative;display:flex;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tl-rail::-webkit-scrollbar{display:none}
.tl-rail::before{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:rgba(255,255,255,.18)}

.tl-node{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 24px;background:none;border:0;cursor:pointer;font-family:inherit}
.tl-lbl{font-size:13.5px;font-weight:700;font-style:italic;letter-spacing:-0.01em;color:rgba(255,255,255,.55);white-space:nowrap;line-height:1;transition:color .16s var(--ease)}
.tl-lbl em{font-style:italic;opacity:.7}
.tl-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:var(--ink);transition:all .18s var(--ease)}
.tl-node:hover .tl-lbl{color:#fff}
.tl-node:hover .tl-dot{border-color:#fff}
.tl-node.on .tl-lbl{color:#fff}
.tl-node.on .tl-dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(166,64,59,.28)}

.tl-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;box-shadow:var(--sh-sm);margin-top:16px}
/* Two columns. CSS multi-column rather than a 2-up grid, because it balances
   itself and fills top-to-bottom down the left before moving right, so the
   list still reads in order whatever number of items a month has. */
.tl-panel ul{columns:2;column-gap:44px;margin:0;padding:0}
.tl-panel li{list-style:none;position:relative;padding-left:28px;font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.45;margin-bottom:11px;break-inside:avoid;-webkit-column-break-inside:avoid}
.tl-panel li:last-child{margin-bottom:0}
.tl-panel li::before{content:"";position:absolute;left:3px;top:6px;width:11px;height:6px;border-left:2.4px solid var(--green);border-bottom:2.4px solid var(--green);transform:rotate(-45deg)}
.tl-panel p{font-size:15px;color:var(--ink-2);margin:0 0 12px;line-height:1.6}
.tl-panel p:last-child{margin-bottom:0}

@media(max-width:600px){.tl-wrap{padding:22px 16px 18px}.tl-node{padding:0 18px}.tl-ghost{font-size:52px}}

/* One column on narrow screens: two columns of a ten-item checklist at phone
   width gives four words per line. */
@media(max-width:760px){
  .tl-panel ul{columns:1}
}