/* ==========================================================================
   A design's own page.

   Two screens' worth. The first is the design in a phone beside its price;
   the second is what it comes with, as a bento of tiles rather than a list of
   six identical boxes — the sizes are the argument, and the panel is the
   largest because the panel is the thing being sold.

   Colours come from tokens.css, which theme.css has already redefined for the
   storefront, so this sheet names none of its own except the three tile
   grounds that only exist here.
   ========================================================================== */

/* No sticky buy bar. It restated a total that is already on the screen and
   covered the bottom of whatever you were reading to do it — on a laptop that
   was the colour swatches. The form's own button is the button. */
.tpl { padding-bottom: 0; }

/* -------------------------------------------------------------- the design */

.tpl-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.tpl-hero-in {
  display: grid;
  gap: 48px;
  align-items: start;
  padding-top: 34px;
  padding-bottom: 64px;
}
@media (min-width: 900px) {
  .tpl-hero-in {
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    padding-top: 46px;
    padding-bottom: 80px;
  }
}

.tpl-back {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-mono-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.tpl-back:hover { color: var(--accent-soft); }

/* The phone sits in a panel of its own, the way it does inside Quick Look —
   a card against the page rather than floating on it. */
.tpl-stage .ci-preview {
  padding: 22px;
  border-radius: 26px;
  background: var(--forest);
  /* Deep enough that a cream card reads as lit, not pasted on. */
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .22);
}
/* Sized by height, not width.

   A 390x844 phone drawn 300px wide is 650px tall, which on a laptop pushed
   the colours off the bottom of the screen -- and colours nobody can see are
   colours nobody changes. Height leads and the aspect ratio supplies the
   width, so the phone gives way to keep the swatches in the first screen. */
/* The phone is exactly as wide as the card inside it -- see the same note on
   .preview-dialog .ci-phone in the landing stylesheet. `width: auto` on a block
   is the width of its parent, not of its contents. */
.tpl-stage .ci-phone {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

/* Height leads here, and it is the screen that is measured, so the height goes
   on the screen and the width is worked out from it. */
.tpl-stage .ci-phone-screen {
  --glass: max(340px, min(560px, calc(100svh - 280px)));
  height: var(--glass);
  width: calc(var(--glass) * 390 / 844);
  min-height: 0;
  max-width: 100%;
}

.tpl-stage-note {
  margin: 16px 2px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-faint);
}

/* The six colours, between the design's selling points and its price. */
.ci-colours {
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--maroon-line);
}
.ci-colours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------- the pitch */

.tpl-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.tpl-rule { width: 20px; height: 1px; background: currentColor; opacity: .5; }
.tpl-eyebrow { flex-wrap: wrap; row-gap: 6px; }
.tpl-video-mark { padding: 3px 9px; border-radius: 999px; background: #1f1417; color: #fdf6ea; letter-spacing: .14em; }

.tpl-hero .tpl-copy h1 { margin: 14px 0 0; }
.tpl-tagline {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.tpl-highlights {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.tpl-highlights li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.tpl-highlights li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}

/* The buy form keeps its own markup and its own script; it only needs to sit
   on the new ground. The rule above it belongs to the colour block. */
.tpl-copy .buy { margin-top: 26px; }

/* --------------------------------------------------------------- the bento */

.tpl-bento {
  padding: 74px 0 84px;
  background: var(--surface-sunk);
}
.tpl-bento-head { max-width: 640px; margin-bottom: 34px; }
/* site.css draws .eyebrow as a bordered pill. Here it is a label above a
   heading, which is what it is everywhere in the new design. */
.tpl-bento-head .eyebrow,
.ci-colours-head .eyebrow {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
}
.tpl-bento .tpl-bento-head h2 { margin: 12px 0 0; }
.tpl-bento-head p {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-faint);
}

.bento {
  display: grid;
  gap: 16px;
}
@media (min-width: 860px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(190px, auto);
  }
  /* Four cells for the panel, two for guest links, two for the last one, and
     a single each for the two smallest. Eight cells, five tiles, no gaps. */
  .bt-lead   { grid-column: span 2; grid-row: span 2; }
  .bt-guests { grid-column: span 2; }
  .bt-events { grid-column: span 1; }
  .bt-share  { grid-column: span 1; }
  .bt-live   { grid-column: span 4; }
}

