/* ============================================================
   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;
  }
}


/* ============================================================
   ClioconHeroSection — Figma CIs8dXkXRGQGuyagIgryfN, node 7399:11881 + the
   offer banner 7399:11955. Spec: ClioconHeroSection.figma.md.

   Escape-the-container grid, CANONICAL variant
   (docs/escape-the-container-grid.md): the visual's right edge is
   `.container-wide`'s content edge (x=1448 at 1512), so the wrapper is the
   wide container's own 1480/48px — unlike DataReportHeroSection, whose
   visual bleeds to 16px from the viewport and needs a 1512/16px wrapper.
   ============================================================ */


/* ---- Outer section ---------------------------------------- */

.cliocon-hero {
  position:    relative;
  width:       100%;
  /* White ground — NOT `var(--background)`; the redesign inverts the site's
     scheme. See `--background-white` (src/styles/tokens.css). */
  background:  var(--background-white);
  /* Top 144 = the nav FRAME's bottom → the visual's top in Figma: the "®"
     frame's y16 + "Hero content"'s y128. Measured from the frame, not the
     bar: the live Navbar (74px — 20px padding around a 34px button) stands
     in for the WHOLE nav frame (7399:11839, 104 — a 72px bar with 16px above
     and below), its own padding included, so the 16px under Figma's bar is
     already accounted for. (The first build measured from the bar and added
     it: 160.) Same 144 as the Data Report hero, under the same Navbar; the
     owner's ceiling for a hero top is 9.5rem (2026-10-20). The copy starts
     16px lower still (its own pt-16). No bottom padding: the section ends
     with the banner (see __banner). */
  padding:     9rem 0 0;       /* 144px */
  font-family: var(--font-family-default);
  box-sizing:  border-box;
}


/* ---- Content wrapper = `.container-wide`'s dimensions ----- */

.cliocon-hero__wrap {
  width:      100%;
  max-width:  1480px;   /* 1384 content + 48 x 2 */
  padding:    0 48px;
  margin:     0 auto;
  box-sizing: border-box;
}


/* ---- Grid ------------------------------------------------- */

/* The CANONICAL escape-the-container grid, exactly as AirHeroSection /
   HybridHeroSection / VrHeroSection (docs/escape-the-container-grid.md):
   gutter · spacer · copy 1fr · visual 1fr · spacer · gutter. The copy is
   column 3 (on `.container`'s left edge at every desktop width); the visual
   spans 4 / 7 with an 8px left margin, ending on `.container-wide`'s content
   edge. At 1512 that is Figma to the pixel: copy 244, visual 764 → 1448 (684).
   Kept identical to the siblings on purpose — same edges and same column
   split at every width — so a shared primitive can replace all four later. */
.cliocon-hero__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;   /* Figma top-aligns copy and visual */
}


/* ---- Copy column (Figma 7399:11886) ----------------------- */

/* Figma's pt-16 is the copy's offset below the visual's top edge. Text →
   visual is Figma's 80 (the 472 copy frame's pr-32 + the 48 gap): 72 of
   padding here + the visual's 8, so at 1512 the text has Figma's 440
   measure. The headline and body wrap balanced inside.
   Heading block → body + CTA is 32 (7399:11887). The column is shorter than
   the visual now that the offer card has moved to the banner — Figma leaves
   it top-aligned with the space below. */
.cliocon-hero__copy {
  grid-column:    3;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-8);    /* 32px */
  min-width:      0;
  padding-top:    var(--spacing-4);    /* 16px */
  padding-right:  4.5rem;              /* 72px — see above */
  /* Figma's pb-32 (7399:11886). No effect at 1512, where the visual is the
     taller track; around 992–1080 the copy runs taller and this keeps the
     banner 32 + 16 clear of the button. */
  padding-bottom: var(--spacing-8);    /* 32px */
}

/* 7399:11889 — eyebrow → headline */
.cliocon-hero__heading {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);    /* 24px */
}

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


/* ---- Eyebrow (7399:11890) --------------------------------- */

/* No pill: Figma's `noice-bg` rect is hidden. */
.cliocon-hero__eyebrow {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);       /* 8px */
  /* Figma's row is 38px (1 + 8 + 20 + 8 + 1), not the 20px line box. */
  min-height:  38px;
  margin:      0;
  font-size:   var(--font-size-sm);    /* 14px */
  line-height: var(--line-height-sm);  /* 20px */
  font-weight: var(--font-weight-medium);
  /* Figma rgba(40,40,37,0.6); there is no --opacity-neutral-60. */
  color:       color-mix(in srgb, var(--foreground) 60%, transparent);
}

.cliocon-hero__eyebrow svg {
  flex-shrink: 0;
}


/* ---- Headline (7399:11898) -------------------------------- */

/* Face/size/weight from `.serif-display`; the wash from `.marker-highlight`. Balanced
   wrapping, not a max-width: it evens the lines the way Figma's text box
   does and adapts to the column instead of pinning one width. */
.cliocon-hero__title {
  text-wrap: balance;
}


/* ---- Body (7399:11902) ------------------------------------ */

