/* ============ Breezy Mobile — prepaid counter ============ */
:root{
  --ink:#0A0E1A;
  --cobalt:#1B44FF;
  --coral:#0E9E52;            /* retired orange -> deep signal green */
  --signal-deep:#0E9E52;
  --acid:#FFE034;
  --signal:#22DD6E;
  --paper:#FFFFFF;
  --bone:#F1F2F6;
  --muted:#5A6274;
  --line:#0A0E1A;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Chivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --maxw:1180px;
  --shadow:5px 5px 0 var(--ink);
  --shadow-lg:9px 9px 0 var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display); font-weight:800; line-height:.95;
  letter-spacing:-.045em; text-wrap:balance; margin:0;
  font-stretch:112%;
}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:4px solid var(--coral); outline-offset:3px}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:99; background:var(--acid); padding:12px 18px; font-weight:700}

/* ---- utility ---- */
.label{
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.sticker{
  display:inline-block; background:var(--acid); color:var(--ink);
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 13px; border:2.5px solid var(--ink);
  transform:rotate(-2.2deg); box-shadow:3px 3px 0 var(--ink);
}
.mark{background:var(--acid); box-shadow:0 -.12em 0 var(--acid), 0 .06em 0 var(--acid); padding:0 .08em}
.perf{
  height:16px; background-image:radial-gradient(circle at 8px 8px, var(--paper) 5px, transparent 5.5px);
  background-size:16px 16px; background-repeat:repeat-x;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.01em;
  text-decoration:none; padding:15px 28px; border:3px solid var(--ink);
  background:var(--paper); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:var(--shadow-lg)}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn-coral{background:var(--signal); color:var(--ink)}
.btn-acid{background:var(--acid)}
.btn-ink{background:var(--ink); color:var(--paper)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:hover{transform:none} }

/* ---- header ---- */
.site-head{
  position:sticky; top:0; z-index:60; background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--ink);
}
.head-in{display:flex; align-items:center; gap:22px; height:72px}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.04em;
  font-stretch:115%; color:var(--paper);
}
.bars{display:flex; align-items:flex-end; gap:2.5px; height:19px}
.bars i{width:4.5px; background:var(--signal); display:block}
.bars i:nth-child(1){height:30%; opacity:.5} .bars i:nth-child(2){height:52%; opacity:.68}
.bars i:nth-child(3){height:74%; opacity:.84} .bars i:nth-child(4){height:100%}
.nav{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav a{
  font-family:var(--display); font-weight:600; font-size:15px; text-decoration:none;
  color:var(--paper); opacity:.82; padding:4px 0; border-bottom:2.5px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{opacity:1; border-bottom-color:var(--acid)}
.head-cta{padding:10px 18px; font-size:14.5px; box-shadow:3px 3px 0 var(--acid); border-color:var(--paper)}
.head-cta:hover{box-shadow:5px 5px 0 var(--acid)}
@media (max-width:940px){ .nav{display:none} .head-cta{margin-left:auto} }

/* ---- blocks ---- */
.block{padding:88px 0; border-bottom:3px solid var(--ink)}
.block-paper{background:var(--paper)}
.block-bone{background:var(--bone)}
.block-cobalt{background:var(--cobalt); color:var(--paper)}
.block-ink{background:var(--ink); color:var(--paper)}
.block-acid{background:var(--acid)}
.block-coral{background:var(--coral); color:var(--paper)}
.block h2{font-size:clamp(34px,5.6vw,68px); margin:16px 0 18px}
.block-head{max-width:24ch; margin-bottom:46px}
.block-head p{font-size:18.5px; max-width:56ch; opacity:.9}
.block-cobalt .label,.block-ink .label{color:var(--signal)}
.block-acid .label,.block-paper .label,.block-bone .label{color:var(--signal-deep)}
.block-coral .label{color:var(--acid)}

/* ---- hero ---- */
.hero{background:var(--cobalt); color:var(--paper); border-bottom:3px solid var(--ink); padding:74px 0 0}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.hero h1{font-size:clamp(48px,8.4vw,104px); margin:20px 0 24px; font-stretch:118%}
.hero h1 .mark{color:var(--ink)}
.hero-sub{font-size:20px; max-width:50ch; margin-bottom:32px}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px}
.hero-note{margin:26px 0 0; font-family:var(--mono); font-size:13px; letter-spacing:.04em; opacity:.85}
.hero-strip{
  margin-top:60px; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  padding:15px 0; overflow:hidden; white-space:nowrap;
}
.hero-strip span{padding:0 22px}
.hero-strip b{color:var(--acid)}

/* SIM card object */
.simcard{
  background:var(--acid); color:var(--ink); border:3px solid var(--ink);
  box-shadow:var(--shadow-lg); padding:28px 26px 24px; position:relative;
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.simcard .chip{
  width:46px; height:34px; border:3px solid var(--ink); background:var(--paper);
  margin-bottom:20px; position:relative;
}
.simcard .chip::after{content:""; position:absolute; inset:8px 0; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink)}
.simcard h3{font-size:30px; margin-bottom:8px}
.simcard .mono{font-family:var(--mono); font-size:13px; letter-spacing:.06em}
.simcard ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
.simcard li{display:flex; gap:9px; font-size:15px; align-items:flex-start}
.simcard li b{font-family:var(--mono); flex:none}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:38px} .hero{padding-top:52px} }

