/* ==========================================================
   HYTIX — Shared/base styles used across all pages
   (design tokens, reset, header, nav, footer, buttons, etc.)

   Sibling of the FEARTICKET system: same token structure, same spacing scale,
   same component discipline — but light-first, and built on the coral sampled
   from the Hytix wordmark (#FE4D5A). The perforation motif is native here: the
   logo's own "x" ends in a torn ticket stub.

   NO GRADIENTS. Every surface on this site is a solid fill. The blooms and
   washes from the previous pass are gone; separation is done with colour steps,
   hairlines and shadow only.
   ========================================================== */

:root{
    /* ---- THE PALETTE ----
       The warm scheme from the first draft: coral #FE4D5A off the wordmark,
       warm near-white bands, blush tints, and mint as the quiet "all clear"
       colour on checks and zero-fee rows. */

    --black:#15131A;
    --ink:#15131A;        /* dark bands, headings */
    --ink2:#1E1B26;
    --ink3:#2B2734;

    --paper:#FFFFFF;
    --cream:#FFF8F5;      /* hero band + alternating sections */
    --cream2:#FCEFEA;     /* ticket stub */
    --surface-deep:#FBF1ED;
    --line:#ECE5E1;
    --line2:#DCD2CC;

    /* ---- text on light ---- */
    --body:#4A4553;
    --muted:#6B6576;      /* clears 4.5:1 on paper, cream and surface-deep */

    /* ---- text on dark ---- */
    --paper-dim:#C9C3D2;
    --paper-mute:#A49DB2;

    /* ---- brand ---- */
    --coral:#FE4D5A;
    --coral-deep:#E13246;
    --coral-tint:#FFEDEE;
    /* coral on white is 3.6:1 - fine for fills, borders and large display
       type, never for body copy. --coral-deep is the text-safe variant. */

    --mint:#0E9E74;
    --mint-tint:#E4F6F0;
    --mint-lite:#4ADCA8;  /* the dark-band variant; --mint is only 2.6:1 there */

    --radius:10px;
    --radius-sm:6px;

    /* ---- spacing scale ----
       One rhythm for the whole site. Body sections sit at --sp-section; a
       section that opens with a full-bleed element of its own uses .sec-flush
       instead, because the section padding and the element's own margin would
       otherwise compound into ~140px of dead space. */
    --sp-section:84px;
    --sp-cta:86px;
  }

*{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:88px;}

body{
    margin:0;
    background:var(--paper);
    color:var(--body);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

h1,h2,h3,.display{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    letter-spacing:-0.028em;
    line-height:1.04;
    color:var(--black);
    margin:0;
  }

.mono{font-family:'JetBrains Mono',monospace;}

a{color:inherit;}

img{max-width:100%; display:block;}

:focus-visible{outline:3px solid var(--coral); outline-offset:3px;}

.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

/* keyboard users can jump the ~30 header links on every page */
.skip-link{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--coral); color:#fff; padding:12px 20px;
    font-weight:700; font-size:14px; text-decoration:none;
    border-radius:0 0 4px 0;
  }

.skip-link:focus{left:0;}

::selection{background:var(--coral); color:#fff;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- PERFORATION ----------
   The torn-stub edge from the wordmark, reused as a card edge and a divider. */
.perf{position:relative;}

.perf::before{
    content:"";
    position:absolute; top:50%; left:0; width:100%; height:1px;
    border-top:2px dashed var(--line2);
    transform:translateY(-50%);
  }

.perf.on-dark::before{border-top-color:rgba(255,255,255,0.18);}

/* ---------- ANNOUNCEMENT BAR ----------
   A thin dark utility strip above a light nav reads as chrome, not as a slab.
   What did not work was dark strip / white nav / dark hero, which sandwiched
   the nav between two dark bands. */
.announce-bar{background:var(--ink);}

/* three tracks — an empty spacer, the centred message, then the sign-in group —
   so the message stays optically centred in the strip while Organizer Login
   anchors the right edge. */
.announce-inner{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:9px 28px; min-height:43px; text-align:center;
  }

.announce-inner::before{content:""; display:block;}

.announce-msg{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}

.announce-text{
    font-family:'JetBrains Mono',monospace; font-size:12px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-mute);
  }

