/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   ClioconCtaSection — Figma CIs8dXkXRGQGuyagIgryfN, node 7399:12406.
   Spec: ClioconCtaSection.figma.md. Inline `7305:*` / `7348:*` ids are the first
   design's (lggjmuj2yPib1xxVgnbLOc) — this section did not change.
   ============================================================ */

/* The closing panel: `--secondary` → `--background` top to bottom (sampled
   249,245,239 → 245,240,231, as on Data Report and About), drawn inside a
   16px WHITE BORDER — the page inset as Figma draws it; it takes part in the
   radius and cannot collapse. `position: relative` anchors the corner badge. */
.cliocon-cta {
  position:       relative;
  display:        flex;
  flex-direction: column;
  background:     linear-gradient(180deg, var(--secondary) 0%, var(--background) 100%);
  border:         16px solid var(--background-white);
  border-radius:  48px;                     /* Figma rounded-6xl; no 48px radius token */
  box-sizing:     border-box;
  font-family:    var(--font-family-default);
  color:          var(--foreground);
}


/* ---- CTA (7305:2284) -------------------------------------- */

/* Figma: the row starts 64 below the panel's OUTER edge and ends 64 above the
   footer frame — 48 + the 16px border, then 64. */
.cliocon-cta__cta {
  padding: 3rem 0 4rem;                     /* 48px / 64px */
}

/* The hero's escape-the-container grid, inside the panel: the panel's 16px
   border is HANDED BACK to the wrapper (cap and padding both lose it, as in
   DataReportQuoteSection), so the copy lands on 244 and the visual on the
   wide track's 1448 at 1512 — exactly where the hero puts them — and on
   `.container`'s 80px edge at 1184. */
.cliocon-cta__wrap {
  width:      100%;
  max-width:  calc(1384px + 64px);          /* 1480 - 16px of border per side */
  padding:    0 2rem;                       /* 48px - 16px of border */
  margin:     0 auto;
  box-sizing: border-box;
}

/* The CANONICAL template, exactly as the hero and Air/Hybrid/Vr heroes
   (docs/escape-the-container-grid.md): copy 1fr on column 3, the visual on
   4 / 7 with an 8px margin. At 1512 that is still Figma's 244 / 764 → 1448;
   below 1184 the two columns shrink TOGETHER (50/50), where Figma's fixed
   472 / 48 / rest starved the visual and left the copy towering over it
   (owner, 2026-10-20). */
.cliocon-cta__grid {
  display:               grid;
  grid-template-columns: clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px)
                         32px
                         1fr
                         1fr
                         32px
                         clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px);
  column-gap:            0;
  align-items:           start;
}


/* ---- Copy (7305:2286) ------------------------------------- */

/* Figma's pt-80 puts the heading 80 below the visual's top edge. */
.cliocon-cta__copy {
  grid-column:    3;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4rem;                     /* 64px — intro → offer card */
  min-width:      0;
  padding-top:    5rem;                     /* 80px */
  /* Text → visual is Figma's 80 (its 472 copy frame's pr-32 + the 48 gap):
     72 here + the visual's 8. At 1512 that leaves Figma's 440 measure; on
     smaller desktops the same 80 keeps the copy off the visual. ONE rule
     owns the gap (the 8 is the visual's position, shared with the hero). */
  padding-right:  4.5rem;                   /* 72px */
}

/* 7305:2392 — the badge sits in the panel's top-left corner (Figma: 64 / 71
   from the panel's outer edge = 48 / 55 inside the border), not beside the
   heading. White: the stock `.hp-badge` fill, as Figma draws it on cream. */
.cliocon-cta__badge {
  position: absolute;
  top:      55px;
  left:     3rem;                           /* 48px */
}

/* 7305:2287 — heading → body + button */
.cliocon-cta__intro {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-8);         /* 32px */
  width:          100%;
}

/* Badge + heading. From 992px up the badge is absolutely placed, so this
   holds only the heading; stacked, it is the convention's 24px badge gap. */
.cliocon-cta__heading {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-6);         /* 24px */
}

/* Rowan Light 36 at the display's 1.25 leading (45px) — Figma's CTA heading,
   NOT `.hp-heading--serif`'s 36/40 section size. */
.cliocon-cta__title {
  font-size: 2.25rem;                       /* 36px */
  text-wrap: balance;                       /* not Figma's 424 max-width (docs/conventions.md) */
}