.cliocon-hero__body {
  margin:      0;
  text-wrap:   balance;                /* not a max-width — see the title */
  font-size:   var(--font-size-xl);    /* 20px */
  line-height: var(--line-height-xl);  /* 28px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}

.cliocon-hero__actions {
  display: flex;
}


/* ---- Visual (Figma 7399:11916) ---------------------------- */

/* A square that fills columns 4–6 less the 8px half-gap (the siblings'
   card margin): 684 at 1512, shrinking with them. */
.cliocon-hero__visual {
  grid-column:   4 / 7;
  margin-left:   0.5rem;               /* 8px — as the siblings' card */
  position:      relative;
  width:         calc(100% - 0.5rem);  /* the area less that margin — 100% would overrun by 8 */
  max-width:     684px;
  aspect-ratio:  1;
  border-radius: var(--radius-lg);     /* 24px — measured on the render */
  overflow:      hidden;
  /* The diagram's own panel colour, shown until the SVG arrives. */
  background:    var(--color-brand-blue-100);
}

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

/* Only when `visualSrc` is emptied — the panel the diagram sits on, measured
   off the Figma render: brand-blue-100 (#D1EFFA) with 4px
   dots on a 36px pitch, the first one 24px in from the left, 16px from the
   top. The dots are `--info` at 20% over the wash (sampled 187,229,244). */
.cliocon-hero__visual-placeholder {
  position:            absolute;
  inset:               0;
  background-color:    var(--color-brand-blue-100);
  background-image:    radial-gradient(circle, var(--opacity-info-20) 2px, transparent 2.5px);
  background-size:     36px 36px;
  background-position: 8px 0;          /* dot centres at 26 / 18 → x 24, y 16 edges */
}


/* ---- Offer banner (Figma 7399:11955) --------------------- */

/* The language's inset panel in blue-200: Figma draws the 16px gutter as a
   16px WHITE BORDER (like the report and CTA panels), radius 48 → a 32px
   fill corner. 16 below the hero grid, so visual → blue is 32. The offer
   sits on the page's text column — 244 at 1512, where Figma's frame starts
   it at 260 (pl-244 inside the border), the same 16px slip the CTA's copy
   has in the other direction. */
.cliocon-hero__banner {
  margin-top:    var(--spacing-4);      /* 16px */
  padding-block: 2.5rem;                /* 40px */
  border:        16px solid var(--background-white);
  border-radius: 48px;                  /* Figma rounded-6xl; no 48px radius token */
  background:    var(--color-brand-blue-200);   /* Figma cyan-200 #A8DDF0 */
  box-sizing:    border-box;
}

/* The banner sits right under the hero copy, so its text keeps that column at
   EVERY width: `.container`'s geometry measured from the viewport, not from
   inside the 16px border — 32 narrower, 16 less padding a side. (The report
   panel lets its border narrow the container below 1216; here that 16px step
   would show against the button above.) */
.cliocon-hero__banner .container {
  max-width:      calc(1024px + 128px);   /* 1152 = 1184 − 2 × 16 */
  padding-inline: 4rem;                   /* 64 = 80 − 16 */
}


/* ---- Responsive ------------------------------------------- */

/* Mobile is MEASURED against Figma 7399:13493 (402 wide) — see
   ../ClioconPage.mobile.figma.md. Tablet has no frame; it stacks like mobile
   with `.container`'s 60px inset. */
@media (max-width: 991px) {
  /* Top 96: the mobile frame's value (the minimal nav is 72 there AND live,
     so no nav correction applies). Tablet takes the same 96 so the top
     padding still only ever steps DOWN as the screen narrows (144 → 96 → 96)
     — the owner's rule from the Data Report hero. */
  .cliocon-hero {
    padding-top: 6rem;      /* 96px */
  }

  .cliocon-hero__banner {
    border-radius: 32px;    /* as the report panel at this width */
  }

  .cliocon-hero__banner .container {
    padding-inline: 44px;   /* 60 − 16: on the stacked copy's 60 */
  }

  /* Stacked, the wrapper IS the content edge: carry `.container`'s padding. */
  .cliocon-hero__wrap {
    padding: 0 60px;
  }

  .cliocon-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap:               2rem;   /* 32px — CTA → visual */
  }

  .cliocon-hero__copy {
    grid-column: 1;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;      /* the grid's row-gap spaces it from the visual */
  }

  /* Stacked, the visual bleeds 16px past the text a side — to
     `.container-wide`'s inset (44 at tablet), as the siblings' card does. */
  .cliocon-hero__visual {
    grid-column:   1;
    width:         calc(100% + 32px);
    max-width:     none;
    margin-inline: -16px;
  }
}

@media (max-width: 767px) {
  /* Banner (7399:13572): still the 16px white gutter (16 below the visual),
     a 16px fill corner and 16px of padding, so the offer sits 32px from the
     viewport — the text inset, like the report panel's content. */
  .cliocon-hero__banner {
    padding-block: var(--spacing-4);   /* 16px */
  }

  .cliocon-hero__banner .container {
    padding-inline: var(--spacing-4);  /* 16px */
  }

  /* Text sits 32px in, the visual 16px (the redesign's two mobile insets):
     Figma's copy at x=32 w=338, its 370² visual at x=16. */
  .cliocon-hero__wrap {
    padding: 0 2rem;
  }

  .cliocon-hero__body {
    font-size:   var(--font-size-lg);    /* 18px — the language's mobile body */
    line-height: var(--line-height-lg);  /* 28px */
  }

  /* Body → button 32 here (7399:13518; desktop 36). Headline: 36/45 from
     `.serif-display`'s ≤767 step, full column width with natural wrap — it
     breaks at the commas, as Figma does. */
  .cliocon-hero__cta {
    gap: var(--spacing-8);               /* 32px */
  }
}

/* ============================================================
   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 */
}

/* ============================================================
   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 */
  }
}