.announce-link{
    font-size:13px; font-weight:700; color:var(--coral);
    text-decoration:none; white-space:nowrap; transition:color .15s;
  }

.announce-link:hover{color:#FF7A84;}

/* ---------- SIGN-IN GROUP (top strip) ----------
   Organizers are the primary audience, so Organizer Login carries a bordered
   button shape; ticket buyers get a quieter text link beside it. Both are one
   click from every page — neither sits behind a dropdown. */
.announce-auth{display:flex; align-items:center; justify-content:flex-end; gap:16px;}

.auth-buyer{
    font-size:12.5px; font-weight:500; letter-spacing:0.03em;
    color:var(--paper-mute); text-decoration:none; white-space:nowrap;
    transition:color .15s;
  }

.auth-buyer:hover{color:#fff;}

/* hairline between the two sign-in entries — without it "My Tickets" reads as
   a stray word next to the button rather than the other half of a pair */
.auth-rule{display:block; width:1px; height:16px; flex-shrink:0; background:rgba(255,255,255,0.26);}

.auth-org{
    display:inline-flex; align-items:center;
    font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
    color:#fff; text-decoration:none; white-space:nowrap;
    padding:4px 14px; border:1.5px solid rgba(255,255,255,0.32); border-radius:3px;
    transition:border-color .15s, background .15s, color .15s;
  }

.auth-org:hover{border-color:var(--coral); background:var(--coral); color:#fff;}

/* ---------- HEADER / NAV ----------
   The nav shares the hero's fill, so strip -> nav -> hero reads as one light
   surface with no boundary. On scroll it detaches onto solid white. */
header{
    background:var(--paper);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:140;
  }

/* the header is white in its own right, so nothing changes on scroll — the
   .stuck hook stays for pages whose hero band is a different fill */
header.stuck{background:var(--paper); border-bottom:1px solid var(--line);}

.nav{
    display:flex; align-items:center; justify-content:space-between; gap:30px;
    padding:14px 28px; max-width:1180px; margin:0 auto; position:relative;
  }

.logo{display:flex; align-items:center; gap:8px; flex-shrink:0; text-decoration:none;}

.logo-img{height:52px; width:auto; display:block;}

.nav-links{display:flex; align-items:center; gap:25px; list-style:none; margin:0; padding:0;}

.nav-links > li{position:relative; display:flex; align-items:center;}

/* nav: small caps in the body face with wide tracking — ties to the mono
   kickers without borrowing the headline voice */
.nav-links a, .nav-links .drop-trigger{
    font-family:'Inter',sans-serif;
    font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.045em;
    text-decoration:none; color:var(--body);
    /* uniform box so the dropdown triggers line up with the plain links */
    display:inline-flex; align-items:center; line-height:1.15; white-space:nowrap;
    padding:5px 0 3px; border-bottom:2px solid transparent;
    background:none; border-left:none; border-right:none; border-top:none;
    cursor:pointer;
    transition:color .15s, border-color .15s;
  }

.nav-links a:hover, .nav-links .drop-trigger:hover{color:var(--ink);}

.nav-links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--coral);}

.mobile-nav a[aria-current="page"]{color:var(--coral); font-weight:700;}

.nav-cta{display:flex; align-items:center; gap:18px;}


/* invisible bridge so the pointer can cross the gap into the menu */
.has-dropdown::before{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    width:100%; min-width:200px; height:18px; z-index:149;
  }

/* The mark was a 10px hairline against 700-weight uppercase text - too big and
   too thin to belong to it. Smaller, heavier stroke, its own gap, and a muted
   grey that picks up the brand colour on open, so it reads as part of the label
   rather than a stray tick beside it. */
.drop-trigger{gap:7px;}

.chev{
    flex-shrink:0; color:var(--paper-mute);
    transition:transform .2s cubic-bezier(.4,0,.2,1), color .15s ease;
  }

.nav-links .drop-trigger:hover .chev{color:var(--coral-deep);}

.has-dropdown.open .chev, .has-dropdown:hover .chev{
    transform:rotate(180deg); color:var(--coral-deep);
  }

.dropdown-menu{
    position:absolute; top:calc(100% + 16px); left:50%;
    transform:translateX(-50%) translateY(-6px);
    background:var(--paper); border:1px solid var(--line); border-radius:8px;
    min-width:252px; padding:8px; list-style:none; margin:0;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    box-shadow:0 20px 44px -24px rgba(11,11,12,0.3);
    z-index:150;
  }

.has-dropdown.open .dropdown-menu,
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }

.dropdown-menu li{margin:0;}

.dropdown-menu li + li{margin-top:1px;}

/* sub-links carry the same uppercase treatment as the top-level nav — a
   lowercase menu hanging off an uppercase trigger reads as two systems */
.dropdown-menu a{
    display:block; padding:11px 14px; font-size:12.5px; font-weight:700;
    line-height:1.35; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--body); border-radius:5px; text-decoration:none; white-space:nowrap;
    border-bottom:none;
    transition:background .12s, color .12s;
  }

.dropdown-menu a:hover{background:var(--cream); color:var(--ink);}

/* The hub link sits above the nine verticals and is separated from them, so the
   menu reads as "all of them, then each one" rather than as ten equal siblings. */
.dropdown-menu a.drop-all{color:var(--coral-deep);}

.dropdown-menu a.drop-all:hover{background:var(--coral-tint); color:var(--coral-deep);}

.dropdown-menu li:has(.drop-all){
    padding-bottom:7px; margin-bottom:6px; border-bottom:1px solid var(--line);
  }

/* Blog nav entry hidden site-wide until the blog is ready - remove this
   rule (nav-links, mobile-nav, footer all link the same URL) to bring it
   back, no HTML edits needed. */
li:has(> a[href="https://blog.hytix.com/"]){display:none;}

/* ---------- BUTTONS ---------- */
.btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--coral); color:#fff; font-weight:700; font-size:13px;
    text-transform:uppercase; letter-spacing:0.07em;
    padding:17px 24px; border-radius:var(--radius-sm); text-decoration:none;
    white-space:nowrap; border:none; cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  }

.btn:hover{background:var(--coral-deep); transform:translateY(-1px);}

.btn.ghost{background:transparent; border:1.5px solid var(--line2); color:var(--ink);}

.btn.ghost:hover{border-color:var(--ink);}