/* 7305:2293 — body → button */
.cliocon-cta__action {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-9);         /* 36px */
}

.cliocon-cta__body {
  margin:      0;
  text-wrap:   balance;                     /* not Figma's 440 max-width */
  font-size:   var(--font-size-xl);         /* 20px */
  line-height: var(--line-height-xl);       /* 28px */
}

.cliocon-cta__buttons {
  display: flex;
}


/* ---- Visual (7399:12439) ---------------------------------- */

/* Figma's box is 700 x 652; on the 244 copy column the track is 684, so the
   box keeps Figma's HEIGHT (684 x 652 at 1512) and the row's vertical rhythm
   with it. Radius 24 measured on the render. A size container: the layers
   above the collage are sized in `cqh` — 1cqh = 1% of the box height, i.e.
   of the art's 652px, which the cover-fitted collage also scales by. The
   wash shows until the lazy collage arrives. */
.cliocon-cta__visual {
  grid-column:    4 / 7;
  margin-left:    0.5rem;                   /* 8px — as the hero's visual */
  position:       relative;
  width:          calc(100% - 0.5rem);
  aspect-ratio:   684 / 652;
  border-radius:  var(--radius-lg);         /* 24px */
  overflow:       hidden;
  container-type: size;
  background:     color-mix(in srgb, var(--color-brand-blue-100) 85%, var(--card));
}

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

/* Only when `visualSrc` is emptied: the collage's own light-blue wash
   (sampled 180,218,232 → 194,226,236 across the frame). */
.cliocon-cta__visual-placeholder {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-brand-blue-200) 70%, var(--card)),
    color-mix(in srgb, var(--color-brand-blue-100) 85%, var(--card))
  );
}

/* Layer 2 — the avatar video (Figma 7399:12541): a 313/652 circle centred on
   the art (its centre is the frame's, to the half pixel), 0.5px hairline,
   a 192/652 cyan glow and a 6/652 white ring. VrHeroSection's numbers — its
   art is 652 tall too. */
.cliocon-cta__avatar {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         48.01cqh;
  aspect-ratio:  1;
  border-radius: var(--radius-full);
  border:        0.5px solid var(--opacity-neutral-20);
  box-shadow:    0 0 29.45cqh 0 var(--color-brand-blue-300);
  overflow:      hidden;
  box-sizing:    border-box;
}

.cliocon-cta__avatar-video {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Painted after the video in DOM order, so it renders on top. */
.cliocon-cta__avatar-ring {
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  box-shadow:     inset 0 0 0 0.92cqh var(--card);
  pointer-events: none;
}

/* Layer 3 — the calendar (Figma 7399:12440). Its export is 382 x 384: the
   200px card plus the glow Figma bakes in, starting at the art's x=318
   (32 left of centre) and y=0, where the frame clips the glow. */
.cliocon-cta__calendar {
  position: absolute;
  top:      0;
  left:     calc(50% - 4.908cqh);           /* (318 - 350) / 652 */
  width:    58.59cqh;                       /* 382 / 652 */
  height:   auto;
  display:  block;
}


/* ---- Footer inside the panel (7305:2351) ------------------ */

/* `SiteFooter` paints its own ground; inside the panel the panel IS the
   ground. Scoped here, so the shared footer is unchanged everywhere else.

   Block padding 108 / 32 rather than the footer's own 96 / 48: Figma's
   "logo, (c)" block (7305:2376) carries ~12px of blank above the wordmark,
   so its row of glyphs sits 12px lower than the shared footer's, and its
   copyright line ends 34 above the panel's cream edge, not 48. Measured on
   the render: logo, legal links and social icons all land within 1px. The
   footer's own row layout is untouched — and so are its tablet/mobile
   paddings: the override is desktop-only (no smaller frame to measure). */
.cliocon-cta .site-footer {
  background: none;
}

@media (min-width: 992px) {
  .cliocon-cta .site-footer {
    padding-block: 6.75rem 2rem;            /* 108px / 32px */
  }
}


/* ---- Responsive -------------------------------------------
   Mobile is MEASURED against Figma 7305:2858 — see ../ClioconPage.mobile.figma.md.
   Tablet has no frame. */

@media (max-width: 1199px) {
  .cliocon-cta__cta {
    padding-bottom: 3rem;
  }
}

@media (max-width: 991px) {
  .cliocon-cta {
    border-radius: 32px;
  }

  /* 48 above the badge (inside the border) — the report panel's own top at
     this width, between desktop's offsets and mobile's 32 (owner,
     2026-10-20: 80 read as too much). */
  .cliocon-cta__cta {
    padding: 3rem 0;                        /* 48 / 48 */
  }

  /* Stacked: the wrapper is the content edge — `.container`'s 60px, less the
     16px border. */
  .cliocon-cta__wrap {
    padding: 0 44px;
  }

  /* Tablet sits between desktop and mobile, keeping mobile's proportions
     (owner, 2026-10-20): button → offer card 40 (desktop 64, mobile 32) and
     offer card → visual 56 (mobile 48), so the card groups with the CTA
     above it rather than floating nearer the visual. */
  .cliocon-cta__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap:               3.5rem;          /* 56px — no token */
  }

  .cliocon-cta__copy {
    gap:           2.5rem;                  /* 40px — no token */
    grid-column:   1;
    padding-top:   0;
    padding-right: 0;
  }

  /* No corner to sit in once stacked: the badge leads the heading group. */
  .cliocon-cta__badge {
    position: static;
  }

  /* Stacked, the visual takes the column's full width, as the hero's does
     (owner, 2026-10-20 — it was capped at 684, leaving a strip of empty
     panel beside it on tablet). It stays on the TEXT inset, as the mobile
     frame draws it, rather than the hero's 16px bleed. */
  .cliocon-cta__visual {
    grid-column: 1;
    margin-left: 0;
    width:       100%;
  }
}

