/* ==========================================================
   HYTIX — Inner page furniture
   Loaded by every page except the homepage. Components shared with the
   homepage (pricing cards, steps, feature grid, industry cards, quotes,
   closing CTA) live in common.css.
   ========================================================== */

/* ---------- PAGE HERO ----------
   Shorter than the homepage hero: these pages are reached with intent, so the
   job is to confirm the visitor is in the right place and get out of the way. */
.page-hero{
    background:var(--cream);
    padding:52px 0 58px;
    border-bottom:1px solid var(--line);
  }

/* Two columns, like the homepage. A single-column hero left the right half of
   every inner page empty, which read as a missing image rather than as space. */
.page-hero .wrap{display:grid; grid-template-columns:1.08fr 0.92fr; gap:56px; align-items:center;}

.page-hero .wrap > div:first-child{min-width:0;}

/* pages with no panel (rare) fall back to a single column */
.page-hero .wrap.solo{display:block;}

.page-hero h1{font-size:clamp(34px,4.4vw,52px); max-width:16ch;}

.page-hero .lede{
    font-size:17.5px; line-height:1.6; color:var(--body);
    max-width:52ch; margin:20px 0 0;
  }

/* ---------- HERO PANEL ----------
   Shares the ticket card's language - hairline, radius, coral label, dashed
   row rules - without cloning the torn stub, which belongs to the homepage. */
.hero-panel{
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:30px 30px 26px;
    box-shadow:0 24px 50px -34px rgba(21,19,26,0.35);
  }

.hero-panel .hp-label{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.14em;
    font-weight:600; text-transform:uppercase; color:var(--coral-deep);
    display:block; position:relative; padding-bottom:15px;
  }

.hero-panel .hp-label::after{
    content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--coral);
  }

.hero-panel .hp-figure{display:flex; align-items:baseline; gap:1px; margin-top:20px;}

.hero-panel .hp-amt{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(38px,4vw,54px);
    color:var(--ink); line-height:0.92; letter-spacing:-0.035em;
  }

.hero-panel .hp-unit{font-size:14px; color:var(--muted); font-weight:600; white-space:nowrap;}

.hero-panel .hp-sub{margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--body);}

.hero-panel .hp-rows{margin-top:22px; border-top:1px dashed var(--line2); padding-top:6px;}

.hero-panel .hp-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    font-family:'JetBrains Mono',monospace; font-size:12.5px;
    padding:9px 0; border-bottom:1px dotted var(--line);
  }

.hero-panel .hp-row:last-child{border-bottom:none;}

.hero-panel .hp-row .n{flex:1; min-width:0; line-height:1.45; color:var(--muted);}

.hero-panel .hp-row .v{flex-shrink:0; white-space:nowrap; color:var(--ink); font-weight:600;}

.hero-panel .hp-row .v.free{color:var(--mint);}

.hero-panel .hp-row .v.hi{color:var(--coral-deep);}

/* a jump list, for the prose pages where a figure would be meaningless */
.hero-panel .hp-jump{list-style:none; margin:18px 0 0; padding:0;}

.hero-panel .hp-jump li{border-bottom:1px dotted var(--line);}

.hero-panel .hp-jump li:last-child{border-bottom:none;}

.hero-panel .hp-jump a{
    display:block; padding:10px 0; font-size:14px; color:var(--body);
    text-decoration:none; transition:color .15s;
  }

.hero-panel .hp-jump a:hover{color:var(--coral-deep);}

.page-hero .hero-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}

.page-hero .hero-note{
    margin-top:18px; font-size:13.5px; color:var(--muted);
  }

.wrap-narrow{max-width:820px;}

/* ---------- ANCHOR NAV ----------
   The Platform page is long, so its five groups get a sticky jump bar. It sits
   under the header, which is 82px tall once the announce strip has scrolled
   away — hence the top offset rather than top:0. */
.anchor-nav{
    position:sticky; top:81px; z-index:120;
    background:var(--paper); border-bottom:1px solid var(--line);
  }

.anchor-inner{
    display:flex; gap:26px; overflow-x:auto; padding:13px 28px;
    max-width:1180px; margin:0 auto;
    scrollbar-width:none;
  }

.anchor-inner::-webkit-scrollbar{display:none;}

.anchor-inner a{
    font-size:12.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--muted); text-decoration:none;
    white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent;
    transition:color .15s, border-color .15s;
  }

.anchor-inner a:hover{color:var(--ink); border-bottom-color:var(--coral);}

/* ---------- FEATURE GROUPS ---------- */
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}

.fitem{
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:22px 20px;
    transition:border-color .18s, transform .18s;
  }

.fitem:hover{border-color:var(--line2); transform:translateY(-2px);}

.fitem h3{font-size:16.5px; margin:0 0 8px; letter-spacing:-0.012em; line-height:1.3;}

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

/* feature grid cards: icon and title share a row, ahead of the description */
.fi-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}

.fi-head .fi-ic{width:36px; height:36px; margin-bottom:0;}

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

.fi-head h3{flex:1; font-size:16px; font-weight:700; margin:0;}

/* ---------- SPLIT (text beside a panel) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}

.split.wide-left{grid-template-columns:1.15fr 0.85fr;}

.split h2{font-size:clamp(27px,3.4vw,40px);}

.split .lede{font-size:17px; line-height:1.65; color:var(--muted); margin:16px 0 0;}

.split p.body{font-size:15px; line-height:1.7; color:var(--muted); margin:16px 0 0;}

/* ---------- CHECKLIST ---------- */
.checks{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px;}

/* The tick is positioned rather than a flex item on purpose. As a flex child it
   made every <strong> at the start of a line its own column, so a bolded label
   wrapped in a narrow gutter of its own instead of running on into the
   sentence. Absolute positioning lets the whole line flow as normal text. */