.btn.dark{background:var(--ink); color:#fff;}

.btn.dark:hover{background:var(--ink3); box-shadow:none;}

/* on the few dark bands (CTA, footer) */
.on-dark .btn.ghost{border-color:rgba(255,255,255,0.35); color:#fff;}

.on-dark .btn.ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}

.on-dark .btn.dark{background:#fff; color:var(--ink);}

.on-dark .btn.dark:hover{background:var(--cream); color:var(--ink);}

.menu-toggle{
    display:none; background:none; border:none; color:var(--ink);
    font-size:22px; cursor:pointer; line-height:1; padding:4px;
  }

/* ---------- MOBILE UTILITY LINKS ----------
   Buyer/organizer login, under the header on mobile only (desktop keeps
   them in the announce bar) - mirrors events.html's own header links. */
.mobile-utility-links{display:none;}

.mobile-utility-links a{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700;
    color:var(--ink); text-decoration:none;
  }

.mobile-utility-links a:hover{color:var(--coral-deep);}

.mobile-utility-links a svg{width:20px; height:20px; flex-shrink:0; color:var(--coral-deep);}

/* ---------- MOBILE NAV ---------- */
.mobile-nav{
    display:none; background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 28px 22px;
    position:fixed; left:0; right:0; bottom:0; z-index:100; overflow-y:auto;
  }

.mobile-nav.open{display:block;}

.mobile-nav ul{list-style:none; margin:0; padding:0;}

.mobile-nav > ul > li{border-bottom:1px solid var(--line);}

.mobile-nav a{
    display:block; padding:13px 0; text-decoration:none; color:var(--ink);
    font-size:15px; font-weight:600;
  }

.mobile-nav .sub{padding-left:16px;}

.mobile-nav .sub a{
    font-size:12.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--body); padding:10px 0;
  }

.mobile-nav .m-group{
    display:block; padding:13px 0 4px; font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  }

.mobile-nav .btn{margin-top:18px; width:100%; justify-content:center; text-align:center; color:#fff;}

/* ---------- SECTION FURNITURE ---------- */
section{padding:var(--sp-section) 0;}

/* for a section whose first child is a full-bleed element with its own spacing */
section.sec-flush{padding-top:0;}

.sec-cream{background:var(--cream);}

.sec-deep{background:var(--surface-deep);}

.sec-dark{background:var(--ink); color:var(--paper-dim);}

.sec-dark h1, .sec-dark h2, .sec-dark h3{color:#fff;}

.kicker{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--coral-deep); margin-bottom:14px; display:block;
  }

.sec-dark .kicker{color:var(--coral);}

.eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em;
    color:var(--mint); text-transform:uppercase; margin-bottom:20px;
  }

.eyebrow::before{content:"\25CF"; font-size:8px;}

.section-head{margin:0 auto 48px; max-width:760px;}

.section-head.center{text-align:center;}

.section-head.wide{max-width:none;}

.section-head h1, .section-head h2{font-size:clamp(31px,4.1vw,48px);}

.section-head p{font-size:17px; line-height:1.6; margin-top:16px; color:var(--muted);}

.sec-dark .section-head p{color:var(--paper-mute);}

/* section-level em highlight — the one place colour is allowed in a heading */
h1 em, h2 em{font-style:normal; color:var(--coral-deep);}

.sec-dark h1 em, .sec-dark h2 em{color:var(--coral);}

/* ---------- NEWSLETTER ---------- */
.newsletter{background:var(--ink2); padding:40px 0;}

.news-inner{display:flex; align-items:center; justify-content:space-between; gap:30px;}

.news-inner h3{color:#fff; font-size:22px;}

.news-inner p{margin:8px 0 0; color:var(--paper-mute); font-size:14px;}

.news-form input{
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.2);
    border-radius:var(--radius-sm); padding:13px 16px; color:#fff;
    font-family:'Inter',sans-serif; font-size:14px; min-width:260px; margin-right:10px;
    vertical-align:middle;
  }

.news-form input::placeholder{color:var(--paper-mute);}

.news-msg{display:block; width:100%; text-align:left; font-size:13px; margin:10px 0 0; color:var(--mint-lite);}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--paper-mute); padding:64px 0 28px;}

.foot-top{
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12);
  }

.foot-brand .logo-img{height:40px; margin-bottom:18px;}

.foot-brand p{font-size:13.5px; line-height:1.65; max-width:34ch; margin:0 0 18px;}

.foot-contact{font-size:14px; line-height:2; font-weight:500;}

.foot-contact a{color:var(--paper-dim); text-decoration:none;}

.foot-contact a:hover{color:var(--coral);}

.foot-social{display:flex; gap:14px; margin-top:18px;}

.foot-social a{
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; color:var(--paper-dim);
    text-decoration:none; transition:border-color .15s, color .15s, background .15s;
  }

