/* ==========================================================================
   The pricing page, and only the pricing page.

   Its own file rather than more of site.css for two reasons: site.css is
   already 110KB served on every page, and everything here is needed by two
   URLs. It loads AFTER site.css, so plain-specificity rules below win over
   their counterparts there by source order — the plan-card colours in
   particular, which site.css only ever states for cards sitting inside the
   accent-drenched .cta section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The opening band.

   The landing page spends its pink on the closing section, where the ask is.
   A pricing page cannot do that — the cards ARE the ask, and they open the
   page — so this band takes the softer blush and a wide accent glow instead of
   the full drench. The loud treatment stays where it lands harder.
   -------------------------------------------------------------------------- */
.price-hero{
  background:var(--bg-soft);
  text-align:center;
  overflow:clip;
  /* One screen, so both cards land above the fold. The header is fixed, so it
     is cleared with padding rather than subtracted from the height — the band
     itself still measures a full screen.

     svh rather than vh: a mobile browser's collapsing toolbar makes vh taller
     than the screen actually is, which is the one case this must not do. */
  min-height:100svh;
  padding-block:calc(var(--head-h) + clamp(20px,4vh,52px)) clamp(28px,5vh,64px);
  display:flex;align-items:center;
}
.price-hero::before{
  content:"";position:absolute;inset-inline:0;top:8%;height:70%;z-index:0;
  background:radial-gradient(60% 60% at 50% 45%, var(--glow), transparent 70%);
  pointer-events:none;
}
.price-hero > .wrap{position:relative;z-index:1;width:100%}

/* Type and spacing that answer to viewport HEIGHT as well as width: each
   clamp's middle term takes whichever of the two is tighter, so a short laptop
   window compresses the same way a narrow one does instead of overflowing. */
.price-hero h1{
  font-size:clamp(2.05rem,min(4.55vw,6vh),3.3rem);
  margin-bottom:0;
}
/* site.css accents the emphasised word in an h2 and says nothing about h1,
   because until this page every h1 on the site was a whole headline with no
   emphasis inside it. Without this the accented word renders as plain ink and
   the headline loses the one bit of colour it is supposed to carry. */
.price-hero h1 em{font-style:normal;color:var(--accent)}
.price-hero .lede{
  font-size:clamp(.94rem,min(1.5vw,2vh),1.14rem);
  color:var(--ink-soft);
  max-width:56ch;margin:clamp(8px,1.7vh,14px) auto 0;
}

/* --------------------------------------------------------------------------
   The two cards, on a light ground rather than on the accent field.
   -------------------------------------------------------------------------- */
.price-hero .plans{margin-top:clamp(18px,3.4vh,44px)}
/* stretch, so the pair ends level and the two buttons sit on one line */
.price-hero .plans-grid{align-items:stretch}
.price-hero .plan{
  border-color:var(--dash);
  gap:clamp(11px,2vh,17px);
  padding:clamp(22px,3.6vh,40px) clamp(18px,2.4vw,30px);
}
/* The paid card is the one being pointed at. On the accent field site.css
   outlines it in ink, which is right there and invisible here — on the blush
   it takes the accent itself. */
.price-hero .plan.is-lead{
  border:2px solid var(--accent);
  box-shadow:0 3px 10px rgba(38,20,27,.06), 0 40px 80px -34px var(--glow);
}
.price-hero .plan.is-lead .plan-flag{background:var(--accent);color:var(--on-accent)}
.price-hero .plan-amount{font-size:clamp(1.55rem,min(3.2vw,3.6vh),2.5rem)}
.price-hero .plan-list{gap:clamp(8px,1.5vh,13px)}
/* Air between the last feature and the button, on top of what `margin-top:auto`
   already gives the shorter card. The button is the end of the card's argument
   and reads better with a beat before it than pinned to the list. */
.price-hero .plan-list{margin-bottom:clamp(4px,1.4vh,14px)}
.price-hero .plan-list li{
  font-size:clamp(.88rem,min(1.2vw,1.8vh),1rem);
  line-height:1.5;
}
.price-hero .plan-cta{padding-block:clamp(11px,1.7vh,15px)}

/* The per-day figure rides the price row, in brackets after the monthly
   figure, rather than claiming a row of its own.

   site.css gives it `flex-basis:100%`, which is what forces the line break
   inside `.plan-price` — right on the landing page, where the card has height
   to spend, and wrong here. */
.price-hero .plan-daily{
  flex-basis:auto;
  margin-top:0;
  font-size:.82rem;
  font-weight:700;
  color:var(--accent-down);
  white-space:nowrap;
}

/* The feature list is a disclosure, which only means anything on a phone —
   see the mobile block below. On desktop the card has the room, so the summary
   is hidden and the list is forced open.

   Forcing it open takes both rules: older engines hide a closed details'
   children with an overridable `display:none`, newer ones use
   `content-visibility` on the `::details-content` pseudo-element, and neither
   alone covers both. Verified in Chrome 151; the display rule is the fallback
   for everything that does not know the pseudo-element. */