.checks li{
    position:relative; padding-left:26px;
    font-size:14.5px; color:var(--body); line-height:1.55;
  }

.checks svg{position:absolute; left:0; top:3px; width:15px; height:15px; color:var(--mint);}

/* ---------- PANEL (a bordered block used beside copy) ---------- */
.panel{
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:30px 28px;
  }

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

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

.panel-rows{border-top:1px dashed var(--line2); padding-top:4px;}

.panel-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    font-size:14px; padding:11px 0; border-bottom:1px dotted var(--line);
  }

.panel-row:last-child{border-bottom:none;}

.panel-row .n{flex:1; min-width:0; color:var(--muted); line-height:1.45;}

.panel-row .v{flex-shrink:0; white-space:nowrap; color:var(--ink); font-weight:700;}

.panel-row .v.free{color:var(--mint);}

/* ---------- PROBLEM / SOLUTION ROWS ---------- */
.ps-list{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper);}

.ps{display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; border-bottom:1px solid var(--line);}

.ps:last-child{border-bottom:none;}

.ps-q{padding:26px 26px; background:var(--cream); border-right:1px dashed var(--line2);}

.ps-q h3{font-size:17px; margin:0; line-height:1.35;}

.ps-a{padding:26px 26px;}

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

/* ---------- FAQ ---------- */
.qa-list{border-top:1px solid var(--line2);}

.qa{border-bottom:1px solid var(--line2);}

.qa summary{
    list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:17.5px;
    color:var(--ink); letter-spacing:-0.015em; line-height:1.4;
  }

.qa summary::-webkit-details-marker{display:none;}

/* a plus that becomes a minus — cheaper than an icon and it can't fail to load */
.qa summary::after,
.qa summary::before{
    content:""; position:absolute; right:6px; top:50%;
    background:var(--coral); transition:transform .2s, opacity .2s;
  }

.qa summary::before{width:14px; height:2px; transform:translateY(-50%);}

.qa summary::after{width:2px; height:14px; right:12px; transform:translateY(-50%);}

.qa[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0;}

.qa summary:hover{color:var(--coral-deep);}

.qa-body{padding:0 40px 22px 0;}

.qa-body p{margin:0; font-size:15px; line-height:1.7; color:var(--muted);}

/* ---------- STAT ROW ---------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}

.stat{background:var(--paper); padding:26px 22px; text-align:center;}

.stat .num{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:32px;
    color:var(--coral-deep); letter-spacing:-0.03em; display:block; line-height:1;
  }

.stat .lbl{font-size:12.5px; color:var(--muted); display:block; margin-top:9px; line-height:1.45;}

/* ---------- COMPARISON TABLE ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);}

table.tbl{width:100%; border-collapse:collapse; min-width:560px;}

table.tbl th, table.tbl td{
    padding:15px 20px; text-align:left; font-size:14.5px;
    border-bottom:1px solid var(--line);
  }

table.tbl th{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--muted); font-weight:600;
    background:var(--cream);
  }

table.tbl td{color:var(--muted);}

table.tbl td:first-child{color:var(--ink); font-weight:600;}

table.tbl tr:last-child td{border-bottom:none;}

table.tbl tr.us td{background:var(--coral-tint);}

table.tbl tr.us td:first-child{color:var(--coral-deep); font-weight:700;}

table.tbl td.num{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--ink);}

.tbl-note{font-size:12.5px; color:var(--muted); margin:14px 0 0; line-height:1.6;}

/* ---------- PROSE (legal + long-form) ---------- */
.prose{max-width:72ch;}

.prose h2{font-size:25px; margin:44px 0 14px;}

.prose h3{font-size:18px; margin:30px 0 10px;}

.prose p, .prose li{font-size:15.5px; line-height:1.75; color:var(--body);}

.prose ul, .prose ol{padding-left:22px; margin:14px 0;}

.prose li{margin-bottom:8px;}

.prose a{color:var(--coral-deep);}

.prose .updated{
    font-family:'JetBrains Mono',monospace; font-size:12.5px;
    color:var(--muted); text-transform:uppercase; letter-spacing:0.08em;
  }

/* a visible marker on anything still awaiting real content */
.prose .draft-flag{
    background:var(--coral-tint); border-left:3px solid var(--coral);
    padding:16px 20px; border-radius:0 6px 6px 0; margin:24px 0;
  }

.prose .draft-flag p{margin:0; font-size:14px; color:var(--body);}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}

.field{margin-bottom:18px;}

.field label{
    display:block; font-size:12.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--muted); margin-bottom:7px;
  }

.field input, .field select, .field textarea{
    width:100%; padding:12px 14px; font-family:'Inter',sans-serif; font-size:15px;
    color:var(--ink); background:var(--paper);
    border:1px solid var(--line2); border-radius:var(--radius-sm);
    transition:border-color .15s;
  }

.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--coral); outline:none;}

.field textarea{min-height:130px; resize:vertical;}

.form-msg{font-size:14px; margin:14px 0 0;}

.office{
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:26px 24px; margin-bottom:18px;
  }

.office h3{font-size:17px; margin:0 0 12px;}

.office p{font-size:14.5px; line-height:1.7; color:var(--muted); margin:0;}

.office a{color:var(--coral-deep); text-decoration:none;}

.office a:hover{text-decoration:underline;}

/* ---------- CHANGELOG ---------- */
.log{border-top:1px solid var(--line2);}

.log-item{display:grid; grid-template-columns:150px 1fr; gap:26px; padding:26px 0; border-bottom:1px solid var(--line2);}

.log-date{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--muted); padding-top:3px;
  }

