@charset "utf-8";
/* Data Oil - 2026_V11.
   Built to the seven supplied mock-ups. Every colour below was sampled out of those PNGs rather
   than carried over from an earlier site: the ground is #090e0e, the green is #00bf63, the card
   headings are #f8c132, and the gradient panel runs green to yellow across its diagonal.
   Nothing here paints a section the mock-ups do not draw. */

:root{
  --bg:#090e0e;
  --ink:#ffffff;
  --body:#e5e5e5;
  --muted:#b6bcba;
  --green:#00bf63;
  --green-deep:#047640;
  --green-soft:#86d39e;
  --green-dim:#18513f;
  --gold:#f8c132;
  --line:rgba(36,134,117,.55);
  --line-soft:rgba(255,255,255,.14);
  --grad:linear-gradient(112deg,#1aac5b 0%,#96dd7e 52%,#fcff9a 100%);
  /* The panel behind the Max Dragon mark. It is the one place a white logo sits on a gradient,
     so it runs in deep greens rather than the pale end of --grad, where the white was
     disappearing: near-black at the top corner, the deep green at the far one. */
  --grad-deep:linear-gradient(112deg,#021e10 0%,#0a3f22 52%,#047640 100%);
  --wrap:1100px;
  --band:min(170px,max(0px,calc((100vw - 1148px) / 2)));
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
  display:flex;flex-direction:column}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.08;color:var(--ink);font-weight:700}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--green);color:#04120c;
  padding:9px 14px;border-radius:8px}

/* ---- the downward spirals, in the side bands ----
   The previously produced spiral graphic, one file, mirrored for the right-hand side so the two
   sides cannot drift apart. The band is only ever the space left over beside the 1100px reading
   column, so a spiral is never underneath a word; below 1280px there is no space left over and
   the bands are not painted at all. */
.ribbons{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ribbons i{position:absolute;top:0;bottom:0;overflow:hidden;width:var(--band)}
.ribbons i.l{left:0}
.ribbons i.r{right:0;transform:scaleX(-1)}
/* The drift is a transform on a strip one tile taller than the band, not a moving background
   position. A background-position animation repaints the whole blurred strip every frame, which
   on a full-height fixed element is enough work to stall the compositor; a transform is handed to
   the GPU and costs nothing. */
.ribbons i::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 1500px);
  background:url("ribbons.svg") repeat-y;background-size:100% 1500px;opacity:.38}
@media (max-width:1279px){.ribbons{display:none}}
@media (prefers-reduced-motion:no-preference){
  .ribbons i.l::before{animation:flow 100s linear infinite}
  .ribbons i.r::before{animation:flow 128s linear infinite reverse}
}
@keyframes flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-1500px,0)}}

/* ---- the capsule header ----
   Every mock-up draws the navigation the same way: one rounded capsule floating on the black with
   a hairline round it, the name at the left, the links at the right, and a round button on the
   end. Below 1000px the links fold into that button, which is a real <details> - no script
   decides whether the menu is open. */