.foot-social a:hover{border-color:var(--coral); background:var(--coral); color:#fff;}

.foot-social svg{width:15px; height:15px;}

.foot-col h4{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:#fff; font-weight:600; margin:0 0 16px;
  }

.foot-col ul{list-style:none; margin:0; padding:0;}

.foot-col li{margin-bottom:10px;}

.foot-col a{font-size:13.5px; color:var(--paper-mute); text-decoration:none; transition:color .15s;}

.foot-col a:hover{color:#fff;}

.foot-bottom{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    flex-wrap:wrap; padding-top:24px;
  }

.foot-bottom p{margin:0; font-size:13px;}

.foot-legal{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}

.foot-legal a{font-size:13px; color:var(--paper-mute); text-decoration:none;}

.foot-legal a:hover{color:#fff;}

/* ---------- FOOTER REGION PICKER ----------
   Visitors are served their region's build by IP, so the site never presents a
   country choice. This is the quiet escape hatch for anyone on the wrong IP -
   and the only crawlable path between the regional builds. */
.region-picker{position:relative;}

.region-switch{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--paper-mute);
    border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:6px 14px;
    background:none; cursor:pointer; font-family:'Inter',sans-serif;
    transition:border-color .15s, color .15s;
  }

.region-switch:hover{border-color:var(--coral); color:#fff;}

.region-switch svg{width:13px; height:13px;}

.region-switch .chev{margin-left:2px;}

.region-menu{
    position:absolute; bottom:calc(100% + 10px); left:0;
    background:var(--ink2); border:1px solid rgba(255,255,255,0.16);
    border-radius:8px; padding:6px; margin:0; list-style:none; min-width:190px;
    box-shadow:0 24px 48px -20px rgba(0,0,0,0.7);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .16s, transform .16s, visibility .16s;
    z-index:20;
  }

.region-picker.open .region-menu{opacity:1; visibility:visible; transform:translateY(0);}

.region-menu a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:9px 11px; font-size:13px; color:var(--paper-mute);
    text-decoration:none; border-radius:5px; transition:background .12s, color .12s;
  }

.region-menu a:hover{background:rgba(255,255,255,0.07); color:#fff;}

.region-menu a[aria-current="true"]{color:#fff;}

.region-menu a[aria-current="true"]::after{content:"\2713"; color:var(--coral); font-size:12px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
  .foot-top{grid-template-columns:1fr 1fr 1fr; gap:34px;}
  .foot-brand{grid-column:1/-1;}
}

@media (max-width:900px){
  :root{--sp-section:60px; --sp-cta:70px;}
  .nav-links{display:none;}
  .menu-toggle{display:block;}
  .nav{gap:16px;}
  /* The CTA stays in the header on mobile - burying the only signup route
     behind a hamburger costs conversions. The buyer/organizer login links
     move out of the announce bar and into their own row under the header,
     matching events.html's mobile header. */
  .nav-cta{display:flex; gap:10px; margin-left:auto;}
  .nav-cta .btn, .mobile-nav .btn{padding:15px 16px; font-size:12px;}
  .announce-inner{grid-template-columns:1fr; gap:8px; padding:4px 20px;}
  .announce-inner::before{display:none;}
  .announce-auth{display:none;}
  .mobile-utility-links{display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:18px; padding:10px 28px; border-top:1px solid var(--line);}
  .news-inner{flex-direction:column; align-items:flex-start; flex-wrap:wrap;}
  .news-form{display:flex; flex-wrap:wrap;}
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  .announce-inner{padding:4px 20px;}
  .nav{padding:10px 16px;}
  .logo-img{height:40px;}
  .nav-cta .btn, .mobile-nav .btn{padding:12px 13px; font-size:11px; letter-spacing:0.03em;}
  .mobile-utility-links{padding:10px 16px;}
  .mobile-utility-links a{font-size:13px;}
  .foot-top{grid-template-columns:1fr 1fr; gap:28px;}
  .news-form{width:100%;}
  .news-form input{min-width:0; flex:1;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}


/* ==========================================================
   SHARED PAGE COMPONENTS
   Lifted out of home.css so every inner page draws on the same
   pricing cards, step rows, feature grids, industry cards,
   testimonial cards and closing CTA. Page-specific layout stays
   in that page's own stylesheet.
   ========================================================== */
/* ---------- PRICING ----------
   One region per build. The visitor is served their own region by IP, so the
   page never presents a country choice - and never invites the "why is it
   different over there?" question. The footer picker is the escape hatch. */
.price-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:960px; margin:0 auto;}

.price-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 24px; text-align:center;
  }

.price-card.lead{border-color:var(--coral); box-shadow:0 22px 48px -30px rgba(254,77,90,0.5);}

.price-card .pc-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--muted); display:block; margin-bottom:14px;
  }

.price-card .pc-amt{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:46px; color:var(--ink);
    letter-spacing:-0.035em; line-height:1; display:block;
  }

.price-card.lead .pc-amt{color:var(--coral-deep);}

/* Outside pricing.html these cards carry a short phrase rather than a figure,
   so the type steps down - "Nothing to sign" set at the size of "$0.50" runs
   over three lines and stops reading as a single statement. */
.price-card .pc-word{
    display:block; font-family:'Archivo',sans-serif; font-weight:800;
    font-size:27px; line-height:1.12; letter-spacing:-0.02em;
    color:var(--ink); margin:14px 0 10px;
  }

.price-card.lead .pc-word{color:var(--coral-deep);}

.price-card .pc-unit{font-size:13.5px; color:var(--muted); display:block; margin-top:12px; line-height:1.5;}

.price-foot{text-align:center; margin-top:34px;}

.price-foot p{font-size:14.5px; color:var(--muted); margin:0 0 18px;}

/* ---------- STEPS ---------- */
.steps{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; background:var(--paper);
  }

.step{padding:32px 28px; border-right:1px dashed var(--line2); position:relative;}

.step:last-child{border-right:none;}

.step-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}