@media (max-width: 767px) {
  /* The 16px white gutter stays on every side at 402, rounded 32 (the ≤991
     radius) — NOT Data Report's 12 / 24. */

  /* 32 above the badge (inside the border); 48 from the visual to the
     footer's top edge. */
  .cliocon-cta__cta {
    padding: 2rem 0 3rem;
  }

  /* Text 32px in from the viewport: 16 border + 16. */
  .cliocon-cta__wrap {
    padding: 0 var(--spacing-4);
  }

  /* Heading → body, body → button and CTA → offer card are 32; the badge
     follows the design system (below). Offer card → visual 48. */
  .cliocon-cta__copy,
  .cliocon-cta__action {
    gap: var(--spacing-8);
  }

  /* Badge → heading: the design system's mobile 16 (shared header), not the
     402 frame's 32 (owner, 2026-10-20). */
  .cliocon-cta__heading {
    gap: var(--spacing-4);                  /* 16px */
  }

  .cliocon-cta__grid {
    row-gap: 3rem;                          /* 48px — offer card → visual */
  }

  /* Rowan 30/36 here, not the desktop 36/45. */
  .cliocon-cta__title {
    font-size:   1.875rem;                  /* 30px */
    line-height: 2.25rem;                   /* 36px */
  }

  .cliocon-cta__body {
    font-size:   var(--font-size-lg);       /* 18px */
    line-height: var(--line-height-lg);     /* 28px */
  }

  /* The visual sits on the TEXT inset here (Figma x=32, 338 x 315), unlike
     the hero's 16px bleed, at Figma's own 700:652 box. */
  .cliocon-cta__visual {
    aspect-ratio: 700 / 652;
  }

  /* The footer inside the panel: content 28px inside the border (logo x=44,
     as Figma), its glyphs 29 below its top edge, and 17 of cream under the
     legal links — the footer's own 48 / 32 mobile padding is a last-row-of-
     the-page value. */
  .cliocon-cta .site-footer {
    padding-block: 1.75rem 1rem;            /* 28px / 16px */
  }

  .cliocon-cta .site-footer__inner {
    padding-inline: 28px;
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}

/* ============================================================
   SiteFooter — Site footer with 6-col sitemap and bottom bar
   Design tokens from src/styles/tokens.css.

   Layout (Figma 832:12962):
     96px top padding, 48px bottom padding, 64px side padding
     80px gap between sitemap and bottom bar
     Sitemap: 6 equal columns, gap 32px
     Bottom bar: logo+copyright left | legal links center | social right
   ============================================================ */

.site-footer {
  /* Bottom 764px of a 1464px Figma gradient (continues from CtaSection).
     Picks up at 47.8% = rgba(222,215,204,0.5) → full end colour. */
  background:     linear-gradient(
                    180deg,
                    rgba(222, 215, 204, 0.5) 0%,
                    rgba(214, 207, 194, 0.5) 100%
                  ),
                  var(--background);
  font-family:    var(--font-family-default);
  width:          100%;
  box-sizing:     border-box;
  padding:        6rem 0 3rem;      /* 96px top, 48px bottom — sides via container-wide */
}

.site-footer__inner {
  display:        flex;
  flex-direction: column;
  gap:            5rem;             /* 80px */
}


/* ============================================================
   Sitemap — 6 equal columns
   ============================================================ */

.site-footer__sitemap {
  display:         flex;
  justify-content: space-between;
  gap:             2rem;    /* 32px */
  width:           100%;
  list-style:      none;
  margin:          0;
  padding:         0;
}

.site-footer__col {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;    /* 24px */
}

.site-footer__col-heading {
  margin:      0;
  font-size:   1rem;         /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color:       var(--foreground);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Toggle button — inherits heading styles, no button chrome */
.site-footer__col-toggle {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      default;
  font-family: var(--font-family-default);
  text-align:  left;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  width:       100%;
}

/* Chevron — hidden on desktop */
.site-footer__col-chevron {
  display: none;
}

.site-footer__col-links {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        1.5rem;   /* 24px */
}

.site-footer__link {
  font-size:       0.875rem;   /* 14px */
  font-weight:     var(--font-weight-regular);
  line-height:     1.5;
  color:           var(--foreground);
  text-decoration: none;
  display:         block;
  transition:      opacity 150ms ease;
}

.site-footer__link:hover {
  opacity: 0.7;
}

.site-footer__link--bold {
  font-weight: var(--font-weight-bold);
}


/* ---- "Now hiring" standalone tablet/mobile link ----------- */
.site-footer__now-hiring {
  display: none;   /* hidden on desktop */
}

.site-footer__now-hiring-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         0.625rem 0.75rem 0.625rem 1rem;
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-bold);
  line-height:     var(--line-height-base);
  color:           var(--info, #59b7d9);
  text-decoration: none;
  border-radius:   12px;
  transition:      opacity 150ms ease;
}

.site-footer__now-hiring-link:hover {
  opacity: 0.8;
}

.site-footer__now-hiring-link svg {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
}

.site-footer__now-hiring-link svg path {
  stroke: currentColor;
}


/* ============================================================
   Bottom bar
   ============================================================ */

.site-footer__bar {
  display:     flex;
  align-items: flex-end;
  flex-wrap:   wrap;
  gap:         0.9375rem 0;   /* 15px row gap */
  justify-content: space-between;
  padding:     1px 0;
}

/* Brand: logo + copyright */
.site-footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            1rem;    /* 16px */
  justify-content: flex-end;
}