header.top{position:sticky;top:0;z-index:40;padding:16px 0 8px;flex:none}
.capsule{display:flex;align-items:center;gap:20px;min-height:58px;
  padding:6px 8px 6px 26px;border:1px solid var(--line);border-radius:999px;
  background:rgba(9,14,14,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand{flex:none;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--green)}
.capsule nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.capsule nav a{color:var(--body);font-size:13px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.capsule nav a:hover{color:var(--ink);text-decoration:none}
.capsule nav a.on{color:var(--ink);font-weight:700}
.menu{flex:none;margin-left:2px;position:relative}
.menu>summary{list-style:none;cursor:pointer;display:block}
.menu>summary::-webkit-details-marker{display:none}
.dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--green-soft),var(--green));color:#04120c}
.dot svg{width:20px;height:20px;fill:currentColor}
.menu>summary:focus-visible .dot{outline:2px solid var(--ink);outline-offset:3px}
.menu[open] .panel{display:flex}
.panel{display:none;position:absolute;right:0;top:54px;flex-direction:column;gap:2px;
  min-width:250px;padding:12px;border:1px solid var(--line);border-radius:18px;
  background:#0c1211;box-shadow:0 24px 60px rgba(0,0,0,.7)}
.panel a{padding:9px 14px;border-radius:10px;color:var(--body);font-size:14px;
  text-transform:none;letter-spacing:0}
.panel a:hover{background:rgba(0,191,99,.12);color:var(--ink);text-decoration:none}
.panel a.on{color:var(--green);font-weight:700}
/* Nine menu items where the mock-ups drew eight. The capsule is given a width of its own
   rather than the reading column's, because the alternatives are a smaller menu than the
   mock-ups draw, or nine items folded into the button on a screen wide enough to show them.
   It is still centred and still a pill, 140px wider than the column it floats over. Below the
   width that holds all nine the menu is the button, which is what it has always been. */
header.top .wrap{max-width:1240px}
@media (max-width:1239px){.capsule nav:not(.panel){display:none}}

main{position:relative;z-index:1;flex:1 0 auto}
section{padding:66px 0}
/* The homepage hero only. Section 7 names its page head `.hero` too, and these rules were
   reaching the carried pages and stretching each one to a screen of nothing. */
.hero.home{padding:0}
section:first-child{padding-top:34px}

/* ---- homepage ---- */
.hero.home .wrap{display:grid;max-width:none;
  padding-inline:calc(var(--band) + 36px);
  grid-template-columns:minmax(0,min(48%,calc((100vh - 210px) * 417 / 447))) minmax(0,1fr);
  gap:clamp(32px,3.4vw,64px);align-items:center;min-height:calc(100vh - 180px)}
@supports (height:100svh){
  .hero.home .wrap{grid-template-columns:minmax(0,min(48%,calc((100svh - 210px) * 417 / 447))) minmax(0,1fr);
    min-height:calc(100svh - 180px)}
}
.hero.home figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#000}
.hero.home video{width:100%;aspect-ratio:417/447;object-fit:cover;object-position:42% 50%}
.wordmark{font-size:clamp(58px,8.2vw,190px);line-height:.96;font-weight:700;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.wordmark .mark{width:clamp(56px,6.1vw,140px);height:auto;flex:none}
.wordmark .line{display:block;width:100%}
.tagline{margin:26px 0 0;font-size:clamp(17px,1.7vw,30px);color:var(--ink);font-weight:400;
  letter-spacing:-.01em}

/* ---- page heads ---- */
.pagehead h1{font-size:clamp(40px,5.6vw,74px)}
/* One heading treatment for the whole site. The accent on a heading is this gradient clipped
   to the letters, never a flat colour, because the pages carried in already draw their
   headings that way and a page that draws them flat reads as a different site. The carried
   pages name that span `.glow`, so the name is theirs; matching `h1 .glow` here at the same
   depth legacy.css matches it, and later in the cascade, is what puts those headings on this
   site's own gradient rather than the older one. */
.glow,h1 .glow,h2 .glow,h3 .glow{background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pagehead .rule{width:180px;height:3px;border-radius:3px;background:var(--green);
  margin:22px 0 0}

/* ---- What is Data Oil, section one ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.split .copy p{margin:0 0 14px;font-size:15.5px;color:var(--body)}
.split .copy p.lead{color:var(--ink);font-size:17px}
.split .copy p.strong{color:var(--ink);font-weight:700}
.split .copy ul{list-style:none;margin:20px 0;padding:0}
.split .copy ul li{margin:0 0 6px;font-style:italic;color:var(--body);font-size:15.5px}
/* The gradient panel with the photograph lying across it, as the mock-up draws it. */
.gradpanel{position:relative;padding:34px 0 34px 34px;min-height:400px}
.gradpanel::before{content:"";position:absolute;inset:0 26px 26px 0;border-radius:18px;
  background:var(--grad)}
.gradpanel img{position:relative;width:100%;border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* ---- What is Data Oil, section two: the numbered cards ---- */
/* Three across, because that is the row the mock-up draws; cards 04 and 05, which the
   specification adds in writing, fall onto a second row of the same rhythm. */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 48px;
  margin-top:70px}
.step{position:relative;padding:44px 22px 24px;border:1px solid var(--line);
  border-radius:16px;background:transparent}
.step .num{position:absolute;top:-26px;left:22px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,var(--green-soft),var(--green-dim))}
.step h3{font-size:16px;color:var(--gold);line-height:1.3;
  padding-bottom:10px;border-bottom:2px solid var(--green);margin-bottom:14px}
.step p{margin:0;font-size:14.5px;color:var(--body)}
/* The arrow the mock-up draws between one card and the next. Not after the card that ends a
   row, and not after the last one, so it never points at nothing. */
.step::after{content:"\2192";position:absolute;top:50%;right:-36px;transform:translateY(-50%);
  color:var(--ink);font-size:25px;line-height:1}
.step:nth-child(3n)::after,.step:last-child::after{content:none}

/* ---- What is Data Oil, section three: the statement ---- */
.statement{border:1px solid var(--line);border-radius:22px;padding:52px 46px;text-align:center}
.statement p{margin:0;color:var(--green);font-weight:400;
  font-size:clamp(23px,3.3vw,42px);line-height:1.22;letter-spacing:-.02em}

/* ---- About ---- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,372px);gap:56px;
  align-items:center}
.boxed{border:1px solid var(--line);border-radius:18px;padding:28px 30px;position:relative}
.boxed::before{content:"";position:absolute;top:-1px;left:34px;width:190px;height:3px;
  border-radius:3px;background:linear-gradient(90deg,var(--green-soft),transparent)}
.boxed p{margin:0 0 14px;font-size:15px}
.boxed p:last-child{margin-bottom:0}
.boxed p.strong{color:var(--ink);font-weight:700}
.logocard{border-radius:20px;background:var(--grad-deep);padding:54px 36px;display:grid;
  place-items:center;min-height:430px}
.logocard img{width:100%;max-width:290px}

/* ---- Contact ---- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:64px;
  align-items:center}
.contact figure{margin:0;border-radius:16px;overflow:hidden;background:#000}
.contact video{width:100%;aspect-ratio:600/455;object-fit:cover}
.contact .mark{width:94px;margin-bottom:34px}
.pill{display:inline-block;white-space:nowrap;padding:15px 34px;border-radius:999px;font-size:23px;font-weight:700;
  background:linear-gradient(120deg,var(--green-deep),var(--green-soft));color:var(--ink)}
.pill:hover{text-decoration:none;filter:brightness(1.08)}
.details{margin:30px 0 0;font-size:14.5px;line-height:2}
.details a{color:var(--ink);font-weight:600;display:block}
.details a:hover{color:var(--green)}
.details .site{margin-top:18px;color:var(--ink);font-weight:700;display:block}

/* ---- Security ---- */
.security{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,320px);
  gap:40px;align-items:center}
.security h1{font-size:clamp(34px,4.1vw,50px);margin-bottom:34px}
.security figure{margin:0 auto;border-radius:14px;overflow:hidden}
/* The photograph is 2816x1536 and the door stands in the middle 1900 of it, floor to lintel.
   The old 325x405 portrait column was a slice out of that, and the slice cut the frame off both
   sides. Cropped to the door instead, the whole of it is on the page and the figure is as tall
   as it was, because 1900x1536 is far nearer square than the frame the photograph came in. */
.security figure img{display:block;width:100%;height:auto;aspect-ratio:1900/1536;
  object-fit:cover;object-position:50% 50%}
.card-note{border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.card-note h2{font-size:18px;color:var(--green);padding-bottom:10px;
  border-bottom:2px solid var(--green);margin-bottom:14px}
.card-note p{margin:0;font-size:14.5px;color:var(--ink)}
.gears{width:78px;height:auto;margin-bottom:18px;fill:var(--green)}
.security .rule{width:190px;height:4px;border-radius:4px;background:var(--green);margin:0 0 26px}
.claims{list-style:none;margin:0;padding:0}
.claims li{margin:0 0 9px;color:var(--ink);font-size:15px;font-weight:500}
/* Each claim in the head is the heading of a section under it, so each one is a link to its own.
   It stays the colour the mock-up draws it; the green is for the pointer. */
.claims a{color:inherit}
.claims a:hover{color:var(--green);text-decoration:none}
/* The twelve regimes are a list of names, so they run in as many columns as the width allows
   rather than twelve lines down the left of the page. */
.ticks.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 26px}
/* A card that quotes what you can say and then answers it: the quote in the page's own white,
   the answer under the gold heading the numbered cards use. */
.cards p.strong{color:var(--ink);font-weight:700;font-size:15.5px;margin:0 0 6px}
.cards h3{font-size:15.5px;color:var(--gold);line-height:1.3;margin-top:14px;
  padding-bottom:10px;border-bottom:2px solid var(--green);margin-bottom:12px}
/* Prose in these sections names routes and file types. They are set the way the demonstrations
   and the numbered cards already set them. Scoped to the section class, because the carried
   pages load legacy.css, which styles code as a chip, and that is theirs to keep. */
.claim code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  color:var(--green-soft)}

