/* ──────────────────────────────────────────────────────────────────────
   /pricing — what Soba charges, on top of the system in landing.css.

   Only the bands that exist nowhere else are here: the four tier cards,
   the month calculator, and the three explanatory bands under it. Every
   token, primitive and piece of chrome comes from landing.css, which is
   loaded first and is the design system for the whole marketing site
   regardless of what its filename says.
   ────────────────────────────────────────────────────────────────────── */

/* ── 1 · the claim ──────────────────────────────────────────────────── */
.ph .h1 { max-width: 15ch; }
.ph .lede { margin-top: 22px; max-width: 660px; font-size: 18px; }

/* ── 2 · the four tiers ─────────────────────────────────────────────── */
.tb { padding-bottom: 112px; }
.tb .prule { left: 120px; right: 120px; }
.tiers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 72px; align-items: stretch;
}

/* A card and nothing more: one hairline, no shadow, no lit "most
   popular" tier. Soba has not invoiced anybody yet, so there is no
   popular tier to point at and inventing one would be a claim. */
.tier {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 22px 24px; background: #fff;
}
.tier h2 { font-size: 20px; letter-spacing: -.025em; }
/* the volume the tier is for, which is the crossover to the next one and
   not a judgement about who you are */
.tier h2 span {
  display: block; margin-top: 7px;
  font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ink3);
  letter-spacing: -.01em; min-height: 38px;
}
.tier-p { display: flex; align-items: baseline; gap: 5px; margin-top: 18px; }
.tier-p b { font-size: 40px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.tier-p i { font-style: normal; font-size: 14.5px; color: var(--ink3); }
.tier-inc {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2);
  font-size: 14.5px; line-height: 1.5; color: var(--ink2);
}
.tier-inc b { font-weight: 600; color: var(--ink); }
.tier .btn { width: 100%; margin-top: 20px; }
.tier-plus {
  margin-top: 24px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink3);
}
.tier ul { margin: 14px 0 0; padding: 0; list-style: none; }
.tier li {
  position: relative; padding-left: 20px; margin-top: 10px;
  font-size: 14px; line-height: 1.5; color: var(--ink2);
}
/* a tick drawn in two borders, so there are no four svgs per card */
.tier li::before {
  content: ""; position: absolute; left: 1px; top: 5px;
  width: 9px; height: 5px; border: 1.6px solid var(--ink);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.tb-f {
  margin-top: 36px; font-size: 14.5px; line-height: 1.65;
  color: var(--ink3); max-width: 760px;
}

/* ── 3 · what a month costs ─────────────────────────────────────────── */
.calc-h { max-width: 620px; }
.calcbox {
  margin-top: 56px; border: 1px solid var(--dline); border-radius: 18px;
  background: var(--night2); overflow: hidden;
}

/* the control, and the one number it is setting, at the size of a heading
   so the thing you are changing is the thing you are reading */
.calc-ctl { padding: 28px 28px 24px; border-bottom: 1px solid var(--dline); }
.calc-ctl label {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--dink);
}
.calc-ctl output {
  display: block; margin-top: 6px;
  font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1;
  color: #fff; font-family: inherit;
}

/* The track is painted in two halves from --v, which the script writes,
   because the filled part of a range input is not stylable on its own. */
.calc-ctl input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 22px; margin: 18px 0 0;
  background: transparent; cursor: pointer;
}
.calc-ctl input::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--periwinkle) var(--v, 0%), var(--night3) var(--v, 0%));
}
.calc-ctl input::-moz-range-track { height: 4px; border-radius: 999px; background: var(--night3); }
.calc-ctl input::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--periwinkle); }
.calc-ctl input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.calc-ctl input::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 999px; background: #fff;
}
.calc-ctl input:focus-visible { outline: none; }
.calc-ctl input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(169, 180, 255, .45); }
.calc-ctl input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(169, 180, 255, .45); }
.calc-ax {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: #5C6170;
}

