/* Lunar Carrier Services (/carrier-services/): "the directory". In the Lunar family (lunar.css: ink ground,
   Instrument Sans, IBM Plex Mono) with its own signal colour, periwinkle, and its own motif, the numbering plan
   as a lattice of cells and a ledger of entries. Amber is the status colour; nothing here is live, so nothing is
   green. The page makes no claim about coverage, latency, availability, pricing or data sources and names no
   partner or vendor: none of that is settled until the service is. The hero field is drawn by
   /assets/pages/carrier-services/lattice.js. */
body[data-page="carrier-services"]{
  --cs:#9aa8ff;           /* periwinkle: 8.7:1 on the ink ground, and ink on it is 8.7:1 */
  --cs-hi:#c3cbff;
  --cs-soft:rgba(154,168,255,.10);
  --cs-line:rgba(154,168,255,.38);
  --cs-grid:rgba(154,168,255,.075);
  --amber:#f0b64a;
  --chrome-accent:#9aa8ff;
  --chrome-on-accent:#0a0d12;
  font-variant-numeric:tabular-nums;
  background:radial-gradient(1100px 520px at 84% -160px,rgba(154,168,255,.08),transparent 70%),var(--bg);
}
a:hover{color:var(--cs)}
:focus-visible{outline-color:var(--cs)}
.btn.solid{background:var(--cs);color:#0a0d12}
.btn.solid:hover{background:var(--cs-hi);color:#0a0d12}
.btn.line:hover{border-color:var(--cs-line)}
.host{font-family:var(--mono);color:var(--t1);overflow-wrap:anywhere}

/* chips: "ea" (moonlight) is the one availability label, Early access; "ex" marks examples. The amber and grey
   variants are kept for reuse. Never green. */
.chip{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:3px;white-space:nowrap;vertical-align:middle}
.chip.dev{color:var(--amber);border:1px solid rgba(240,182,74,.5);background:rgba(240,182,74,.07)}
.chip.dev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(240,182,74,.14)}
.chip.lg{font-size:12px;padding:7px 11px}
.chip.plan{color:var(--amber);border:1px dashed rgba(240,182,74,.55);background:transparent}
.chip.none{color:var(--t2);border:1px solid var(--sep);background:var(--panel2)}
.chip.ea{color:var(--moon,#cfdcef);border:1px solid rgba(207,220,239,.45);background:rgba(207,220,239,.06)}
.unsaid > p + p{margin-top:8px}
.chip.ex{color:var(--cs);border:1px solid var(--cs-line);background:var(--cs-soft)}

/* section eyebrows: an index into the directory */
.idx{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cs);margin-bottom:14px}

/* ---- the cover: a lattice of NPA-NXX cells, full bleed ---- */
/* the field fades under the headline and at the foot of the cover; the example route above it does not */
.cs-cover .lat-grid,.cs-cover .lat-cells{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 46% 40% at 24% 44%,rgba(0,0,0,.2) 35%,#000 100%),linear-gradient(180deg,#000 88%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(ellipse 46% 40% at 24% 44%,rgba(0,0,0,.2) 35%,#000 100%),linear-gradient(180deg,#000 88%,transparent);
          mask-composite:intersect}
.cs-cover .lat-grid{background-image:linear-gradient(90deg,var(--cs-grid) 1px,transparent 1px),linear-gradient(180deg,var(--cs-grid) 1px,transparent 1px);background-size:84px 36px;background-position:var(--ox,0) var(--oy,0)}
.cs-cover .cover-bg > svg{position:absolute;inset:0}
.lat-cells text{font:400 10px/1 var(--mono);fill:#3b4553;letter-spacing:.04em}
.lat-cells text.w{fill:rgba(154,168,255,.34)}
.lat-cells .tk{fill:none;stroke:#1f2833;stroke-width:1.5}
.lat-cells .tk.on{stroke:rgba(154,168,255,.3)}
/* the example route: a ported number, and the switch its LRN names */
.lat-route text{font:500 10px/1 var(--mono);letter-spacing:.06em}
.lat-route .cap{fill:#778393;font-weight:400}
.lat-route .cell{fill:#0d1119;stroke:var(--cs-line)}
.lat-route .p .cell{fill:rgba(154,168,255,.08);stroke:var(--cs)}
.lat-route .p text{fill:var(--cs)}
.lat-route .p .tiny,.lat-route .s .tiny{font-size:8.5px;fill:#8d98d8}
.lat-route .s .cell{fill:rgba(154,168,255,.12);stroke:var(--cs)}
.lat-route .s text{fill:var(--cs-hi)}
.lat-route .s .tag{fill:var(--cs);stroke:none}
.lat-route .s .tag-t{fill:#0a0d12;font-weight:500}
.lat-route .base{fill:none;stroke:rgba(154,168,255,.3);stroke-width:1;stroke-dasharray:2 4}
.lat-route .live{fill:none;stroke:var(--cs);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.lat-route .s{opacity:1}
/* the lookup sweep: a band that crosses the field once a cycle; its leading edge is the right-hand line */
.lat-sweep{position:absolute;inset:0;display:none;will-change:transform}
.lat-sweep::after{content:"";position:absolute;top:0;bottom:0;right:0;width:260px;background:linear-gradient(90deg,transparent,rgba(154,168,255,.025) 60%,rgba(154,168,255,.075));border-right:1px solid rgba(154,168,255,.34);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.run .lat-sweep{display:block}
.run .lat-sweep{animation:cs-sweep var(--period,20s) linear infinite}
.run .lat-route .live{animation:cs-draw var(--period,20s) linear var(--hit,0s) infinite backwards}
.run .lat-route .s{animation:cs-lit var(--period,20s) linear var(--hit,0s) infinite backwards}
.run .lat-route .p{animation:cs-hit var(--period,20s) linear var(--hit,0s) infinite backwards}
.paused .lat-sweep,.paused .lat-route .live,.paused .lat-route .s,.paused .lat-route .p{animation-play-state:paused}
@keyframes cs-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes cs-draw{0%{stroke-dashoffset:1;opacity:1}9%{stroke-dashoffset:0;opacity:1}58%{stroke-dashoffset:0;opacity:1}70%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cs-lit{0%,8%{opacity:.5}11%,58%{opacity:1}70%,100%{opacity:.5}}
@keyframes cs-hit{0%,14%{opacity:1}34%,100%{opacity:.72}}
@media (prefers-reduced-motion:reduce){
  .lat-sweep,.lat-route .live,.lat-route .s,.lat-route .p{animation:none !important}
}

/* the hero content: headline left, status card right, and a strip below both where the example route runs */
.cs-cover .cover-inner{padding-top:64px;padding-bottom:136px}
.cs-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.cs-kicker{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--t2)}
.cs-glyph{flex:none;fill:none;stroke:var(--cs);stroke-width:1.3}
.cs-glyph .on{fill:var(--cs)}
.cs-lead h1 em{color:var(--cs)}
.cs-lead .lede{max-width:580px}
.cs-card{justify-self:end;width:100%;max-width:500px;box-sizing:border-box;border:1px solid var(--ln3);border-top:1px solid var(--cs-line);border-radius:8px;background:rgba(13,17,24,.94);padding:22px 26px 10px;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.cs-card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--ln2)}
.cs-card-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.ledger{margin:0}
.ledger > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--ln1);font-size:15px;align-items:baseline}
.ledger > div:last-child{border-bottom:0}
.ledger dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--t3)}
.ledger dd{margin:0;color:var(--val)}
.ledger .key dt{color:var(--amber)}
.ledger .key dd{color:var(--t0)}
.ledger .host{display:block;font-size:14px}
.ledger .small{display:block;margin-top:3px}

/* ---- 01: what an LRN answers (an example diagram) ---- */
.lrn-fig{border:1px solid var(--ln2);border-radius:10px;background:linear-gradient(180deg,rgba(15,20,27,.9),rgba(11,15,21,.9));padding:24px 28px 30px}
.fig-cap,.fig-note{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;font-size:13.5px;color:var(--t3)}
.fig-cap{margin-bottom:28px}
.fig-note{margin-top:18px;max-width:900px;align-items:baseline}
.lrn-map{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);row-gap:22px;align-items:stretch}
.node{position:relative;display:flex;flex-direction:column;gap:6px;border:1px solid var(--ln3);border-radius:6px;background:var(--panel);padding:16px 18px;min-width:0}
.node .nk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.node .nv{font-weight:500;font-size:16px;color:var(--t0)}
.node .ns{font-size:14px;color:var(--t2)}
.node.num{grid-row:1 / 3;align-self:center;margin-right:28px;border-color:var(--cs-line)}
.node.num .nv{font-family:var(--mono);font-size:19px;color:var(--cs)}
.node.num::after{content:"";position:absolute;left:100%;top:50%;width:28px;border-top:1px solid var(--sep)}
.branch{grid-column:2;display:grid;grid-template-columns:minmax(96px,1fr) minmax(0,1.35fr);align-items:center;min-width:0}
.wire{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;padding:0 12px}
.wire::after{content:"";position:absolute;left:0;right:0;top:50%}
.wire::before{content:"";position:absolute;left:0;width:0}
.branch.old .wire::before{top:50%;height:calc(50% + 11px);border-left:1px solid var(--sep)}
.branch.new .wire::before{bottom:50%;height:calc(50% + 11px);border-left:1px solid var(--sep)}
.branch.old .wire::after{border-top:1px dashed var(--sep)}
.branch.new .wire::after{border-top:1.5px solid var(--cs)}
.wtag{position:relative;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:3px 8px;background:#0e131a;border-radius:3px}
.branch.old .wtag{color:var(--t3);border:1px dashed var(--sep)}
.branch.new .wtag{color:#0a0d12;background:var(--cs);font-weight:500}
.branch.old .node{border-style:dashed;background:transparent}
.branch.old .nv{color:var(--t2)}
.branch.new .node{border-color:var(--cs);background:linear-gradient(90deg,rgba(154,168,255,.09),rgba(154,168,255,.02))}
.branch.new .nk{color:var(--cs)}

/* ---- 02: the ledger row ---- */
.ledger-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;border:1px solid var(--ln2);border-radius:10px;overflow:hidden;background:var(--panel)}
.lf{padding:20px 20px 24px;border-left:1px solid var(--ln2);min-width:0}
.lf:first-child{border-left:0}
.lf dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding-bottom:12px;border-bottom:1px solid var(--ln2)}
.lf dd{margin:0;padding-top:14px;font-size:14.5px;color:var(--t2)}
.lf .ex{display:block;font-family:var(--mono);font-size:15px;color:var(--cs);margin-bottom:10px;letter-spacing:.02em}

/* ---- 03: two ways ---- */
.ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.way{display:flex;flex-direction:column;gap:14px;border:1px solid var(--ln2);border-radius:10px;background:var(--panel);padding:24px 26px 28px;min-width:0}
.way-hd{display:flex;justify-content:space-between;align-items:center;gap:12px}
.way .k,.go .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.way h3{font-size:22px;letter-spacing:-.02em;color:var(--t0)}
.way p{color:var(--t2);font-size:15px}
.glyph{display:grid;align-items:center;gap:10px;margin:6px 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.glyph .c{display:flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border:1px solid var(--ln3);border-radius:3px;color:var(--t3);white-space:nowrap}
.glyph .c.on{border-color:var(--cs-line);color:var(--cs);background:var(--cs-soft)}
.glyph i{position:relative;height:1px;background:var(--cs-line)}
.glyph i::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left:5px solid var(--cs-line);border-right:0}
.glyph.q{grid-template-columns:auto minmax(28px,1fr) auto}
.glyph.f{grid-template-columns:auto minmax(28px,1fr) auto}
.glyph .rows{display:grid;grid-template-columns:76px;grid-auto-rows:6px;gap:3.5px;padding:0 2px}
.glyph .rows span{border:1px solid var(--ln3);border-radius:1px;background:repeating-linear-gradient(90deg,transparent 0 17px,var(--ln3) 17px 18px)}
.glyph .rows span:nth-child(2){border-color:var(--cs-line)}

/* ---- 04: how it will be run ---- */
.run-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ln2)}
.run-grid > li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 28px 30px 0;border-bottom:1px solid var(--ln2);min-width:0}
.run-grid > li + li{padding-left:28px;border-left:1px solid var(--ln2)}
.run-grid > li:nth-child(3n+1){padding-left:0;border-left:0}
.run-grid h3{font-size:19px;letter-spacing:-.015em;color:var(--t0)}
.run-grid p{color:var(--t2);font-size:15px}
.run-grid .go a{display:flex;flex-direction:column;gap:10px;height:100%;color:var(--t1)}
.run-grid .go b{font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--t0)}
.run-grid .go a:hover b{color:var(--cs)}
.run-grid .go .arr{color:var(--cs)}

