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


/* ============================================================
   ClioconFeaturesSection — Figma CIs8dXkXRGQGuyagIgryfN, node 7399:12023
   (mobile 7399:13641). Spec: ClioconFeaturesSection.figma.md.
   ============================================================ */

.cliocon-features {
  /* White ground — NOT `var(--background)`; see `--background-white` (src/styles/tokens.css). */
  background: var(--background-white);
}

/* The section padding alone owns the space below the cards, and it is set to
   Figma's VISUAL distance: last card → the report panel's cream edge is 180
   at 1512 (Figma draws it as the section's 128 + the grid frame's pb-36 +
   the panel's 16px white border). So the bottom is 164 here, not the
   stepped 128 — one rule, not 128 on the section plus 36 on the grid
   (owner, 2026-10-20). Two classes, to beat `.hp-section--stepped`. */
.hp-section.cliocon-features {
  padding-bottom: 10.25rem;                 /* 164px */
}

/* 992–1199: the stepped 96, plus the same 36. */
@media (max-width: 1199px) {
  .hp-section.cliocon-features {
    padding-bottom: 8.25rem;                /* 132px */
  }
}

/* ≤991: the stepped rhythm as-is — the mobile frame has no extra space
   under the cards. */
@media (max-width: 991px) {
  .hp-section.cliocon-features {
    padding-bottom: 5rem;                   /* 80px, the stepped value */
  }
}

@media (max-width: 767px) {
  .hp-section.cliocon-features {
    padding-bottom: 4rem;                   /* 64px, the stepped value */
  }
}

/* The section-header convention: THIS stack owns header → content (64). */
.cliocon-features__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;                     /* 64px, flat at every width */
}


/* ---- Grid (7399:12032) ------------------------------------ */

/* 2 x 520 + 16 = 1056 against the 1024 column: the grid overhangs
   `.container` by 16px a side. Unlike LawPracticeFeaturesSection this holds at
   EVERY width: x=228 at 1512 (Figma), then 44px from the viewport at tablet
   (`.container-wide`'s inset) and 16px on mobile (the redesign's media
   inset) — never off-screen.

   No padding of its own: Figma's grid frame carries pb-36; that distance is
   folded into the section's bottom padding above, so ONE rule owns it
   (docs/conventions.md → "Whitespace has one owner"). */
.cliocon-features__grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--spacing-4);  /* 16px both axes */
  margin:                0 -1rem;
  padding:               0;
  list-style:            none;
}


/* ---- Card (7399:12033, "Feature (medium)") ---------------- */

/* Blue-100 with everything in blue-700 — title, glyph and description (the
   first design's cards were cream with a 60% grey description). */
.cliocon-features__card {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);         /* 16px */
  min-width:      0;
  padding:        var(--spacing-7);         /* 28px */
  border-radius:  12px;                     /* Figma rounded-xl; no 12px radius token */
  background:     var(--color-brand-blue-100);   /* Figma cyan-100 #D1EFFA */
  color:          var(--color-brand-blue-700);   /* Figma cyan-700 #186581 */
}

.cliocon-features__title {
  display:     flex;
  align-items: center;
  gap:         10px;                        /* Figma gap-10; no 10px token */
  margin:      0;
  font-size:   var(--font-size-base);       /* 16px */
  line-height: var(--line-height-base);     /* 24px */
  font-weight: var(--font-weight-bold);
}

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

.cliocon-features__description {
  margin:      0;
  font-size:   var(--font-size-base);       /* 16px */
  line-height: var(--line-height-base);     /* 24px */
}


/* ---- Tall cards (7399:12117, 7399:12169) ------------------ */

/* 24 between title, description and illustration (16 in the short cards).
   The card crops the illustration: the chips run off both sides, the
   dashboard off the bottom. */
.cliocon-features__card[data-visual] {
  position: relative;
  gap:      var(--spacing-6);               /* 24px */
  overflow: hidden;
}

