/* ==========================================================================
   pricing.css — page-only additions for pricing.html (One Light, sandbox)
   Tokens only (var(--…)); no colour literals. Loads after assets/site.css.
   CONTENTS
    1  Hero: instrument grid backdrop, two-column layout, plan card rows
    2  Calculator: layout, receipt title/total, savings line, no-JS note, phone running total
    3  What's included: phone pair (one phone on phones)
    4  Add-on passes
    5  Worked examples table
    6  Billing cards
    7  Narrowest phones: phone-number buttons
   ========================================================================== */

/* ---------------------------------------------------------------- 1 HERO */
.pricing-hero{padding-bottom:clamp(56px, 7vw, 104px)}
.pricing-hero::after{   /* the home hero's faint instrument grid, fading out */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line-hair) 1px, transparent 1px), linear-gradient(90deg, var(--line-hair) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 78% 32%, var(--ink) 0%, transparent 75%);
  mask-image:radial-gradient(70% 60% at 78% 32%, var(--ink) 0%, transparent 75%);
}
.pricing-hero > .wrap{position:relative;z-index:1}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.ph-grid h1{margin-top:16px}
.ph-grid .hero-trust{max-width:600px}
.ph-plan{width:100%;max-width:500px;justify-self:end}
.plan-rows{margin-top:6px}
.addon-row .plan-incl{display:inline-flex;align-items:center;gap:6px}
.addon-row .plan-incl .ic{width:18px;height:18px;stroke-width:2.6;color:var(--go)}
@media (max-width: 1020px){
  .ph-grid{grid-template-columns:1fr}
  .ph-plan{justify-self:start}
}

/* ----------------------------------------------------------- 2 CALCULATOR */
.calc-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px, 5vw, 64px);align-items:start}
.calc-side .section-head{margin-bottom:clamp(24px, 3vw, 36px)}
.calc-receipt{position:-webkit-sticky;position:sticky;top:calc(var(--nav-h) + 24px)}
.receipt-title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--ink-strong)}
.receipt-head .meta{margin-top:2px}
.receipt-total{flex-wrap:wrap;padding:4px 0 6px}
.receipt-total .label{padding-bottom:10px}
.receipt-sum{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.receipt-sum .meta{font-weight:600}
.receipt-row small{display:block;font-size:var(--fs-label);color:var(--ink-3);font-weight:500}
.calc-save{
  display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:var(--r-md);
  font-size:var(--fs-small);font-weight:600;line-height:1.45;color:var(--ink-strong);
  background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.calc-save .ic{width:18px;height:18px;margin-top:1px;color:var(--accent)}
.calc-receipt .btn-row{margin-top:18px}
.calc-receipt .btn-row .btn{flex:1 1 200px}
.calc-nojs{display:none}
.no-js .calc-nojs{display:flex}
.calc .seg{max-width:100%}
.calc .seg button{white-space:nowrap}
/* Founders' rate on: the Tracker switch stays on, reads "Included" and can't be changed (site.js §6) */
.calc .switch:has(input:disabled){cursor:default}
.calc .switch input:disabled + .switch-track{opacity:.6}
@media (max-width: 1020px){
  .calc-layout{grid-template-columns:minmax(0,1fr)}
  .calc-receipt{position:relative;top:auto;max-width:560px}
}
@media (max-width: 460px){
  .calc .seg{width:100%;grid-auto-columns:minmax(0,1fr)}
  .calc .seg button{justify-content:center;padding:0 8px}
}
@media (max-width: 420px){
  .receipt.calc-receipt{padding:22px 18px 18px}
  .calc-receipt .receipt-perf{margin:6px -18px}
  .calc-receipt .receipt-perf::before{left:18px;right:18px}
  .calc-row{padding:14px}
}
@media (max-width: 360px){
  .calc .seg button{white-space:normal;line-height:1.15;text-align:center}
}
/* Running total for phones and tablets. The receipt sits below the controls there (about 1,000 px
   down at 390), so this bar sticks to the bottom of the screen while the controls are in view.
   site.js fills every [data-out] with the same key, so it updates with the receipt. */
.calc-mini{display:none}
@media (max-width: 1020px){
  .calc-mini{
    position:-webkit-sticky;position:sticky;bottom:12px;z-index:5;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px;padding:12px 16px;
    border-radius:var(--r-lg);background:var(--surface-3);box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong);
  }
  .calc-mini .label{margin-right:auto}
  .calc-mini b{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--ink-strong);font-variant-numeric:tabular-nums}
  .calc-mini .meta{font-weight:600}
}
.no-js .calc-mini{display:none}

/* ------------------------------------------------------- 3 WHAT'S INCLUDED */
.incl-visual{display:flex;flex-direction:column;align-items:center;gap:22px}
.incl-devices{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px, 3vw, 28px);width:100%}
.incl-devices .device{flex:1 1 0;min-width:0;max-width:250px;margin:0}
.incl-devices .device-phone{width:calc(100% - 16px);max-width:none}
.incl-devices .device + .device{margin-bottom:clamp(24px, 5vw, 56px)}
.incl-devices .device-cap{margin-top:14px}
/* The base rule img,svg,video,iframe{max-width:100%} clamps the 360 px screen iframe to the frame
   width before site.js scales it, so the app draws at ~60% size. Remove this line once
   .device-screen > iframe in site.css carries max-width:none. */