.step .sn{
    flex-shrink:0; color:var(--coral-deep); background:var(--coral-tint);
    width:40px; height:40px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
  }

/* pages still using the plain number badge (no .step-head wrapper) need their
   own gap before the title, since .step-head supplies it where it's used */
.step > .sn{margin-bottom:18px;}

.step .sn svg{width:20px; height:20px;}

.step h3{font-size:19px; margin:0;}

/* same as .sn above: flat markup needs its own gap below the title */
.step > h3{margin:0 0 10px;}

.step p{font-size:14px; line-height:1.65; color:var(--muted); margin:0;}

/* ---------- FEATURE GRID ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr);}

/* No boxes. Four cards side by side read as one flat band, so each feature is
   fenced by a hairline instead - the section reads as a spec list rather than
   competing with the carded sections above and below it. */
.fcard{
    border-left:1px solid var(--line2);
    padding:16px 22px 14px;
    transition:border-left-color .2s;
  }

.fcard:hover{border-left-color:var(--coral);}

.fcard .tag{
    display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--mint); margin-bottom:12px;
  }

.fcard h3{font-size:17.5px; margin:0 0 9px; letter-spacing:-0.012em; line-height:1.28;}

/* ---------- FEATURE CARD ICONS ----------
   Forty-eight cards in five stacks was a wall of identical rectangles. A mark on
   each gives the eye something to land on, and the two densities below give the
   page a rhythm instead of one repeating beat. The glyph set is deliberately
   smaller than the feature count - related features share a mark, which reads as
   a family rather than as forty-eight shapes nobody can tell apart. */
.fi-ic{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:9px;
    background:var(--coral-tint); color:var(--coral-deep);
    margin-bottom:14px;
  }

.fi-ic svg{width:17px; height:17px; display:block;}

/* the twelve-feature groups run four across and step everything down a notch */
.fgrid.dense{grid-template-columns:repeat(4,1fr); gap:16px;}

.fgrid.dense .fitem{padding:20px 18px;}

.fgrid.dense .fi-ic{width:36px; height:36px; border-radius:9px; margin-bottom:0;}

.fgrid.dense .fi-ic svg{width:18px; height:18px;}

.fgrid.dense .fitem h3{font-size:15.5px;}

.fgrid.dense .fitem p{font-size:12.5px; line-height:1.55;}

