/* DataSteak shared design system */
/* ============ DATASTEAK DESIGN SYSTEM (shared) ============ */
:root{
  --bg:#FFFFFF; --bg-grey:#F6F7F9; --bg-grey-2:#EEF0F3;
  --ink:#0B0C0E; --ink-2:#454A52; --ink-3:#767C86; --ink-4:#9AA0AA;
  --line:#EAECEF; --line-2:#DFE2E7;
  --red:#A6403B; --red-600:#8E332F; --red-soft:#F4E9E8; --red-tint:#FBF4F3;
  --bronze:#B88A44; --bronze-soft:#F5EFE2;
  --green:#2F9E62; --green-soft:#E7F3EC;
  --dark:#111111; --dark-2:#17181C; --dark-panel:#1B1C21; --dark-line:#2A2C33;
  --dark-ink:#EBEDF1; --dark-ink-2:#9AA1AD; --dark-ink-3:#6C727E;
  --red-d:#D06A62; --bronze-d:#D6A85E; --green-d:#5FC98C;
  --content:1440px; --content-wide:1680px; --content-narrow:1080px;
  --pad:72px;
  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  --sh-sm:0 1px 2px rgba(11,12,14,.04),0 1px 3px rgba(11,12,14,.05);
  --sh:0 4px 14px rgba(11,12,14,.06),0 12px 34px rgba(11,12,14,.05);
  --sh-lg:0 14px 40px rgba(11,12,14,.09),0 40px 80px rgba(11,12,14,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;letter-spacing:-0.011em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
.section{width:100%;position:relative}
.section.grey{background:var(--bg-grey)}
.section.dark{background:var(--dark)}
.section.line-top{border-top:1px solid var(--line)}
.container{width:100%;max-width:none;margin:0;padding:0 var(--pad)}
.container.narrow{max-width:var(--content-narrow);margin:0 auto}
.pad-y{padding-top:96px;padding-bottom:96px}
.pad-y-sm{padding-top:68px;padding-bottom:68px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.eyebrow.on-dark{color:var(--red-d)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-0.01em;padding:12px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);white-space:nowrap}
.btn-lg{padding:15px 28px;font-size:16px;border-radius:13px}
.btn-block{width:100%}
.btn-red{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(166,64,59,.25),0 10px 24px rgba(166,64,59,.20)}
.btn-red:hover{transform:translateY(-1px);background:var(--red-600)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--sh-sm)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh);background:#000}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-sm)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--sh);border-color:#cfd3d9}
.btn-ghost-dark{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.1)}