.site-footer__copyright {
  margin:      0;
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--muted-foreground);
  white-space: pre;
}

/* Legal links */
.site-footer__legal {
  display:     flex;
  gap:         2rem;    /* 32px */
  align-items: flex-start;
  flex-wrap:   wrap;
}

.site-footer__legal-link {
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-bold);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
  text-decoration: none;
  white-space:     nowrap;
  transition:      opacity 150ms ease;
}

.site-footer__legal-link:hover {
  opacity: 0.7;
}

/* Social icons */
.site-footer__social {
  display:     flex;
  align-items: center;
  gap:         2rem;    /* 32px */
  height:      32px;
}

.site-footer__social-link {
  display:    flex;
  align-items: center;
  color:       var(--foreground);
  width:       24px;
  height:      24px;
  flex-shrink: 0;
  transition:  opacity 150ms ease;
}

.site-footer__social-link:hover {
  opacity: 0.7;
}

.site-footer__social-link svg {
  width:  24px;
  height: 24px;
}


/* ============================================================
   Tablet (≤991px) — accordion nav
   ============================================================ */

@media (max-width: 991px) {
  .site-footer {
    padding: 5rem 0 2.5rem;   /* 80px top */
  }

  .site-footer__inner {
    gap: 5rem;   /* 80px */
  }

  .site-footer__sitemap {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;   /* 10px */
  }

  .site-footer__col {
    gap:           0;
    border-radius: 12px;
    overflow:      hidden;
  }

  .site-footer__col-toggle {
    cursor:  pointer;
    padding: 0.625rem 0.75rem 0.625rem 1rem;   /* 10px 12px 10px 16px */
  }

  .site-footer__col-chevron {
    display:     block;
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    color:       var(--muted-foreground);
    transition:  transform 200ms ease;
  }

  .site-footer__now-hiring-link .site-footer__col-chevron {
    color: inherit;
  }

  .site-footer__col--open {
    background: var(--accent);
  }

  .site-footer__col--open .site-footer__col-chevron {
    transform: rotate(180deg);
  }

  /* Smooth open/close via grid row animation */
  .site-footer__col-body {
    display:            grid;
    grid-template-rows: 0fr;
    transition:         grid-template-rows 220ms ease;
  }

  .site-footer__col--open .site-footer__col-body {
    grid-template-rows: 1fr;
  }

  .site-footer__col-links-wrap {
    overflow: hidden;   /* clips without padding — allows full collapse to 0 */
  }

  .site-footer__col-links {
    padding: 0.5rem 1rem 1rem;   /* 8px 16px 16px */
  }

  .site-footer__col-links {
    gap: 1.25rem;
  }

  .site-footer__link {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  /* "Now hiring" standalone link — tablet only */
  .site-footer__now-hiring {
    display: flex;
  }

  .site-footer__link--tablet-hidden {
    display: none;
  }

  .site-footer__bar {
    gap:            2rem;
    flex-direction: column;
    align-items:    flex-start;
  }

  .site-footer__legal {
    gap:   1rem;
    order: 1;
  }
}


/* ============================================================
   Mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .site-footer {
    padding: 3rem 0 2rem;
  }

  .site-footer__bar {
    gap: 2.25rem;   /* 36px */
  }
}