.calc-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.calc-t th, .calc-t td { padding: 15px 10px; text-align: right; }
.calc-t th:first-child, .calc-t td:first-child { padding-left: 28px; text-align: left; }
.calc-t th:last-child, .calc-t td:last-child { padding-right: 28px; }
.calc-t thead th {
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase; color: #5C6170;
  padding-top: 18px; padding-bottom: 12px;
}
.calc-t tbody tr { border-top: 1px solid var(--dline); }
.calc-t tbody th { font-size: 15.5px; font-weight: 600; color: var(--dink2); }
.calc-t td { color: var(--dink); font-variant-numeric: tabular-nums; }
.calc-t .ct { color: #fff; font-weight: 600; }

/* The tier the monthly review would land on at this volume. A row, lit —
   not a badge, because which row it is changes as you drag. */
.calc-t tbody tr { transition: background .18s ease; }
.calc-t tr.is-best { background: rgba(169, 180, 255, .09); }
.calc-t tr.is-best th { color: #fff; }
/* The label is in the markup on every row and only shown on one, so the
   table does not change height as the lit row moves — a reflow on every
   frame of a drag, for one line of type. */
.calc-t .cb {
  display: block; margin-top: 3px; visibility: hidden;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--periwinkle);
}
.calc-t tr.is-best .cb { visibility: visible; }

.calc-note {
  margin-top: 26px; max-width: 760px;
  font-size: 14.5px; line-height: 1.65; color: var(--dink);
}

/* ── 4 · the rate ───────────────────────────────────────────────────── */
.rate .lede { max-width: 720px; }
/* ── the rate, drawn ──────────────────────────────────────────────────
   This band used to be five lines of prose arguing that $2.50 is a ceiling
   rather than a price, followed by four numbers with no scale behind them.
   The numbers were the evidence and nothing showed what they were evidence
   OF — the reader had to hold "$2.50" in their head and do four subtractions.

   It is a ratio against a limit, four times over, so it is four meters on
   one scale. The track IS $2.50. Where a bar stops is what an activation
   costs; the space left over is what the allowance is worth. Nobody has to
   be told the bars are short of the line.

   ONE HUE, because this is one measure measured four times, not four
   series: the fills are all the same near-white, and the track is a lighter
   step of the ground they stand on. Periwinkle is spent on the rate line
   alone, which is the thing the heading is about. */
/* the two fixed columns at the right are declared here rather than on the
   rows, because both the ceiling line and its label have to find the same
   edge, and they live on either side of the figure's caption */
.meters { margin: 48px 0 0; --m-gap-col: 104px; --m-col-gap: 20px; }
.meters figcaption {
  position: relative;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink3);
}
/* centred on the line it names, the way an axis tick labels its own
   gridline; right-aligned to the figure it would read as a caption for the
   whole row instead */
.m-lim-k {
  position: absolute; bottom: 14px;
  right: calc(var(--m-gap-col) + var(--m-col-gap));
  transform: translateX(50%);
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--periwinkle);
  white-space: nowrap;
}

/* the two fixed columns at the right are what let the rate line be drawn
   once, as a single line down the figure, instead of once per row */
.m-rows { position: relative; }