/* ---- Resources ---- */
.resources{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr) minmax(0,290px);
  gap:44px;align-items:center}
.resources h1{font-size:clamp(40px,5.4vw,66px)}
.resources .rule{width:180px;height:3px;border-radius:3px;background:var(--green);margin:0 0 24px}
.resources .index{margin-top:34px;border:1px solid var(--line);border-radius:16px;
  padding:22px 26px}
.resources .index ul{list-style:none;margin:0;padding:0}
.resources .index li{margin:0 0 7px;color:var(--ink);font-size:15px}
.resources .body p{margin:0 0 18px;font-size:15px}
.resources figure{margin:0;border-radius:14px;overflow:hidden}
.resources figure img{width:100%;aspect-ratio:270/440;object-fit:cover}

/* ---- Pricing ----
   A reading page rather than a mock-up page: section 9's pricing information laid out in this
   site's own parts. The kicker, the fold and the table are new here because that page has
   fourteen tables and nine sections of detail, and the mock-ups draw none of those. Everything
   they are built from - the hairline, the green rule, the gold, the rounded corner - is already
   on the other six pages. */

.kicker{margin:0 0 14px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--green);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--green)}
main section h2{font-size:clamp(25px,2.9vw,38px);margin-bottom:22px;max-width:22em}
main section>.wrap>p{margin:0 0 16px;font-size:15.5px;max-width:64em}
main section>.wrap>p b,.foldbody p b{color:var(--ink)}
/* `main section>.wrap>p` carries a class of its own, so it outranks a bare `.lede` and
   the lead paragraph came out at body size. Matched at the same depth here. */