/* ============================================================
   ClioconOfferCard — Figma CIs8dXkXRGQGuyagIgryfN: banner 7399:11956
   (mobile 7399:13573), card 7399:12432 (mobile 7399:14052).
   ============================================================ */

.cliocon-offer {
  font-family: var(--font-family-default);
  box-sizing:  border-box;
}

.cliocon-offer__title,
.cliocon-offer__code-row {
  margin: 0;
}

/* The offer text breaks AFTER the lead, as a unit, only when the line is
   too narrow for both — never mid-phrase unless it must. */
.cliocon-offer__text {
  display: inline-block;
}

/* “Use code” · code box · validity. Wraps rather than overflowing once the
   row is narrower than its content. */
.cliocon-offer__code-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--spacing-2);           /* 8px */
}

/* The dashed promo box — a click-to-copy button styled as Figma's box, no
   glyph (see the TSX). Figma's 1.5px stroke sits INSIDE its py-3 px-10 box
   (149 x 26); a CSS border sits outside the padding, so the padding gives
   the stroke back. */
.cliocon-offer__code {
  display:        inline-flex;
  align-items:    center;
  margin:         0;
  padding:        1.5px 8.5px;             /* Figma py-3 px-10, less the 1.5 stroke */
  border:         1.5px dashed currentColor;
  border-radius:  6px;                     /* Figma 6; no --radius token */
  background:     transparent;
  color:          inherit;
  font-family:    inherit;
  font-size:      var(--font-size-sm);     /* 14px */
  line-height:    var(--line-height-sm);   /* 20px */
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.1em;                   /* Figma 1.4px at 14px */
  cursor:         pointer;                 /* no hover effect (owner, 2026-10-20) */
  position:       relative;                /* anchors the “Copied” bubble */
}

/* “Copied” — a small dark pill that rises from the click point and fades
   (see the TSX). Inverse-popover colours so it reads on the blue banner
   and the white card alike; it ignores the box's tracked bold type. */
.cliocon-offer__copied {
  position:       absolute;
  z-index:        1;
  padding:        2px var(--spacing-2);    /* 2px / 8px */
  border-radius:  var(--radius-full);
  background:     var(--inv-popover);
  color:          var(--inv-popover-foreground);
  font-size:      var(--font-size-xs);     /* 12px */
  line-height:    var(--line-height-xs);   /* 16px */
  font-weight:    var(--font-weight-medium);
  letter-spacing: normal;
  white-space:    nowrap;
  pointer-events: none;
  animation:      cliocon-offer-copied 1s ease-out forwards;
}

/* Starts just above the pointer, drifts up 24px, fades over the last 40%. */
@keyframes cliocon-offer-copied {
  0%   { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); }
  12%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, calc(-100% - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cliocon-offer__copied {
    animation-name: cliocon-offer-copied-still;
  }

  /* Fades in and out in place — no drift. */
  @keyframes cliocon-offer-copied-still {
    0%       { opacity: 0; transform: translate(-50%, calc(-100% - 8px)); }
    12%, 60% { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }
    100%     { opacity: 0; transform: translate(-50%, calc(-100% - 8px)); }
  }
}