.log-tag{
    display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--coral-deep);
    background:var(--coral-tint); padding:3px 8px; border-radius:20px; margin-bottom:10px;
  }

.log-item h3{font-size:18px; margin:0 0 8px;}

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

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
  .fgrid{grid-template-columns:repeat(2,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  .page-hero{padding:38px 0 44px;}
  .page-hero .wrap{grid-template-columns:1fr; gap:36px;}
  .split, .split.wide-left, .contact-grid{grid-template-columns:1fr; gap:36px;}
  .ps{grid-template-columns:1fr;}
  .ps-q{border-right:none; border-bottom:1px dashed var(--line2);}
  .log-item{grid-template-columns:1fr; gap:10px;}
  .anchor-nav{top:0;}
}

@media (max-width:640px){
  .fgrid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
  .anchor-inner{padding:12px 20px;}
}

/* ---------- PILL LINKS (cross-links between industry pages) ---------- */
.pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:840px; margin:0 auto;}

.pills .pill{
    display:inline-flex; align-items:center;
    background:var(--paper); border:1px solid var(--line2); border-radius:30px;
    padding:10px 20px; font-size:13.5px; font-weight:600; color:var(--body);
    text-decoration:none; transition:border-color .15s, color .15s, background .15s;
  }

.pills .pill:hover{border-color:var(--coral); color:var(--coral-deep); background:var(--coral-tint);}

/* ---------- HERO MEDIA ----------
   The image slot in a page hero. A fixed 9:7 box so the layout never shifts
   while the picture loads, and so swapping a placeholder for a real photograph
   changes nothing about the page around it. */
.hero-media{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface-deep);
    aspect-ratio:9 / 7;
  }

.hero-media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

/* abstract artwork sits on its own tinted ground rather than being cropped */
.hero-media.art{background:var(--cream); border:1px solid var(--line);}

.hero-media.art img{object-fit:contain;}

/* a photograph gets the hairline and the lift; artwork does not need it */
.hero-media.photo{border:1px solid var(--line); box-shadow:0 24px 50px -34px rgba(21,19,26,0.4);}

@media (max-width:900px){
  .hero-media{aspect-ratio:16 / 10;}
}

/* A caption chip on a hero photograph. Solid ink rather than the usual
   gradient scrim - this system has no gradients anywhere. */
.hero-cap{
    position:absolute; left:16px; bottom:16px; z-index:1;
    background:var(--ink); color:var(--paper);
    border-radius:var(--radius-sm); padding:10px 14px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:14px;
    letter-spacing:-0.005em;
  }

/* ---------- the fee illustration (pricing hero) ----------
   Built as markup rather than an SVG so it sets in the site's real type and
   reads from the tokens. Composition follows the concept supplied; the palette,
   surfaces and the no-gradient rule are ours. Everything is sized in em off a
   container-query root, so the whole assembly scales with the hero column
   instead of needing breakpoints. A px font-size is kept first as the fallback
   for engines without container queries. */
.hero-media.viz{
    background:var(--cream); border:1px solid var(--line);
    container-type:inline-size;
    /* the assembly needs the taller box at every width - the 16/10 mobile
       ratio used for photographs clips the card */
    aspect-ratio:9 / 7;
  }

.fee-art{
    position:relative; width:100%; height:100%;
    font-family:'Inter',sans-serif; line-height:1.35;
    font-size:13px;
    font-size:2.85cqw;
  }

.fa-arc{
    position:absolute; left:6%; top:8%; width:88%; height:84%;
    color:var(--line2); pointer-events:none;
  }

.fa-card{
    position:absolute; left:22%; right:7%; top:14%;
    border-radius:var(--radius); overflow:hidden;
    box-shadow:0 18px 40px -26px rgba(21,19,26,0.45);
  }

.fa-card-head{
    background:var(--ink); color:var(--paper);
    font-family:'Archivo',sans-serif; font-weight:700;
    font-size:1.2em; line-height:1.3; padding:1.85em 1.1em 0.95em;
  }

.fa-card-body{background:var(--paper); padding:1.05em 1.1em 1.25em;}

.fa-card-sub{
    display:flex; align-items:center; justify-content:space-between; gap:0.8em;
    color:var(--muted); margin-bottom:0.9em;
  }

.fa-card-sub svg{width:1.6em; height:1.6em; flex-shrink:0; color:var(--coral-deep);}

.fa-row{
    display:flex; align-items:center; gap:0.75em; color:var(--ink);
    background:var(--cream2); border-radius:var(--radius-sm);
    padding:0.72em 0.9em; margin-top:0.5em;
  }

.fa-row:first-of-type{margin-top:0;}

.fa-row svg{width:1.35em; height:1.35em; flex-shrink:0; color:var(--coral-deep);}

.fa-chip{
    position:absolute; z-index:2; display:inline-flex; align-items:center; gap:0.7em;
    background:var(--paper); color:var(--ink); white-space:nowrap;
    border-radius:var(--radius); padding:0.85em 1.05em;
    box-shadow:0 14px 32px -20px rgba(21,19,26,0.5);
  }

.fa-chip svg{width:1.4em; height:1.4em; flex-shrink:0; color:var(--coral-deep);}

.fa-row svg.ok, .fa-chip svg.ok{color:var(--mint);}

.fa-tl{left:4%; top:5%;}

.fa-br{right:1%; bottom:8%;}

.fa-note{
    position:absolute; left:6%; bottom:5%;
    font-family:'JetBrains Mono',monospace; font-size:0.78em;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  }


/* The typed-prompt line in the platform page's AI panel. Set in the mono face
   so it reads as something a person typed rather than as body copy. */
.ai-prompt{
    font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.6;
    color:var(--ink2); background:var(--cream2); border-left:2px solid var(--coral);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:14px 16px; margin:12px 0 22px;
  }