main section>.wrap>p.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink);
  margin:26px 0 20px;max-width:40em}

/* The number */
.numsplit{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:44px;
  align-items:center;margin-bottom:34px}
.bignum{border:1px solid var(--line);border-radius:18px;padding:34px 28px;text-align:center}
.bignum b{display:block;font-size:clamp(48px,6vw,78px);line-height:1;letter-spacing:-.03em;
  color:var(--green)}
.bignum span{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* The three figures over a worked bill */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;
  margin:28px 0 30px}
.figs div{border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.figs b{display:block;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;color:var(--gold)}
.figs span{display:block;margin-top:8px;font-size:14px;color:var(--body)}

/* A fold. A real <details>: no script decides whether it is open. */
.fold{border:1px solid var(--line);border-radius:16px;margin:26px 0;overflow:hidden}
.fold>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 16px;padding:18px 24px;color:var(--ink);font-weight:600;font-size:16px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";margin-left:auto;color:var(--green);font-size:22px;
  line-height:1;font-weight:400}
.fold[open]>summary::after{content:"\2212"}
.fold>summary:hover{background:rgba(0,191,99,.07)}
.fold>summary em{font-style:normal;font-weight:400;font-size:13.5px;color:var(--muted)}
.foldbody{padding:4px 24px 24px;border-top:1px solid var(--line-soft)}
.foldbody p{margin:16px 0 0;font-size:14.5px}