/* The illustration's box: the card's full width (padding cancelled) down to
   its bottom edge. Each illustration sets its own box's height, in step
   with its own scale — 171 for both at 1512, which puts both tall cards on
   Figma's 319 (28 + 24 + 24 + 48 + 24 = 148 above it), and less on a
   narrower card, where the chips and the dashboard shrink (it used to be a
   fixed 171, which left ~60px empty under the smaller chips at ≤1000 and
   showed all of the scaled-down dashboard at ~768). It grows if a
   neighbour in the row is taller, so the card never shows a gap under it. */
.cliocon-features__visual {
  position:   relative;
  flex:       1 0 auto;
  min-height: 0;
  margin:     0 calc(-1 * var(--spacing-7)) calc(-1 * var(--spacing-7));
  box-sizing: border-box;
}

/* Figma's fade into blue-200 over the bottom of each illustration
   (7399:12168 / 7399:12212): transparent for the first 36.5%, then blue-200.
   Placed per card, from the illustration's top or bottom. */
.cliocon-features__visual::after {
  content:        '';
  position:       absolute;
  inset-inline:   0;
  top:            var(--cliocon-fade-top);
  bottom:         var(--cliocon-fade-bottom, auto);
  height:         var(--cliocon-fade-height);
  background:     linear-gradient(to bottom, transparent 36.538%, var(--color-brand-blue-200));
  pointer-events: none;
}

/* A size container: the chips are sized and placed from the card's width
   (the box spans it, padding cancelled). The box follows the cloud. */
[data-visual='practiceAreas'] .cliocon-features__visual {
  --cliocon-fade-top:    2px;               /* card y150 */
  --cliocon-fade-height: calc(100% - 2px);  /* → the card's bottom */
  container-type:        inline-size;
}

/* The dashboard sits on the text column. The box is a size container so the
   dashboard can scale with the column's width (`cqw`): `--u` is one Figma
   px of it (see the Dashboard block). Declared here, on the container, so
   the fade can scale with the dashboard too — custom properties pass on
   unresolved, so `cqw` resolves in the dashboard and in the fade, against
   this box. The fade is 169 and starts 85 above the card's bottom (card
   y234 at 1512) — anchored to the bottom, not the mockup's top, so it
   still dissolves the cut edge when a taller neighbour stretches the row. */
[data-visual='dashboard'] .cliocon-features__visual {
  --dash-width:          calc(100cqw * 467 / 464);
  --u:                   min(calc(var(--dash-width) / 467), 1px);
  --cliocon-fade-top:    auto;
  --cliocon-fade-bottom: calc(-84 * var(--u));
  --cliocon-fade-height: calc(169 * var(--u));
  container-type:        inline-size;
  padding:               0 var(--spacing-7);
}

/* Visually hidden, still announced (the dashboard's caption). */
.cliocon-features__sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip-path:   inset(50%);
  white-space: nowrap;
}


/* ---- Practice-area chips (7399:12131) --------------------- */

/* Two rows of three chips that run off both edges of the card, at 90%.
   Figma's chips are a component scaled x1.286 (36px pill → 46.29); every
   length is in em of the label, so the whole cloud scales with one
   font-size. 34.556em (622 at 18) holds three chips a row.

   It responds to the CARD, not the viewport (it used to be a fixed block
   pinned 33 / 40px off the left edge, which left wide one-column cards
   empty on the right and dropped narrow two-column cards' third chip):
   - SIZE: Figma's 18px at a 520 card, in proportion to the card's width,
     never below the mobile frame's 14.762 and never above 18 (bigger
     labels outweighed the card's own 16px copy). So a one-column card
     wider than ~590 (viewports ≈ 620–767) shows the cloud whole, centred.
   - PLACE: centred on its longest row (row 2 — “Immigration · Estate
     planning · Employment law”, 32.78em), rows left-aligned as Figma draws
     them, so both rows bleed off both edges about evenly. At 1512 that is
     x−35 (Figma −33).
   - SPACE BELOW: Figma's 42 under the cloud, in em, so the box (and the
     card) shrinks with the chips: 171 at 18px, 145 at 14.762. */
.cliocon-features__chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.6667em;                     /* 12px */
  width:      34.556em;                     /* 622px */
  margin:     var(--spacing-6) 0 2.3564em calc((100% - 32.78em) / 2);   /* card y172; 42.4 below at 18 */
  padding:    0;
  list-style: none;
  font-size:  clamp(14.762px, 100cqw * 18 / 520, 18px);   /* Figma's labels — no token */
  opacity:    0.9;
}