.m-row {
  display: grid; align-items: center;
  grid-template-columns: 104px 76px 1fr var(--m-gap-col);
  gap: var(--m-col-gap); padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.m-name { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.m-name i {
  display: block; margin-top: 3px;
  font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--ink3);
}
.m-val {
  font-size: 22px; font-weight: 600; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

/* a thin mark on a track that is a step of the ground, both ends rounded */
.m-track {
  position: relative; display: block; height: 10px;
  background: #1E2230; border-radius: 999px; overflow: hidden;
}
.m-track i {
  display: block; height: 100%; border-radius: 999px;
  background: #D5D9E6;
  transition: background .18s;
}
.m-row:hover .m-track i { background: #fff; }

.m-gap {
  text-align: right; font-size: 13px; color: var(--ink3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* THE RATE LINE. One dashed line at the track's right edge, which is $2.50
   by construction: the track's full width is the rate. Its x is the two
   fixed columns plus the gap between them, so it lands on the edge without
   being measured in the browser.

   It was labelled "ceiling" and that was the page's overclaim in miniature:
   $2.50 caps what an activation costs ABOVE the allowance, not what one
   works out to on average. Drag the calculator two bands up to 200 and it
   will show you $3.00 and $9.99 per activation on the wrong tiers. The line
   is the rate; the bars are what the allowance does to it. */
.m-limit {
  position: absolute; top: 0; bottom: 0;
  right: calc(var(--m-gap-col) + var(--m-col-gap));
  width: 1px; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, var(--periwinkle) 0 4px, transparent 4px 9px
  );
  opacity: .65;
}

.rates-k { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--ink3); max-width: 620px; }

/* ── 5 · what counts as an activation ───────────────────────────────── */
.acts { background: var(--soft); }
.acts .prule { left: 120px; right: 120px; }
/* wide enough that the lede does not leave "run." alone on a second line */
.acts-h { max-width: 720px; }

/* FOUR CONDITIONS THAT HAVE TO HOLD TOGETHER, and the layout has to say the
   "together" part. As four equal columns it said the opposite: four facts
   about activations, any of which might be the one that matters. The reader
   had to get the conjunction out of the lede and carry it across the row.

   So the operator is drawn, and it is the one the diagrams already use
   between two boxes: quieter than a label, louder than a rule. That single
   mark is the whole of the fix. Each condition is then one line rather than
   three, because the row is an expression now and an expression is read in
   one pass. */
/* A CHECKLIST, because that is what four conditions that must all hold is.

   This band went through four columns, then four columns joined by the set
   operator, then one rail with the operator punched into it and the result
   labelled at its end. Every version was the same mistake getting more
   elaborate: notation layered onto a text grid. Nobody reading a pricing
   page knows what the intersection symbol is, and nobody should have to.

   Everyone knows a checklist. Four ticks, all of them filled, and the thing
   counts. The tick is the one the tier cards already draw — two borders and
   a rotation, no SVG — so this is the page's own mark for "all of these",
   used for the one list on the page that actually means it. Vertical rather
   than across: a conjunction is read down, and each condition gets a whole
   line instead of a column a quarter of the width. */
/* A JOURNEY, LEFT TO RIGHT. The four conditions are also the order they
   happen in — somebody is a user of yours, then they connect their own AI,
   then they run on it, then they come back — so the list is drawn as the
   walk it describes rather than as four facts about activations.

   A ticked node per step on one rail, the way every progress stepper in the
   world works, and nobody has to be told the four go together. */
.acts-l {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--acts-gap, 28px);
}
.acts-l li { position: relative; padding-top: 46px; }

/* THE RAIL, one segment per step, from this node's centre to the next one's.
   A column is 100% and the gutter is the gap, so the run between two centres
   is exactly `100% + gap` — no measuring, and it holds at every width the
   grid resolves to. */
.acts-l li::before {
  content: ""; position: absolute; left: 11.5px; top: 11.5px;
  width: calc(100% + var(--acts-gap, 28px)); height: 1px;
  background: var(--line);
}
/* the walk ends at the last tick rather than trailing off the edge */
.acts-l li:last-child::before { display: none; }

/* THE NODE, carrying the band's own ground so it punches the rail rather
   than sitting on top of it. */
.acts-n {
  position: absolute; left: 0; top: 0;
  width: 23px; height: 23px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--soft);
}
/* the tier cards' tick, centred in it */
.acts-n::before {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 9px; height: 5px; border: 1.6px solid var(--ink);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

.acts-l b {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.025em;
}
.acts-d {
  display: block; margin-top: 7px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink2);
}

/* ── the responsive layer ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tiers { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tier h2 span { min-height: 0; }

  .meters { --m-gap-col: 92px; --m-col-gap: 16px; }
  .m-row { grid-template-columns: 92px 70px 1fr var(--m-gap-col); }
}

/* A STEPPER THAT HAS RUN OUT OF WIDTH TURNS THE CORNER. Two rows of two
   would put a rail segment at the end of the first row pointing into
   nothing, so below this the walk goes down the page instead of across it:
   same nodes, same rail, rotated. */
@media (max-width: 900px) {
  .acts-l { display: block; max-width: 640px; }
  .acts-l li { padding: 0 0 30px 44px; }
  .acts-l li:last-child { padding-bottom: 0; }
  /* vertical now: from this node's centre down to where the next one starts,
     which on rows that touch is this row's own height */
  .acts-l li::before {
    left: 11px; top: 26px;
    width: 1px; height: 100%;
  }
  .acts-n { top: 14px; }
  .acts-l b { padding-top: 15px; }
}

@media (max-width: 860px) {
  /* The name, the value and the gap go on one line and the track takes the
     width under them. The rate line then has nothing fixed to hang off, so
     it stands at the end of the track: still $2.50, still one line down the
     figure, just no longer inset by a column. */
  .meters { --m-gap-col: 0px; --m-col-gap: 0px; }
  /* The rate line is now the figure's own right edge, so its label can stop
     hovering over the caption and sit under it, right-aligned to the same
     edge. Absolutely positioned it was landing on top of the caption text
     the moment the row stopped being wide enough to hold both. */
  .m-lim-k {
    position: static; transform: none;
    display: block; text-align: right; margin-top: 8px;
  }
  .m-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name val" "track track";
    gap: 4px 16px; padding: 16px 0 18px;
  }
  .m-name { grid-area: name; }
  .m-val { grid-area: val; text-align: right; }
  .m-track { grid-area: track; margin-top: 10px; }
  /* the drawing still says it: the bar stops short of the rate line, and the
     caption names what that space is. A third label on a phone-width row is
     the one thing here that can be spared. */
  .m-gap { display: none; }
  /* THROUGH THE LAST DIGIT. The rule marks where $2.50 falls, and with the
     gap column collapsed that is the figure's own right edge — which is
     also where every value is right-aligned. The two were drawn on top of
     each other. The caption above already says the rate, and the track's
     unfilled remainder already shows the distance to it, so the vertical
     goes and nothing it was carrying is lost. */
  .m-limit { display: none; }
  .calc-t { font-size: 14px; }
  .calc-t th, .calc-t td { padding: 13px 7px; }
  .calc-t th:first-child, .calc-t td:first-child { padding-left: 18px; }
  .calc-t th:last-child, .calc-t td:last-child { padding-right: 18px; }
  .calc-ctl { padding: 22px 18px 20px; }
}