@media (min-width:761px){
  .price-hero .plan-details > summary{display:none}
  .price-hero .plan-details > .plan-list{display:grid !important}
  .price-hero .plan-details::details-content{
    content-visibility:visible !important;
    block-size:auto !important;
  }
}

/* site.css states these only as `.cta a.plan-cta`, for cards on the accent
   field. These cards are not on it, so both buttons are restated here against
   the white card they actually sit on. */
.price-hero a.plan-cta{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:0 14px 30px -18px rgba(214,51,108,.8);
}
.price-hero a.plan-cta:hover{
  background:var(--accent-down);border-color:var(--accent-down);color:var(--on-accent);
}
.price-hero a.plan-cta.ghost{
  background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none;
}
.price-hero a.plan-cta.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* --------------------------------------------------------------------------
   The machine-readable pricing link.

   Directly under the plans rather than further down the page: an agent-facing
   link only pays off where the prices are.
   -------------------------------------------------------------------------- */
.agent-line{
  margin:clamp(14px,2.4vh,26px) auto 0;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:.9rem;color:var(--ink-soft);text-align:center;
}
/* 600 and not 700: assets/fonts.css ships Heebo at 400, 500 and 600 only, so a
   700 here is not a bolder face — it is the browser smearing the 600 into a
   fake one, which reads as a different typeface beside real Rubik. */
.agent-line a{color:var(--accent-down);font-weight:600;text-underline-offset:3px}
.agent-line a:hover{color:var(--accent)}

/* --------------------------------------------------------------------------
   The closing band.

   `.cta` comes from site.css and drenches the section in the accent, painting
   its heading in --on-accent. But the emphasis inside a heading is coloured by
   a bare `h2 em` rule, which no `.cta h2` selector can reach — it is a
   different element — so an emphasised word there renders --accent ON --cta-bg:
   pink on pink, a contrast ratio of about 1.3:1, effectively invisible.

   This has been latent in site.css all along; it surfaces here because this is
   the first heading on the site to put an <em> inside a .cta section. On the
   accent field the emphasis is carried by a rule under the word instead.
   -------------------------------------------------------------------------- */
.cta h2 em{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:.075em;
  text-underline-offset:.16em;
}

/* --------------------------------------------------------------------------
   Free against Pro, capability by capability.

   The questions band takes the softer ground so the two do not read as one
   long section — site.css gives .faq the page background, which is also what
   the comparison above it sits on.
   -------------------------------------------------------------------------- */
.faq.price-faq{background:var(--bg-soft)}

.cmp-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:clamp(26px,4vh,40px);
}
table.cmp{
  width:100%;min-width:520px;border-collapse:collapse;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;
}
table.cmp th,
table.cmp td{
  padding:14px clamp(12px,1.6vw,20px);
  text-align:start;border-bottom:1px solid var(--line);
  font-size:clamp(.9rem,1.2vw,.98rem);
}
table.cmp thead th{
  font:800 clamp(.95rem,1.3vw,1.05rem) 'Rubik',sans-serif;
  color:var(--ink);background:var(--surface-2);
}
table.cmp thead th:not(:first-child){text-align:center}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp th[scope="row"]{font-weight:600;color:var(--ink)}
table.cmp td.val{text-align:center;color:var(--ink-soft);white-space:nowrap}
.tick{color:var(--success);font-weight:900}
.cross{color:var(--dash);font-weight:900}

/* --------------------------------------------------------------------------
   Where one screen stops being an honest promise.

   Stacked on a phone, a headline plus two cards does not fit, and forcing it
   would only shrink the type past reading. Same for a very short desktop
   window. Both fall back to ordinary flow.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Phones and small tablets.

   The desktop band promises one screen and keeps it by trading height against
   the viewport. None of that survives a phone: stacked, a headline plus two
   plans plus a table cannot fit 700 logical pixels without shrinking the type
   past reading, and a page that fits by being illegible has not fitted. So
   below this width the page simply flows, and the room goes back into type
   size, tap targets and spacing.
   ========================================================================== */