.cliocon-features__chip {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.7144em;                /* 12.86px */
  height:          2.5718em;                /* 46.29px */
  min-width:       6.858em;                 /* 123.45px */
  padding:         0 1em 0 1.4288em;        /* 18 / 25.72px */
  border:          0.0714em solid var(--opacity-neutral-40);   /* 1.29px */
  border-radius:   var(--radius-full);
  background:      var(--color-brand-blue-100);
  box-sizing:      border-box;
  line-height:     1.4288em;                /* 25.72px */
  color:           var(--opacity-neutral-50);   /* Figma rgba(40,40,37,.5) */
  white-space:     nowrap;
}

.cliocon-features__chip svg {
  flex-shrink: 0;
  width:       0.857em;                     /* 15.43px */
  height:      0.857em;
}


/* ---- Dashboard (7564:895, "UI mockup / Intake dashboard") - */

/* Figma's mockup is 467 wide — 3px past the 464 text column (its right edge
   sits 25 in from the card's, not 28) — and the mobile frame's is 324 on a
   322 column: the same 467 / 464. It is drawn at that one size, so it
   scales like an image: `--u` is one Figma px at the current width
   (FlowDiagram's technique), and every length below is a multiple of it —
   1 at 1512, 0.80 at 1000, 0.69 on a 402 phone. Text stays text. It never
   grows past Figma's size: a wider column (the one-column cards at
   ~520–767) keeps 1px and just widens the two panels.

   `--u` and `--dash-width` are declared on its box (above).

   Figma draws it 18 below the description, so it rises 6 into the card's
   24 gap, and the card shows its top 177 (to y319) — the rest runs off the
   bottom. The negative bottom margin makes its box exactly that tall at
   every scale (171 at 1512), while it still paints whole, so its glow is
   the full mockup's. (On mobile the box has its own fixed height, so the
   margin doesn't count there.) Only its top corners are rounded: the card
   always crops the bottom. So it is never shorter than its box — where a
   taller neighbour stretches the row, the panels stretch down past the
   card's edge instead. */
.cliocon-features__dashboard {
  /* #EDE8DF — Figma amber-100, off the palette (as
     LegalHubPracticeAreasSection / FlowDiagram). */
  --dash-panel: rgb(237 232 223);

  display:               grid;
  grid-template-columns: minmax(0, 175fr) minmax(0, 256fr);
  grid-template-rows:    auto 1fr;
  gap:                   calc(12 * var(--u));
  align-items:           start;
  box-sizing:            border-box;
  width:                 var(--dash-width);
  min-height:            calc(100% + 12px);
  margin:                -6px 0 calc((177 - 301.5) * var(--u));
  padding:               calc(12 * var(--u));
  border-radius:         calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  background:            var(--accent);       /* #FAF6F0 */
  box-shadow:            0 calc(60 * var(--u)) calc(192 * var(--u)) var(--info);
  color:                 var(--muted-foreground);   /* #85857A — all its text */
  overflow:              clip;
}

/* The caller types' shades, darkest first: --info at 100 / 80 / 60 / 40%
   over the mockup's cream, as Figma lays them (so they are opaque). */
.cliocon-features__dashboard [data-type='0'] { --dash-shade: var(--info); }
.cliocon-features__dashboard [data-type='1'] { --dash-shade: color-mix(in srgb, var(--info) 80%, var(--accent)); }
.cliocon-features__dashboard [data-type='2'] { --dash-shade: color-mix(in srgb, var(--info) 60%, var(--accent)); }
.cliocon-features__dashboard [data-type='3'] { --dash-shade: color-mix(in srgb, var(--info) 40%, var(--accent)); }

/* Header row, across both panels: title ↔ the date pill. */
.cliocon-features__dash-head {
  grid-column:  1 / -1;
  display:      flex;
  align-items:  center;
  gap:          calc(10 * var(--u));
  padding-left: calc(12 * var(--u));
}

.cliocon-features__dash-title {
  flex:        1;
  min-width:   0;
  margin:      0;
  font-size:   calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  font-weight: var(--font-weight-bold);
}

