/* ============================================================
   Nextel, second design.

   The brief was the layout language the three New Zealand carrier sites
   share, in Nextel's own colours: a white page, a thin header, a row of
   icon shortcuts under the hero, flat colour panels, plain rounded cards,
   large unfussy type and pill buttons. No gradients over photographs, no
   washes, no dark slabs. Everything that carries meaning is a solid
   colour or a line.
   ============================================================ */
:root{
  --ink:#0B1E2A;          /* headings and body */
  /* A shade deeper than it was: on the grey the sections now carry, the old
     value measured 4.45:1, which is under the line by a rounding error. */
  --ink-2:#4E6A78;        /* secondary copy */
  /* Measured, not eyeballed: the old value was 3.25:1 on white and this is
     the colour every small label on the site uses, so it failed on every
     page at once. 4.7:1 on the palest panel it ever sits on. */
  --ink-3:#566F7D;        /* labels */
  --line:#E3E9ED;
  --line-2:#EDF2F5;
  --green:#2A8128;        /* buttons: white on this clears 4.5:1 */
  --green-ink:#1C6B24;    /* green type on white */
  --green-soft:#EFF7F1;   /* tint panels */
  --green-line:#CFE6D4;
  --blue:#1B7FB5;
  --blue-soft:#EEF5FA;
  /* the brand's diagonal, kept for the small round marks in the call flow */
  /* The brand diagonal, deepened for the small round marks: white sat on the
     light green end at 2.4:1. Every stop here clears 4.5:1 with white. */
  --cross:linear-gradient(118deg,#12527A 0%,#176A97 44%,#226B20 100%);
  --wrap:1200px;
  --r:16px;
  --hdr:68px;
  --util:38px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Familjen Grotesk","Public Sans",sans-serif;
  font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
h1{font-size:clamp(34px,4.4vw,56px)}
h2{font-size:clamp(28px,3.3vw,42px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.on-phone{display:none}
/* The one label that survives: a solid tag, not a dash and a word. */
.tag{display:inline-block;background:var(--green-soft);color:var(--green-ink);
  border:1px solid var(--green-line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;letter-spacing:.01em}
.hb-cap{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 24px;border-radius:999px;border:1.5px solid transparent;
  text-align:center;line-height:1.25;
  font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn-pri{background:var(--green);color:#fff}
.btn-pri:hover{background:#226B20}
.btn-line{background:#fff;color:var(--ink);border-color:#C6D2D9}
.btn-line:hover{border-color:var(--ink);background:#F7FAFB}
.btn-sm{min-height:40px;padding:8px 18px;font-size:14.5px}
.btn-wide{width:100%}

/* ---------------------------------------------------------- utility bar */
.util{height:var(--util);background:#0B1E2A;color:#CFDDE5;font-size:13.5px}
.util .wrap{display:flex;align-items:center;gap:0;height:100%}
.util-tabs{display:flex;height:100%}
.util-tabs a{display:flex;align-items:center;padding:0 16px;text-decoration:none;
  color:#CFDDE5;font-weight:600}
.util-tabs a[aria-current]{background:#fff;color:var(--ink)}
.util-tabs a:not([aria-current]):hover{color:#fff}
.util-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.util-right a{text-decoration:none;color:#CFDDE5}
.util-right a:hover{color:#fff}

/* ---------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:30px;height:var(--hdr)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font-size:15.5px;font-weight:600}
.nav a{text-decoration:none;color:var(--ink);padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2.5px;
  border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr-ph{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:15px;color:var(--ink)}
.hdr-ph svg{width:17px;height:17px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}

/* the panel a phone opens */
/* The panel covers the whole screen, including the audience strip, and the
   header is pinned over the top of it while it is open. Offsetting the panel
   by the header's height instead only works once the page has scrolled past
   the strip, which is exactly when nobody is opening the menu. */
.panel{display:none;position:fixed;inset:0;background:#fff;z-index:55;
  overflow-y:auto;padding:calc(var(--hdr) + 18px) 24px 40px}
body.menu-open .hdr{position:fixed;top:0;left:0;right:0}
.panel.is-open{display:block}
.panel a{display:block;padding:15px 0;border-bottom:1px solid var(--line-2);
  text-decoration:none;font-weight:600;font-size:18px}
.panel .btn{margin-top:22px}

/* ---------------------------------------------------------- hero */
.hero{background:var(--green-soft);border-bottom:1px solid var(--green-line)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  max-width:1440px;margin:0 auto}
.hero-copy{padding:64px 24px 64px max(24px,calc((100vw - var(--wrap))/2 + 24px));
  display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.eyebrow::before{content:"";width:22px;height:2.5px;border-radius:2px;background:var(--green)}
.hero h1{margin:18px 0 0;max-width:14ch}
.hero-lead{margin-top:16px;font-size:18px;color:var(--ink-2);max-width:40ch}
.hero-pic{position:relative;min-height:420px;background:#DDE9E1}
.hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:78% 50%}

/* the address bar */
.check{margin-top:26px;display:flex;max-width:560px;background:#fff;
  border:1.5px solid #C6D2D9;border-radius:999px;overflow:hidden}
.check:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(42,129,40,.16)}
.check-f{flex:1;display:flex;align-items:center;gap:10px;padding:0 6px 0 18px}
.check-f svg{width:19px;height:19px;color:var(--ink-3);flex:none}
.check input{flex:1;border:0;outline:0;font:inherit;font-size:16px;color:var(--ink);
  background:transparent;padding:14px 0}
.check input::placeholder{color:var(--ink-3)}
.check button{border:0;background:var(--green);color:#fff;font:inherit;font-weight:700;
  padding:0 24px;cursor:pointer;font-size:15.5px}
.check button:hover{background:#226B20}
.check-note{margin-top:12px;font-size:13.5px;color:var(--ink-2);max-width:52ch}

/* ---------------------------------------------------------- shortcuts */
.quick{border-bottom:1px solid var(--line)}
.quick-row{display:grid;grid-template-columns:repeat(6,1fr)}
.quick-row a{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 10px;text-decoration:none;text-align:center;
  font-size:14px;font-weight:600;color:var(--ink);
  border-right:1px solid var(--line-2)}
.quick-row a:last-child{border-right:0}
.quick-row a:hover{background:#F7FAFB}
.quick-row svg{width:26px;height:26px;color:var(--green-ink)}

/* ---------------------------------------------------------- sections */
.sec{padding:76px 0}
/* Deep enough that the cards read as objects sitting on the page rather
   than as outlines drawn on it. The old tint was two per cent off white,
   which is not a background, it is a rounding error. */
/* The grey is for the plan cards and nothing else. Every other section is
   white, so the page has one accent rather than a pattern of bands. */
.sec-tint{background:#fff}
.sec-plans{background:#F3F3F3}
.sec-plans .card{border-color:#E4E4E4;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ---------------------------------------------------------- plan cards */
.cards{display:grid;gap:18px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-5{grid-template-columns:repeat(5,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px 22px;display:flex;flex-direction:column}
.card.is-feat{border-color:var(--green);border-width:1.5px}
.flag{position:absolute;top:-11px;left:22px;background:var(--green);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px}
.card-ico{width:26px;height:26px;color:var(--green-ink);margin-bottom:12px}
.card h3{margin:0}
.card-big{margin-top:16px;font-family:"Familjen Grotesk",sans-serif;font-weight:700;
  font-size:30px;letter-spacing:-.03em;line-height:1}
.card-big span{font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.card-sub{margin-top:6px;font-size:14px;color:var(--ink-2)}
.price{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:7px}
.price b{font-family:"Familjen Grotesk",sans-serif;font-size:34px;letter-spacing:-.03em;
  line-height:1}
.price i{font-style:normal;font-size:14px;color:var(--ink-2);font-weight:600}
.price-was{margin-top:6px;font-size:13px;color:var(--ink-2)}
.price-was s{color:var(--ink-3)}
/* the bundle offer, where one exists, reads as an offer rather than a feature */
.card-bundle{margin:14px 0 0;padding:11px 13px;border-radius:12px;
  background:var(--green-soft);border:1px solid var(--green-line);
  font-size:13.5px;line-height:1.45;color:var(--ink)}
.card-bundle b{color:var(--green-ink)}
.feats{list-style:none;margin:16px 0 20px;padding:0;font-size:14.5px;color:var(--ink-2)}
.feats li{display:flex;gap:9px;padding:4px 0}
.feats svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:4px}
.card .btn{margin-top:auto}

/* ---------------------------------------------------------- split blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-pic{border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;background:#EDF2F5}
.split-pic img{width:100%;height:100%;object-fit:cover}
.split.is-flip .split-pic{order:-1}
.split h2{margin-top:14px}
.split p{margin-top:16px;font-size:17px;color:var(--ink-2)}
.ticks{list-style:none;margin:22px 0 0;padding:0}
.ticks li{display:flex;gap:11px;padding:7px 0;font-size:16px}
.ticks svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:5px}
.split .btn{margin-top:28px}

/* ---------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.step-n{width:34px;height:34px;border-radius:999px;background:var(--green-soft);
  color:var(--green-ink);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;margin-bottom:14px}
.step p{margin-top:10px;font-size:15.5px;color:var(--ink-2)}

/* The old green promo panel used to live here. The class now belongs to the
   promo code box, so the panel's padding and background have gone. */
.ladder{list-style:none;margin:0 auto;padding:0;background:#fff;border-radius:var(--r);
  border:1px solid var(--green-line);overflow:hidden;max-width:760px}
.ladder li{display:flex;align-items:center;gap:14px;padding:16px 20px;
  border-bottom:1px solid var(--line-2)}
.ladder li:last-child{border-bottom:0}
.ladder svg{width:22px;height:22px;color:var(--green-ink);flex:none}
.ladder b{display:block;font-size:15.5px}
.ladder span{display:block;font-size:13.5px;color:var(--ink-2)}
.ladder em{margin-left:auto;font-style:normal;font-family:"Familjen Grotesk",sans-serif;
  font-weight:700;font-size:19px;letter-spacing:-.02em}

/* ---------------------------------------------------------- facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{padding:26px 0;border-top:3px solid var(--green)}
.fact b{display:block;font-family:"Familjen Grotesk",sans-serif;font-size:40px;
  letter-spacing:-.03em;line-height:1}
.fact span{display:block;margin-top:8px;font-weight:700}
.fact p{margin-top:6px;font-size:15px;color:var(--ink-2)}

/* ---------------------------------------------------------- faq */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
/* (both reset just below for the second design) */
.q summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:17.5px}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";position:absolute;right:8px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s ease}
.q[open] summary::after{transform:rotate(-135deg);top:30px}
.q-a{padding:0 0 22px;color:var(--ink-2);max-width:72ch}

/* ---------------------------------------------------------- cta */
.cta{background:var(--ink);color:#fff;padding:64px 0}
.cta h2{color:#fff}
.cta p{margin-top:14px;color:#B7CBD6;font-size:17.5px;max-width:52ch}
.cta-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.cta .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cta .btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ---------------------------------------------------------- footer */
.ft{background:#F7FAFB;border-top:1px solid var(--line);padding:56px 0 30px;font-size:15px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.ft img{height:28px;width:auto}
.ft-about{margin-top:14px;color:var(--ink-2);max-width:34ch}
.ft h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-family:"Public Sans",sans-serif;font-weight:700}
.ft ul{list-style:none;margin:14px 0 0;padding:0}
.ft li{padding:5px 0}
.ft a{text-decoration:none;color:var(--ink-2)}
.ft a:hover{color:var(--ink)}
.ft-btm{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--ink-3);font-size:13.5px}

/* ---------------------------------------------------------- narrower */
@media(max-width:1080px){
  .cards-5{grid-template-columns:repeat(3,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .cards-2{grid-template-columns:1fr}
  .quick-row{grid-template-columns:repeat(3,1fr)}
  .quick-row a:nth-child(3){border-right:0}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  /* the switch button comes back inside the menu: at phone width it wrapped
     onto two lines and pushed the logo and the menu button together */
  .hdr-end > .btn{display:none}
  .hdr-ph{width:44px;padding:0;justify-content:center;border:1px solid var(--line);
    border-radius:12px;height:44px}
  .hdr-ph span{display:none}
  .hdr-ph svg{width:20px;height:20px}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:40px 24px 36px;order:2}
  .hero-pic{min-height:0;aspect-ratio:16/10;order:1}
  .split,.promo-grid{grid-template-columns:1fr;gap:28px}
  .split.is-flip .split-pic{order:0}
  .steps,.facts{grid-template-columns:1fr}
  .sec{padding:54px 0}
  .util-right{display:none}
}
@media(max-width:620px){
  .cards-2,.cards-4,.cards-5{grid-template-columns:1fr}
  .quick-row{grid-template-columns:repeat(2,1fr)}
  .quick-row a:nth-child(odd){border-right:1px solid var(--line-2)}
  .quick-row a:nth-child(even){border-right:0}
  .check{flex-direction:column;border-radius:var(--r)}
  .check button{padding:15px 0;width:100%}
  .ft-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   LANDING PAGES
   Same parts as the home page, one size down. The banner is the
   home hero's split at two thirds the height, and everything
   under it is the card, list and panel vocabulary already here.
   ============================================================ */
.hero-sm .hero-copy{padding-top:46px;padding-bottom:46px}
.hero-sm .hero-pic{min-height:340px}
.hero-sm h1{font-size:clamp(30px,3.6vw,44px);max-width:17ch}
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);
  margin-bottom:16px}
.crumb a{color:var(--green-ink);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.pfacts{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:26px}
.pf{display:flex;align-items:baseline;gap:8px}
.pf b{font-family:"Familjen Grotesk",sans-serif;font-size:22px;letter-spacing:-.025em}
.pf span{font-size:14px;color:var(--ink-2);font-weight:600}

/* a grid of plain points, three or four across */
.pts{display:grid;gap:18px}
.pts-2{grid-template-columns:repeat(2,1fr)}
.pts-3{grid-template-columns:repeat(3,1fr)}
.pts-4{grid-template-columns:repeat(4,1fr)}
.pt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.sec-tint .pt{background:#fff}
.pt svg{width:26px;height:26px;color:var(--green-ink);margin-bottom:12px}
.pt h3{margin:0}
.pt p{margin-top:9px;font-size:15.5px;color:var(--ink-2)}

/* a numbered list of steps, one per row */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--line)}
.row-n{width:38px;height:38px;border-radius:999px;background:var(--green-soft);
  color:var(--green-ink);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px}
.row h3{margin:0}
.row p{margin-top:8px;font-size:15.5px;color:var(--ink-2);max-width:62ch}
.row-tag{font-size:13px;font-weight:700;color:var(--ink-2);background:#F2F6F8;
  border-radius:999px;padding:5px 12px;white-space:nowrap}

/* a plain checklist panel */
.cl{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.cl + .cl{margin-top:18px}
.cl h3{margin:0 0 14px}
.cl ul{list-style:none;margin:0;padding:0}
.cl li{display:flex;gap:11px;padding:8px 0;font-size:15.5px;color:var(--ink-2);
  border-top:1px solid var(--line-2)}
.cl li:first-child{border-top:0}
.cl svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:5px}

/* a two column table of plain facts */
.frows{border-top:1px solid var(--line)}
.frow{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:15.5px}
.frow b{font-weight:700}
.frow span{color:var(--ink-2)}
.frow a{color:var(--green-ink);font-weight:600}

/* price rows */
.prow{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.prow b{font-weight:700}
.prow span{color:var(--ink-2);font-size:15.5px}
.prow em{font-style:normal;font-family:"Familjen Grotesk",sans-serif;font-weight:700;
  font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.pnote{margin-top:20px;font-size:15.5px;color:var(--ink-2);max-width:70ch}

/* prose */
.prose{max-width:66ch}
.prose p{font-size:17.5px;color:var(--ink-2)}
.prose p + p{margin-top:16px}

/* the contact form */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.is-wide{grid-column:1 / -1}
.field label{font-size:13.5px;font-weight:700}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);
  border:1.5px solid #C6D2D9;border-radius:10px;padding:11px 13px;background:#fff}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--green);box-shadow:0 0 0 3px rgba(42,129,40,.16)}
.form .btn{margin-top:18px}
.form-note{margin-top:12px;font-size:13.5px;color:var(--ink-2)}

/* the address checker, used again on its own */
.checkpanel{background:var(--green-soft);border:1px solid var(--green-line);
  border-radius:22px;padding:34px}
.checkpanel .check{margin-top:20px}

@media(max-width:900px){
  .pts-3,.pts-4,.pts-2{grid-template-columns:1fr}
  .row{grid-template-columns:38px 1fr;gap:14px}
  .row-tag{grid-column:2;justify-self:start;margin-top:4px}
  .frow,.prow{grid-template-columns:1fr;gap:4px}
  .fgrid{grid-template-columns:1fr}
  .hero-sm .hero-pic{min-height:0;aspect-ratio:16/10}
  .checkpanel{padding:24px 20px}
}

/* ============================================================
   FULL WIDTH PANELS
   The new artwork is built for this: a subject on the right and
   a pale sweep on the left with nothing in it. So the picture
   runs the full width of the screen and the words sit in that
   sweep, in ink rather than on a dark wash. A white veil over
   the left third guarantees the contrast whatever the artwork
   happens to be doing at that point.
   ============================================================ */
.band{position:relative;overflow:hidden;background:#EFF6E4;
  border-bottom:1px solid var(--green-line);display:flex;flex-direction:column}
/* Each band carries both crops as their own element. A relative url() held in
   a custom property resolves against the stylesheet that substitutes it, which
   is one directory down, so the path came out as assets/assets/. */
.band-pic{position:absolute;inset:0;
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat}
.band-pic-m{display:none}
.band-pic::after{content:"";position:absolute;inset:0;
  /* Held to where the words end rather than to a fixed fraction of the
     picture: on a 1920 screen the copy column reaches 46% across, and the
     old curve had already released by then, which put 14px labels on bright
     green at 3.7:1. */
  background:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.84) 26%,
    rgba(255,255,255,.56) 44%,rgba(255,255,255,.14) 56%,rgba(255,255,255,0) 66%)}
.band > .wrap{position:relative;z-index:1;width:100%;
  padding-top:clamp(46px,6vw,92px);padding-bottom:clamp(46px,6vw,92px)}
.band-copy{max-width:min(520px,46%)}
.band-lg{min-height:clamp(440px,37vw,660px);justify-content:center}
.band-sm{min-height:clamp(320px,27vw,460px);justify-content:center}
.band h1{margin:18px 0 0;color:var(--ink)}
.band h2{margin:14px 0 0;color:var(--ink)}
.band p{margin-top:16px;font-size:18px;color:#3A5260}
.band .pf span,.band .check-note{color:#334C5A}
.band .check{margin-top:26px}
.band .pfacts{margin-top:26px}
.band .btn{margin-top:26px}

@media(max-width:980px){
  /* Checked against the three carrier sites at 375px: on a phone none of them
     lays type over a photograph. One NZ and 2degrees put the picture in its own
     block with centred copy under it; Spark runs a full width picture and the
     headline below it on white. The picture and the words never overlap, which
     is why their artwork keeps all its colour and their copy is always
     readable. So this stops overlaying too: the artwork gets its own block with
     nothing on top of it at all, and the words sit under it on white. */
  .band{background:#fff;display:flex;flex-direction:column;min-height:0}
  .band-pic{display:none}
  .band-pic-m{display:block;position:relative;inset:auto;order:1;width:100%;
    /* the portrait's top is empty sweep, so the block is cropped to the part
       with the people in it */
    aspect-ratio:9/11;background-size:cover;background-position:50% 100%;
    background-repeat:no-repeat}
  .band-pic-m::after{display:none}
  .band-lg,.band-sm{min-height:0}
  .band > .wrap{order:2;padding-top:28px;padding-bottom:32px}
  .band-copy{max-width:none}
  .on-wide{display:none}
  .on-phone{display:inline}
  /* The type, set the way the three carrier sites set theirs at 375px:
     centred, a headline around 34px with tight leading, and a body noticeably
     larger and more loosely led than a desktop body. Measured off their own
     pages: 2degrees runs a 26px headline over 17px copy at 24px leading, and
     Spark a 34px headline over 19px copy at 28px. Two of the three centre it;
     the third is Spark, whose layout this is, so the centring is the part I
     had not taken. */
  .band-copy{text-align:center}
  .band .eyebrow{justify-content:center;color:var(--green-ink);font-size:12px}
  .band h1{font-size:clamp(30px,8.6vw,36px);line-height:1.06;margin-top:14px}
  .band p{font-size:18.5px;line-height:1.5;color:var(--ink-2);margin-top:14px;
    margin-left:auto;margin-right:auto;max-width:34ch}
  .band .crumb{justify-content:center;color:var(--ink-2)}
  .band .crumb a{color:var(--green-ink);text-decoration:none}
  .band .pf span,.band .check-note{color:var(--ink-2)}
  .band .check-note{font-size:14.5px;margin-top:12px}
  .band .check{margin-top:22px}
  .band .check button{min-height:50px;font-size:16.5px}
  .band .btn{min-height:50px;font-size:16.5px;padding-left:34px;padding-right:34px}
  .band .pfacts{margin-top:22px;gap:10px 28px;justify-content:center}
}

/* ---------------------------------------------------------- family builder */
.hb{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:22px;overflow:hidden}
.hb-set{padding:28px}
.hb-deal{display:flex;gap:8px;background:#F2F6F8;border-radius:999px;padding:5px;
  margin-bottom:22px}
.hb-deal button{flex:1;border:0;background:transparent;font:inherit;font-weight:700;
  font-size:14.5px;color:var(--ink-2);padding:10px 12px;border-radius:999px;cursor:pointer}
.hb-deal button[aria-selected="true"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 3px rgba(11,30,42,.12)}
.hb-row{display:flex;align-items:center;gap:18px;padding:16px 0;
  border-top:1px solid var(--line-2)}
.hb-row:first-of-type{border-top:0}
.hb-row.is-off{opacity:.45}
.hb-lab{flex:1}
.hb-lab b{display:block;font-size:16px}
.hb-lab span{display:block;font-size:13.5px;color:var(--ink-2)}
.hb-step{display:flex;align-items:center;gap:4px;border:1.5px solid #C6D2D9;
  border-radius:999px;padding:3px}
.hb-step button{width:36px;height:36px;border:0;border-radius:999px;background:#F2F6F8;
  color:var(--ink);font:inherit;font-size:19px;font-weight:700;cursor:pointer;line-height:1}
.hb-step button:hover{background:var(--green-soft);color:var(--green-ink)}
.hb-step output{min-width:34px;text-align:center;font-family:"Familjen Grotesk",sans-serif;
  font-weight:700;font-size:19px}
.hb-sw{position:relative;display:inline-flex;flex:none}
/* the input sits on top of its own track rather than under it, so a click
   anywhere on the switch is a click on the control itself */
.hb-sw input{position:absolute;inset:0;z-index:1;opacity:0;width:52px;height:30px;
  margin:0;cursor:pointer}
.hb-sw span{width:52px;height:30px;border-radius:999px;background:#C6D2D9;position:relative;
  transition:background .16s ease}
.hb-sw span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:999px;background:#fff;transition:transform .16s ease}
.hb-sw input:checked + span{background:var(--green)}
.hb-sw input:checked + span::after{transform:translateX(22px)}
.hb-sw input:focus-visible + span{outline:2px solid var(--green-ink);outline-offset:2px}
.hb-out{background:var(--green-soft);border-left:1px solid var(--green-line);padding:28px}
.hb-total{display:flex;align-items:baseline;gap:9px;margin-top:12px}
.hb-total b{font-family:"Familjen Grotesk",sans-serif;font-size:52px;letter-spacing:-.035em;
  line-height:1}
.hb-total i{font-style:normal;font-size:15px;color:var(--ink-2);font-weight:600}
.hb-lines{list-style:none;margin:20px 0 22px;padding:0}
.hb-lines li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-top:1px solid var(--green-line);font-size:14.5px;color:var(--ink-2)}
.hb-lines li:first-child{border-top:0}
.hb-lines em{font-style:normal;font-weight:700;color:var(--ink)}
.hb-note{margin-top:14px;font-size:13px;color:var(--ink-2)}
@media(max-width:900px){
  .hb{grid-template-columns:1fr}
  .hb-out{border-left:0;border-top:1px solid var(--green-line)}
  .hb-set,.hb-out{padding:22px}
}

/* ------------------------------------------- what "Endless" means panel */
.note-panel{margin-top:26px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--green);border-radius:var(--r);padding:22px 24px}
.sec-plans .note-panel{border-color:#DCDCDC;border-left-color:var(--green);
  box-shadow:0 1px 3px rgba(0,0,0,.07)}
.note-panel h3{margin:0 0 10px;font-size:19px}
.note-panel p{margin:0 0 10px;font-size:15.5px;line-height:1.6;color:var(--ink-2);
  max-width:72ch}
.note-panel p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- the modem */
.promo-modem{position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;min-height:330px;display:flex}
.promo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 50%}
.promo-modem::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 36%,rgba(255,255,255,0) 64%)}
.promo-in{position:relative;z-index:1;align-self:center;padding:40px 44px;max-width:56%}
.promo-in h3{margin:0;font-size:29px;line-height:1.14}
.promo-in p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.promo-in b{color:var(--ink)}
.modem-spec{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;padding:24px 26px}
.modem-h{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.modem-specs{margin:12px 0 0;font-size:14.5px;columns:2;column-gap:40px}
.modem-specs li{padding:4px 0;break-inside:avoid}

@media(max-width:900px){
  .promo-modem{display:block;min-height:0}
  .promo-bg{position:static;height:190px;object-position:68% 50%}
  .promo-modem::after{display:none}
  .promo-in{max-width:none;padding:24px}
  .promo-in h3{font-size:24px}
  .modem-specs{columns:1}
}

/* A question is a plain white card that lights up green when you reach for it. */
.faq,.q{border:0}
.q{position:relative;margin-bottom:14px;border-radius:var(--r);overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,30,42,.05);
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease,
    box-shadow .16s ease}
.q summary{padding:26px 64px 26px 30px;color:var(--ink)}
.q summary::after{right:30px;top:32px;border-color:var(--ink-3)}
.q[open] summary::after{top:36px}
.q-a{padding:0 30px 26px;color:var(--ink-2)}
.q:hover:not([open]){transform:scale(1.012);background:#1B5E34;border-color:#1B5E34;
  box-shadow:0 0 0 4px rgba(42,129,40,.18), 0 12px 28px rgba(27,94,52,.3)}
.q:hover:not([open]) summary{color:#fff}
.q:hover:not([open]) summary::after{border-color:#fff}
.q[open]{border-color:var(--green-line)}
.q[open] summary::after{border-color:var(--green-ink)}
@media(prefers-reduced-motion:reduce){.q{transition:none}.q:hover{transform:none}}

/* the business pricing table lines up column by column */
.prows-fixed .prow{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 170px}
.prows-fixed .prow em{text-align:right}
.sec-head{max-width:46ch;margin-bottom:38px}
.sec-head h2{margin-top:0}
.sec-head p{margin-top:16px;font-size:17.5px;color:var(--ink-2)}

/* ======================================================= the order cart */
.cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:999px;
  color:var(--ink);cursor:pointer;flex:none}
.cart-btn:hover{border-color:var(--green);color:var(--green-ink)}
.cart-btn svg{width:21px;height:21px}
.cart-count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
body.cart-open{overflow:hidden}
.cart-veil{position:fixed;inset:0;z-index:60;background:rgba(11,30,42,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cart-dw{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(420px,100%);
  background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column}
.cart-hd{display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--line)}
.cart-hd h2{margin:0;font-size:22px}
.cart-x{width:38px;height:38px;border:1px solid var(--line);background:#fff;
  border-radius:999px;cursor:pointer;color:var(--ink);display:flex;align-items:center;
  justify-content:center}
.cart-x svg{width:17px;height:17px}
.cart-body{flex:1;overflow:auto;padding:8px 24px}
.cart-empty{color:var(--ink-2);font-size:15.5px;padding:24px 0}
.cart-ft{border-top:1px solid var(--line);padding:20px 24px 24px}
.cart-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15.5px}
.cart-sum b{font-family:"Familjen Grotesk",sans-serif;font-size:26px;letter-spacing:-.03em}
.cart-note{margin:10px 0 16px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.cline{display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding:18px 0;
  border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline-t b{display:block;font-size:16px}
.cline-t span{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.cline-q{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;align-self:start}
.cline-q button{width:32px;height:32px;border:0;background:#fff;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink)}
.cline-q button:hover{background:var(--green-soft);color:var(--green-ink)}
.cline-q b{min-width:22px;text-align:center;font-size:15px}
.cline-p{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  font-weight:700}
.cline-p i{font-style:normal;font-weight:600;font-size:13px;color:var(--ink-2);
  margin-left:4px}
.cline-x{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600;
  font-size:13.5px;color:var(--ink-3);text-decoration:underline}
.cline-x:hover{color:var(--green-ink)}

/* ---------------------------------------------------------- the picker */
.picker{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:8px 8px 20px;margin-bottom:34px}
.ptabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding:6px 8px 0}
.ptab{border:0;background:none;padding:12px 14px;font:inherit;font-weight:700;
  font-size:15.5px;color:var(--ink-2);cursor:pointer;border-bottom:3px solid transparent}
.ptab.is-on{color:var(--ink);border-bottom-color:var(--green)}
.ppane{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 12px 0}
.ppane.is-off{display:none}
.ppick{display:block;text-align:left;border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:15px 16px;cursor:pointer;font:inherit}
.ppick:hover{border-color:var(--green);background:var(--green-soft)}
.ppick b{display:block;font-size:16px}
.ppick span{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.ppick em{display:block;margin-top:8px;font-style:normal;font-weight:700;
  font-family:"Familjen Grotesk",sans-serif;font-size:20px;letter-spacing:-.02em}
.ppick em span{display:inline;margin:0;font-family:inherit;font-size:13px;font-weight:600}
.ppick.is-in{border-color:var(--green);background:var(--green-soft)}
.ppick-in{display:block;margin-top:9px;font-style:normal;font-size:13px;font-weight:700;
  color:var(--green-ink)}
.picker-note{margin:16px 12px 0;font-size:14.5px;color:var(--ink-2)}

/* ------------------------------------------------------------ the form */
.oform{max-width:860px;counter-reset:ofs}
.ofs{counter-increment:ofs}
.ofs h3 i::before{content:counter(ofs)}
.ofs{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:26px 28px;margin-bottom:16px}
.ofs h3{margin:0 0 18px;font-size:20px;display:flex;align-items:center;gap:12px}
.ofs h3 i{font-style:normal;width:30px;height:30px;border-radius:999px;flex:none;
  background:var(--green);color:#fff;font-size:15px;display:flex;align-items:center;
  justify-content:center}
.ofs-note{margin:14px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.ofs-note a{color:var(--green-ink);font-weight:600}
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:block}
.fld > span{display:block;font-size:14.5px;font-weight:600;margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line-2);
  border-radius:11px;padding:13px 14px;font:inherit;font-size:15.5px;color:var(--ink);
  background:#fff}
.fld textarea{resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--green);
  outline-offset:1px;border-color:var(--green)}
.fld em{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--ink-2)}
.opick{border:0;padding:0;margin:20px 0 0}
.opick legend{padding:0;font-size:14.5px;font-weight:600;margin-bottom:9px}
.opt{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);
  border-radius:11px;padding:12px 16px;margin:0 10px 10px 0;cursor:pointer;font-size:15.5px}
.opt:hover{border-color:var(--green)}
.opt input{accent-color:var(--green);width:17px;height:17px}
.simhelp{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.simhelp summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:15px}
.simhelp-in{padding:0 18px 16px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.simhelp-in p{margin:0 0 9px}
.simhelp-in b{color:var(--ink)}
.ofile{position:relative;display:flex;align-items:center;gap:13px;
  border:1px dashed var(--line-2);border-radius:12px;padding:17px 18px;cursor:pointer;
  font-size:15.5px;margin-top:16px;background:#fff}
.ofile:hover{border-color:var(--green);background:var(--green-soft)}
.ofile:focus-within{outline:2px solid var(--green);outline-offset:1px}
.ofile input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ofile svg{width:20px;height:20px;color:var(--green-ink);flex:none}
.ofile b{font-weight:700}
.ofile em{font-style:normal;font-size:13.5px;color:var(--ink-2);margin-left:auto}
.ocheck{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.55;
  margin-bottom:20px}
.ocheck input{accent-color:var(--green);width:19px;height:19px;flex:none;margin-top:2px}
.obtn{max-width:320px}
.ocart .cline:first-child{padding-top:0}
.odone{border:1px solid var(--green-line);background:var(--green-soft);
  border-radius:var(--r);padding:26px 28px;margin-top:16px}
.odone h3{margin:0 0 10px;font-size:21px}
.odone p{margin:0 0 14px;font-size:15.5px;color:var(--ink-2);line-height:1.6}
.osum{margin:14px 0 0;padding:16px 18px;background:#fff;border:1px solid var(--line);
  border-radius:12px;font-size:13px;line-height:1.6;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);overflow:auto}

@media(max-width:860px){
  .ppane{grid-template-columns:1fr 1fr}
  .ogrid{grid-template-columns:1fr}
  .ofs{padding:22px 20px}
  .obtn{max-width:none}
}
@media(max-width:620px){
  .ppane{grid-template-columns:1fr}
  .ptabs{overflow:auto}
  .cart-dw{width:100%}
}
/* hidden has to beat the layout display values above it */
[hidden]{display:none!important}

/* ---------------------------------------------- the cart, in motion */
.hdr-end{position:relative}
.cart-btn.is-bump{animation:cart-bump .42s ease}
@keyframes cart-bump{
  0%{transform:scale(1)} 35%{transform:scale(1.16)} 62%{transform:scale(.95)}
  100%{transform:scale(1)}}
.cart-pop{position:absolute;top:calc(100% + 12px);right:0;z-index:40;width:290px;
  display:flex;align-items:center;gap:12px;padding:14px 15px;background:#fff;
  border:1px solid var(--green-line);border-radius:14px;
  box-shadow:0 14px 34px rgba(11,30,42,.16);
  opacity:0;transform:translateY(-8px) scale(.97);
  transition:opacity .2s ease, transform .2s cubic-bezier(.22,.61,.36,1)}
.cart-pop.is-on{opacity:1;transform:none}
.cart-pop::before{content:"";position:absolute;top:-7px;right:26px;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--green-line);
  border-top:1px solid var(--green-line);transform:rotate(45deg)}
.cart-pop > svg{width:20px;height:20px;color:#fff;background:var(--green);
  border-radius:999px;padding:4px;flex:none}
.cart-pop b{display:block;font-size:14.5px;line-height:1.25}
.cart-pop span{display:block;font-size:13px;color:var(--ink-2)}
.cart-pop button{margin-left:auto;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;font-size:13.5px;
  cursor:pointer;color:var(--green-ink)}
.cart-pop button:hover{border-color:var(--green);background:var(--green-soft)}
.cart-veil{opacity:0;transition:opacity .26s ease}
.cart-veil.is-on{opacity:1}
.cart-dw{transform:translateX(100%);box-shadow:-18px 0 44px rgba(11,30,42,.14);
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.cart-dw.is-on{transform:none}
.cline{animation:cline-in .22s ease both}
@keyframes cline-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:620px){.cart-pop{width:min(290px,calc(100vw - 32px))}}
@media(prefers-reduced-motion:reduce){
  .cart-pop,.cart-veil,.cart-dw,.cline{transition:none;animation:none}
  .cart-dw{transform:none}.cart-btn.is-bump{animation:none}}

/* the nudge from the family deals down to the builder */
.jump{margin-top:34px;text-align:center}
.jump .btn{display:inline-flex;align-items:center;gap:10px}
.jump .btn svg{width:18px;height:18px;animation:jump-n 1.8s ease-in-out infinite}
@keyframes jump-n{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.jump p{margin:12px 0 0;font-size:14.5px;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.jump .btn svg{animation:none}}
/* the robot trap: off the page, out of the tab order, never read aloud */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------- the address suggestions */
.check{position:relative}
.ac{position:fixed;z-index:90;margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(11,30,42,.16);max-height:300px;overflow:auto}
.ac li{padding:11px 13px;border-radius:10px;font-size:15.5px;color:var(--ink);cursor:pointer}
.ac li:hover,.ac li.is-on{background:var(--green-soft);color:var(--green-ink)}

.avail{display:flex;gap:16px;align-items:flex-start;margin-top:18px;padding:18px 20px;
  background:#fff;border:1px solid var(--green-line);border-radius:var(--r);
  max-width:560px;opacity:0;transform:translateY(8px);
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1)}
.avail.is-on{opacity:1;transform:none}
.avail b{display:block;font-size:17px}
.avail span{display:block;margin-top:3px;font-size:15px;font-weight:600;color:var(--ink-2)}
.avail em{display:block;margin-top:7px;font-style:normal;font-size:14px;color:var(--ink-2);
  line-height:1.5}
.avail-tick{width:40px;height:40px;flex:none}
.avail-tick circle{fill:none;stroke:var(--green);stroke-width:3;
  stroke-dasharray:152;stroke-dashoffset:152}
.avail-tick path{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36}
.avail.is-on .avail-tick circle{animation:tick-ring .5s ease forwards}
.avail.is-on .avail-tick path{animation:tick-mark .34s ease .38s forwards}
@keyframes tick-ring{to{stroke-dashoffset:0}}
@keyframes tick-mark{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .avail{transition:none;opacity:1;transform:none}
  .avail-tick circle,.avail-tick path{stroke-dashoffset:0;animation:none}}
.ac li.ac-busy{color:var(--ink-2);cursor:default;font-size:14.5px}
.ac li.ac-busy:hover{background:none;color:var(--ink-2)}

/* ------------------------------- one row per number, one per connection */
.lines{display:grid;gap:14px;margin-top:4px}
.line{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.line-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.line-h > b{font-size:16px}
.line-tag{font-size:14px;font-weight:600;color:var(--green-ink);background:var(--green-soft);
  border:1px solid var(--green-line);border-radius:999px;padding:5px 12px}
.line-plan{margin-left:auto;display:flex;align-items:center;gap:10px}
.line-plan > span{margin:0;white-space:nowrap;font-size:13.5px;color:var(--ink-2)}
.line-plan select{padding:9px 12px;font-size:14.5px;min-width:190px}
.line .ocheck{margin:14px 0 0;font-size:14.5px}
.line .opick{margin-top:14px}
.line .opick legend{font-size:13.5px}
.line .opt{padding:10px 14px;font-size:14.5px;margin-bottom:8px}
.line-id{margin-top:14px}
@media(max-width:620px){
  .line{padding:16px}
  .line-plan{margin-left:0;width:100%;flex-direction:column;align-items:flex-start;gap:6px}
  .line-plan select{width:100%}
}

/* ------------------------------------------------ the legal pages */
.lead-sec{padding:46px 0 10px}
.crumb{font-size:14px;color:var(--ink-3);margin-bottom:18px}
.crumb a{color:var(--green-ink);font-weight:600;text-decoration:none}
.crumb span{margin:0 8px}
.lead-h{margin:0;font-size:clamp(32px,4.4vw,46px);line-height:1.04;max-width:18ch}
.lead-p{margin:16px 0 0;font-size:18px;color:var(--ink-2);max-width:60ch}
.lead-meta{margin:14px 0 0;font-size:14px;color:var(--ink-3)}
.legal{padding-top:26px}
.clause{max-width:72ch;padding:26px 0;border-top:1px solid var(--line)}
.clause:first-child{border-top:0}
.clause h2{margin:0 0 14px;font-size:21px;display:flex;align-items:baseline;gap:12px}
.clause h2 i{font-style:normal;font-size:14px;font-weight:700;color:var(--green-ink);
  min-width:22px}
.clause p{margin:0 0 13px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.clause p:last-child{margin-bottom:0}
.clause b{color:var(--ink)}
.clause a{color:var(--green-ink);font-weight:600}
.legal-list{margin:0 0 13px;padding-left:20px;font-size:16px;line-height:1.65;
  color:var(--ink-2)}
.legal-list li{padding:3px 0}
.tbc{background:#FFF3C4;color:#5C4600;border-radius:5px;padding:1px 6px;font-size:14px;
  font-weight:600}
.ft-h2{margin-top:22px}
.fld-fix{color:var(--green-ink)!important;font-weight:600}

/* ------------------------------------------------- the thank you page */
.thanks{padding:72px 0 86px}
.thanks-in{max-width:620px}
.thanks-tick{width:62px;height:62px;margin-bottom:22px}
.thanks-tick circle{fill:none;stroke:var(--green);stroke-width:3;
  stroke-dasharray:152;stroke-dashoffset:152;animation:tick-ring .55s ease .1s forwards}
.thanks-tick path{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;
  animation:tick-mark .36s ease .5s forwards}
.thanks h1{margin:0;font-size:clamp(30px,4vw,42px);line-height:1.06}
.thanks-lead{margin:18px 0 0;font-size:18px;line-height:1.6;color:var(--ink-2)}
.thanks-steps{margin:30px 0 0;padding:0;list-style:none;counter-reset:ts}
.thanks-steps li{counter-increment:ts;position:relative;padding:0 0 20px 46px;
  font-size:16px;line-height:1.6;color:var(--ink-2)}
.thanks-steps li::before{content:counter(ts);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:999px;background:var(--green-soft);
  border:1px solid var(--green-line);color:var(--green-ink);font-weight:700;
  font-size:14px;display:flex;align-items:center;justify-content:center}
.thanks-steps b{color:var(--ink)}
.thanks-note{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
.thanks-note a{color:var(--green-ink);font-weight:600}
.thanks-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(prefers-reduced-motion:reduce){
  .thanks-tick circle,.thanks-tick path{stroke-dashoffset:0;animation:none}}
.opt-cost{align-items:flex-start;padding:13px 16px}
.opt-cost input{margin-top:2px}
.opt-cost em{display:block;margin-top:3px;font-style:normal;font-size:13px;
  color:var(--ink-2);font-weight:500}
.line-sim{border-color:var(--green-line);background:var(--green-soft)}
.line-sim .opt,.line-sim .fld input{background:#fff}
.line-help{grid-column:1/-1}
.line-help .simhelp{margin-top:0}

/* ------------------------------------------------------ the promo code */
.promo{display:flex;gap:10px;max-width:420px}
.promo input{flex:1;border:1px solid var(--line-2);border-radius:11px;padding:13px 14px;
  font:inherit;font-size:15.5px;text-transform:uppercase;letter-spacing:.04em}
.promo input::placeholder{text-transform:none;letter-spacing:0}
.promo input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.promo .btn{flex:none}
.promo-said{margin-top:12px;font-size:15px;border-radius:11px;padding:12px 14px}
.promo-said.is-ok{background:var(--green-soft);border:1px solid var(--green-line);
  color:var(--green-ink);font-weight:600}
.promo-said.is-no{background:#FDECEA;border:1px solid #F5C6C2;color:#B3261E}
.promo-said.is-wait{background:#F3F3F3;border:1px solid var(--line);color:var(--ink-2)}
.cart-promo{display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 12px;margin-bottom:10px;border-radius:10px;background:var(--green-soft);
  border:1px solid var(--green-line);font-size:14px}
.cart-promo span{font-weight:700;color:var(--green-ink);letter-spacing:.04em}
.cart-promo b{color:var(--green-ink)}

/* --------------------------------------- the order page's two columns */
/* The form on the left, a summary on the right that stays put while the
   page scrolls, so the running total and the discount are always in view. */
.ocols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;
  align-items:start}
.ocols .oform{max-width:none}
.oside{position:sticky;top:96px}
.oside-in{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:22px 22px 20px}
.oside-in h3{font-family:"Familjen Grotesk",sans-serif;font-size:19px;margin:0 0 14px;
  letter-spacing:-.02em}
.oside-lines:not(:empty){border-top:1px solid var(--line-2)}
.oside-lines .sline:last-child{border-bottom:0}
.sline{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line-2)}
.sline b{display:block;font-size:14.5px;font-weight:650;line-height:1.35}
.sline span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.sline em{font-style:normal;font-weight:700;font-size:14.5px;white-space:nowrap}
.oside-empty{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 4px}
.oside-rows{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.oside-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:14px;padding:5px 0}
.oside-row b{font-weight:700;white-space:nowrap}
.oside-row span{color:var(--ink-2)}
.oside-row.is-cut span{color:var(--green-ink);font-weight:700;letter-spacing:.04em}
.oside-row.is-cut b{color:var(--green-ink)}
.oside-row.is-total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.oside-row.is-total span{color:var(--ink);font-weight:650;font-size:15px}
.oside-row.is-total b{font-family:"Familjen Grotesk",sans-serif;font-size:24px;
  letter-spacing:-.03em}
.oside-row.is-once{font-size:13px}
.oside-promo{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.oside-promo-h{display:block;font-size:13px;font-weight:650;margin-bottom:8px}
.oside-promo .promo{max-width:none;gap:8px}
.oside-promo .promo input{padding:10px 12px;font-size:14.5px}
.oside-promo .promo .btn{padding-left:16px;padding-right:16px;font-size:14.5px}
.oside-promo .promo-said{margin-top:10px;font-size:13.5px;padding:10px 12px}
.oside-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.cart-code{margin-bottom:14px}
.cart-code .promo{max-width:none;gap:8px}
.cart-code .promo input{padding:10px 12px;font-size:14.5px}
.cart-code .promo .btn{padding-left:16px;padding-right:16px;font-size:14.5px}
.cart-code .promo-said{margin-top:10px;font-size:13.5px;padding:10px 12px}

@media (max-width:1080px){
  /* Not enough width for a column beside the form, so it moves above it. */
  .ocols{grid-template-columns:1fr;gap:24px}
  .oside{position:static;order:-1}
  .oside-in{padding:18px}
}