.bt {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.bt:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(20, 12, 12, .12);
}

.bt-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bt-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bt-tag .icon { width: 16px; height: 16px; }
.bt-no {
  font-family: var(--font-mono-ui);
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .45;
}

.tpl-bento .bt h3 {
  position: relative;
  z-index: 2;
  margin: 22px 0 0;
  color: inherit;
}
.bt p {
  position: relative;
  z-index: 2;
  margin: 10px 0 0;
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.65;
  opacity: .72;
}

.bt-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--font-mono-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: background .3s ease, color .3s ease;
}

/* ---- the three tiles that carry a colour of their own ---- */

/* Gold. The panel, and the largest tile, because it is the product. */
.bt-lead {
  background: #e1a84d;
  border-color: rgba(76, 32, 41, .18);
  color: #4c2029;
}
.tpl-bento .bt-lead h3 { font-size: clamp(34px, 3.4vw, 48px); line-height: .92; }
.tpl-bento .bt-lead h3 em { font-style: italic; color: #762337; }
.bt-lead .bt-cta:hover { background: #4c2029; color: #f8ecd9; }
/* Two rings, off the corner. They are what stops the biggest tile reading as
   a plain rectangle of colour, and they cost nothing to draw. */
.bt-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(76, 32, 41, .22);
  pointer-events: none;
}
.bt-ring-a { right: -46px; bottom: -66px; width: 240px; height: 240px; }
.bt-ring-b { right: 24px;  bottom: 20px;  width: 96px;  height: 96px; }

/* Green. */
.bt-guests {
  background: #24553f;
  border-color: rgba(248, 236, 217, .18);
  color: #f8ecd9;
}
.bt-guests .bt-tag { color: #e1a84d; }

/* Wine. */
.bt-live {
  background: var(--maroon);
  border-color: rgba(248, 236, 217, .18);
  color: #f8ecd9;
}
.bt-live .bt-tag { color: #e1a84d; }
.tpl-bento .bt-live h3 { max-width: 18ch; }

/* A pulse, because "it is live" is the claim the tile is making. */
.bt-live-dot {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #7fd6a4;
  box-shadow: 0 0 0 0 rgba(127, 214, 164, .55);
  animation: bt-pulse 2.4s ease-out infinite;
}
@keyframes bt-pulse {
  70%  { box-shadow: 0 0 0 16px rgba(127, 214, 164, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 214, 164, 0); }
}

/* The guest-link sketch: three people and the link one of them was sent. */
.bt-links {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.bt-av {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(248, 236, 217, .14);
  border: 1px solid rgba(248, 236, 217, .3);
  font-family: var(--font-mono-ui);
  font-size: 11.5px;
}
.bt-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(225, 168, 77, .18);
  border: 1px solid rgba(225, 168, 77, .45);
  font-family: var(--font-mono-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e1a84d;
}
.bt-pill .icon { width: 14px; height: 14px; }

/* The two small tiles keep the page's own ground, so the coloured three read
   as chosen rather than as everything being shouted at once. */
.bt-events .bt-tag,
.bt-share .bt-tag { color: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  .bt, .bt-cta { transition: none; }
  .bt:hover { transform: none; }
  .bt-live-dot { animation: none; }
}

/* ==========================================================================
   Fitting a laptop.

   The whole point of this screen is the design beside its price, and that
   only works if both are on the screen at once. It was 944px tall against an
   820px window, so the Continue button — the one thing the page exists to
   offer — sat below the fold, and a sticky bar was pasted over the bottom to
   compensate. The bar is gone; the page is the right size instead.

   Nothing is removed. Every measurement is pulled in, and the phone gives way
   first because it is the one element that can lose height without losing
   anything.
   ========================================================================== */

@media (min-width: 900px) {
  .tpl-hero-in { padding-top: 30px; padding-bottom: 40px; }

  .tpl-stage .ci-phone-screen { --glass: max(300px, min(470px, calc(100svh - 350px))); }
  .tpl-stage .ci-preview { padding: 16px; }
  .tpl-back { margin-bottom: 12px; }
  .tpl-stage-note { margin-top: 12px; font-size: 12.5px; }

  /* The headline does not need to be the largest thing on the site here: the
     design in the phone beside it is already carrying that job. */
  .tpl-hero .tpl-copy h1 { font-size: clamp(38px, 3.6vw, 54px); margin-top: 10px; }
  .tpl-tagline { margin-top: 12px; font-size: 14px; }
  .tpl-highlights { margin-top: 14px; gap: 5px; }
  .tpl-highlights li { font-size: 13px; }

  .ci-colours { margin-top: 18px; padding-top: 16px; }
  .ci-colours .ci-swatch { width: 36px; height: 36px; }
  .ci-swatch-note { margin-top: 9px; }

  .tpl-copy .buy { margin-top: 18px; gap: 11px; }
  .tpl-copy .buy-price { font-size: clamp(28px, 2.6vw, 34px); }
  .tpl-copy .buy-add { padding-top: 12px; gap: 8px; }
  .tpl-copy .buy-chip { padding: 8px 10px; font-size: 13px; }
  .tpl-copy .buy-setup { padding-top: 10px; padding-bottom: 10px; }
  .tpl-copy .buy-total { padding-top: 11px; }
  .tpl-copy .btn-lg { padding-top: 15px; padding-bottom: 15px; }
}

/* Shorter laptops.

   1280x720 leaves about 617px under the header, and the right-hand column
   alone wants more than that. The phone has already given all the height it
   can by this point, so the rest comes from the copy: the headline stops
   being a display size, and the two selling points become one line of chips
   rather than a bulleted list. Nothing is hidden — a paragraph that only
   exists on tall screens is a paragraph nobody can rely on. */
@media (min-width: 900px) and (max-height: 800px) {
  .tpl-hero-in { padding-top: 20px; padding-bottom: 26px; }
  .tpl-hero .tpl-copy h1 { font-size: 40px; margin-top: 7px; }
  .tpl-tagline { margin-top: 9px; }

  .tpl-highlights {
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tpl-highlights li {
    padding: 5px 11px 5px 22px;
    border-radius: 999px;
    background: var(--maroon-faint);
    font-size: 12px;
    line-height: 1.35;
  }
  .tpl-highlights li::before { left: 9px; top: .58em; width: 5px; height: 5px; }

  .ci-colours { margin-top: 13px; padding-top: 12px; }
  .ci-colours .ci-swatch { width: 32px; height: 32px; }

  .tpl-copy .buy { margin-top: 13px; gap: 9px; }
  .tpl-copy .buy-price { font-size: 28px; }
  .tpl-copy .buy-add { padding-top: 9px; gap: 6px; }
  .tpl-copy .buy-chip { padding: 7px 10px; font-size: 12.5px; }
  .tpl-copy .buy-setup { padding-top: 8px; padding-bottom: 8px; }
  .tpl-copy .buy-total { padding-top: 9px; }
  .tpl-copy .btn-lg { padding-top: 13px; padding-bottom: 13px; }

  .tpl-stage-note { margin-top: 9px; font-size: 12px; }
  .tpl-stage .ci-preview { padding: 13px; }
}

/* ==========================================================================
   Not a video. Not a PDF.

   Said plainly, in a strip of its own, because it is a claim about what the
   thing IS rather than a benefit of it -- the bento above already argues the
   benefits. Reusing .section/.wrap/.section-head/.eyebrow/.h2 rather than
   drawing a second header style; only the four tiles are new here.
   ========================================================================== */

/* .tpl-bento already closes with 84px of its own bottom padding; .section's
   own top padding stacking on top of that left a bare gap of 150px-plus
   before anything in this section was on screen -- most of a mobile
   scroll's worth of nothing. Halved here rather than in .section itself,
   which other sections rely on keeping. */
.tpl-proof { padding-top: 36px; background: var(--surface-sunk); }

.tpl-proof-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 640px) {
  .tpl-proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .tpl-proof-grid { grid-template-columns: repeat(4, 1fr); }
}
.tpl-proof-item {
  padding: 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tpl-proof-item .icon { width: 20px; height: 20px; color: var(--maroon); }
.tpl-proof-item h3 {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.15;
}
.tpl-proof-item p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ==========================================================================
   Your guest list is part of the design.

   A dark band between the bento and the designs below it. The colour break is
   the point: everything above is the design, this is the one thing the design
   does that a printed card cannot, and it deserves to look like a different
   kind of claim.
   ========================================================================== */

.tpl-guests {
  padding: 46px 0 52px;
  background: #2d654d;
  color: #f8ecd9;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tpl-guests-in {
  display: grid;
  gap: 34px;
  align-items: center;
}
@media (min-width: 940px) {
  .tpl-guests-in { grid-template-columns: .72fr 1.28fr; gap: 48px; }
}

.tpl-guests-copy .gp-kicker { display: block; }
.tpl-guests .tpl-guests-copy h2 {
  margin: 12px 0 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.04em;
  color: #f8ecd9;
}
.tpl-guests .tpl-guests-copy h2 em { font-style: italic; color: #e1a84d; }
.tpl-guests-copy p {
  margin: 18px 0 0;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(248, 236, 217, .68);
}

.tpl-guests-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.tpl-guests-points li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(248, 236, 217, .85);
}
.tpl-guests-points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #e1a84d;
}

.tpl-guests .tpl-guests-note {
  margin-top: 22px;
  font-family: var(--font-mono-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e1a84d;
}


/* About this design -- the part of the page that is this design's own. */
.tpl-about { padding-bottom: 20px; }
.tpl-about-in { max-width: 860px; }
.tpl-about-lead { font-size: 1.05rem; line-height: 1.7; margin: 0 0 22px; color: var(--ink-soft, inherit); }
.tpl-facts { display: grid; gap: 12px 28px; grid-template-columns: 1fr; margin: 0 0 26px; }
.tpl-facts div { border-top: 1px solid var(--line, rgba(0,0,0,.12)); padding-top: 10px; }
.tpl-facts dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; }
.tpl-facts dd { margin: 0; font-size: .98rem; }
@media (min-width: 720px) { .tpl-facts { grid-template-columns: repeat(2, 1fr); } }
.tpl-inside-h { font-size: 1.15rem; margin: 0 0 12px; }
.tpl-inside { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.tpl-inside li strong { font-weight: 600; }
.tpl-inside li span { opacity: .8; }
.tpl-also { margin: 14px 0 0; opacity: .8; }

/* ---------------------------------------------------- the two plans

   Invitation and Invitation + Guest List, side by side: the choice is read,
   with what each includes, rather than guessed at from a chip. The chosen
   one is outlined and carries the Buy now button's price. */
.buy-plans { gap: 12px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border: 1.5px solid rgba(118, 35, 55, .18);
  border-radius: 16px;
  background: #fffaf3;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plan:hover { border-color: rgba(118, 35, 55, .45); }
.plan.is-on {
  border-color: var(--maroon, #762337);
  background: #fff;
  box-shadow: 0 14px 30px -20px rgba(118, 35, 55, .6);
}
.plan.is-on::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--maroon, #762337) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.plan:has(input:focus-visible) { outline: 2px solid var(--maroon, #762337); outline-offset: 3px; }
.plan-name { font-family: var(--display, Georgia, serif); font-size: 18px; line-height: 1.15; padding-right: 22px; color: var(--ink, #2a1418); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.plan-price b { font-size: 19px; color: var(--maroon, #762337); }
.plan-price .price-was { font-size: 13px; }
.plan-price .price-off { font-size: 9.5px; padding: 3px 7px; }
.plan-points { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.plan-points li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft, #6b5358); }
.plan-points li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 7px; height: 4px; border-left: 1.6px solid var(--maroon, #762337); border-bottom: 1.6px solid var(--maroon, #762337); transform: rotate(-45deg); }
.buy-now { font-size: 16px; }
.buy-try-btn.btn-ghost { font-size: 14.5px; }
@media (max-width: 380px) { .plans { grid-template-columns: 1fr; } }

/* Under Buy now: what happens after paying, then real reviews. */
.buy-promise {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft, #6b5358);
}
.buy-promise li { display: inline-flex; align-items: center; gap: 6px; }
.buy-promise svg { flex: none; color: var(--maroon, #762337); }
.buy-promise a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.buy-promise a:hover { color: var(--maroon, #762337); }
.buy-reviews { display: grid; gap: 10px; margin-top: 6px; }
.buy-review {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(118, 35, 55, .14);
  border-radius: 14px;
  background: rgba(255, 250, 242, .7);
}
.buy-review-stars { font-size: 12px; letter-spacing: 2px; color: #b8893a; }
.buy-review blockquote { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink, #2a1418); }
.buy-review figcaption { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft, #6b5358); }
.buy-review figcaption img, .buy-review-initial {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none;
}
.buy-review-initial { display: grid; place-items: center; background: var(--maroon, #762337); color: #fdf6ea; font-size: 12px; }

/* "See the difference", inside the Guest List plan card, and the popup it
   opens: this design's card drawn as the two links (public/js/plan-diff.js). */
.plan-diff-link {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--maroon, #762337);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.plan-diff-link:hover { color: var(--ink, #2a1418); }

html.plan-diff-open { overflow: hidden; }
.plan-diff {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(30, 12, 16, .62);
  animation: plan-diff-fade .25s ease both;
}
.plan-diff[hidden] { display: none; }
.plan-diff-box {
  position: relative;
  width: min(100%, 680px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: var(--cream, #f8ecd9);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  animation: plan-diff-rise .35s cubic-bezier(.2, .8, .2, 1) both;
}
.plan-diff-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(118, 35, 55, .08);
  color: var(--ink, #2a1418);
  cursor: pointer;
}
.plan-diff-title {
  margin: 0 44px 16px 4px;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.15;
  color: var(--ink, #2a1418);
}
.plan-diff-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-diff-col { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-diff-phone {
  padding: 6px;
  border-radius: 26px;
  background: #1e1417;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7);
}
.plan-diff-col.is-guest .plan-diff-phone { background: var(--maroon, #762337); }
.plan-diff-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 760;
  border-radius: 20px;
  background: #efe7dc;
}
/* Shimmer until the card is in. */
.plan-diff-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) -200% 0 / 200% 100% no-repeat;
  animation: plan-diff-shimmer 1.3s linear infinite;
}
.plan-diff-screen.is-ready::before { display: none; }
.plan-diff-screen iframe {
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .4s ease;
}
.plan-diff-screen.is-ready iframe { opacity: 1; }
.plan-diff-col figcaption { display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }
.plan-diff-col figcaption b { font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 17px; color: var(--ink, #2a1418); }
.plan-diff-col figcaption span { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft, #6b5358); }
.plan-diff-col.is-guest figcaption b { color: var(--maroon, #762337); }
.plan-diff-pick { margin-top: 16px; }

@keyframes plan-diff-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes plan-diff-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes plan-diff-shimmer { to { background-position: 200% 0; } }
@media (min-width: 640px) {
  .plan-diff-box { width: min(100%, 600px); padding: 28px 28px 24px; }
  .plan-diff-phones { gap: 24px; }
  /* Two phones at their full proportions are taller than a laptop screen;
     past this they show a shorter window of the same card instead, so the
     whole comparison and its button fit without scrolling. */
  .plan-diff-screen { max-height: calc(100dvh - 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-diff, .plan-diff-box, .plan-diff-screen::before { animation: none; }
  .plan-diff-screen iframe { transition: none; }
}

/* The buy bar a phone keeps at the foot of the screen once the button has
   scrolled away. */
.buy-sticky {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 9px 9px 16px;
  border-radius: 999px;
  background: rgba(42, 20, 24, .94);
  color: #fff;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6);
  transform: translateY(140%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.buy-sticky-text { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-sticky-text b { color: #f3d8a8; }
.buy-sticky-btn { flex: none; padding: 10px 20px; min-height: 0; border-radius: 999px; background: #f3d8a8; color: #2a1418; font-weight: 600; }
@media (max-width: 899px) {
  .buy-sticky { display: flex; }
  .buy-sticky.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .buy-sticky { transition: none; } }