/* ===========================================================
   Government iPhone LLC — Design System
   Palette: white / deep trust blue / operational green
   Type: Space Grotesk (display) + Inter (body) + IBM Plex Mono (data)
   Signature motif: signal bars used as structural dividers,
   ratings, and step markers throughout.
   =========================================================== */

:root{
  --ink:            #10182240;
  --ink-900:        #0F1720;
  --ink-700:        #33404D;
  --ink-500:        #5B6B7A;
  --ink-300:        #A4B2BF;
  --line:           #DCE4EA;
  --paper:          #FFFFFF;
  --sky:            #F2F6FB;
  --sky-100:        #E7EFF8;
  --blue-900:       #0E2E5C;
  --blue-700:       #14448C;
  --blue:           #1B5AAE;
  --blue-100:       #E5EEF9;
  --green-700:      #0E7C56;
  --green:          #13A26E;
  --green-100:      #E3F6EE;
  --amber:          #B8791A;
  --amber-100:      #FBF0DD;
  --radius-s:        6px;
  --radius-m:        12px;
  --radius-l:        20px;
  --shadow-card: 0 1px 2px rgba(15,23,32,.04), 0 8px 24px -12px rgba(15,23,32,.12);
  --max: 1160px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  color:var(--blue-900);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2rem,4.4vw,3.4rem); }
h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--ink-700); }
a{ color:var(--blue-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
ul{ padding-left:1.2em; color:var(--ink-700); }
.mono{ font-family:'IBM Plex Mono',monospace; }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.section{ padding:64px 0; }
.section-tight{ padding:36px 0; }
.section-alt{ background:var(--sky); }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-700); background:var(--green-100);
  padding:5px 10px; border-radius:100px; margin-bottom:14px;
}
.lede{ font-size:1.1rem; color:var(--ink-500); max-width:640px; }

/* ---------- Signature: signal bars ---------- */
.signal{ display:inline-flex; align-items:flex-end; gap:3px; height:16px; }
.signal i{ width:4px; background:var(--green); border-radius:1px; display:block; }
.signal i:nth-child(1){ height:35%; }
.signal i:nth-child(2){ height:55%; }
.signal i:nth-child(3){ height:75%; }
.signal i:nth-child(4){ height:100%; }
.signal.dim i{ background:var(--ink-300); }
.signal-divider{
  display:flex; align-items:flex-end; gap:5px; height:22px; margin:0 0 18px;
}
.signal-divider i{ width:6px; background:var(--blue-100); border-radius:2px; }
.signal-divider i:nth-child(1){ height:30%; }
.signal-divider i:nth-child(2){ height:50%; }
.signal-divider i:nth-child(3){ height:70%; background:var(--green); }
.signal-divider i:nth-child(4){ height:100%; background:var(--blue); }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; color:var(--blue-900); }
.brand:hover{ text-decoration:none; }
.brand-mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(155deg,var(--blue),var(--green)); display:flex; align-items:center; justify-content:center; }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; list-style:none; margin:0; padding:0; gap:2px; }
.main-nav a{ color:var(--ink-700); font-size:.94rem; font-weight:500; padding:10px 12px; border-radius:8px; display:block; }
.main-nav a:hover{ background:var(--sky); text-decoration:none; color:var(--blue-900); }
.has-dropdown{ position:relative; padding-bottom:12px; margin-bottom:-12px; }
.dropdown{
  display:none; position:absolute; top:100%; left:0; margin-top:0; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-card);
  padding:8px; min-width:200px; list-style:none;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:block; }
