/* ─────────────────────────────────────────────────────────────────────
   event-page.css
   Layer for the individual event landing pages (/workx-2026-…, and any
   future show page linked from /events).

   Loads after site.css + articles.css. articles.css already supplies
   .section, .bullet-list, .final-cta and the events-index cards;
   this file adds only what a single-event page needs: the white hero,
   the event-details block, the product pair and the team roster.
   Nothing here overrides an articles.css rule.
   ───────────────────────────────────────────────────────────────────── */

:root{
  /* Same ramp partner-page.css uses, so the two detail templates agree. */
  --t-kicker: 11px;
  --t-micro:  12px;
  --t-fine:   13px;
  --t-small:  14px;
  --t-body:   15px;
  --t-body-lg:16px;
  --t-h4:     17px;
  --t-h3:     20px;
  --t-lede:   clamp(16px, 1.45vw, 19px);
  --t-h2:     clamp(22px, 4.25vw, 51px);
  --t-h1:     clamp(30px, 4.9vw, 56px);

  --measure:       66ch;
  --measure-lede:  58ch;
  --measure-tight: 46ch;
}

/* The hero carries its own nav clearance, same arrangement as the
   .sw-hero pages, so page-wrap must not add its own on top. */
#page-wrap:has(> .ev-hero){padding-top:0}

/* ── HERO ──────────────────────────────────────────────────────────
   Navy ground, inverted type. The near-flat vertical gradient is
   .pnl-panel's (partners.css) rather than the 135deg navy-to-cyan of
   .article-hero--gradient: the photo is still the only real colour in
   the block, and a travelling gradient behind it competes.

   The old white ground faded into --bg over its last third, because
   #fff against #FAFBFC left a seam faint enough to read as a mistake.
   Navy needs no fade -- the edge against --bg is now an obvious,
   deliberate boundary, so the hero ends flat and the next section
   starts clean.

   NOTE ON THE NAV: site.css paints header.nav near-opaque white with
   navy links, and that is left alone here, so the nav reads as a white
   bar above the navy rather than dissolving into it the way it did on
   white. Inverting it the way the homepage does is not a few lines --
   index.css carries ~40 interlocking rules for the transparent state
   plus a .scrolled toggle and a two-logo swap, none of which this page
   loads or has markup for. The white bar is the deliberate trade. */
.ev-hero{
  position:relative;
  padding:160px 32px 72px;
  background:linear-gradient(180deg,#0D2E51 0%,#0A2543 100%);
  overflow:hidden;
}

.ev-hero-inner{
  position:relative;z-index:1;
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}

/* The same breadcrumb the product and partner pages open with, so a
   detail page reads the same wherever you land. partner-page.css is not
   loaded here, so the rule is restated rather than inherited. */
.ev-hero .breadcrumb{
  font-size:var(--t-kicker);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.60);
  margin-bottom:26px;
}
.ev-hero .breadcrumb a{color:rgba(255,255,255,.60);transition:color .2s}
.ev-hero .breadcrumb a:hover{color:#fff}
.ev-hero .breadcrumb b{color:#fff;font-weight:700}

.ev-h1{
  font-size:var(--t-h1);
  line-height:1.06;letter-spacing:-.025em;font-weight:700;
  color:#fff;text-wrap:balance;
  margin-bottom:22px;
}

.ev-lede{
  font-size:var(--t-lede);
  line-height:var(--lh-lede,1.55);
  color:rgba(255,255,255,.75);
  max-width:var(--measure-lede);
  margin-bottom:32px;
}

/* Live-show marker. A wrapped show adds .is-past and drops to neutral
   grey, so the teal chip only ever means "we are there now". Text only:
   the chip's own colour carries the state, and a node in front of it
   read as a stray bullet. */
.ev-status{
  display:flex;width:fit-content;align-items:center;
  font-size:var(--t-micro);font-weight:700;
  padding:6px 14px;border-radius:999px;
  background:rgba(65,154,248,.18);
  border:1px solid rgba(65,154,248,.40);
  color:#8CC6FC;
  margin-bottom:18px;
}
.ev-status.is-past{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.70);
}

.ev-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* .btn-ghost is --ink type on a rgba(13,46,81,.15) border -- both vanish
   on navy. Scoped to the hero so .final-cta further down the page keeps
   site.css's light treatment. .btn-primary stays teal: it is the site's
   primary everywhere, and against navy it carries the colour the ghost
   button deliberately does not. */
.ev-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.ev-hero .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}

/* ── HERO MEDIA ────────────────────────────────────────────────────
   A single photo card. It used to carry a glass plate with the dates
   and booth number laid over its bottom edge; those facts now have
   their own block under the hero, so the picture stays whole. */
.ev-hero-media{position:relative}

.ev-shot{
  position:relative;
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55);
  aspect-ratio:4/3;
  background:var(--bg);
}
.ev-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* ── CLOSING CTA ───────────────────────────────────────────────────
   articles.css sizes .final-cta h2 but sets no measure, so at the top
   of the clamp a long heading runs the full 1320px container as one
   line. Capping it keeps the centred heading to two readable lines at
   most, and balance splits them evenly rather than leaving one word
   stranded. */
.final-cta h2{
  max-width:22ch;
  margin-inline:auto;
  text-wrap:balance;
}

/* articles.css spaces .final-cta for a long page that has scrolled
   through several sections before reaching it. This page is short, so
   the stacked section padding and CTA margin leave a dead band above
   the heading. Close it up. */
.ev-cta-section{padding-top:0}
.ev-cta-section .final-cta{margin-top:16px;padding:48px 56px 64px}

/* ── SECTION HEADS ─────────────────────────────────────────────────
   .section itself comes from articles.css. */