.cliocon-features__dash-filter {
  display:       flex;
  align-items:   center;
  gap:           calc(8 * var(--u));
  box-sizing:    border-box;
  height:        calc(40 * var(--u));
  margin:        0;
  padding:       0 calc(16 * var(--u));
  border:        calc(1 * var(--u)) solid var(--input);   /* Figma #D3CFC5 */
  border-radius: var(--radius-full);
  font-size:     calc(12 * var(--u));
  line-height:   calc(13 * var(--u));
  white-space:   nowrap;
}

.cliocon-features__dash-filter svg {
  flex-shrink: 0;
  width:       calc(22 * var(--u));
  height:      calc(22 * var(--u));
}

/* The two panels (175 / 256) run to the mockup's bottom, past the card's
   edge. Text boxes are Figma's: 14 / 15, 12 / 13, 10 / 11, 9 / 10, 8 / 9. */
.cliocon-features__dash-panel {
  align-self:    stretch;
  box-sizing:    border-box;
  min-width:     0;
  min-height:    calc(225.5 * var(--u));
  padding:       calc(11 * var(--u)) calc(14 * var(--u)) 0;
  border-radius: calc(12 * var(--u));
  background:    var(--dash-panel);
  overflow:      clip;
}

.cliocon-features__dash-panel-title {
  margin:      0;
  font-size:   calc(14 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.cliocon-features__dash-goals,
.cliocon-features__dash-ticks,
.cliocon-features__dash-bars,
.cliocon-features__dash-legend {
  margin:     0;
  padding:    0;
  list-style: none;
}

/* Goals 45 apart: label, 9, bar, 8. */
.cliocon-features__dash-goals {
  display:        flex;
  flex-direction: column;
  gap:            calc(8 * var(--u));
  margin-top:     calc(17 * var(--u));
  font-size:      calc(12 * var(--u));
  line-height:    calc(13 * var(--u));
}

.cliocon-features__dash-goals li {
  display:        flex;
  flex-direction: column;
  gap:            calc(9 * var(--u));
  white-space:    nowrap;
}

/* A bar is its count against the largest goal's (`--goal`, 0–1), which
   fills the panel. Its gradient spans the panel, not the bar — --info at
   60% → 100% over the cream — so a short bar is paler, as drawn. */
.cliocon-features__dash-goal-bar {
  display:       block;
  width:         calc(var(--goal) * 100%);
  height:        calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  background:    linear-gradient(to right, color-mix(in srgb, var(--info) 60%, var(--accent)), var(--info))
                 0 0 / calc(100% / var(--goal)) 100% no-repeat;
}

.cliocon-features__dash-range {
  margin:      calc(6 * var(--u)) 0 0;
  font-size:   calc(10 * var(--u));
  line-height: calc(11 * var(--u));
  white-space: nowrap;
}

/* The plot: ticks every 20 (2 a call), gridlines from x19 to the panel's
   padding, bars from x29 to 14 short of the gridlines' end, day labels 7
   under the base. */
.cliocon-features__dash-chart {
  position:   relative;
  height:     calc(122 * var(--u));
  margin-top: calc(3 * var(--u));
}

.cliocon-features__dash-ticks {
  position:       absolute;
  inset:          0;
  display:        flex;
  flex-direction: column;
  gap:            calc(11 * var(--u));
  font-size:      calc(8 * var(--u));
  line-height:    calc(9 * var(--u));
}

/* A tick: its label right-aligned in a 12.5 column, its gridline (0.6,
   Figma #D6D0C4) level with the label's middle. */
.cliocon-features__dash-ticks li {
  display:               grid;
  grid-template-columns: calc(12.5 * var(--u)) 1fr;
  column-gap:            calc(6.5 * var(--u));
  text-align:            right;
}

.cliocon-features__dash-ticks li::after {
  content:    '';
  margin-top: calc(5 * var(--u));
  border-top: calc(0.6 * var(--u)) solid var(--border);
}

.cliocon-features__dash-bars {
  position:        absolute;
  inset:           0 calc(14 * var(--u)) 0 calc(29 * var(--u));
  display:         flex;
  justify-content: space-between;
}

.cliocon-features__dash-bars li {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          calc(25 * var(--u));
}

/* A day's bar on the 100-tall axis, its segments stacked from the base up
   in the legend's order. */
.cliocon-features__dash-stack {
  display:        flex;
  flex-direction: column-reverse;
  align-self:     stretch;
  height:         calc(100 * var(--u));
  margin-top:     calc(5 * var(--u));
}

.cliocon-features__dash-stack span {
  flex-shrink: 0;
  background:  var(--dash-shade);
}

.cliocon-features__dash-day {
  margin-top:  calc(7 * var(--u));
  font-size:   calc(9 * var(--u));
  line-height: calc(10 * var(--u));
}

/* Two columns 114 apart, rows 17 apart; 7 swatches, 5 before the label. */
.cliocon-features__dash-legend {
  display:               grid;
  grid-template-columns: calc(114 * var(--u)) auto;
  row-gap:               calc(7 * var(--u));
  margin-top:            calc(13 * var(--u));
  font-size:             calc(9 * var(--u));
  line-height:           calc(10 * var(--u));
}

.cliocon-features__dash-legend li {
  display:     flex;
  align-items: center;
  gap:         calc(5 * var(--u));
  white-space: nowrap;
}

.cliocon-features__dash-legend li::before {
  content:       '';
  flex-shrink:   0;
  width:         calc(7 * var(--u));
  height:        calc(7 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background:    var(--dash-shade);
}


/* ---- Responsive -------------------------------------------
   Mobile is MEASURED against Figma 7399:13641 — see ../ClioconPage.mobile.figma.md.
   Tablet has no frame. Padding 64 / 64 comes from `.hp-section--stepped`'s ≤767 step. */

@media (max-width: 767px) {
  /* Header: the design system's mobile gaps (16 / 24 — the 402 frame's
     8 / 32 read as a bug); header → cards is Figma's 32, not the
     convention's flat 64 (owner, 2026-10-20). */
  .cliocon-features__content {
    gap: var(--spacing-8);                  /* 32px */
  }

  /* One column of 370px cards on the 16px media inset (the -1rem overhang
     still applies), 12 apart. */
  .cliocon-features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--spacing-3);   /* 12px */
  }

  .cliocon-features__card {
    padding: var(--spacing-6);              /* 24px */
  }

  /* Tall cards (7399:13735 / 7399:13787): the usual 16 gaps, so the
     illustration starts 128 down; 270 and 320 tall. */
  .cliocon-features__card[data-visual] {
    gap: var(--spacing-4);                  /* 16px */
  }

  .cliocon-features__visual {
    margin: 0 calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6));
  }

  /* Card 270 at 402: the box follows the cloud (16 above, 40 below at
     14.762), so a wider card's bigger chips keep the same crop. The fade
     runs from card y118 to the bottom. */
  [data-visual='practiceAreas'] .cliocon-features__visual {
    --cliocon-fade-top:    -10px;           /* card y118 */
    --cliocon-fade-height: calc(100% + 10px);
  }

  [data-visual='dashboard'] .cliocon-features__visual {
    --cliocon-fade-top:    110px;           /* card y238 */
    --cliocon-fade-bottom: auto;
    --cliocon-fade-height: 100px;
    height:                192px;           /* card 320 */
    /* Description → dashboard 32 (the card's 16 gap + 16), the same as the
       practice-area card's description → chips — the 402 frame's 52 read
       too big (owner, 2026-10-20). Kept for the 2026-10-23 dashboard, whose
       mobile frame (7564:962) draws it 26 below. */
    padding:               var(--spacing-4) var(--spacing-6) 0;
  }

  /* The same cloud, 16 into the illustration — 32 below the description,
     card y144. Its size and centring are the base rule's (14.762 on a 402
     phone, Figma's x1.054). */
  .cliocon-features__chips {
    margin-top:    var(--spacing-4);        /* 16px */
    margin-bottom: 2.7097em;                /* 40px at 14.762 */
  }

  /* 324 on a 402 phone — the base rule's 467 / 464 of the 322 column, as
     the mobile frame draws it (x0.69). Flush with the box: the box's
     padding sets the 32 above it. */
  .cliocon-features__dashboard {
    margin-top: 0;
  }
}