/* Tables. They scroll sideways rather than squeeze, because a rate column that wraps to three
   lines is harder to read than one you push. */
table.rates{width:100%;border-collapse:collapse;margin:22px 0 0;font-size:14px;
  display:block;overflow-x:auto}
table.rates thead th{text-align:left;padding:0 18px 10px 0;color:var(--green);font-weight:700;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid var(--green)}
table.rates tbody th{text-align:left;font-weight:600;color:var(--ink)}
table.rates td,table.rates th{padding:13px 18px 13px 0;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
table.rates td:last-child,table.rates th:last-child{padding-right:0}
table.rates tbody tr:last-child td,table.rates tbody tr:last-child th{border-bottom:0}
table.rates td{color:var(--body)}
table.rates code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--green-soft)}
.sub{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}

/* Two boxes side by side */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:26px 0}

/* The one place a page asks for something */
.ctabox{border:1px solid var(--line);border-radius:20px;padding:32px 34px;margin:34px 0 0}
.ctabox h3{font-size:clamp(20px,2.2vw,27px);margin-bottom:14px}
.ctabox p{margin:0 0 20px;font-size:15px;max-width:52em}
.pill.sm{font-size:16px;padding:12px 26px}

@media (max-width:980px){
  .numsplit{grid-template-columns:minmax(0,1fr);gap:26px}
  .ctabox{padding:24px 22px}
  .fold>summary{padding:16px 18px}
  .foldbody{padding:4px 18px 20px}
}

/* ---- Get Started ----
   Section 9's Get Started laid out in parts this site already has: the numbered cards from What is
   Data Oil, and the boxes, folds and calls to action from Pricing. What is new is the four-across
   row, the "you keep" line under each week, and the ghost button. */

/* Four weeks across, not three. The arrow suppression is per row, so at four the third card keeps
   its arrow and only the last one loses it. */
@media (min-width:981px){
  .steps.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px}
  .steps.four .step::after{content:"\2192";right:-30px}
  .steps.four .step:last-child::after{content:none}
}
.step .keep{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--green-soft)}
.step code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* Two buttons under a page head, and the quieter of the two. */
main section>.wrap>p.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0;max-width:none}
.pill.ghost{background:none;border:1px solid var(--green);color:var(--green)}
.pill.ghost:hover{background:rgba(0,191,99,.1);filter:none}

/* Inside a box: the option label, the ticked list, and the two links at the foot. */
.boxed .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin-bottom:12px}
.boxed .links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:14px;
  font-weight:600}
.ticks{list-style:none;margin:16px 0 0;padding:0}
.ticks li{position:relative;padding-left:24px;margin:0 0 12px;font-size:14.5px}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:50%;background:linear-gradient(140deg,var(--green-soft),var(--green))}
.ticks li:last-child{margin-bottom:0}
.about .boxed .ticks{margin:0 0 14px}
.about .boxed .ticks li{margin-bottom:8px}
.about .boxed .ticks li:last-child{margin-bottom:0}

/* The seven demonstrations, inside their fold. */
.demo{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.demo:last-child{border-bottom:0;padding-bottom:4px}
.demo h3{font-size:15.5px;color:var(--gold);margin-bottom:8px}
.demo p{margin:0;font-size:14.5px;color:var(--body)}
.demo code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--green-soft)}

/* ---- How it works ----
   Section 9's How it works in this site's own parts. Two things are new. The head is a sentence
   rather than two words, so it is set at the size the section headings are set at instead of the
   74px the two-word heads take. And the twelve are a hairline box on a grid that puts three
   across the reading column - the same box the figures on Pricing sit in, which is why nothing
   here is a new shape, only a new width. */
.pagehead.howto h1{font-size:clamp(30px,3.6vw,50px);max-width:16em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;
  margin:28px 0 0}
.cards>div{border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.cards p{margin:0;font-size:14.5px;color:var(--body)}
.cards .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin-bottom:10px}
/* The line under a grid or a list that says where its long form is. Matched at the depth the
   body paragraph is matched at, or it is read as one. */