/* ---- plan cards ---- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.plan{
  background:var(--paper); color:var(--ink); border:3px solid var(--ink);
  box-shadow:var(--shadow); padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.plan:hover{transform:translate(-3px,-3px); box-shadow:var(--shadow-lg)}
.plan.hot{background:var(--acid)}
.plan-name{font-family:var(--display); font-weight:800; font-size:25px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.plan-price{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.04em}
.plan-data{font-family:var(--mono); font-size:13px; padding-bottom:14px; border-bottom:3px solid var(--ink)}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; flex:1}
.plan li{display:flex; gap:9px; font-size:15px}
.plan li b{color:var(--coral); flex:none}
.plan .btn{width:100%}
@media (max-width:940px){ .plans{grid-template-columns:1fr} }

/* ---- carrier tiles ---- */
.carriers{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.carrier{
  background:var(--paper); color:var(--ink); border:3px solid var(--ink); padding:16px 16px 14px;
  text-decoration:none; display:flex; flex-direction:column; gap:4px;
  box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
}
.carrier:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--acid)}
.carrier b{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.02em}
.carrier span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; opacity:.7}
@media (max-width:940px){ .carriers{grid-template-columns:repeat(2,1fr)} }

/* ---- steps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.step{border-top:5px solid var(--ink); padding-top:18px}
.block-ink .step,.block-cobalt .step{border-top-color:var(--acid)}
.step .n{font-family:var(--mono); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.04em}
.block-ink .step .n,.block-cobalt .step .n{color:var(--acid)}
.step h3{font-size:23px; margin:12px 0 8px}
.step p{font-size:15.5px; opacity:.9}
@media (max-width:860px){ .steps{grid-template-columns:1fr; gap:22px} }

/* ---- commitments ---- */
.nots{display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px}
.not{display:flex; gap:15px; padding:19px 0; border-bottom:3px solid var(--ink)}
.not .x{font-family:var(--mono); font-weight:700; font-size:19px; flex:none; color:var(--coral)}
.block-ink .not{border-bottom-color:rgba(255,255,255,.22)}
.not h3{font-family:var(--body); font-size:17px; font-weight:900; margin-bottom:3px; letter-spacing:0}
.not p{font-size:15px; opacity:.85}
@media (max-width:860px){ .nots{grid-template-columns:1fr} }

/* ---- faq ---- */
.faq{max-width:80ch}
details{border-bottom:3px solid var(--ink)}
summary{
  cursor:pointer; list-style:none; padding:21px 0; font-family:var(--display);
  font-weight:700; font-size:20px; letter-spacing:-.02em;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); color:var(--coral); font-size:26px; flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 0 22px; max-width:66ch; opacity:.9}

/* ---- forms ---- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.field label{font-family:var(--display); font-weight:700; font-size:15px}
.field input,.field select{
  font-family:var(--body); font-size:16px; padding:14px 15px;
  border:3px solid var(--ink); background:var(--paper); color:var(--ink);
}
.field .hint{font-family:var(--mono); font-size:12px; opacity:.7}
.card{background:var(--paper); color:var(--ink); border:3px solid var(--ink); box-shadow:var(--shadow-lg); padding:28px}
.amounts{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.amt-btn{
  font-family:var(--mono); font-weight:700; font-size:19px; padding:16px 8px;
  border:3px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer;
}
.amt-btn:hover{background:var(--bone)}
.amt-btn[aria-pressed="true"]{background:var(--coral); color:var(--paper)}
.summary dl{display:grid; grid-template-columns:1fr auto; gap:12px 16px; margin:0 0 18px}
.summary dt{font-size:15px; opacity:.8}
.summary dd{margin:0; font-family:var(--mono); font-weight:700; text-align:right}
.summary .total{border-top:3px solid var(--ink); padding-top:15px; font-size:20px}
.notice{background:var(--acid); border:3px solid var(--ink); padding:14px 16px; font-size:14.5px; margin-top:18px}

/* ---- footer ---- */
.site-foot{background:var(--ink); color:var(--paper); padding:52px 0 62px}
.foot-in{display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center}
.foot-in a{font-family:var(--display); font-weight:600; text-decoration:none; opacity:.8; font-size:15px}
.foot-in a:hover{opacity:1; color:var(--acid)}
.foot-legal{
  width:100%; margin-top:26px; padding-top:24px; border-top:2px solid rgba(255,255,255,.2);
  font-size:13.5px; line-height:1.6; max-width:82ch; opacity:.62;
}