.dropdown a{ padding:9px 10px; font-size:.9rem; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:1.2rem; line-height:1; cursor:pointer; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.95rem; padding:13px 22px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; transition:.15s ease;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--green-700); }
.btn-secondary{ background:var(--blue-900); color:#fff; }
.btn-secondary:hover{ background:var(--blue-700); }
.btn-outline{ background:var(--paper); color:var(--blue-900); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--blue); background:var(--blue-100); }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 56px; background:
  radial-gradient(1100px 480px at 85% -10%, var(--blue-100), transparent 60%),
  var(--paper);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.badge{
  display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--ink-500);
  background:var(--sky); border:1px solid var(--line); padding:6px 12px; border-radius:100px;
}
.hero-panel{
  background:var(--blue-900); border-radius:var(--radius-l); padding:28px;
  color:#fff; box-shadow:var(--shadow-card);
}
.hero-panel h3{ color:#fff; }
.hero-panel .signal-divider i:nth-child(1),.hero-panel .signal-divider i:nth-child(2){ background:rgba(255,255,255,.25); }
.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.stat{ background:rgba(255,255,255,.08); border-radius:var(--radius-m); padding:14px; }
.stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.3rem; }
.stat span{ font-size:.72rem; color:rgba(255,255,255,.7); }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; box-shadow:var(--shadow-card);
}
.card h3{ margin-bottom:8px; }
.card-flat{ background:var(--sky); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; }
.icon-tile{
  width:44px; height:44px; border-radius:11px; background:var(--green-100); color:var(--green-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.1rem;
}

/* ---------- Device / plan cards ---------- */
.device-card{ display:flex; flex-direction:column; }
.device-media{
  aspect-ratio:4/3; background:linear-gradient(155deg,var(--sky-100),var(--sky)); border-radius:var(--radius-m);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; border:1px solid var(--line);
}
.device-media svg{ width:52%; }
.price-row{ display:flex; align-items:baseline; gap:8px; margin:10px 0; }
.price{ font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; color:var(--blue-900); }
.price-note{ font-size:.78rem; color:var(--ink-500); }
.tag{
  display:inline-block; font-size:.72rem; font-weight:600; padding:4px 9px; border-radius:100px;
  background:var(--amber-100); color:var(--amber); margin-bottom:10px;
}
.tag-green{ background:var(--green-100); color:var(--green-700); }

/* ---------- Plans table ---------- */
.plans-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.plan-card{ border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; background:var(--paper); display:flex; flex-direction:column; }
.plan-card.featured{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-100); position:relative; }
.plan-card ul{ list-style:none; padding:0; margin:16px 0; flex:1; }
.plan-card li{ padding:7px 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-700); display:flex; gap:8px; }
.plan-card li:first-child{ border-top:none; }
.check{ color:var(--green-700); font-weight:700; }

/* ---------- Steps ---------- */
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.step{ display:flex; gap:16px; align-items:flex-start; }
.step-num{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px; background:var(--blue-900); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700;
}

/* ---------- Table ---------- */
table{ width:100%; border-collapse:collapse; font-size:.92rem; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-700); }
th{ color:var(--blue-900); font-family:'Space Grotesk',sans-serif; font-size:.85rem; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:18px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--blue-900); font-size:1rem;
}
.faq-a{ display:none; padding:0 0 18px; color:var(--ink-700); }
.faq-item.open .faq-a{ display:block; }
.faq-item.open .faq-plus{ transform:rotate(45deg); }
.faq-plus{ transition:.15s; font-size:1.3rem; color:var(--green-700); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:.82rem; color:var(--ink-500); margin-bottom:18px; }
.breadcrumb a{ color:var(--ink-500); }
.breadcrumb span{ margin:0 6px; }

/* ---------- Forms ---------- */
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); padding:32px; box-shadow:var(--shadow-card); }
.form-row{ margin-bottom:18px; }
label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-700); margin-bottom:6px; }
input,select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px; font:inherit; color:var(--ink-900); background:var(--paper);
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.notice{
  background:var(--sky); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:8px;
  padding:14px 16px; font-size:.88rem; color:var(--ink-700); margin:20px 0;
}
.notice-green{ border-left-color:var(--green); }
.notice-amber{ border-left-color:var(--amber); background:var(--amber-100); }

/* ---------- Trust strip ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-500); font-weight:500; }

/* ---------- Byline ---------- */
.byline{
  display:flex; flex-wrap:wrap; gap:18px; font-size:.82rem; color:var(--ink-500);
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:24px 0 32px;
}
.byline b{ color:var(--ink-700); }