.incl-devices .device-screen > iframe{max-width:none}
/* Phones: two phones side by side come out ~170 px wide and unreadable. Show the driver app alone. */
@media (max-width: 560px){
  .incl-devices .device + .device{display:none}
  .incl-devices .device{max-width:230px}
}

/* ------------------------------------------------------------- 4 ADD-ONS */
.pass{display:flex;flex-direction:column;height:100%}
.pass-head{display:flex;align-items:center;gap:14px}
.pass-head .icon-well{margin:0}
.pass-head h3{margin-top:4px}
.pass .plan-price{margin-top:20px}
.pass .plan-price .gauge{font-size:clamp(3rem, 2.4rem + 2.4vw, 4.25rem)}
.pass .plan-per{padding-bottom:6px}
.pass .receipt-perf{margin-top:18px;margin-bottom:18px}
.pass .pass-foot{margin-top:auto;padding-top:14px}
/* Line the two passes up row by row (head, price, text, tear line, list, link) */
@supports (grid-template-rows: subgrid){
  .addon-grid > .pass{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .addon-grid > .pass > .pass-foot{align-self:end}
  .addon-grid > .pass > .feature-list{align-content:start}
}

/* ------------------------------------------------------ 5 WORKED EXAMPLES */
.examples-table{min-width:560px;table-layout:fixed}
.examples-table .c-drv{width:19%}
.price-table.examples-table thead th{white-space:normal}
.price-table.examples-table .th-group th{text-align:center;padding-bottom:10px;border-bottom:2px solid var(--line-strong)}
.price-table.examples-table .th-group .th-drivers{text-align:left;vertical-align:bottom;border-bottom:1px solid var(--line-hair)}
.price-table.examples-table .num{text-align:right;white-space:nowrap;vertical-align:top}
/* Column headers may wrap ("Per year, / paid up front") so the table never clips them on tablets */
.price-table.examples-table thead th.num{white-space:normal;vertical-align:bottom;text-wrap:balance}
.examples-table .num b{font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.examples-table .save{display:block;margin-top:2px;font-size:var(--fs-label);font-weight:600;color:var(--ink-3)}
.examples-table .grp{box-shadow:inset 1px 0 0 var(--line-strong)}
.examples-table tbody th{
  font-size:var(--fs-small);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-strong);white-space:nowrap;
}
.examples-table tbody th .meta{display:block;margin-top:2px;font-weight:500}
.examples-table tbody th,.examples-table .th-drivers{
  position:-webkit-sticky;position:sticky;left:0;z-index:1;background:var(--surface-2);
}
.examples-table tbody tr:last-child th,.examples-table tbody tr:last-child td{border-bottom:0}
.examples-note{margin-top:18px}
/* Phones: each garage size becomes its own card (roles in the markup keep it a table for
   screen readers; data-label names each price) */
@media (max-width: 640px){
  .table-scroll.examples-wrap{overflow:visible;background:none;box-shadow:none;border-radius:0}
  .examples-table,.examples-table tbody{display:block;min-width:0;width:100%}
  .examples-table colgroup{display:none}
  .examples-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .examples-table thead tr,.price-table.examples-table thead th{display:block;width:1px;height:1px;overflow:hidden;padding:0;border:0}
  .examples-table tbody{display:grid;gap:12px}
  .examples-table tbody tr{
    display:grid;grid-template-columns:repeat(2, minmax(0,1fr));overflow:hidden;
    border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
  }
  .examples-table tbody th,
  .table-scroll .price-table.examples-table tbody th:first-child{
    grid-column:1 / -1;position:static;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:14px 16px;font-size:var(--fs-body);background:var(--surface-3);border-bottom:1px solid var(--line-hair);
  }
  .examples-table tbody th .meta{margin:0}
  .price-table.examples-table tbody td.num,
  .table-scroll .price-table.examples-table tbody td:last-child{
    display:block;text-align:left;white-space:normal;padding:12px 16px 14px;border-bottom:1px solid var(--line-hair);box-shadow:none;
  }
  .price-table.examples-table tbody td.num:nth-of-type(even){box-shadow:inset 1px 0 0 var(--line-hair)}
  .price-table.examples-table tbody tr td:nth-of-type(n+3){border-bottom:0}
  .examples-table tbody td::before{
    content:attr(data-label);display:block;margin-bottom:4px;
    font-size:var(--fs-label);font-weight:700;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);
  }
}

/* -------------------------------------------------------------- 6 BILLING */
.bill-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.bill-top .icon-well{margin:0}
.bill-card h3{font-size:1.15rem}
.bill-card .body-2{margin-top:8px}

/* ------------------------------------------------ 7 NARROWEST PHONES (≤360) */
/* The 320 px "Call Bob · 509-429-9805" button rule now lives in site.css (max-width: 380px). */