.panel-note{font-size:12.5px; line-height:1.55; color:var(--muted); margin:16px 0 0;}


/* ---------- CONTACT ROUTES ----------
   Three ways through, beside the form: the team, the organizer dashboard, and
   the buyer account. Separating the buyer route matters - a ticket holder
   chasing a refund is the single most common wrong-door arrival on a ticketing
   site, and sending them to sales wastes everyone's time. */
.routes{display:grid; gap:14px; align-content:start;}

.route{
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); padding:22px 22px 20px;
    transition:border-color .2s, box-shadow .2s;
  }

.route:hover{border-color:var(--line2); box-shadow:0 18px 38px -30px rgba(21,19,26,0.35);}

.route-ic{
    width:40px; height:40px; border-radius:50%;
    background:var(--coral-tint); color:var(--coral-deep);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }

.route-ic svg{width:19px; height:19px;}

.route h3{font-size:17px; margin:0 0 7px; letter-spacing:-0.012em;}

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

.route-link{
    font-size:14px; font-weight:600; color:var(--coral-deep);
    text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  }

.route-link:hover{text-decoration:underline; text-underline-offset:3px;}

/* the second route on a card sits under the first, not beside it - at this
   width two links on one line wrap badly and read as one broken link */
.route-link.alt{display:flex; margin-top:9px;}

.route-link span{transition:transform .18s ease;}

.route:hover .route-link span{transform:translateX(3px);}

.office-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}

@media (max-width:760px){
  .office-row{grid-template-columns:1fr;}
}


/* ---------- CONCEPT ILLUSTRATION ----------
   The contact hero's right half: floating message cards over a tinted panel,
   built in markup rather than as an image so it stays crisp, weighs nothing and
   re-themes with the tokens. Solid fills throughout, no gradients.

   Everything inside is positioned as a percentage of the panel, so the whole
   composition scales with the column instead of breaking at in-between widths.
   It carries a single role="img" with one label: to a screen reader this is one
   illustration, not five stray fragments of text. */
.concept{
    position:relative; aspect-ratio:1 / 0.82;
    background:var(--surface-deep); border:1px solid var(--line2);
    border-radius:26px; overflow:hidden;
  }

.concept-ring{
    position:absolute; left:50%; top:48%; width:68%; aspect-ratio:1;
    transform:translate(-50%,-50%); border:1.5px dashed var(--line2);
    border-radius:50%;
  }

.cc{
    position:absolute; background:var(--paper); border:1px solid var(--line);
    border-radius:14px; box-shadow:0 16px 34px -20px rgba(21,19,26,0.28);
  }

.cc-ic{display:inline-flex; color:var(--coral-deep); flex-shrink:0;}

.cc-ic svg{width:19px; height:19px; display:block;}

/* the two small pills */
.cc-pill{
    display:flex; align-items:center; gap:10px;
    padding:12px 18px; font-size:14px; font-weight:600; color:var(--ink);
    white-space:nowrap;
  }

.cc-users{top:9%; right:2%;}

.cc-clock{bottom:10%; left:4%;}

/* the message card */
.cc-msg{
    top:19%; left:10%; width:62%;
    padding:20px 22px 22px;
    display:grid; grid-template-columns:auto 1fr; gap:10px 13px; align-items:center;
  }

.cc-msg strong{font-size:15.5px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}

.cc-line{
    grid-column:2; height:7px; border-radius:4px; background:var(--line);
  }

.cc-line.short{width:72%;}

/* the dark card, which is where the promise actually lands */
.cc-dark{
    top:50%; left:22%; width:68%;
    background:var(--ink); border-color:var(--ink);
    padding:22px 24px;
    box-shadow:0 22px 44px -22px rgba(21,19,26,0.5);
  }