@media (max-width:760px){
  /* ---- the opening band ---- */
  .price-hero{
    min-height:0;
    display:block;
    padding-block:calc(var(--head-h) + clamp(22px,6vw,38px)) clamp(30px,8vw,52px);
  }
  /* vw rather than the desktop min(vw,vh): height is no longer the constraint,
     and a 4.55vw headline on a 390px screen is 18px. */
  .price-hero h1{font-size:clamp(1.7rem,7.2vw,2.25rem)}
  .price-hero .lede{font-size:1rem;max-width:38ch}
  .price-hero .plans{margin-top:clamp(22px,6vw,32px)}

  .price-hero .plan{padding:clamp(20px,5.5vw,26px) clamp(18px,5vw,24px);gap:14px}
  .price-hero .plan-amount{font-size:2.1rem}
  .price-hero .plan-list{gap:11px;margin-bottom:6px}
  /* 16px, not the desktop floor of 14: this is body copy now, read at arm's
     length on a small screen rather than scanned across two columns. */
  .price-hero .plan-list li{font-size:1rem;line-height:1.55}
  .price-hero .plan-list li::before{top:.3em}
  .price-hero .plan-list li::after{top:.63em}
  /* A comfortable thumb target, above the 44px minimum. */
  .price-hero .plan-cta{padding-block:15px;font-size:1.02rem}

  /* Stacked there is no right and left, only first and second — and the first
     is the one that gets read. So the paid card leads on a phone while the DOM
     keeps free first, which is what puts it on the right in RTL on desktop.

     The cost of doing this in CSS is that reading order and tab order disagree
     on phones. It is tolerable here because the two cards are independent
     blocks with nothing running between them; it would not be if they were. */
  .price-hero .plan.is-lead{order:-1}

  /* Stacked, two full feature lists push the second price off the screen, and
     a price nobody scrolls to is a price nobody compares. Both start closed,
     so both plans and both prices are on one screen and the reader opens
     whichever they are actually weighing. */
  .price-hero .plan-details{border-top:1px dashed var(--dash);padding-top:11px}
  .price-hero .plan-details summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    /* A row you tap, so it is sized like one: 44px is the floor every mobile
       guideline agrees on, and padding alone left it at 31. */
    min-height:44px;
    padding:6px 0;
    font:800 .95rem 'Rubik',sans-serif;color:var(--accent-down);
  }
  .price-hero .plan-details summary::-webkit-details-marker{display:none}
  .price-hero .plan-details summary::marker{content:""}
  .price-hero .plan-details summary svg{
    flex:none;width:19px;height:19px;fill:none;stroke:var(--accent);
    stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s var(--ease);
  }
  .price-hero .plan-details[open] summary svg{transform:rotate(180deg)}
  .price-hero .plan-details .plan-list{margin-top:11px}
  /* The free card carries an empty line to hold its button level with Pro's.
     Stacked, there is nothing to hold level and it is just a blank row. */
  .price-hero .plan-fine[aria-hidden="true"]{display:none}

  /* ---- the comparison, unrolled ---- */
  /* A three-column table on a 390px screen is a horizontal scroll, and a
     horizontal scroll inside a vertical page is a row nobody reads to the end
     of. Each feature becomes its own small card instead, with the plan names
     moved from column headings onto the values they label. */
  .cmp-scroll{overflow-x:visible;margin-top:clamp(20px,5vw,28px)}
  table.cmp{
    display:block;min-width:0;
    background:transparent;border:0;border-radius:0;
  }
  table.cmp thead{display:none}
  table.cmp tbody{display:block}
  table.cmp tr{
    display:flex;flex-direction:column;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px clamp(14px,4vw,18px);
    margin-bottom:10px;
  }
  table.cmp tr:last-child{margin-bottom:0}
  table.cmp th[scope="row"]{
    display:block;
    padding:0 0 10px;border:0;
    font:800 1rem/1.35 'Rubik',sans-serif;color:var(--ink);
  }
  table.cmp td.val{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:8px 0;border:0;
    text-align:end;white-space:normal;font-size:.95rem;
  }
  /* Pro first. On the desktop table it is the right-hand column because the
     free plan is read first and Pro is what it is compared against; unrolled
     into a card the two become a list, and the first line under a feature name
     is the one that gets read. The page argues for Pro, so Pro goes there.

     The order is visual only - each value still names its own plan, so the
     card reads correctly in either sequence and a screen reader gets the
     document order, which is still the table's. */
  table.cmp td.val:nth-of-type(2){order:1;border-top:0}
  table.cmp td.val:nth-of-type(1){order:2;border-top:1px dashed var(--dash)}
  table.cmp th[scope="row"]{order:0}
  /* the plan name, now that the column heading is gone */
  table.cmp td.val::before{
    content:attr(data-label);
    flex:none;text-align:start;
    font-weight:600;color:var(--ink);
  }

  /* ---- the rest ---- */
  .agent-line{font-size:.88rem;gap:6px}
  .faq-list{margin-top:clamp(18px,5vw,26px)}
}

/* Narrow phones: the price and its bracket stop sharing a line rather than
   letting the bracket push the amount out of the card. */
@media (max-width:380px){
  .price-hero .plan-amount{font-size:1.9rem}
  .price-hero .plan-daily{white-space:normal}
}

/* A short desktop window is the one case where forcing a screen would strand
   content above the fold with no way to scroll to it. */
@media (min-width:761px) and (max-height:600px){
  .price-hero{min-height:0}
}