@media (max-width: 600px) {
  .ph .h1 { max-width: none; }
  .tiers { grid-template-columns: 1fr; padding-top: 52px; }

  .tb .prule, .acts .prule { left: 20px; right: 20px; }
  .calc-ctl output { font-size: 34px; }
  /* the middle two columns are the working, not the answer: on a phone
     the tier, the month and the per-activation rate are what is left */
  .calc-t .cf, .calc-t .co, .calc-t thead .cf, .calc-t thead .co { display: none; }
  /* An inline link cannot simply be made 44px tall: the box would break the
     line it sits in. Padding out and margin back in grows the hit area and
     leaves the layout exactly where it was. */
  .faq-k a { padding-block: 12px; margin-block: -12px; }

  /* The label wraps to two lines in a first column this narrow, and it is in
     the markup on every row — so every row pays for it whether it is the lit
     one or not. The row is already lit; on a phone that is the whole of what
     the label was saying. */
  .calc-t .cb { display: none; }
}

/* ── motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── pricing grid ────────────────────────────────────────────────────── */

/* The page resolves to one comparison surface: a centered promise above a
   compact row of plans, with the lists continuing beneath the price panel. */
.ph {
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 68% at 50% 80%, rgba(85, 109, 180, .18), transparent 72%),
    linear-gradient(90deg, transparent 49.9%, rgba(143, 155, 190, .08) 50%, transparent 50.1%),
    var(--night);
}