.cc-dark strong{display:block; font-size:15.5px; font-weight:700; color:#fff; letter-spacing:-0.012em;}

.cc-dark span{display:block; margin-top:6px; font-size:13.5px; color:var(--paper-dim);}

@media (max-width:900px){
  .concept{aspect-ratio:1 / 0.92;}
  .cc-pill{padding:10px 14px; font-size:13px;}
  .cc-msg{width:68%; padding:16px 18px 18px;}
  .cc-dark{left:20%; width:70%; padding:16px 18px;}
}

@media (max-width:520px){
  .concept{border-radius:18px;}
  .cc-msg strong, .cc-dark strong{font-size:14px;}
  .cc-dark span{font-size:12.5px;}
  .cc-pill{font-size:12px; gap:8px;}
  .cc-ic svg{width:16px; height:16px;}
}

/* ---------- CONCEPT: PLATFORM ----------
   The same family as the contact illustration: a tinted panel, a dashed ring,
   two floating pills and one card carrying the actual content. Here the card is
   a workspace - a dark header sitting proud of a white body that lists what the
   workspace holds. The header is offset right of the body on purpose; squared
   up, the whole thing reads as a plain table. */
.concept-platform{aspect-ratio:1 / 0.84;}

.concept-platform .concept-ring{left:62%; top:52%; width:62%;}

.cc-ai{top:7%; left:2%; z-index:3;}

.cc-team{bottom:7%; right:1%; z-index:3;}

.cc-ic.spark{color:var(--coral);}

.cw{position:absolute; top:21%; left:12%; width:72%; z-index:2;}

.cw-head{
    position:relative; left:6%; width:104%;
    background:var(--ink); color:#fff;
    border-radius:13px 13px 0 0; padding:15px 20px 26px;
    font-size:15px; font-weight:700; letter-spacing:-0.012em;
    box-shadow:0 18px 38px -22px rgba(21,19,26,0.5);
  }

.cw-body{
    position:relative; margin-top:-14px;
    background:var(--paper); border:1px solid var(--line);
    border-radius:13px; padding:18px 18px 20px;
    box-shadow:0 18px 38px -24px rgba(21,19,26,0.3);
  }

.cw-label{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size:13.5px; color:var(--muted); padding:2px 4px 14px;
  }

.cw-spark{display:inline-flex; color:var(--coral); flex-shrink:0;}

.cw-spark svg{width:20px; height:20px; display:block;}

.cw-row{
    display:flex; align-items:center; gap:12px;
    background:var(--cream2); border-radius:9px;
    padding:12px 14px; font-size:13.5px; font-weight:500; color:var(--ink);
  }

.cw-row + .cw-row{margin-top:9px;}

.cw-ic{display:inline-flex; color:var(--coral-deep); flex-shrink:0;}

.cw-ic svg{width:18px; height:18px; display:block;}

@media (max-width:900px){
  .concept-platform{aspect-ratio:1 / 0.9;}
  .cw{left:9%; width:70%;}
  .cw-row{font-size:12.5px; padding:10px 12px;}
}

@media (max-width:520px){
  /* a little more height, and the card sits higher, so the team pill clears the
     last row instead of landing on top of it */
  .concept-platform{aspect-ratio:1 / 1.02;}
  .cw{top:16%; left:7%; width:76%;}
  .cw-head{font-size:13.5px; padding:13px 16px 24px;}
  .cw-label{font-size:12px;}
  .cw-row{font-size:11.5px; gap:9px;}
  .cw-ic svg{width:16px; height:16px;}
  .cc-team{bottom:3%; right:2%;}
}

/* ---------- CONCEPT: BOX OFFICE ----------
   Same family again: tinted panel, dashed ring, two pills, one card. The card is
   a scan result rather than a feature list, because the moment this page is
   about is a guest getting through the gate. */
.concept-bo{aspect-ratio:1 / 0.86;}

.concept-bo .concept-ring{left:52%; top:48%; width:64%;}

.cc-bo-offline{top:7%; left:3%; z-index:3;}

.cc-bo-pay{bottom:7%; right:3%; z-index:3;}

.bo-card{
    position:absolute; top:20%; left:14%; width:70%; z-index:2;
    background:var(--paper); border:1px solid var(--line); border-radius:15px;
    overflow:hidden;
    box-shadow:0 22px 46px -24px rgba(21,19,26,0.36);
  }

.bo-top{
    background:var(--cream2); padding:22px 22px 20px;
    text-align:center; border-bottom:1px solid var(--line);
  }

/* scoped to .bo-top because the plain ".bo-top span" rule below is 0-1-1 and
   was beating a bare .bo-tick at 0-1-0, painting the tick muted grey */
.bo-top .bo-tick{
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; margin:0 auto 13px; border-radius:50%;
    background:var(--mint-tint); color:var(--mint);
  }

.bo-top .bo-tick svg{width:23px; height:23px; display:block;}

.bo-top strong{display:block; font-size:15.5px; color:var(--ink); letter-spacing:-0.012em;}

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

.bo-rows{padding:6px 20px 14px;}

.bo-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    font-family:'JetBrains Mono',monospace; font-size:11.5px;
    padding:10px 0; border-bottom:1px dotted var(--line);
  }

.bo-row:last-child{border-bottom:none;}

.bo-row .n{color:var(--muted);}

.bo-row .v{color:var(--ink); font-weight:600; white-space:nowrap;}

.bo-row .v.ok{color:var(--mint);}

@media (max-width:900px){
  .concept-bo{aspect-ratio:1 / 0.94;}
  .bo-card{left:12%; width:74%;}
}

@media (max-width:520px){
  .concept-bo{aspect-ratio:1 / 1.04;}
  .bo-card{top:17%; left:8%; width:80%;}
  .bo-top strong{font-size:14px;}
  .bo-row{font-size:10.5px;}
}

/* ---------- EVENTS PAGE (India listing) ---------- */

/* smaller than the shared section-head clamp - at full size the h1 crowded
   the filter card right underneath it */
.section-head.wide h1{font-size:clamp(26px,3.2vw,38px);}

/* ---------- FILTER CARD ----------
   Lifted off the page on its own surface (paper + hairline + a light lift)
   so it reads as one tool, not a loose row of fields sitting on the section
   background. Kept subtle - the hero panel's heavier shadow was competing
   with the featured cards above it. */
.evt-filter-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 8px 20px -14px rgba(21,19,26,0.18); overflow:hidden;
    padding:26px 26px 22px; margin-bottom:44px;
  }

.evt-search{display:flex; flex-wrap:wrap; gap:12px;}

.evt-input-wrap{position:relative; flex:1 1 220px; min-width:0;}

.evt-input-ic{
    position:absolute; left:14px; top:50%; transform:translateY(-50%); margin-top:-2px;
    width:16px; height:16px; color:var(--muted); pointer-events:none;
  }

.evt-input-ic svg{display:block; width:100%; height:100%;}

.evt-search input[type="text"]{
    width:100%; height:44px; box-sizing:border-box;
    background:var(--paper); border:1px solid var(--line2); border-radius:var(--radius-sm);
    padding:0 16px 0 40px; font-size:14px; font-family:'Inter',sans-serif; color:var(--ink);
  }

.evt-search input[type="text"]:focus{outline:2px solid var(--coral-deep); outline-offset:1px;}

.evt-search .btn{flex:0 0 auto;}

.evt-search select{
    width:100%; height:44px; box-sizing:border-box; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background:var(--paper); border:1px solid var(--line2); border-radius:var(--radius-sm);
    padding:0 16px 0 40px; margin:0; line-height:normal;
    font-size:14px; font-family:'Inter',sans-serif; color:var(--ink);
  }