/* ---- 05: where it stands ---- */
.st-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 48px;align-items:start}
.st-ledger{margin:0;border-top:1px solid var(--ln2)}
.st-ledger > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;padding:14px 0;border-bottom:1px solid var(--ln1);align-items:baseline}
.st-ledger dt{color:var(--t1);font-size:15px}
.st-ledger dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.st-ledger .note{font-size:13.5px;color:var(--t3)}
.unsaid{border:1px solid var(--ln3);border-radius:10px;padding:24px 26px 20px}
.unsaid h3{font-size:22px;letter-spacing:-.02em;color:var(--t0)}
.unsaid > p{color:var(--t2);font-size:15px;margin-top:12px}
.blanks{margin:18px 0 0}
.blanks > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--ln1);align-items:center}
.blanks dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.blanks dd{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--t3)}
.blanks .bar{flex:1;max-width:160px;height:10px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--ln3) 0 6px,transparent 6px 9px)}

/* ---- 06: contact ---- */
.closing .idx{margin-bottom:14px}
.closing .mail .btn.line{margin-top:6px}

@media (max-width:1060px){
  /* one column: the text covers most of the cover, so the field stays faint everywhere but the route's strip */
  .cs-cover .lat-grid,.cs-cover .lat-cells{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.3) 70%,#000 88%,transparent);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.3) 70%,#000 88%,transparent)}
  .cs-hero{grid-template-columns:1fr;gap:40px}
  .cs-card{justify-self:start;max-width:620px}
  .ledger-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lf{border-left:0;border-top:1px solid var(--ln2)}
  .lf:nth-child(-n+2){border-top:0}
  .lf:nth-child(2n){border-left:1px solid var(--ln2)}
  .lf:last-child{grid-column:1 / -1;border-left:0}
  .run-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .run-grid > li:nth-child(n){padding-left:28px;border-left:1px solid var(--ln2)}
  .run-grid > li:nth-child(2n+1){padding-left:0;border-left:0}
}
@media (max-width:820px){
  .ways,.st-grid{grid-template-columns:1fr}
  /* the example diagram stacks: the number on top, its two answers side by side below it */
  .lrn-fig{padding:20px 18px 22px}
  .lrn-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;row-gap:0}
  .node.num{grid-row:auto;grid-column:1 / -1;margin:0 0 20px}
  .node.num::after{left:50%;top:100%;width:0;height:20px;border-top:0;border-left:1px solid var(--sep)}
  .branch{grid-column:auto;grid-template-columns:1fr;align-items:stretch}
  .wire{min-height:84px;padding:0}
  .wire::after{left:50%;right:auto;top:0;bottom:0;width:0}
  .branch.old .wire::after{border-top:0;border-left:1px dashed var(--sep)}
  .branch.new .wire::after{border-top:0;border-left:1.5px solid var(--cs)}
  .branch.old .wire::before,.branch.new .wire::before{top:0;bottom:auto;height:0;border-left:0;border-top:1px solid var(--sep)}
  .branch.old .wire::before{left:50%;right:-8px;width:auto}
  .branch.new .wire::before{right:50%;left:-8px;width:auto}
  .wtag{max-width:100%;white-space:normal}
  .node{padding:14px}
  .node .nv{font-size:15px}
}
@media (max-width:560px){
  .cs-cover .cover-inner{padding-top:40px;padding-bottom:124px}
  .cs-card{padding:18px 18px 6px}
  .ledger > div{grid-template-columns:1fr;gap:4px}
  .ledger-row{grid-template-columns:1fr}
  .lf,.lf:nth-child(2n){border-left:0;border-top:1px solid var(--ln2)}
  .lf:first-child{border-top:0}
  .lf:nth-child(2){border-top:1px solid var(--ln2)}
  .run-grid{grid-template-columns:1fr}
  .run-grid > li:nth-child(n){padding-left:0;border-left:0;padding-right:0}
  .st-ledger > div{grid-template-columns:1fr}
  .blanks > div{grid-template-columns:1fr;gap:6px}
  .way,.unsaid{padding:20px 18px}
  .glyph .c{padding:0 8px}
}