/* ============================================================
   Gecko 5.0  .  Plan add-on boxes
   The two notes that sat under the plan cards as running text,
   given a box each so they read as offers rather than as small
   print. Two boxes on desktop, one column on phones. Inside each
   box the copy sits left and the action sits right, which keeps
   the pair short and stops the wide boxes reading as empty.

   No borders. Separation is tone and shadow, the same language
   as the plan cards above.

   Every token carries a fallback, so the block holds its look
   even on a page that does not load the Gecko variable sheet.
   ============================================================ */
.addons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.5vw,20px);
  margin-top:clamp(26px,3vw,36px);
}
.addon{
  background:var(--paper,#FAF8F2);
  border-radius:var(--r-card,14px);
  padding:24px 26px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:stretch;
  gap:22px;
  /* A grid item will not shrink below its content's minimum unless it is
     told it may. Without this the box with the wider button quietly takes
     more than its half of the row and the pair stops being a pair. */
  min-width:0;
  box-shadow:0 1px 3px rgba(24,25,16,.04),0 8px 22px rgba(24,25,16,.07);
}
/* Icon tile and label share a row. Keeps the box short and gives
   the pair the same chip rhythm the rest of the page uses. */
.addon-top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.addon-ic{
  width:36px;height:36px;border-radius:11px;flex:0 0 36px;
  background:var(--ink,#181910);color:var(--fluro,#EBFF00);
  display:grid;place-items:center;
}
.addon-ic svg{width:19px;height:19px;display:block}
/* The labels never wrap. One of them is a word longer than the other,
   and a wrap in one box and not the other pushes that box's copy down
   by half a line, which is exactly the drift this block is trying to
   avoid. */
.addon-top .eyebrow{margin:0;white-space:nowrap}
.addon h3{
  font-size:19.5px;font-weight:700;letter-spacing:-.01em;
  line-height:1.26;margin:0;color:var(--ink,#181910);
}
.addon p{font-size:14.5px;line-height:1.6;color:var(--slate,#68694F);margin:0}
.addon h3 + p{margin-top:7px}
/* Side by side, the two copy columns are the same width but the two
   headings are not the same length, so the right one starts wrapping
   first and drops its copy a line below the left. Reserving two lines
   for the heading and two for the copy in both boxes holds them level.
   Only needed in this layout: stacked, the columns are full width and
   the two lines break together on their own. */
@media (min-width:1320px){
  .addon h3{min-height:calc(2 * 1.26em)}
  .addon h3 + p{min-height:calc(2 * 1.6em)}
}
/* The action column. Right aligned so the two boxes agree on a
   vertical edge and the buttons line up across the pair. */
/* Copy starts at the ceiling, action sits on the floor. With the same
   number of lines in both boxes that puts the last line of copy and the
   two buttons on one line across the pair. */
.addon-copy{align-self:start;min-width:0}
.addon-act{display:flex;flex-direction:column;align-items:flex-end;
  justify-content:flex-end;gap:12px;width:292px}
/* Both action columns are the same width and both buttons fill it. That
   is what makes the two copy columns identical, and identical columns
   are what keeps the line counts, and so the two floors, in step. */
.addon-act .btn{width:100%;justify-content:center;white-space:nowrap}
/* The price reads as a fact, not as a footnote. Figure face for
   the number so it sits in the same family as the plan prices. */
.addon-price{display:flex;align-items:baseline;gap:8px;margin:0}
.addon-price .figure{
  font-size:29px;font-weight:700;line-height:1;
  color:var(--ink,#181910);font-variant-numeric:tabular-nums;
}
.addon-price .addon-unit{
  font-family:var(--ff-mono,'Roboto Mono',ui-monospace,Menlo,monospace);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ash,#858768);
}

/* Laptops. The 1440 layout is the one that was signed off, so it holds
   all the way down: copy left, action right. The only thing that gives
   is the pill, which takes a little less width and a little less air so
   the copy column keeps a readable measure. Measured down to 1150,
   which covers every common laptop. */
@media (min-width:1150px) and (max-width:1319px){
  .addon-act{width:244px}
  .addon-act .btn{padding:14px 20px;font-size:12.5px}
  .addon h3{min-height:calc(2 * 1.26em)}
  .addon h3 + p{min-height:calc(2 * 1.6em)}
}
/* Below this the copy column would be too narrow to hold a readable
   measure beside the button, so the action drops under the copy. Both
   boxes do it at the same width, so they stay in step. */
@media (max-width:1149px){
  .addon{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px}
  .addon-act{width:auto;align-items:flex-start;justify-content:flex-end}
  .addon-act .btn{width:auto}
}
@media (max-width:760px){
  .addons{grid-template-columns:1fr}
  .addon{padding:22px;gap:14px}
  .addon h3{font-size:18.5px}
  .addon-price .figure{font-size:27px}
  /* On a phone measure both lines were ending on a single orphan word.
     This asks the browser to even out the last line where it can, and
     is ignored by the ones that do not know it. */
  .addon h3,.addon h3 + p{text-wrap:pretty}
}
/* Phones. One button per box, full width, so the two boxes share
   an edge and the tap target clears 44px. */
@media (max-width:560px){
  .addon-act{align-self:stretch}
  .addon-act .btn{width:100%;justify-content:center}
}
/* Small phones. The labels do not wrap, so the pill has to give up
   some of its side air or it pushes the page sideways. Measured at
   320px, which is the narrowest screen still in use. */
@media (max-width:400px){
  .addon .btn{padding:14px 18px;font-size:12.5px;
    white-space:normal;text-align:center;line-height:1.35}
}

/* Keep both actions on the floor of their boxes, alongside the copy. */
.addon-act-email,.addon-act-help{display:grid;grid-template-rows:52px;gap:0;align-content:end;justify-items:stretch}
.addon-act-email .addon-price{align-self:center;justify-content:center;white-space:nowrap;line-height:20px}
.addon-act-email .addon-price .figure{line-height:20px}
.addon-act-email .addon-unit{font-size:13px;line-height:20px}

.addon-act-help .btn{box-sizing:border-box;height:52px;font-size:13px;line-height:20px;padding-top:16px;padding-bottom:16px}

@media (min-width:761px){
  .addon-act-email .addon-price{transform:translateY(-3px)}
}
@media (max-width:1149px){
  .addon-act-email{justify-items:start}
}