.evt-search select:focus{outline:2px solid var(--coral-deep); outline-offset:1px;}

.evt-input-wrap-select{flex:1 1 180px;}

.evt-search-note{margin:12px 0 0; font-size:12.5px; color:var(--muted);}

.evt-filter-foot{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:16px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line2);
  }

.evt-filters{display:flex; flex-wrap:wrap; gap:10px;}

/* full pill shape - these were plain unstyled <button> chrome before (a
   1px browser-default border and square corners), never actually pill-shaped
   despite the class name */
.evt-filters .pill{
    background:var(--paper); border:1px solid var(--line2); border-radius:999px;
    padding:9px 20px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.02em;
    text-transform:uppercase; color:var(--muted);
    transition:border-color .15s, background .15s, color .15s;
  }

.evt-filters .pill:hover{border-color:var(--coral); color:var(--coral-deep);}

.evt-filters .pill.active{background:var(--coral); border-color:var(--coral); color:#fff;}

.evt-filter-actions{display:flex; flex-wrap:wrap; align-items:center; gap:18px;}

.evt-link-btn{
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; padding:0; cursor:pointer;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--coral-deep);
  }

.evt-link-btn:hover{text-decoration:underline;}

.evt-link-btn svg{flex:none; width:14px; height:14px;}

.evt-link-btn:disabled{color:var(--muted); cursor:default;}

@media (max-width:600px){
  .evt-filter-card{padding:20px 18px 18px;}
  .evt-filter-foot{flex-direction:column; align-items:flex-start;}

  /* the search button used to just shrink-wrap onto its own half-empty row
     next to nothing - full width reads as the obvious next tap */
  .evt-search .btn{flex:1 1 100%;}

  /* one scrollable row instead of wrapping to two - less vertical space,
     and it reads as "there are more filters" the way chip rows usually do */
  .evt-filters{
      flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
      margin:0 -18px; padding:0 18px 4px;
    }
  .evt-filters::-webkit-scrollbar{display:none;}
  .evt-filters .pill{flex:none;}
}

/* ---------- FEATURED SLIDER ----------
   Contained inside .wrap like every other section - cards outside that
   boundary are clipped, not bled past the viewport edge. The next card peeks
   in from the right so the row reads as scrollable; it never centers, it
   only ever snaps flush to the left. */
.evt-feat{padding:52px 0 58px;}

.evt-feat-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:28px;
  }

.kicker.dot{
    display:inline-flex; align-items:center; gap:9px; margin-bottom:0;
  }

.kicker.dot::before{
    content:""; width:7px; height:7px; border-radius:50%; background:var(--coral);
  }

.evt-nav-group{display:flex; gap:10px;}

.evt-nav{
    flex:none; width:32px; height:32px; border-radius:50%;
    border:1px solid var(--line2); background:var(--paper); color:var(--ink);
    font-size:15px; line-height:1; cursor:pointer; transition:border-color .15s;
  }

.evt-nav:hover{border-color:var(--ink);}

.evt-track{
    display:flex; justify-content:flex-start; gap:24px; overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 8px;
    cursor:grab;
  }

.evt-track::-webkit-scrollbar{display:none;}

/* dragging is a free scroll, not a snap-to-card one, or the two fight and jitter */
.evt-track.dragging{cursor:grabbing; scroll-snap-type:none; user-select:none;}

.evt-slide{
    position:relative; flex:0 0 min(550px, 50%); aspect-ratio:4/3;
    scroll-snap-align:start; border-radius:16px; overflow:hidden;
    text-decoration:none; color:#fff; display:block;
  }

.evt-slide img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .4s ease;
    -webkit-user-drag:none; user-select:none;
  }

.evt-slide:hover img, .evt-slide:focus-visible img{transform:scale(1.03);}

.evt-slide-actions{position:absolute; top:16px; right:16px; z-index:2; display:flex; gap:8px;}

.evt-icon-btn{
    width:36px; height:36px; border-radius:50%; border:none;
    background:rgba(21,19,26,0.45); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(2px);
  }

.evt-icon-btn:hover{background:rgba(21,19,26,0.7);}

.evt-badge{
    position:absolute; top:16px; left:16px; z-index:2;
    background:var(--ink); color:#fff; font-family:'JetBrains Mono',monospace;
    font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;
    padding:6px 12px; border-radius:999px;
  }

/* gradient scoped to the text block itself, not the whole card, so most of
   the banner stays visible and only the area behind the title/meta darkens */
.evt-slide-body{
    position:absolute; left:0; right:0; bottom:0; z-index:1; padding:74px 24px 24px;
    background:linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgb(0 0 0 / 73%) 60%, rgba(0,0,0,0) 100%);
  }

.evt-slide-tag{
    display:block; font-family:'JetBrains Mono',monospace; font-size:11px;
    letter-spacing:0.09em; text-transform:uppercase; color:var(--coral); margin-bottom:8px;
  }