/* nav */
header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
header.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.88)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;letter-spacing:-0.02em}
.mark{width:28px;height:28px;border-radius:8px;flex:none;box-shadow:var(--sh-sm)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-cta{display:flex;align-items:center;gap:20px}
.nav-cta .signin{font-size:15px;font-weight:500;color:var(--ink-2)}
.navitem{position:relative;display:flex;align-items:center}
.navlink{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink-2);background:none;border:none;cursor:pointer;padding:9px 13px;border-radius:10px;transition:color .16s var(--ease),background .16s var(--ease);letter-spacing:-0.01em;white-space:nowrap}
.navlink:hover,.navitem:hover .navlink{color:var(--ink);background:var(--bg-grey)}
.navlink.active{color:var(--ink);font-weight:600}
.navlink .chev{width:13px;height:13px;color:var(--ink-4);transition:transform .2s var(--ease)}
.navitem:hover .navlink .chev{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:0;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:80}
.dropdown.right{left:auto;right:0}
.navitem:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);padding:10px}
.dd-panel.two{display:grid;grid-template-columns:1fr 1fr;gap:2px 4px;width:540px}
.dd-panel.one{width:300px}
.ditem{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:11px;transition:background .15s var(--ease)}
.ditem:hover{background:var(--bg-grey)}
.ditem .di{width:34px;height:34px;border-radius:9px;background:var(--bg-grey);color:var(--red);display:grid;place-items:center;flex:none}
.ditem:hover .di{background:#fff}
.ditem .dt{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.ditem .dd{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.35}
/* .ditem.all, 6 Oct 2026. The last item in the Industries dropdown is a way
   OUT of the list, not another entry in it, so it must not read as a ninth
   industry sitting in the right-hand column. Spans both columns, sits below a
   rule, and carries the brand red rather than the neutral item treatment.
   grid-column works because .dd-panel.two is a two-column grid; in .dd-panel.one
   the 1/-1 span is simply the full width, so this is safe in either panel. */
.ditem.all{grid-column:1/-1;margin-top:6px;padding-top:13px;border-top:1px solid var(--line);border-radius:0 0 11px 11px}
.ditem.all:hover{background:var(--red-tint)}
.ditem.all .di{background:var(--red-soft);color:var(--red)}
.ditem.all:hover .di{background:#fff}
.ditem.all .dt{color:var(--red)}

/* roadmap pill - marks a feature that is not live yet */
.soon{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--bronze-soft);color:var(--bronze);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.5}
.soon.on-dark{background:rgba(214,168,94,.14);color:var(--bronze-d)}
/* account-gated marker - lighter than .soon, sits next to it */
.acct{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--bg-grey-2);color:var(--ink-3);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.acct.on-dark{background:rgba(255,255,255,.08);color:var(--dark-ink-2)}

.sec-head{max-width:720px;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-0.035em;line-height:1.08;margin:12px 0 12px}
.sec-head p{font-size:18px;color:var(--ink-2);letter-spacing:-0.01em;line-height:1.55}
.sec-head.on-dark h2{color:#fff} .sec-head.on-dark p{color:var(--dark-ink-2)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* shared footer */
footer{border-top:1px solid var(--line);padding:64px 0 46px}
/* Six columns since 26 Sep 2026, when Account was added. The count here must
   match the number of .foot-col blocks in footer.php or the last one wraps onto
   its own row and sits orphaned under the brand. The breakpoints below need no
   change: 1200px is already repeat(3,1fr), so six columns fall into two rows. */
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(6,1fr);gap:40px;margin-bottom:52px}
.foot-brand p{font-size:14px;color:var(--ink-3);max-width:32ch;margin-top:16px;line-height:1.6}
/* Analytics opt-out, in the gap under the brand blurb. A switch rather than a
   checkbox because it reports a state as much as it takes an action, and the
   word beside it says which state that is - a switch on its own is ambiguous
   to about half the people who look at it. Deliberately quiet: this is an
   assurance, not a call to action. */
.foot-ev{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.foot-ev .fe-l{font-size:13px;color:var(--ink-3)}
.foot-ev .fe-b{position:relative;width:38px;height:22px;flex:none;padding:0;border:0;border-radius:999px;background:#d4d6da;cursor:pointer;transition:background .18s var(--ease)}
.foot-ev .fe-b.on{background:var(--red)}
.foot-ev .fe-k{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s var(--ease)}
.foot-ev .fe-b.on .fe-k{transform:translateX(16px)}
.foot-ev .fe-s{font-size:13px;font-weight:600;color:var(--ink-2);min-width:22px}
.foot-ev a{font-size:12.5px;color:var(--ink-4);text-decoration:underline;text-underline-offset:2px}
.foot-ev a:hover{color:var(--ink-2)}

.foot-col h5{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);margin-bottom:16px}
.foot-col a{display:block;font-size:14.5px;color:var(--ink-2);padding:6px 0;transition:color .15s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-legal{font-size:12.5px;color:var(--ink-4);line-height:1.6;padding-top:28px;border-top:1px solid var(--line);max-width:90ch}
.foot-legal + .foot-bottom{border-top:0;padding-top:22px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap;gap:16px}
.foot-bottom .cr{font-size:13.5px;color:var(--ink-4)}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);transition:all .18s var(--ease)}
.foot-social a:hover{color:var(--ink);border-color:#cfd3d9;transform:translateY(-1px)}
@media(max-width:1200px){.foot-grid{grid-template-columns:repeat(3,1fr);gap:36px 40px}.foot-brand{grid-column:1/-1}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* gutter scale - full-bleed sections, gutters shrink on smaller screens */
@media(max-width:1080px){:root{--pad:40px}}
@media(max-width:600px){:root{--pad:20px}}

/* ---------------------------------------------------------------------------
   PRODUCT CARD - shared by the homepage and the marketplace.

   Both pages used to draw their own card, which is how they drifted apart:
   one grew star ratings and format badges, the other did not. One definition,
   one look, everywhere a product is shown. Do NOT copy these rules into a page
   stylesheet - page CSS loads after this file and would silently override it,
   which is exactly what happened to the footer.
   --------------------------------------------------------------------------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);display:flex;flex-direction:column}
.product:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.product .thumb{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;flex:none}
.product .chips{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 14px}
.product .chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:#fff;border:1px solid var(--line);color:#6b6b76}
.product .chip.cook{font-weight:700;border-color:transparent}
.product .cat{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.product h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin:6px 0 6px}
.product .desc{font-size:14.5px;color:var(--ink-2);margin-bottom:20px;line-height:1.5}
.product .pmeta2{font-size:12.5px;color:var(--ink-4);margin:4px 0 12px}
.product .pmeta2 b{color:var(--ink-2)}
.product .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line)}
.product .price{font-size:22px;font-weight:700;letter-spacing:-0.03em}
.get{font-size:13.5px;font-weight:600;color:var(--red)}
/* Four across, used by the marketplace grid where there are enough products
   to fill the rows. The homepage keeps three, because its grid ends with a
   promo tile and a fourth column would leave an orphan. Same card either way -
   only the number of columns differs. */
.products.cols-4{grid-template-columns:repeat(4,1fr);gap:20px}
.products.cols-4 .product{padding:22px}
.products.cols-4 .product h3{font-size:17.5px}
.products.cols-4 .product .desc{font-size:14px;margin-bottom:16px}

@media(max-width:1240px){.products.cols-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1080px){.products,.products.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.products,.products.cols-4{grid-template-columns:1fr}}

/* ============================================================================
   MOBILE NAVIGATION, added 30 Sep 2026.

   WHAT WAS THERE BEFORE: nothing. Seven page stylesheets each carried their own
   copy of ".nav-links{display:none}" below 1080px, and nothing replaced it. So
   the menu was MISSING on index, marketplace, product, platform, industries,
   pricing and resources, and OVERFLOWING on every page loading a different
   stylesheet - privacy, terms, contact, guides, learn, checkout - because those
   never got the rule at all. Two different broken states from one absent
   component. Those seven duplicates are deleted; this file owns it now.

   NO JAVASCRIPT. A checkbox and a label. The menu works with JS off, blocked or
   still loading, which matters more than usual here: Googlebot is currently
   crawling this site almost entirely on a mobile user agent.

   THE PANEL IS IN FLOW, not an overlay. It pushes the page down instead of
   floating over it, so there is no body-scroll-lock to get wrong and no z-index
   fight with the sticky header.

   THE DROPDOWNS STAY HIDDEN ON MOBILE, deliberately. Twenty-three nested items
   behind four collapsible sections is a worse menu than five links, and every
   dropdown's parent - /marketplace, /platform, /industries, /resources - is a
   real page listing the same destinations. Nothing becomes unreachable; it
   costs one tap. It also means the touch problem disappears rather than being
   worked around: .navitem:hover .dropdown cannot fire on a touch screen, so on
   mobile there is simply no hover-dependent element.
   ============================================================================ */

/* Visually hidden, NOT display:none, so it can still take keyboard focus. */
.navtoggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-right:-8px;border-radius:10px;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger:hover{background:var(--bg-grey);color:var(--ink)}
.burger .b-close{display:none}
/* The label is the control, so the focus ring has to be drawn on it when the
   hidden input is focused, or keyboard users get no indication at all. */
.navtoggle:focus-visible ~ .burger{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:1080px){
  /* height:auto because the panel becomes a second and third flex line. */
  .nav{flex-wrap:wrap;height:auto;min-height:70px}
  .burger{display:flex}
  #navtoggle:checked ~ .burger .b-open{display:none}
  #navtoggle:checked ~ .burger .b-close{display:block}

  /* Closed. flex-basis:100% is what makes them wrap onto their own lines once
     they are shown, rather than trying to sit beside the brand. */
  .nav-links,.nav-cta{display:none;flex-basis:100%}

  #navtoggle:checked ~ .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0 4px;border-top:1px solid var(--line)
  }
  #navtoggle:checked ~ .nav-cta{
    display:flex;align-items:center;gap:14px;
    padding:12px 0 16px;border-top:1px solid var(--line)
  }

  /* Full-width rows with a real tap target. 15px was a desktop inline size. */
  .nav-links .navitem{display:block;width:100%;position:static}
  .nav-links .navlink{display:flex;width:100%;padding:13px 4px;font-size:16px;border-radius:8px}
  .nav-links .navlink.active{background:var(--bg-grey)}
  /* The chevron promises a dropdown that will not open here. */
  .nav-links .chev{display:none}
  .nav-links .dropdown{display:none}

  /* EQUAL HALVES. The first version gave .btn flex:1 and left .signin as a
     plain inline link, so Register filled the row while Sign In sat beside it
     as small text. Two controls of comparable importance on a phone should be
     the same size.

     .signin now takes the same box metrics as .btn - 12px 22px, 15px, weight
     600, 12px radius - and differs only in being outlined rather than filled.
     That keeps Register as the primary action without making Sign In look like
     an afterthought.

     The numbers are matched by hand rather than adding .btn to the markup,
     because .signin is the same element in the DESKTOP header, where it must
     stay a plain text link. */
  .nav-cta .signin{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    padding:12px 22px;font-size:15px;font-weight:600;letter-spacing:-0.01em;
    background:#fff;color:var(--ink);
    border:1px solid var(--line-2);border-radius:12px
  }
  .nav-cta .btn{flex:1;justify-content:center}
  /* Signed in, the pair is Account plus a Sign out FORM. The form is the flex
     item, so it needs display:flex of its own or the button inside it will not
     stretch to fill the half it was given. */
  .nav-cta form{flex:1;display:flex}
  .nav-cta form .btn{width:100%}
}