.cliocon-offer__code:focus-visible {
  outline:        2px solid currentColor;
  outline-offset: 2px;
}

/* Screen-reader-only live region for “Copied”. */
.cliocon-offer__status {
  position:    absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip-path:   inset(50%);
  white-space: nowrap;
}


/* ---- Card (7399:12432) — white, in the CTA panel ---------- */

.cliocon-offer[data-variant='card'] {
  display:        flex;
  flex-direction: column;
  gap:            10px;                    /* Figma gap-10; no spacing token is 10px */
  width:          100%;
  max-width:      456px;                   /* Figma frame width */
  padding:        var(--spacing-4) var(--spacing-5);   /* 16px / 20px */
  border-radius:  12px;                    /* Figma 12; no --radius token is 12px */
  background:     var(--card);
  color:          var(--foreground);
}

[data-variant='card'] .cliocon-offer__title {
  font-size:   var(--font-size-sm);        /* 14px */
  line-height: var(--line-height-sm);      /* 20px */
}

[data-variant='card'] .cliocon-offer__lead {
  font-weight: var(--font-weight-bold);
}

/* “Use code” and the validity line are both 14/20 muted (the validity was
   12/16 in the first design). */
[data-variant='card'] .cliocon-offer__muted,
[data-variant='card'] .cliocon-offer__validity {
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}

[data-variant='card'] .cliocon-offer__code {
  color: var(--primary);
}


/* ---- Banner (7399:11956) — content only; the hero draws the panel ---- */

/* One baseline-aligned row in blue-700: the offer line, 32, the code row. */
.cliocon-offer[data-variant='banner'] {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         var(--spacing-2) var(--spacing-8);   /* 8px rows / 32px */
  color:       var(--color-brand-blue-700);         /* Figma cyan-700 #186581 */
}

[data-variant='banner'] .cliocon-offer__title {
  font-size:   var(--font-size-xl);        /* 20px */
  line-height: var(--line-height-xl);      /* 28px */
}

/* Rowan Semibold 24/28. Figma follows it with two spaces; one space of the
   20px sans plus this margin is the same distance. */
[data-variant='banner'] .cliocon-offer__lead {
  margin-right: 0.25em;
  font-family:  var(--font-family-serif);
  font-size:    var(--font-size-2xl);      /* 24px */
  font-weight:  600;                       /* Rowan Semibold — no token */
}

[data-variant='banner'] .cliocon-offer__muted,
[data-variant='banner'] .cliocon-offer__validity {
  font-size:   var(--font-size-xs);        /* 12px */
  line-height: var(--line-height-xs);      /* 16px */
  opacity:     0.6;                        /* Figma opacity-60 on the text */
}


/* ---- Mobile (Figma 7399:13493) ---------------------------- */

@media (max-width: 767px) {
  /* Card (7399:14052): 16px padding all round (desktop 16 / 20), the
     validity line wraps under the code, and both of the card's gaps tighten
     to 8 (card 338 x 114). */
  .cliocon-offer[data-variant='card'] {
    gap:     var(--spacing-2);             /* 8px */
    padding: var(--spacing-4);             /* 16px */
  }

  /* Banner (7399:13573): the offer line, then the code row, 8 apart. */
  .cliocon-offer[data-variant='banner'] {
    flex-direction: column;
    align-items:    flex-start;
  }

  [data-variant='banner'] .cliocon-offer__title {
    font-size:   var(--font-size-lg);      /* 18px */
    line-height: var(--line-height-lg);    /* 28px */
  }

  /* Rowan 20/28 over the 18/28 offer. The lead takes its own line only when
     the two don't fit (owner, 2026-10-20 — it was forced onto its own line,
     as the 402 frame happens to draw it). */
  [data-variant='banner'] .cliocon-offer__lead {
    font-size:    var(--font-size-xl);     /* 20px */
    line-height:  var(--line-height-xl);   /* 28px */
  }

  /* The code steps down to 12px (tracking 1.2px), 8px side padding (6.5
     plus the 1.5 stroke). */
  [data-variant='banner'] .cliocon-offer__code {
    padding:   1.5px 6.5px;
    font-size: var(--font-size-xs);        /* 12px; line stays 20 */
  }
}