.evt-slide-body h3{font-size:clamp(19px,2.4vw,26px); margin:0 0 10px; color:#fff;}

.evt-slide-meta{
    display:flex; align-items:center; gap:7px; flex-wrap:wrap;
    font-size:13px; color:var(--paper-dim); margin:0 0 18px;
  }

.evt-slide-meta svg{flex:none; color:var(--mint-lite);}

.evt-slide-cta{
    display:inline-flex; align-items:center; background:var(--coral); color:#fff;
    font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em;
    padding:11px 22px; border-radius:var(--radius-sm);
  }

@media (prefers-reduced-motion:reduce){
  .evt-slide img{transition:none;}
  .evt-slide:hover img{transform:none;}
}

/* ---------- IMAGE PLACEHOLDER ----------
   img-fallback is added by the onerror handler in events.js, for a missing
   image field or a dead URL alike - a plain ticket glyph instead of the
   browser's broken-image icon. Punch-hole fill matches each card's own
   background so it reads as cut out, not pasted on. */
.ind-shot.img-fallback{
    background:var(--surface-deep) center/44px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='13' width='38' height='22' rx='4' fill='none' stroke='%23DCD2CC' stroke-width='2'/%3E%3Cline x1='28' y1='13' x2='28' y2='35' stroke='%23DCD2CC' stroke-width='2' stroke-dasharray='3 3'/%3E%3Ccircle cx='28' cy='13' r='2.2' fill='%23FBF1ED'/%3E%3Ccircle cx='28' cy='35' r='2.2' fill='%23FBF1ED'/%3E%3C/svg%3E");
  }

.evt-slide.img-fallback{background:var(--ink2);}

.evt-slide.img-fallback::before{
    content:""; position:absolute; inset:0; margin:auto; width:52px; height:52px;
    background:center/52px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='13' width='38' height='22' rx='4' fill='none' stroke='%23524C5B' stroke-width='2'/%3E%3Cline x1='28' y1='13' x2='28' y2='35' stroke='%23524C5B' stroke-width='2' stroke-dasharray='3 3'/%3E%3Ccircle cx='28' cy='13' r='2.2' fill='%231E1B26'/%3E%3Ccircle cx='28' cy='35' r='2.2' fill='%231E1B26'/%3E%3C/svg%3E");
  }

@media (max-width:720px){
  /* portrait below the breakpoint, matches phone-camera photos better than
     the 4:3 crop does; back to 4:3 once there's room to show it wide */
  .evt-slide{flex:0 0 84%; aspect-ratio:3/4;}
  .evt-slide-body{padding:100px 18px 20px;}
}

/* ---------- EVENT META ROWS (grid cards) ---------- */
.evt-meta{
    display:flex; align-items:flex-start; gap:6px;
    font-size:12.5px; color:var(--muted); margin:0 0 8px; line-height:1.4;
  }

.evt-meta svg{flex:none; margin-top:2px; color:var(--coral-deep);}

.evt-status{text-align:center; color:var(--muted); font-size:15px; padding:40px 0; grid-column:1/-1;}

.evt-more{text-align:center; margin-top:36px;}

/* ---------- EVENT GRID (overrides scoped to this page - .ind-grid/.ind-card
   are shared with industries.html and the homepage, so tweaks specific to
   the events listing live here rather than in common.css) ---------- */
#evtGrid.ind-grid{grid-template-columns:repeat(4,1fr);}

#evtGrid .ind-tag{font-size:9px;}

#evtGrid .ind-card h3{line-height:1.3;}

#evtGrid .ind-shot{position:relative;}

.ind-shot-share{position:absolute; top:10px; right:10px; z-index:2;}

@media (max-width:1100px){
  #evtGrid.ind-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:760px){
  #evtGrid.ind-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:520px){
  #evtGrid.ind-grid{grid-template-columns:1fr;}
}

/* ---------- EVENT GRID SKELETON ----------
   Cards sized like real .ind-card content so the grid holds its height from
   first paint - no empty box that suddenly grows once the API responds, and
   no plain "Loading..." text sitting in dead space. */
.skel-card{pointer-events:none;}

.skel-shot, .skel-line{
    position:relative; overflow:hidden; background:var(--surface-deep); border-radius:4px;
  }

.skel-pill{width:72px; height:18px; border-radius:999px; margin-bottom:14px;}
.skel-h{height:16px; width:85%; margin-bottom:10px;}
.skel-sm{height:11px; width:70%; margin-bottom:8px;}

.skel-shot::after, .skel-line::after{
    content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation:skel-shimmer 1.3s ease-in-out infinite;
  }

@keyframes skel-shimmer{100%{transform:translateX(100%);}}

@media (prefers-reduced-motion:reduce){
  .skel-shot::after, .skel-line::after{animation:none; display:none;}
}

/* the UA [hidden]{display:none} rule loses to any later same-specificity
   display rule - every .btn/.pill/.evt-link-btn's own display among them -
   so a hidden element on this page kept showing. Kept last in this file so
   it's always the final word in the cascade at equal specificity. */
[hidden]{display:none;}

/* ---------- APP DOWNLOAD BAND ---------- */
.app-band{
    background:var(--ink); border-radius:var(--radius);
    padding:44px 48px; display:flex; align-items:center; justify-content:space-between;
    gap:32px; flex-wrap:wrap;
  }

.app-band h2{color:#fff; margin-bottom:8px;}
.app-band p{color:var(--paper-mute); max-width:480px; margin:0;}

.app-badges{display:flex; gap:14px; flex-wrap:wrap;}

.app-badge{
    display:flex; align-items:center; gap:10px;
    background:#000; border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-sm);
    padding:10px 18px; color:#fff; text-decoration:none;
    transition:border-color .15s, background .15s;
  }

.app-badge:hover{border-color:rgba(255,255,255,0.4); background:#111;}

.app-badge-ic{width:26px; height:26px; fill:#fff; flex-shrink:0;}

.app-badge span{display:flex; flex-direction:column; line-height:1.25;}
.app-badge small{font-size:10px; color:var(--paper-mute); text-transform:uppercase; letter-spacing:0.04em;}
.app-badge strong{font-family:'Archivo',sans-serif; font-size:16.5px; font-weight:700;}

@media (max-width:640px){
  .app-band{padding:32px 24px; text-align:center; justify-content:center;}
  .app-band p{max-width:none;}
  .app-badges{justify-content:center;}
}

/* ---------- COMPACT EVENTS-PAGE HEADER ----------
   events.html is the front page for the India build, so its header skips
   the full site nav (Platform/Industries/Blog/etc.) and the announce bar's
   My Tickets / Organizer Login links entirely.

   Desktop: logo, links, button all in one row (natural DOM order).
   Responsive (<=640px): the button uses `order` to stay on row 1 next to
   the logo (space-between), while the links get `flex-basis:100%` so they
   drop to their own centered row underneath - no separate markup needed
   for the two layouts, just a wrap + reorder. */
.evt-header-nav{flex-wrap:nowrap; padding-top:12px; padding-bottom:12px;}

.evt-header-links{display:flex; align-items:center; gap:14px; flex-wrap:nowrap; flex-shrink:0; flex:1; justify-content:flex-end;}

.evt-header-links a{
    font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
    color:var(--ink); text-decoration:none; white-space:nowrap;
  }

.evt-header-links a:hover{color:var(--coral-deep);}

.evt-header-divider{width:1px; height:14px; background:var(--line2); flex-shrink:0;}

.evt-header-cta{flex-shrink:0; white-space:nowrap; padding:12px 24px;}

@media (max-width:640px){
  .evt-header-nav{flex-wrap:wrap; padding:14px 20px; row-gap:12px;}
  .evt-header-nav .logo-img{height:36px;}
  .evt-header-cta{order:2;}
  .evt-header-links{order:3; flex-basis:100%; justify-content:flex-start; gap:12px;}
  .evt-header-links a{font-size:13px;}
}

@media (max-width:400px){
  .evt-header-nav{padding:12px 14px;}
  .evt-header-nav .logo-img{height:28px;}
  .evt-header-links{gap:10px;}
  .evt-header-links a{font-size:12px;}
}


/* ---------- WHATS NEW ---------- */
.wn-filters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 28px;}

.wn-filter-tab{
    font:inherit; font-size:13.5px; font-weight:600; padding:8px 18px; cursor:pointer;
    background:var(--paper); color:var(--ink); border:1px solid var(--line2); border-radius:20px;
    transition:border-color .15s, background .15s, color .15s;
  }

.wn-filter-tab:hover{border-color:var(--coral); color:var(--coral-deep);}

.wn-filter-tab.active{background:var(--coral); border-color:var(--coral); color:#fff;}

.wn-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}

.wn-item{
    display:grid; grid-template-columns:34px 1fr; gap:16px; padding:22px 20px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    transition:border-color .18s, transform .18s;
  }

.wn-item:hover{border-color:var(--line2); transform:translateY(-2px);}

.wn-item .fi-ic{margin:0;}

.wn-item .log-tag{margin-bottom:8px;}

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

.wn-pts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}

.wn-pt{display:flex; gap:14px; padding:16px; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);}

.wn-pt .fi-ic{flex:none; margin:0;}

.wn-pt h3{font-size:15px; margin:0 0 4px;}

.wn-pt p{font-size:13px; line-height:1.55; color:var(--muted); margin:0;}

.wn-item h3{font-size:17px; margin:0 0 6px;}

.wn-feat .fi-ic{margin-bottom:12px;}

.wn-feat .log-tag{position:absolute; top:20px; right:20px; margin:0;}

.wn-feat, .wn-step{position:relative;}

.wn-num{display:block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.1em; color:var(--coral-deep); margin-bottom:8px;}

/* highlight grid: tall AI card on the left, wide analytics card along the bottom */
.wn-bento{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}

.wn-bento .fitem{padding:24px 22px; display:flex; flex-direction:column;}

.wn-tall{grid-row:span 2;}

.wn-wide{grid-column:span 2;}

.wn-feat > p{flex:0 0 auto;}

.wn-lines, .wn-chips, .wn-bars, .wn-sw, .wn-tiles{margin-top:auto; padding-top:18px;}

.wn-lines{display:grid; gap:10px;}

.wn-lines span{
    border-left:2px solid var(--coral); background:var(--cream); padding:9px 12px;
    font-size:12.5px; color:var(--muted); border-radius:0 6px 6px 0;
  }

.wn-chips{display:flex; flex-wrap:wrap; gap:8px;}

.wn-chips span{
    font-family:'JetBrains Mono',monospace; font-size:11px; padding:5px 11px;
    border:1px solid var(--line2); border-radius:20px; color:var(--coral-deep); background:var(--coral-tint);
  }

.wn-chips span.ok{color:var(--mint); background:var(--mint-tint); border-color:var(--mint);}

.wn-bars{display:flex; align-items:flex-end; gap:6px; height:78px; box-sizing:content-box;}

.wn-bars i{flex:1; background:var(--line2); border-radius:3px 3px 0 0;}

.wn-bars i.hi, .wn-chart i.hi{background:var(--coral);}

.wn-sw{display:flex; gap:8px;}

.wn-sw i{flex:1; height:26px; border-radius:6px; border:1px solid var(--line2);}

.wn-sw .a{background:var(--coral); border-color:var(--coral);}
.wn-sw .b{background:var(--ink);}
.wn-sw .c{background:var(--cream2);}
.wn-sw .d{background:var(--mint-tint);}

.wn-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}

.wn-tile{background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}

.wn-tile small{display:block; font-size:11.5px; color:var(--muted); margin-bottom:10px;}

.wn-tile i{display:block; height:8px; border-radius:4px; background:var(--coral);}

@media (max-width:900px){
  .wn-list{grid-template-columns:1fr;}
}

@media (max-width:1040px){
  .wn-bento{grid-template-columns:repeat(2,1fr);}
  .wn-tall{grid-row:auto;}
  .wn-wide{grid-column:span 2;}
  .wn-tiles, .wn-pts{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .wn-bento, .wn-pts{grid-template-columns:1fr;}
  .wn-wide{grid-column:auto;}
}