main section>.wrap>p.caption{margin:22px 0 0;font-size:13.5px;color:var(--muted)}
/* Two buttons at the foot of a call to action. The paragraph rule cannot reach inside the box. */
.ctabox .pill.sm+.pill.sm{margin-left:10px}

/* ---- a page that is one screen ----
   Security & Compliance is a single mock-up with no second screen under it, so it is laid out to
   the window rather than to the 1100px reading column: full width apart from the spiral bands,
   centred in the height that is left under the header, and the photograph sized off the window so
   the three columns fill the screen instead of sitting in a band at the top with black beneath.

   Guarded at 981px and up. Below that the page is one column and stacks, and a height taken from
   the window would crush it. */
@media (min-width:981px){
  /* 82px of header and 96px of footer, measured, so the screen holds all three and
     there is nothing to scroll. The section carries no padding of its own here. */
  section.pagehead.full{padding:0}
  section.pagehead.full>.wrap{max-width:none;padding-inline:calc(var(--band) + 36px);
    min-height:calc(100vh - 180px);align-items:center}
  /* `flow` is the same head on a page that continues under it: the full width and the centred
     columns, but the height of what is in it. The screen-high box belongs to a head that is the
     whole page, and on a page with sections below it the part of the screen the head did not
     need read as a gap between the two. */
  section.pagehead.full.flow>.wrap{min-height:0;padding-block:20px 0}
  /* The three columns are a block in the middle of the page, not three columns stretched
     across it. The claims column used to be `1fr`, so on a wide screen it took every pixel the
     other two did not and held them against the left edge with a third of the window empty on
     the right. Capped at the width the longest claim needs and centred, the black falls either
     side of the group instead of all of it on one side. */
  .security{gap:clamp(30px,3vw,56px);justify-content:center;
    grid-template-columns:minmax(0,clamp(220px,17vw,300px)) minmax(0,1fr)
      minmax(0,clamp(300px,24vw,430px))}
  /* The figure is the column that gives: the two text columns are what they need to be, and the
     door takes every pixel they leave, up to the width at which it is as tall as the screen
     allows. Sized from the height, so it is the page that caps the image, never the image that
     pushes the page past one screen. */
  .security figure{width:min(100%,calc(min(100vh - 290px,780px) * 1900 / 1536));
    margin-inline:auto}
  .security h1{font-size:clamp(34px,3.4vw,54px)}
  .gears{width:clamp(78px,6vw,104px)}
  .claims li{font-size:clamp(15px,1.1vw,18px);margin-bottom:clamp(9px,1.1vh,16px)}
}
@supports (height:100svh){
  @media (min-width:981px){
    section.pagehead.full>.wrap{min-height:calc(100svh - 180px)}
    .security figure{width:min(100%,calc(min(100svh - 290px,780px) * 1900 / 1536))}
  }
}

/* About and Contact, on the same terms as Security: one screen, full width apart from the spiral
   bands, the picture sized off the window. The two columns were set apart with
   `justify-content:space-between`, which put every spare pixel between them; on a wide screen
   that is a corridor of black down the middle of the page. They are centred now, with one gap
   between them that is the gap and nothing more. */