.ev-section-head{margin-bottom:36px}
.ev-section-head h2{
  font-size:var(--t-h2);
  line-height:1.08;letter-spacing:-.025em;font-weight:700;
  color:var(--ink);text-wrap:balance;
  margin-bottom:14px;
}
.ev-section-head p{
  font-size:var(--t-lede);line-height:1.55;
  color:var(--muted);max-width:var(--measure-lede);
}

/* ── CONTENT SPLIT + PRODUCT PAIR ──────────────────────────────────
   Template rules, currently unused by the WorkX page: its content
   section was cut. Kept for the next show page, which will want a
   copy-plus-bullets block and a route into the products on show. */
.ev-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* articles.css gives .bullet-list a card of its own; inside the split
   column it reads better flush, so the chrome comes off. */
.ev-split .bullet-list{
  margin:0;padding:0;
  background:none;border:0;box-shadow:none;
  gap:16px;
}

/* ── PRODUCT PAIR ──────────────────────────────────────────────────
   The two products the show was about, each a route into its own page. */
.ev-products{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* In the details rail the pair stacks: side by side leaves ~300px a card,
   which wraps every description onto three lines. */
.ev-rail .ev-products{grid-template-columns:1fr}

.ev-product{
  display:flex;align-items:center;gap:22px;
  background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:24px 26px;
  box-shadow:0 4px 16px rgba(13,46,81,.06);
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.ev-product:hover{
  box-shadow:0 16px 44px -16px rgba(13,46,81,.20);
  transform:translateY(-2px);
  border-color:rgba(65,154,248,.35);
}
.ev-product img{
  width:74px;height:74px;flex-shrink:0;
  object-fit:contain;border-radius:14px;
  background:var(--teal-soft);padding:8px;
}
/* Spans, not divs, so the whole card can stay a single <a>; they still
   need to stack. */
/* The card is one <a> with img + copy as flex children, so the name and
   description need a wrapper to stack beside the image. */
.ev-product-copy{display:block;min-width:0}
.ev-product-name{display:block;font-size:var(--t-h4);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ev-product-desc{display:block;font-size:var(--t-fine);color:var(--muted);margin-top:4px;line-height:1.45}

/* ── EVENT DETAILS ─────────────────────────────────────────────────
   Labelled fact blocks under the hero, the shape the reference event
   page uses: the show facts and the roster stacked down the left, the
   signup form filling the right rail.

   .section centres a 1320px box and pads inside it, while .ev-hero pads
   the full width and centres 1320px within that, so the two start 32px
   apart. Restated here as the hero's arrangement, so the fact labels
   line up under the H1 rather than sitting indented from it. */
/* 12px of top padding was right when the hero above faded to --bg over
   its last third: the two blocks shared a ground and the facts could sit
   close under it. The navy hero ends on a hard edge instead, so that
   12px read as the list colliding with the boundary. Opened up to clear
   it. */
.ev-details{
  max-width:none;
  padding:76px 32px 16px;
}

.ev-details-inner{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px 64px;align-items:start;
}

.ev-facts{display:grid;gap:30px}

/* One heading size across every block in here, facts and roster alike,
   so the four labels read as one list rather than a hierarchy. */
.ev-fact-label{
  font-size:var(--t-h3);
  font-weight:700;letter-spacing:-.015em;line-height:1.25;
  color:var(--ink);
  margin-bottom:12px;
}

.ev-fact-value{
  display:flex;align-items:flex-start;gap:11px;
  font-size:var(--t-body-lg);line-height:1.5;
  color:var(--ink);
}
.ev-fact-ico{
  width:19px;height:19px;flex-shrink:0;
  margin-top:2px;color:var(--teal);
}

/* Indented to the value text, not the icon, so the link hangs off the
   venue name it belongs to. */
.ev-fact-link{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:10px;margin-left:30px;
  font-size:var(--t-fine);font-weight:600;
  color:var(--teal-ink);
  transition:gap .2s;
}
.ev-fact-link:hover{gap:11px}

/* A qualifier hanging off a fact's value rather than a fact of its
   own: same 30px indent to the value text as .ev-fact-link, one step
   smaller and muted so it reads under the 18px value instead of
   beside it. */
.ev-fact-note{
  margin:6px 0 0 30px;
  font-size:var(--t-fine);line-height:1.5;
  color:var(--muted);
}

.ev-fact-link .ev-arrow-r{
  width:6px;height:6px;flex-shrink:0;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

/* ── TEAM ROSTER ───────────────────────────────────────────────────
   A compact who-you-will-meet list, not a row of cards: two people
   read as a list and six would too. Headshots are square-cropped at
   source and clipped to the circle here. */
.ev-team{display:grid;gap:20px}

.ev-person{display:flex;align-items:center;gap:14px}

.ev-face{
  width:52px;height:52px;flex-shrink:0;
  border-radius:999px;object-fit:cover;
  background:var(--teal-soft);
  border:1px solid var(--line);
}

.ev-person-name{font-size:var(--t-body-lg);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ev-person-role{font-size:var(--t-fine);color:var(--muted);margin-top:2px;line-height:1.4}

/* ── NEWSLETTER BAND ──────────────────────────────────────────────
   The form that used to be a white card in the details rail, now a navy
   band at the foot of the page. The field, .form-status and .form-error
   rules below are the newsletter page's, re-scoped to .ev-form because
   they live in that page's own <style> block -- and recoloured for navy
   rather than kept light and overridden, since this band is the only
   place .ev-form appears on the page.

   Field, button and status treatments follow .pnl-panel (partners.css),
   which already solved this same form on navy, so the two agree instead
   of drifting. */
.ev-news{
  background:linear-gradient(180deg,#0D2E51 0%,#0A2543 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  box-shadow:0 28px 56px -24px rgba(13,46,81,.45);
  padding:40px 48px;
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:56px;align-items:start;
}
.ev-news-title{
  font-size:var(--t-h3);
  font-weight:700;letter-spacing:-.015em;line-height:1.25;
  color:#fff;
}
.ev-news-lede{
  font-size:var(--t-small);line-height:1.55;
  color:rgba(255,255,255,.72);
  margin-top:10px;
}
.ev-news .recaptcha-note{color:rgba(255,255,255,.50)}

/* Three fields across, then Subscribe beside the consent line. The band
   is wide enough that the old 2-up grid left the email field stranded on
   a row of its own. */
/* dense, so Subscribe can backfill the column-1 hole left beside the
   consent line. The consent checkbox precedes the button in the DOM and
   must stay there -- you tick then submit, and that is also the tab order
   -- so sparse placement pushed the button to a row of its own. */
.ev-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-auto-flow:row dense}
.ev-form .field{display:flex;flex-direction:column;gap:6px}
.ev-form .field.full{grid-column:auto}
.ev-form .field label{
  font-size:var(--t-kicker);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:700;
}
.ev-form .field.required label::after{content:" *";color:#FF9E93;margin-left:2px}
.ev-form .field input{
  padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  font-size:var(--t-small);color:#fff;font-weight:500;width:100%;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.ev-form .field input::placeholder{color:rgba(255,255,255,.42)}
.ev-form .field input:focus{
  outline:none;border-color:var(--teal);background:rgba(255,255,255,.14);
  box-shadow:0 0 0 4px rgba(65,154,248,.25);
}
/* Honeypot: off-screen rather than hidden, so a bot still fills it. */
.ev-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.ev-consent{
  grid-column:2/-1;display:flex;align-items:flex-start;gap:10px;
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.70);cursor:pointer;
  margin-top:8px;
}
.ev-consent input{width:17px;height:17px;margin-top:1px;accent-color:var(--teal);flex-shrink:0}

/* Submit holds one column so the pill sits under First Name and beside the
   consent line, rather than stretching the full band. */
.ev-submit{grid-column:1;margin-top:8px}
.ev-submit .btn{width:100%;justify-content:center}
/* White pill on navy, same inversion .pnl-form uses: keeps Subscribe the
   highest-contrast element in the band, where the teal .btn-primary sits
   too close to the navy ground. */
.ev-submit .btn-primary{background:#fff;color:var(--ink);border:1px solid transparent;box-shadow:none}
.ev-submit .btn-primary:hover{background:#ECEEF1;color:var(--ink);border-color:rgba(13,46,81,.30);box-shadow:none}


/* Success and error panels swap in for the fields, same states forms.js
   sets on every other form on the site. */
.ev-form .form-status,.ev-form .form-error{
  grid-column:1/-1;display:none;
  border-radius:14px;padding:20px;line-height:1.55;
  font-size:var(--t-fine);outline:none;
}
.ev-form .form-status{
  flex-direction:column;align-items:flex-start;gap:10px;
  border:1px solid rgba(65,154,248,.40);
  background:linear-gradient(180deg,rgba(65,154,248,.20),rgba(65,154,248,.04));
  color:rgba(255,255,255,.80);
}
.ev-form .form-status .fs-icon{
  width:34px;height:34px;border-radius:999px;
  background:rgba(65,154,248,.22);color:#8CC6FC;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ev-form .form-status .fs-icon svg{width:16px;height:16px}
.ev-form .form-status strong{display:block;font-size:var(--t-body-lg);font-weight:700;margin-bottom:2px;color:#fff}
.ev-form .form-error{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.40);color:#FFDCDC}
.ev-form.is-success .field,
.ev-form.is-success .ev-consent,
.ev-form.is-success .ev-submit,
.ev-form.is-success .recaptcha-note{display:none}
.ev-form.is-success .form-status{display:flex}
.ev-form.is-error .form-error{display:block}

/* ── RESPONSIVE ────────────────────────────────────────────────────*/
@media(max-width:1024px){
  .ev-hero-inner{grid-template-columns:1fr;gap:44px}
  .ev-details-inner{grid-template-columns:1fr;gap:40px}
  .ev-news{grid-template-columns:1fr;gap:32px}
  .ev-form{grid-template-columns:1fr 1fr}
  .ev-consent{grid-column:1/-1}
  .ev-submit{grid-column:1/-1}
  .ev-split{grid-template-columns:1fr;gap:36px}
}

@media(max-width:680px){
  .ev-hero{padding:120px 20px 56px}
  .section{padding:48px 20px}
  .ev-details{padding:52px 20px 8px}
  .ev-products{grid-template-columns:1fr}
  .ev-hero-ctas .btn{width:100%;justify-content:center}
  /* First/last name side by side leaves ~140px per field on a 375px
     screen once the card padding is off. Stack them. */
  .ev-form{grid-template-columns:1fr}
  .ev-news{padding:28px 22px}
  .ev-consent,.ev-submit{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
  .ev-product,.ev-fact-link{transition:none}
}

/* ══ WORKX 2026 EVENT-DETAIL LAYOUT ════════════════════════════════
   The demo-first layout: three-fact strip, meet-the-team band with the
   demo ask, product row, and the newsletter stage that closes the page.
   Promoted here from the 05b exploration once that direction was picked.

   Rules below marked "supersedes" re-point base rules earlier in this
   file rather than editing them in place, so the base event-detail
   layer stays readable on its own. */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* .ev-form is navy-themed in event-page.css because the newsletter band
   is the only place it appears. A demo form on a light surface needs the
   light treatment back. */
.ev-form--light .field label{color:var(--muted)}
.ev-form--light .field.required label::after{color:#C0392B}
.ev-form--light .field input{background:#fff;border-color:var(--line);color:var(--ink)}
.ev-form--light .field input::placeholder{color:var(--faint)}
.ev-form--light .field input:focus{
  border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(65,154,248,.12);
}
.ev-form--light .ev-submit .btn-primary{
  background:var(--teal);color:#fff;border-color:transparent;
}
.ev-form--light .ev-submit .btn-primary:hover{background:#5EA9F9}

/* These sit after event-page.css and carry class+attribute specificity,
   so they beat its @media stacking rules unless they are themselves
   scoped. Without the query below, the 3-up band kept 85px fields at
   375px wide. */
.ev-demo-form[data-cols="1"]{grid-template-columns:1fr}
@media(min-width:681px){
  .ev-demo-form[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .ev-demo-form[data-cols="1"],
  .ev-demo-form[data-cols="3"]{grid-template-columns:1fr}
}
.ev-demo-form .ev-submit{grid-column:1/-1;margin-top:10px}
/* No [data-cols="3"] .ev-submit rule here on purpose. It outranked
   .ev-cta-form .ev-submit and pinned the centred CTA button into
   column 1. The band's own placement lives in its variant block. */

/* ── DEMO FORM: TWO-UP, EXPERIENCE-CENTER FIELD LANGUAGE ───────────
   /experience-center's form is the reference, minus the half of it that
   cannot travel: the day and slot chips run off
   /api/forms/ec/week-availability, which only knows the two physical
   Experience Centers, and a post-show demo is remote. What travels is
   the field language -- 2-up grid, uppercase labels, 10px boxes, one
   pill on the right -- which is what makes that form read as a booking
   card rather than a contact box. Three rows, so it stays condensed
   without dropping fields to get there. */
.ev-demo-form[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* .ev-form pins .field.full to `auto` for the 3-up newsletter band,
   where nothing spans. The message row is why this form is 2-up. */
.ev-demo-form[data-cols="2"] .field.full{grid-column:1/-1}
@media(max-width:680px){
  .ev-demo-form[data-cols="2"]{grid-template-columns:1fr}
}

/* select and textarea were never styled here: the 3-up band is all text
   inputs. Same box as .field input so the rows line up. */
.ev-form .field select,
.ev-form .field textarea{
  padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  font-size:var(--t-small);color:#fff;font-weight:500;width:100%;
  font-family:inherit;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.ev-form .field textarea{resize:vertical;min-height:78px;line-height:1.5}
.ev-form .field textarea::placeholder{color:rgba(255,255,255,.42)}
.ev-form .field select:focus,
.ev-form .field textarea:focus{
  outline:none;border-color:var(--teal);background:rgba(255,255,255,.14);
  box-shadow:0 0 0 4px rgba(65,154,248,.25);
}
/* White, not --bg: the panel behind them is already --bg, so a tinted
   field had no edge of its own against it. */
.ev-form--light .field select,
.ev-form--light .field textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.ev-form--light .field textarea::placeholder{color:var(--faint)}
.ev-form--light .field select:focus,
.ev-form--light .field textarea:focus{
  border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(65,154,248,.12);
}
/* The role select's first <option> is empty/disabled/hidden, so a
   resting select renders blank. :invalid only matches while that empty
   option is the one selected, which gives it the inputs' placeholder
   grey and hands the colour back to --ink on a real pick. */
.ev-form--light .field select:invalid{color:var(--faint)}

/* EC parks its pill at the end of a full-width submit row rather than
   stretching it, with the reCAPTCHA checkbox on the opposite end. The
   margin-right:auto lives on the widget, not on justify-content, so a
   visitor who never gets a widget (consent blocked, api.js unreachable)
   still gets the pill on the right instead of a lone left-aligned one.
   Stacked at one column there is nothing to align against, so
   .ev-submit .btn's full width stands. */
@media(min-width:681px){
  /* :not(.is-success) is load-bearing, the same trap the block above
     warns about. class+attribute ties .ev-form.is-success .ev-submit on
     specificity and wins on source order, so an unscoped display:flex
     here leaves the pill and the reCAPTCHA on screen next to the
     "Thanks" panel after a successful booking. */
  .ev-demo-form[data-cols="2"]:not(.is-success) .ev-submit{
    display:flex;align-items:center;justify-content:flex-start;
    gap:14px;flex-wrap:wrap;
  }
  /* order, because forms.js inserts the widget *before* the button, and
     the pill has to start on the panel's left edge under Full name. The
     margin then pushes the checkbox to the far end rather than leaving
     it against the pill. */
  .ev-demo-form[data-cols="2"] .ev-submit .btn{width:auto;order:-1}
  .ev-demo-form[data-cols="2"] .ev-submit div[data-recaptcha]{margin-left:auto}
}

/* Slim newsletter: one row, the low-friction fallback once the demo
   form is the page's real ask. */
.ev-slim-news{padding-top:8px;padding-bottom:8px}
.ev-slim{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 28px;
  padding:20px 26px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);
}
.ev-slim-copy{font-size:var(--t-small);color:var(--muted);margin:0;line-height:1.5}
.ev-slim-copy strong{color:var(--ink);font-weight:700}
.ev-slim-form{display:flex;gap:10px;flex:0 1 380px}
.ev-slim-form input{
  flex:1 1 auto;min-width:0;
  padding:11px 14px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);
  font-size:var(--t-small);color:var(--ink);font-family:inherit;
}
.ev-slim-form input::placeholder{color:var(--faint)}
.ev-slim-form input:focus{
  outline:none;border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 4px rgba(65,154,248,.12);
}
.ev-slim-form .btn{flex:0 0 auto}

/* ══ PRODUCT RANGE ════════════════════════════════════════════════
   A browse card, not a square: image on the card's own ground with
   the copy left-aligned beneath it. event-page.css builds
   .ev-product as a horizontal card (74px thumb on a --teal-soft
   plate, copy beside it), so this restacks it and drops the plate,
   which the reference does not have.

   No aspect-ratio, so height comes from content. All four are grid
   siblings and stretch to a common height anyway, which is what
   keeps the row even without pinning a ratio.

   Only two of the four were on the stand, which is why the heading
   is no longer "What we showed": the section is a browse module for
   the range, not a record of the booth. */
@media(min-width:981px){
  .ev-products{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:980px) and (min-width:681px){
  .ev-products{grid-template-columns:1fr 1fr}
}
@media(min-width:681px){
  .ev-product{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    text-align:left;gap:0;padding:22px 22px 24px;
  }
  /* Straight onto the card: no tinted backing plate, no radius. */
  .ev-product img{
    width:100%;height:172px;
    background:none;padding:0;border-radius:0;
    object-fit:contain;
    margin-bottom:20px;
  }
  /* Every card draws into the same box, but each render crops its
     subject differently, so apparent size varies. room-sign.png is
     the tight one (and the only non-square canvas, 1147x879), so it
     read noticeably larger than its neighbours. Scaled at paint time,
     which leaves the layout box alone. */
  .ev-product[href="/room-sign"] img{transform:scale(.88)}
  .ev-product-copy{text-align:left}
}
/* Below 681px event-page.css already drops .ev-products to one
   column, where a tall card four times over is a lot of scrolling.
   The original horizontal row stays the better mobile shape. */

/* ══ FOOTER CURTAIN OFF ═══════════════════════════════════════════
   site.css parks the footer at position:fixed, opacity:0,
   translateY(100px) and a per-page script slides it up as #page-wrap
   scrolls past. That put a moving seam under a band meant to run to
   the bottom, so the script is gone from this page and the footer
   sits in normal flow instead. #page-wrap's margin-bottom and
   min-height were set by that script, so they go with it.

   The include also moves: the footer is authored as <body>'s first
   child purely so the fixed curtain paints behind everything, and
   position:static would otherwise drop it at the top of the page. */
footer{position:static;transform:none;opacity:1;will-change:auto}

/* ══ NEWSLETTER: FULL-BLEED STAGE ═════════════════════════════════
   The page's closing block. The stock .final-cta is gone, so this
   owns the space below the range, and it runs to the bottom of the
   page rather than sitting on a strip of page ground.

   The reference layout's shape (dark ground, centred, eyebrow label,
   one statement, inline field, fine print) in Embrava's palette
   rather than its black and gold. */
.ev-news-slot{padding:64px 0 0}
/* No .reveal on this band on purpose. Its settled state is
   transform:translateY(0), which is still a transform, and that left
   the band painted 40px below where it laid out: as a strip of page
   ground under the old fixed footer, and as a 40px overlap once the
   footer moved into flow. The closing band does not need a scroll-in
   anyway. */

/* ── ORPHAN CONTROL ────────────────────────────────────────────────
   text-wrap:pretty tells the browser to pull a word down from the
   penultimate line rather than leave the last one alone, which is the
   only viewport-independent fix: a hard &nbsp; solves whatever width
   you happened to test and creates a new orphan at the next one.
   Headings keep balance instead, which evens every line rather than
   just the last and is the better job for short display text. Firefox
   does not implement pretty yet and falls back to normal wrapping, so
   this degrades to today's behaviour rather than breaking. */
#page-wrap p,
#page-wrap li,
#page-wrap figcaption,
#page-wrap .nv-consent span,
#page-wrap .ev-consent span{text-wrap:pretty}

.nv-stage{text-align:center;color:#fff}
.nv-title{
  font-weight:700;letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0;
  /* Breaking after "connected" rather than at the comma splits the
     sentence into halves that differ by 23% instead of 3x. That is
     what gives this band presence, not size: the cap sits at 48,
     under .ev-meet-title's 51 and well under the 56 of the page's
     actual h1, because a closing subscribe ask does not outrank the
     hero. 6vw is the ceiling the longer line allows before it
     outruns the viewport minus padding on the way up. */
  text-wrap:balance;font-size:clamp(28px,6vw,48px);
}
/* The forced break earns its keep down to ~480px, but the clamp floor
   pins the type at 28px below ~468 and the second line then overruns.
   Handing the whole string back to text-wrap:balance is better before
   that anyway: at 375 the break gives four lines of 115/215/314/94,
   balance gives three of 189/252/297. Fewer lines, half the spread. */
@media(max-width:680px){
  .nv-title br{display:none}
}
.nv-lede{
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);
  max-width:52ch;margin:14px auto 0;
}
.nv-inline{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  max-width:470px;margin:26px auto 0;
}
/* Lifted verbatim from the homepage newsletter panel's fields
   (index.html, `.nl-form .field input`) so the two asks read as the
   same component: 10px corners rather than the pill this started as,
   the same .08/.20 fill and border, and the same teal focus ring
   instead of a white one. */
.nv-inline .nv-field{
  min-width:0;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  font-size:13.5px;color:#fff;font-weight:500;font-family:inherit;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
/* Both grow. The two bases total 400 and the stage is 470, so they
   share a row here; under ~400 the row breaks and each takes a full
   line, rather than the name stranding at 150px beside nothing. */
.nv-inline #nvFirst{flex:1 1 150px}
.nv-inline #nvEmail{flex:1 1 240px}
.nv-inline .nv-field::placeholder{color:rgba(255,255,255,.42)}
.nv-inline .nv-field:focus{
  outline:none;border-color:var(--teal);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 4px rgba(65,154,248,.25);
}
/* Same white-on-navy pill as the homepage panel's Subscribe, down to
   the hover: .nl-form .btn-primary deepens to #ECEEF1 and darkens the
   border rather than throwing a shadow. Full-width like that one too,
   which also stops a 105px button stranding under a 470px field. */
.nv-inline .btn{
  flex:1 1 100%;justify-content:center;
  background:#fff;color:var(--ink);border:1px solid transparent;box-shadow:none;
}
.nv-inline .btn:hover{
  background:#ECEEF1;color:var(--ink);
  border-color:rgba(13,46,81,.30);box-shadow:none;
}
/* "Visit an Experience Center" was the only offer in the removed
   .final-cta that appears nowhere else on the page. It sat in the
   newsletter band, where the ground was dark and the offer had nothing
   to do with the ask above it. It now closes the products grid, whose
   four things are what a visit would show you, so the colours are the
   light-ground ones. */
.nv-alt{
  text-align:center;font-size:13px;margin:28px 0 0;
  color:var(--muted);
}
.nv-alt a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nv-alt a:hover{color:var(--ink);text-decoration-color:rgba(13,46,81,.45)}

/* Escapes .section's container. The margin trick, not 100vw alone,
   or a visible scrollbar makes the band wider than the page and
   forces horizontal scroll. */
.nv-bleed{
  margin-left:calc(50% - 50vw);
  width:100vw;
  padding:76px 24px 84px;
  /* Fades into the footer instead of butting against it. The footer
     gradient is a radial centred at its own bottom, so its top edge
     runs near-black: ~#000B16 at centre, blacker at the corners.
     Landing the band on #000A14 makes the seam disappear. */
  background:linear-gradient(180deg,#0A2543 0%,#061424 58%,#000A14 100%);
}
/* 720px broke the title across three lines. Its <br> already asks for
   two, so the stage is sized to let the first one hold. Nothing else in
   here widens with it: .nv-lede caps at 52ch and .nv-inline at 470px.
   Sized to the longer of the two lines at the 48px cap: 15.02 x 48 =
   721. Wider than that is dead space; narrower pins the type down. */
.nv-bleed-inner{max-width:760px;margin:0 auto}

/* The hero demo button is now an in-page jump to the form, so the
   target needs to clear the fixed header when it lands. */
#book-demo,#book-a-meeting{scroll-margin-top:100px}

@media(max-width:680px){
  .nv-bleed{padding:52px 20px 60px}
  .nv-inline{margin-top:22px}
}

/* ── HERO BACK TO WHITE ─────────────────────────────────────────
   event-page.css now paints .ev-hero navy, so every hero rule it
   inverted has to come back the other way here. Restores the original
   treatment exactly: white ground fading into --bg over the last
   third, navy type, and the nav dissolving into the hero rather than
   reading as a bar across it. */
.ev-hero{background:linear-gradient(180deg,#fff 0%,#fff 66%,var(--bg) 100%)}
.ev-h1{color:var(--ink)}
.ev-lede{color:var(--muted)}
.ev-hero .breadcrumb{color:var(--muted)}
.ev-hero .breadcrumb a{color:var(--muted)}
.ev-hero .breadcrumb a:hover{color:var(--ink)}
.ev-hero .breadcrumb b{color:var(--ink)}
.ev-status{
  background:var(--teal-soft);
  border-color:rgba(65,154,248,.22);
  color:var(--teal-ink);
}
.ev-status.is-past{
  background:rgba(13,46,81,.04);
  border-color:var(--line);
  color:var(--muted);
}
.ev-hero .btn-ghost{color:var(--ink);border-color:rgba(13,46,81,.15)}
.ev-hero .btn-ghost:hover{background:rgba(13,46,81,.04);border-color:rgba(13,46,81,.25)}
.ev-hero .ev-shot{
  border-color:var(--line);
  box-shadow:0 24px 60px -28px rgba(13,46,81,.38);
}
/* The 76px that clears the navy hero's hard edge is too airy under a
   hero that already fades into --bg. Back to something close to the
   original. */
.ev-details{padding-top:34px}

/* 05 — facts compress to a strip so the page can spend its height on
   the roster-plus-form block. */
.ev-strip{padding:60px 32px 8px;max-width:none}
.ev-strip-inner{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;
}
/* The three facts are on an even 3-up grid and do line up, but the
   one-line address ran the full column while its neighbours used a
   third of theirs, so the row read ragged. Two lines gives the three
   value blocks comparable width. .ev-fact-value is already a flex
   row, so the text needs a span of its own to break inside. */
.ev-strip-inner .ev-fact-value span{display:block}
/* Each fact centred in its column as a block, but its lines still
   left-justified against each other. justify-self does both at once:
   it shrinks the grid item to fit-content (overriding the default
   stretch) and centres it in its track, leaving the text alignment
   inside untouched, so .ev-fact-link keeps hanging off its 30px
   indent under the venue name. */
.ev-strip-inner .ev-fact{justify-self:center}

/* Label and value are doing two different jobs, so they get two
   different treatments rather than competing at similar sizes. The
   label is scaffolding you read once: 11px uppercase tracked muted,
   the same eyebrow the rest of the site uses for kickers and for the
   Any Sign hero's quick-facts row. The value is what people came to
   scan, so it carries all the size and weight. 11 -> 18 is enough
   contrast to skim the three values as one line-up without any of
   them reading as a heading, which is what kept the old 20px ink
   labels pulling against the hero CTA. */
.ev-strip-inner .ev-fact-label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:8px;
}
.ev-strip-inner .ev-fact-value{
  font-size:18px;font-weight:600;letter-spacing:-.01em;
}
@media(max-width:880px){.ev-strip-inner{grid-template-columns:1fr 1fr}}
.ev-strip-inner .ev-fact-link{margin-top:4px}
/* Stacked, the fit-content boxes from justify-self:center are each a
   different width, so their left-justified text started at a different
   x and the three facts read ragged down the page. Once there is only
   one column there is no neighbouring fact to line up with, so stretch
   each block full width and centre its contents on the section's axis
   instead. .ev-fact-value is a flex row, hence justify-content; the
   30px hang on .ev-fact-link is what indents it under the venue name
   in the multi-column layouts and would throw it off centre here. */
@media(max-width:520px){
  .ev-strip-inner{grid-template-columns:1fr}
  .ev-strip-inner .ev-fact{justify-self:stretch;text-align:center}
  .ev-strip-inner .ev-fact-value{justify-content:center}
  .ev-strip-inner .ev-fact-link{margin-left:0}
  .ev-strip-inner .ev-fact-note{margin-left:0}
}

/* ══ MEET BLOCK: WHITE CARD ON A GLOW ═════════════════════════════
   Was a navy card. Now light, so it reads as a different kind of
   thing from the dark newsletter band closing the page.

   .ev-meet-section was plain .section (max-width 1320 with 32px of
   padding, so 1256 of content) while .ev-strip and
   .ev-products-section both go max-width:none with a 1320 inner.
   That 32px each side is the inset. Same pattern here, so all three
   line up. */
.ev-meet-section{max-width:none}
.ev-meet{
  max-width:1320px;margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 16px 40px rgba(65,154,248,.14),0 30px 60px rgba(13,46,81,.05);
  padding:44px 48px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center;
  position:relative;
}
/* Stop hiding the glow behind an opaque section background. */
.ev-meet-section{background:transparent}
/* The homepage's .io-icon halo, widened to an ellipse for a card
   this shape. The pseudo is generated before .ev-meet, so source
   order paints it behind without a negative z-index.

   Sized deliberately larger than the card. The card is opaque, so
   every part of the gradient inside its footprint is invisible --
   at the card's own size you only saw the faint outer tail and the
   glow read as nothing. 122% x 172% pushes the bright middle of the
   gradient clear of all four edges, which is what the homepage gets
   for free by putting a 440px halo around a 120px icon.

   Alphas are the homepage stops at 1.05x, i.e. still a shade under
   the .42 core it uses. Spread, not saturation, is doing the work:
   at this frame size homepage-strength alphas stop reading as light
   and start reading as an applied gradient. */
.ev-meet-section::before{
  content:"";
  position:absolute;top:50%;left:50%;
  width:min(1630px,122%);height:172%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse farthest-side,
    rgba(65,154,248,.315) 0%,
    rgba(101,213,236,.21) 18%,
    rgba(65,154,248,.126) 36%,
    rgba(65,154,248,.063) 54%,
    rgba(65,154,248,.021) 72%,
    rgba(65,154,248,0) 90%);
  pointer-events:none;
}
.ev-meet-title{
  font-size:var(--t-h2);font-weight:700;letter-spacing:-.022em;line-height:1.1;
  color:var(--ink);text-wrap:balance;
}
.ev-meet-lede{
  font-size:var(--t-small);line-height:1.6;color:var(--muted);
  margin-top:12px;
  /* No max-width: the lede fills its grid column. 44ch stopped it about
     four fifths of the way across, which read as an accidental ragged
     edge next to the balanced h2 rather than a measure. */
}
/* Roster back off the navy: event-page.css already colours these for
   a light ground, so these only undo the inversion. */
.ev-meet .ev-team{margin-top:26px;display:grid;gap:16px}
.ev-meet .ev-person-name{color:var(--ink)}
.ev-meet .ev-person-role{color:var(--muted)}
.ev-meet .ev-person img,.ev-meet .ev-person-photo{border-color:var(--line)}
/* The form panel inset on a white card, and the form itself carries
   .ev-form--light so its fields and teal submit come back. */
.ev-meet-form-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;padding:26px 28px;
}
@media(max-width:1024px){
  .ev-meet{grid-template-columns:1fr;gap:34px;padding:32px 26px}
}

.ev-products-section{padding-top:56px;max-width:none}
.ev-products-inner{max-width:1320px;margin:0 auto}
.ev-products-inner .ev-fact-label{margin-bottom:16px}
/* ── NEWSLETTER STAGE, WIRED ────────────────────────────────────────
   The stage came over from the exploration as a mock: an email box and a
   dead button. Wiring it to forms.js means it also carries a honeypot, a
   consent checkbox and the two state panels, none of which can inherit
   the pill treatment or the flex row's sizing. */

/* .hp is scoped per form class site-wide, and this form is not .ev-form. */
.nv-inline .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.nv-inline .nv-consent{
  flex:1 1 100%;
  display:flex;align-items:flex-start;gap:9px;
  margin-top:4px;padding:0 4px;
  font-size:var(--t-fine);line-height:1.5;
  color:rgba(255,255,255,.72);text-align:left;
}
.nv-inline .nv-consent input{
  flex:0 0 auto;width:15px;height:15px;margin-top:2px;
  accent-color:var(--teal);cursor:pointer;
}
.nv-inline .nv-consent span{flex:1 1 auto}
/* The consent text carries the privacy-policy link on all three
   newsletter forms now, and .72 white on this ground is too close to
   the body copy to read as a link. */
.nv-inline .nv-consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.nv-inline .nv-consent a:hover{text-decoration-color:rgba(255,255,255,.5)}

/* Same default-hidden contract as .ev-form, which this form sits outside. */
.nv-inline .form-status,.nv-inline .form-error{
  flex:1 1 100%;display:none;
  margin-top:14px;border-radius:14px;padding:18px 20px;
  font-size:var(--t-fine);line-height:1.55;text-align:left;outline:none;
}
.nv-inline .form-status{
  flex-direction:column;align-items:flex-start;gap:8px;
  border:1px solid rgba(65,154,248,.40);
  background:rgba(65,154,248,.14);color:rgba(255,255,255,.82);
}
.nv-inline .form-status strong{display:block;font-size:var(--t-body-lg);font-weight:700;color:#fff}
.nv-inline .form-error{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.40);color:#FFDCDC}
.nv-inline.is-success .nv-field,
.nv-inline.is-success button,
.nv-inline.is-success .nv-consent{display:none}
.nv-inline.is-success .form-status{display:flex}
.nv-inline.is-error .form-error{display:block}
.nv-inline.is-loading button{opacity:.65;pointer-events:none}

/* The recaptcha widget forms.js injects needs a home in the flex row.
   forms.js builds a bare <div data-recaptcha> and grecaptcha.render()
   fills it without adding a class of its own, so that attribute is the
   only hook — the same one .nl-form uses on the homepage. Without the
   full-width basis site.css's 238x61 sizing makes it a third flex item
   between the field and Subscribe, and the button wraps. */
/* No order override any more. forms.js inserts the widget immediately
   before the submit button (forms.js:257), and the consent label now
   sits there too, so DOM order already reads field, consent, widget,
   Subscribe. The old order:1 existed only to hop the widget past a
   consent line that trailed the button, and would now push it below
   Subscribe instead. */
.nv-inline div[data-recaptcha]{flex:1 1 100%;display:flex;justify-content:center;margin-top:12px}

/* site.css sets .recaptcha-note to var(--faint), which is near-invisible
   on this band. Same treatment .ev-news gives it, plus the full-width
   basis every non-pill child in this flex row needs. */
.nv-inline .recaptcha-note{
  flex:1 1 100%;margin-top:14px;text-align:center;
  color:rgba(255,255,255,.45);
}
.nv-inline .recaptcha-note a{color:rgba(255,255,255,.70)}
.nv-inline.is-success .recaptcha-note{display:none}
.nv-inline.is-success div[data-recaptcha]{display:none}

/* ── LIGHT FORM VARIANT: STATE PANELS ──────────────────────────────
   .ev-form--light restyled the fields and the submit, but the state
   panels and the reCAPTCHA note never came with it: the exploration's
   form was a mock with no states to show. On the light meet card the
   inherited navy treatment is white-on-pale, so re-point all three. */
.ev-form--light .form-status{
  border-color:rgba(65,154,248,.34);
  background:rgba(65,154,248,.08);
  color:var(--muted);
}
.ev-form--light .form-status strong{color:var(--ink)}
.ev-form--light .form-status .fs-icon{background:var(--teal);color:#fff}
.ev-form--light .form-error{
  background:rgba(192,57,43,.07);
  border-color:rgba(192,57,43,.34);
  color:#8E2A20;
}
.ev-form--light .recaptcha-note{color:var(--faint)}
.ev-form--light .recaptcha-note a{color:var(--teal-ink)}

/* ══ SQUARE HERO ART ══════════════════════════════════════════════
   .ev-shot is 4/3 because WorkX supplied a landscape booth photo.
   PropTech supplied a 1:1 sponsor tile whose top and bottom carry the
   venue, the dates and the organiser's mark, so a 4/3 crop would take
   exactly the parts worth keeping. The modifier changes the ratio and
   nothing else, so the next show that arrives with square artwork
   does not have to solve this again. */
.ev-shot--square{aspect-ratio:1/1}
/* Stacked, .ev-hero-media takes the whole column, and a 1:1 card at
   960px is most of a tablet screen before you reach the first fact.
   The 4/3 original never hit this: its height was three quarters of
   its width, so the same column gave it 240px less. Cap the square
   and leave it left, in line with the copy above it. */
@media(max-width:1024px){
  .ev-hero-media:has(.ev-shot--square){max-width:460px}
}

/* ══ NARROW BRIEF COLUMN ══════════════════════════════════════════
   The what-you-can-see block: one column at 60%, the rest of the row
   left open. It was a two-column .ev-split with the schedule beside
   the bullets, which spent the page's full width on a list and a pair
   of dates. Text wants a measure, not a container.

   60% of .section's 1256px of content is about 754px, which sets the
   bullets near 80 characters and gives the h2 two lines. */
/* .section centres a 1320px box and then pads 32px inside it, while
   .ev-strip, .ev-meet-section and .ev-products-section all go
   max-width:none with a 1320px inner of their own. That 32px is why
   this block's heading sat indented from every other section's. Same
   arrangement here, so all four line up. */
.ev-brief-section{max-width:none}
.ev-brief-inner{max-width:1320px;margin:0 auto}
.ev-brief{max-width:60%}
/* Below ~900px the 60% stops reading as whitespace and starts reading
   as a cramped column, so it takes the full width back. */
@media(max-width:900px){.ev-brief{max-width:none}}
.ev-brief .ev-section-head{margin-bottom:28px}

/* ── BULLETS ───────────────────────────────────────────────────────
   Plain discs in --ink, the same treatment articles.css now gives
   .bullet-list. Kept separate because this list is flush on the page
   rather than sitting in that rule's white card. */
.ev-bullets{
  list-style:disc;
  margin:0;padding:0 0 0 21px;
  display:grid;gap:13px;
}
.ev-bullets li{
  font-size:var(--t-body-lg);line-height:1.55;color:var(--ink);
  padding-left:4px;
}
/* Up slightly on the default disc, which against 16px body copy sits
   closer to a full stop than a bullet. */
.ev-bullets li::marker{color:var(--ink);font-size:1.2em}

/* The brief's closing line for the section: it qualifies the bullets
   above it, so it hangs off them rather than joining the lede in the
   section head. */
.ev-split-note{
  font-size:var(--t-small);line-height:1.6;color:var(--muted);
  margin:22px 0 0;
}