/* ---------- Reviews / stars ---------- */
.stars{ color:var(--amber); letter-spacing:2px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--blue-900); color:rgba(255,255,255,.78); padding:56px 0 26px; margin-top:0; }
.site-footer a{ color:rgba(255,255,255,.78); }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; }
.footer-grid h4{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:.88rem; }
.footer-brand p{ color:rgba(255,255,255,.65); font-size:.88rem; max-width:280px; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; color:rgba(255,255,255,.55); }
.disclosure{
  font-size:.78rem; color:rgba(255,255,255,.55); max-width:900px; margin-top:18px; line-height:1.6;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.section-head{ max-width:640px; margin:0 auto 40px; text-align:center; }
.section-head.left{ margin:0 0 36px; text-align:left; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .plans-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  /* ---- Hide desktop nav, show hamburger ---- */
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }

  /* ---- Mobile drawer: slides down when header gets .nav-open ---- */
  .site-header.nav-open .main-nav{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    width:100%;
    background:#fff;
    border-bottom:2px solid var(--line);
    box-shadow:0 12px 32px rgba(15,23,32,.14);
    z-index:999;
    max-height:calc(100vh - 72px);
    overflow-y:auto;
  }

  /* ---- Top-level list becomes a vertical stack ---- */
  .site-header.nav-open .main-nav > ul{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    list-style:none;
    margin:0;
    padding:8px 0;
    gap:0;
  }

  /* ---- Every li takes full width ---- */
  .site-header.nav-open .main-nav > ul > li{
    width:100%;
    display:block;
  }

  /* ---- Nav links: full-width, tall touch targets ---- */
  .site-header.nav-open .main-nav a{
    display:block !important;
    width:100%;
    padding:14px 22px;
    border-radius:0;
    font-size:1rem;
    font-weight:500;
    color:var(--ink-900);
    border-bottom:1px solid var(--line);
    box-sizing:border-box;
  }
  .site-header.nav-open .main-nav a:hover{
    background:var(--sky);
    text-decoration:none;
  }

  /* ---- Dropdown parents: no absolute positioning ---- */
  .site-header.nav-open .has-dropdown{
    position:static;
    padding-bottom:0;
    margin-bottom:0;
  }

  /* ---- Sub-menus: hidden by default, inline when .mob-open ---- */
  .site-header.nav-open .has-dropdown > .dropdown{
    display:none !important;
    position:static;
    box-shadow:none;
    border:none;
    border-radius:0;
    background:var(--sky);
    padding:0;
    min-width:0;
  }
  .site-header.nav-open .has-dropdown.mob-open > .dropdown{
    display:block !important;
  }

  /* ---- Sub-menu links indented ---- */
  .site-header.nav-open .dropdown li{
    display:block;
    width:100%;
  }
  .site-header.nav-open .dropdown a{
    padding:12px 22px 12px 38px !important;
    font-size:.92rem;
    color:var(--blue-700);
    border-bottom:1px solid var(--line);
    background:var(--sky);
  }
  .site-header.nav-open .dropdown a:hover{
    background:var(--blue-100);
  }

  /* ---- Other breakpoint fixes ---- */
  .grid-3,.grid-4,.plans-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

/* ---------- About section (homepage) ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.about-copy p{ font-size:1rem; }
.about-copy h2{ margin-bottom:.6em; }
.about-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-card{
  background:var(--sky); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:20px; display:flex; flex-direction:column; gap:8px;
}
.about-card .icon-tile{ margin-bottom:2px; }
.about-card h3{ font-size:1.02rem; margin-bottom:2px; }
.about-card p{ font-size:.86rem; margin:0; }

/* ---------- Program diagram cards ---------- */
.program-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:10px;
}
.program-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.program-status{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:100px; white-space:nowrap;
}
.program-status.active{ background:var(--green-100); color:var(--green-700); }
.program-status.ended{ background:var(--amber-100); color:var(--amber); }
.program-status.info{ background:var(--blue-100); color:var(--blue-700); }
.bar-chart{ display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; }
.bar-row{ display:grid; grid-template-columns:110px 1fr 56px; align-items:center; gap:10px; font-size:.78rem; color:var(--ink-500); }
.bar-track{ background:var(--sky); border-radius:100px; height:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:100px; background:linear-gradient(90deg,var(--blue),var(--green)); }
.program-source{ font-size:.74rem; color:var(--ink-300); margin-top:auto; padding-top:8px; border-top:1px solid var(--line); }
.data-disclaimer{
  background:var(--sky); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:8px; padding:14px 16px; font-size:.84rem; color:var(--ink-700); max-width:900px; margin:0 auto 32px;
}

/* ---------- Apply page two-column layout ---------- */
.apply-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.apply-grid .form-card{ position:sticky; top:96px; }

@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; }
  .about-cards{ grid-template-columns:1fr; }
  .apply-grid{ grid-template-columns:1fr; }
  .apply-grid .form-card{ position:static; }
  .bar-row{ grid-template-columns:88px 1fr 46px; }
}

/* ---------- Page trust strip (device/state/provider/resource pages) ---------- */
.page-trust{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  padding:14px 18px; margin:20px 0 8px; background:var(--sky); border:1px solid var(--line);
  border-radius:var(--radius-m); font-size:.82rem; color:var(--ink-500);
}
.page-trust span{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.related-links{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.related-links a{
  font-size:.84rem; padding:8px 14px; border:1px solid var(--line); border-radius:100px;
  background:var(--paper); color:var(--blue-700);
}
.related-links a:hover{ background:var(--blue-100); text-decoration:none; }
.mini-stat-row{ display:flex; flex-wrap:wrap; gap:14px; margin:18px 0; }
.mini-stat{
  flex:1 1 140px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:14px 16px;
}
.mini-stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; color:var(--blue-900); }
.mini-stat span{ font-size:.76rem; color:var(--ink-500); }