@media (min-width:981px){
  .about{grid-template-columns:minmax(0,640px)
      minmax(0,min(460px,calc((100vh - 300px) * 295 / 415)));
    justify-content:center;gap:clamp(34px,3.6vw,68px)}
  /* The Max Dragon card is the height of the text beside it - it shares the text box's row and
     stretches to it - rather than a height of its own taken from the window (operator, 2026-10-04). */
  .logocard{min-height:0}
  .logocard img{max-width:min(340px,78%)}

  /* The logo card starts level with the text box, not with the heading above it: the heading is
     a row of its own, so the card and the box share the row below and both start at its top. The
     column wrapping heading and box steps aside so its two children are placed in the grid.
     The space under the box keeps it off the footer's rule. */
  section.pagehead.full>.wrap.about{align-content:center;align-items:start;row-gap:0;
    padding-block:20px 64px}
  .about>div:first-child{display:contents}
  .about h1{grid-column:1;grid-row:1}
  .about .boxed{grid-column:1;grid-row:2}
  .about .logocard{grid-column:2;grid-row:2;align-self:stretch}

  /* Both tracks are minmax, so that on a screen wide enough to show the two side by side but
     not wide enough to hold them at full size they give way instead of spilling over the edges. */
  .contact{grid-template-columns:minmax(0,min(880px,calc((100vh - 300px) * 600 / 455)))
      minmax(0,380px);
    justify-content:center;gap:clamp(34px,3.6vw,68px)}
  .contact video{height:min(calc(100vh - 300px),660px);aspect-ratio:auto;object-position:50% 50%}
  .contact .mark{width:clamp(94px,7vw,124px)}
  .pill{font-size:clamp(23px,1.5vw,26px)}

  /* Resources, on the same terms: the door sized off the window, the reading column between the
     list and it. There is a second section under this one, so the screen it fills is the one the
     reader lands on rather than the whole page. */
  .resources{grid-template-columns:minmax(0,310px) minmax(0,1fr)
      min(360px,calc((100vh - 300px) * 270 / 440));gap:clamp(30px,3vw,54px)}
  .resources figure img{height:min(calc(100vh - 300px),780px);aspect-ratio:auto}
}
@supports (height:100svh){
  @media (min-width:981px){
    .about{grid-template-columns:minmax(0,640px)
      minmax(0,min(460px,calc((100svh - 300px) * 295 / 415)))}
    .logocard{min-height:0}
    .contact{grid-template-columns:minmax(0,min(880px,calc((100svh - 300px) * 600 / 455)))
      minmax(0,380px)}
    .contact video{height:min(calc(100svh - 300px),660px)}
    .resources{grid-template-columns:minmax(0,310px) minmax(0,1fr)
      min(360px,calc((100svh - 300px) * 270 / 440))}
    .resources figure img{height:min(calc(100svh - 300px),780px)}
  }
}

/* ---- Resources: the six, the cubes and the pop-ups ----

   The six pages behind the list are carried whole out of section 7, which means their markup is
   section 7's: .card, .fold, .pair, .vs-grid and a hundred others. Rebuilding that vocabulary here
   would be a second design system, so those pages load section 7's stylesheet FIRST and this one
   second. Order is the whole trick: where both define a thing - .wrap, header.top, footer,
   .kicker, .fold - this file is later and wins, so the carried pages wear this site's header, its
   footer, its spirals and its palette, and section 7's sheet only fills in what this site has
   never needed to draw.

   The palette is handed over by name below: section 7's rules are written against its own custom
   properties, so redefining those to the mock-ups' colours repaints every carried page without
   touching a line of its CSS. */
:root{
  --accent:#00bf63;
  --accent2:#86d39e;
  --accent-ink:#04120c;
  --accent-soft:rgba(0,191,99,.10);
  --panel2:#0f1514;
  --glass:rgba(255,255,255,.04);
  --glass-strong:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.13);
  --frame:transparent;
  --frame-line:transparent;
  --gold2:#ffd98a;
  --gold-ink:#241a00;
  --gold-bg:rgba(90,66,10,.28);
  --code-bg:#050a09;
  --code-ink:#dbe2de;
  --code-key:#6fdcb4;
  --code-str:#e6c58c;
  --code-num:#8fc2ee;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);
  --deep:0 30px 90px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.55);
}
/* Section 7 fades a section in when it is reached and starts it at nothing. With no script there
   is nothing to add the class, so the page would be blank. */
.nojs .reveal{opacity:1;transform:none}
/* Section 7 drew the mark black on a white tile. Here the mark is white, so the tile goes and the
   shape sits on the black the way every mock-up draws it. */
.herologo,.mark{background:none;border:0;box-shadow:none}
.herologo{padding:0}


/* The list on the Resources mock-up, now that each line leads somewhere. */
.resources .index a{color:var(--ink);display:block;padding:2px 0}
.resources .index a:hover{color:var(--green);text-decoration:none}
.resources .index li{margin:0 0 9px}