@media (max-width:1040px){
  .fgrid.dense{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .fgrid.dense{grid-template-columns:1fr;}
}

.fcard p{font-size:13.5px; line-height:1.62; color:var(--muted); margin:0;}

.feature-foot{text-align:center; margin-top:44px;}

/* ---------- INDUSTRIES ---------- */
/* Editorial tiles. The previous pass bled a desaturated photograph behind the
   copy of each card, which asked one image to be both picture and background and
   let it be neither. Here the photograph gets its own 16:9 band at full colour
   and the copy sits on plain paper underneath, so both read properly. The chip
   names the ticketing shape the industry actually needs - timed entry, sessions,
   departures - rather than repeating the category. */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

.ind-card{
    display:flex; flex-direction:column; text-decoration:none; color:inherit;
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
    transition:border-color .2s, transform .2s, box-shadow .2s;
  }

.ind-card:hover,
.ind-card:focus-visible{
    border-color:var(--coral); transform:translateY(-3px);
    box-shadow:0 20px 42px -30px rgba(21,19,26,0.4);
  }

.ind-card:focus-visible{outline:2px solid var(--coral-deep); outline-offset:3px;}

.ind-shot{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-deep);}

.ind-shot img{
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .4s ease;
  }

.ind-card:hover .ind-shot img{transform:scale(1.04);}

.ind-body{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px;}

.ind-tag{
    align-self:flex-start; margin-bottom:12px; padding:5px 10px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--coral-deep);
    background:var(--coral-tint); border-radius:999px;
  }

.ind-card h3{font-size:17.5px; margin:0 0 8px; letter-spacing:-0.012em; color:var(--ink);}

.ind-card p{font-size:13.5px; line-height:1.6; color:var(--muted); margin:0 0 16px;}

.ind-card .go{
    margin-top:auto; display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--coral-deep);
  }

.ind-card .go i{font-style:normal; transition:transform .2s ease;}

.ind-card:hover .go i{transform:translateX(4px);}

@media (prefers-reduced-motion:reduce){
    .ind-card, .ind-shot img, .ind-card .go i{transition:none;}
    .ind-card:hover{transform:none;}
    .ind-card:hover .ind-shot img{transform:none;}
  }

/* ---------- TESTIMONIALS ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

.quote{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 26px; display:flex; flex-direction:column;
  }

.quote .stars{color:var(--coral); font-size:13px; letter-spacing:2px; margin-bottom:14px;}

.quote p{font-size:15px; line-height:1.65; color:var(--body); margin:0 0 20px; flex:1;}

.quote .who{border-top:1px dashed var(--line2); padding-top:16px;}

.quote .who strong{display:block; font-size:14px; color:var(--ink);}

.quote .who span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px;}

/* ---------- FINAL CTA ---------- */
.cta{background:var(--ink); padding:var(--sp-cta) 0; text-align:center;}

.cta h2{font-size:clamp(32px,4.6vw,54px); color:#fff; max-width:18ch; margin:0 auto;}

.cta h2 em{font-style:normal; color:var(--coral);}

.cta p{color:var(--paper-dim); font-size:17px; margin:20px auto 0; max-width:52ch; line-height:1.6;}

.cta-btns{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}

.cta p.cta-note{margin-top:20px; font-size:13.5px; color:var(--paper-mute); max-width:none;}


@media (max-width:1040px){
  .feature-grid{grid-template-columns:repeat(2,1fr); row-gap:8px;}
  .ind-grid{grid-template-columns:repeat(2,1fr);}
  .quotes{grid-template-columns:1fr;}
}

/* .pillars isn't collapsed here even though it's the same 3-up grid shape -
   home.css loads after this file and redeclares grid-template-columns:
   repeat(3,1fr) unconditionally, so at equal specificity it always won
   regardless of this media query, and stayed 3 cramped columns on mobile.
   Its own mobile override lives in home.css now, after the base rule, where
   source order actually favours it. */
@media (max-width:900px){
  .price-cards, .steps{grid-template-columns:1fr;}
  .step{border-right:none; border-bottom:1px dashed var(--line2);}
  .step:last-child{border-bottom:none;}
}

@media (max-width:640px){
  .feature-grid, .ind-grid{grid-template-columns:1fr;}
  .sup-stats{grid-template-columns:1fr;}
  .fcard{border-left:none; border-top:1px solid var(--line2); padding:18px 0 14px;}
}