.ph .in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 42px 56px;
}

.ph .eb { display: none; }

.ph .h1 {
  max-width: none;
  font-size: clamp(46px, 5.1vw, 68px);
  line-height: 1;
}

.ph .lede {
  max-width: 640px;
  margin-top: 20px;
  color: var(--dink2);
}

.tb {
  padding-bottom: 128px;
  background: var(--night);
}

.tb .prule { display: none; }

.tiers {
  gap: 16px;
  padding-top: 0;
}

main .tier {
  padding: 0 20px 22px;
  border-color: #2D313C;
  border-radius: 12px;
  background: #111217;
}

main .tier:first-child {
  border-color: #46546B;
  background: linear-gradient(160deg, #1C2530 0%, #151923 44%, #101117 100%);
  box-shadow: 0 0 0 1px rgba(111, 139, 194, .16), 0 20px 60px rgba(0, 0, 0, .2);
}

.tier-head {
  min-height: 230px;
  margin: 3px -17px 0;
  padding: 22px 20px 19px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
}

.tier:first-child .tier-head {
  background: linear-gradient(150deg, rgba(158, 187, 221, .15), rgba(255, 255, 255, .025));
  border-color: rgba(169, 196, 231, .18);
}

.tier h2 { font-size: 18px; }

.tier h2 span {
  min-height: 0;
  margin-top: 8px;
  color: var(--dink);
}

.tier-p { margin-top: 18px; }
.tier-p b { font-size: 35px; }
.tier-p i { color: var(--dink); }

.tier-inc {
  margin-top: 8px;
  padding-top: 0;
  border: 0;
  color: var(--dink2);
  font-size: 13px;
}

.tier .btn {
  height: 32px;
  margin-top: 17px;
  border-radius: 6px;
  font-size: 13px;
}

.tier .b-dark {
  background: linear-gradient(180deg, #5D3DDB, #693EFF);
  color: #fff;
}

.tier .b-dark:hover { background: #7955FF; }

.tier:not(:first-child) .b-dark {
  background: linear-gradient(180deg, #5A5A67, #42424D);
  color: #fff;
}

.tier:not(:first-child) .b-dark:hover { background: #666673; }

.tier-plus {
  margin-top: 21px;
  color: #F0F1F5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}

.tier ul { margin-top: 15px; }

.tier li {
  margin-top: 12px;
  padding-left: 23px;
  color: var(--dink2);
  font-size: 13px;
}

.tier li::before {
  top: 5px;
  width: 10px;
  height: 6px;
  border-color: #C8CDD9;
}

.tb-f {
  margin: 32px auto 0;
  color: var(--dink);
  text-align: center;
}

@media (max-width: 1100px) {
  .tier-head { min-height: 0; }
}

/* ── the thumb, last word ─────────────────────────────────────────
   `.tier .btn` is declared at its own 32px further up this file, and this
   has the same specificity — so it has to come after it rather than live in
   the phone block above, where source order was quietly losing. It is the
   one control on each tier card and the likeliest thing on the page to be
   tapped. */
@media (max-width: 600px) {
  .tier .btn { height: 44px; border-radius: 8px; font-size: 14px; }
}

/* ── prose, on a phone ───────────────────────────────────────────
   SIX CENTRED LINES. The note under the tiers is one line on a desktop and
   six on a phone, every one of them starting somewhere different. Declared
   in this sheet, which loads after landing.css, so the shared rule there
   was losing to it. */
@media (max-width: 600px) {
  .tb-f, .calc-note, .rates-k { text-align: left; }
}