/* The cubes. One button each, because pressing it does something rather than going somewhere. */
.cubes{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:24px;
  margin-top:30px}
.cube{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
  padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:transparent;
  color:inherit;font:inherit;cursor:pointer}
.cube:hover{border-color:var(--green);background:rgba(0,191,99,.05)}
.cube:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.cube .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--gold)}
.cube .h{font-size:17px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.cube .p{font-size:14px;color:var(--body)}
.cube .more{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:650;color:var(--green)}

/* The pop-up. A real <dialog>: Escape closes it, the backdrop is the browser's own, and focus
   stays inside without a line of script. */
dialog.uc{width:min(980px,calc(100vw - 48px));max-height:min(860px,calc(100vh - 64px));
  padding:0;border:1px solid var(--line);border-radius:20px;background:#0b110f;color:var(--body);
  overflow:hidden;display:none}
dialog.uc[open]{display:flex;flex-direction:column}
dialog.uc::backdrop{background:rgba(0,0,0,.72)}
.ucbar{display:flex;align-items:flex-start;gap:24px;padding:24px 26px 18px;
  border-bottom:1px solid var(--line-soft);background:#0b110f}
.ucbar .tag{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--gold)}
.ucbar h2{font-size:clamp(19px,2.2vw,26px);margin:0;max-width:30em}
.ucx{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);font-size:22px;line-height:1}
.ucx:hover{background:rgba(0,191,99,.12);border-color:var(--green)}
.ucbody{overflow-y:auto;padding:4px 26px 30px}
.ucbody>.lede{margin:22px 0 0;font-size:16px;color:var(--ink);max-width:48em}
/* Inside the pop-up the carried page is already in a box, so its own sections stop indenting. */
.ucbody section{padding:26px 0 0}
.ucbody .wrap{padding:0;max-width:none}
.ucbody .reveal{opacity:1;transform:none}

@media (max-width:980px){
  .ucbar{padding:18px 18px 14px}
  .ucbody{padding:4px 18px 24px}
}

/* ---- footer ----
   Four columns of links and a legal strip, as the specification supplies it. The one line that
   used to be the whole footer has not gone: it is the first half of the legal strip. The columns
   are auto-fit rather than counted, so the same rule lays out four across on a desktop, two on a
   tablet and one on a phone, and the legal strip spans whatever that came to. */
footer{flex:none;position:relative;z-index:1;padding:46px 0 40px;background:none;
  border-top:1px solid var(--line-soft);color:var(--muted);font-size:13.5px}
footer .wrap{display:grid;gap:26px 32px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
footer b{display:block;color:var(--ink);margin:0 0 11px;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700}
footer p{margin:0 0 9px;font-size:13px;color:var(--muted);line-height:1.55}
footer p:last-child{margin-bottom:0}
footer a{display:block;color:var(--muted);margin:0 0 7px;font-size:13.5px}
footer a:hover{color:var(--green);text-decoration:none}
footer .legal{grid-column:1/-1;border-top:1px solid var(--line-soft);margin-top:4px;
  padding-top:20px;display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline}
footer .legal b{display:inline;margin:0;font-size:13px;letter-spacing:0;text-transform:none;
  font-weight:650;color:var(--muted)}
footer .legal span{font-size:12.5px;max-width:64em}

/* ---- narrow ---- */
@media (max-width:980px){
  section{padding:46px 0}
  .hero.home .wrap,.split,.about,.contact,.security,.resources{grid-template-columns:minmax(0,1fr);
    gap:36px}
  .hero.home .wrap{padding-inline:24px;min-height:0;padding-block:34px 0}
  .about .logocard{order:-1}
  .steps{grid-template-columns:minmax(0,1fr);gap:46px}
  .step::after{content:none}
  .gradpanel{padding:24px 0 24px 24px;min-height:0}
  .gradpanel::before{inset:0 18px 18px 0}
  .statement{padding:34px 24px}
  .resources figure img{aspect-ratio:16/10}
}