@media (max-width:940px){ .refill-grid{grid-template-columns:1fr !important} .refill-grid .summary{position:static !important} }

/* ============ v2: break the rhythm ============ */

/* full-bleed marquee that actually moves */
.marquee{overflow:hidden; white-space:nowrap; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--acid); color:var(--ink)}
.marquee-track{display:inline-block; animation:slide 26s linear infinite; font-family:var(--display); font-weight:800; font-size:clamp(26px,3.6vw,46px); letter-spacing:-.03em; padding:14px 0; font-stretch:112%}
.marquee-track span{padding:0 26px}
.marquee-track .dot{color:var(--coral)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* oversized statement block — no grid, no eyebrow */
.statement{padding:96px 0; border-bottom:3px solid var(--ink)}
.statement p{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:clamp(30px,5.2vw,62px); line-height:1.02; letter-spacing:-.045em;
  max-width:19ch;
}
.statement .after{
  font-family:var(--body); font-weight:400; font-size:18px; line-height:1.55;
  letter-spacing:0; max-width:46ch; margin-top:26px; opacity:.9;
}

/* rate card — dense spec sheet, deliberately unlike a card grid */
.ratecard{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px}
.ratecard th,.ratecard td{border:3px solid var(--ink); padding:14px 16px; text-align:left; vertical-align:top}
.ratecard thead th{background:var(--ink); color:var(--paper); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.ratecard tbody tr:nth-child(odd){background:var(--bone)}
.ratecard .tier{font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em; white-space:nowrap}
.ratecard .price{font-weight:700; white-space:nowrap}
.ratecard .yes{color:var(--coral); font-weight:700}
.ratecard-wrap{overflow-x:auto; border:0}
.ratecard-note{font-family:var(--mono); font-size:12.5px; margin-top:14px; opacity:.75}

/* carrier wall — dense sign, not a tidy grid */
.wall{display:flex; flex-wrap:wrap; gap:9px}
.wall a{
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em;
  text-decoration:none; padding:10px 15px; border:3px solid var(--ink);
  background:var(--paper); color:var(--ink); white-space:nowrap;
}
.wall a:hover{background:var(--coral); color:var(--paper)}
.wall a:nth-child(3n){background:var(--acid)}
.wall a:nth-child(3n):hover{background:var(--coral); color:var(--paper)}

/* numbered rail — horizontal, connected */
.rail{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:3px solid var(--ink)}
.rail>div{padding:26px 24px; border-right:3px solid var(--ink)}
.rail>div:last-child{border-right:0}
.rail .n{font-family:var(--display); font-weight:800; font-size:60px; line-height:.8; letter-spacing:-.06em; color:var(--coral)}
.rail h3{font-size:21px; margin:14px 0 8px}
.rail p{font-size:15px; opacity:.9}
@media (max-width:860px){ .rail{grid-template-columns:1fr} .rail>div{border-right:0; border-bottom:3px solid var(--ink)} .rail>div:last-child{border-bottom:0} }

/* hero: single big statement, card overlaps the fold */
.hero-solo{position:relative}
.hero-solo h1{font-size:clamp(52px,11vw,140px); line-height:.86; margin:22px 0 26px; max-width:14ch}
.sim-float{
  position:absolute; right:0; bottom:-92px; width:310px; transform:rotate(-4deg); z-index:5;
}
@media (max-width:1080px){ .sim-float{position:static; width:100%; max-width:340px; transform:rotate(-2deg); margin-top:40px} }

/* ---- slogan ---- */
.tagline{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(19px,2.3vw,27px); letter-spacing:-.025em; margin:0 0 22px;
}
.tagline em{font-style:normal; background:var(--acid); color:var(--ink); padding:0 .16em}
.brand-lock{display:flex; flex-direction:column; line-height:1}
.brand-lock small{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  opacity:.72; margin-top:3px; font-weight:400;
}
@media (max-width:700px){ .brand-lock small{display:none} }