/* ============================================================
   JOEL - shared design system
   One source of truth for chrome + primitives across every
   marketing + landing page. Page-specific rules stay in-page.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --ink:#131316;--body:#4A4A52;--muted:#4A4A52;--line:#E8EAEE;--line-soft:#f1f2f4;--soft:#F1F3F6;--bg:#FFFFFF;--bg-alt:#F6F6F7;--card:#fff;
  /* Numberline brand - Ink actions + one electric accent (#A2FBEF). */
  --neon:#A2FBEF;
  --beige:#F4F2ED; /* Paper - warm neutral chip/section ground */
  --cta:#5158E2;--cta-soft:#ECEDFC;--cta-dark:#3E45C7; /* Signal Blue - primary action fill */
  --accent:#131316;--accent-dark:#33333A;--accent-soft:#F1F1F0;--accent-text:#131316;
  --accent-ink:#3E45C7; /* accent used as TEXT or ICON - Signal Blue, never teal */
  --accent-on-dark:#FFFFFF; /* actions reverse to white on Ink */
  --paper:#FFFFFF;          /* white section band */
  --wa:#1FAE63;
  /* aliases - some pages reference these names; mapped to the canonical palette */
  --blue:#5158E2;--blue-dark:#3E45C7;--blue-soft:#ECEDFC;--blue-ink:#3E45C7;
  --ai:#131316;--ai-soft:#F1F1F0;--green:#1bb56a;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;--serif:'Newsreader',Georgia,serif;
  --display:'Figtree',var(--sans);          /* headlines + wordmark */
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',monospace; /* eyebrows / small labels */
}
html{scroll-behavior:smooth;}
/* ============================================================
   NO PER-USER PRICING stamp - brand mark, always this exact
   phrase. Inline seal: double ring, slight tilt, Signal Blue.
   Sizes: default (inline / fact strips), .nup-lg (section-level).
   ============================================================ */
.nup-stamp{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--cta,#5158E2);background:#fff;border:1.5px solid #8F97E8;border-radius:50%;transform:rotate(-2deg);font-size:.62rem;letter-spacing:.1em;line-height:1.22;padding:1.28em 1.65em .92em;white-space:nowrap;user-select:none;flex-shrink:0;box-shadow:0 8px 24px rgba(81,88,226,.16);}
.nup-stamp .nup-l2{display:block;}
.nup-lg{font-size:.78rem;}
/* .nup-kick: variant for the eyebrow row placement (hero-kick) - livelier +6deg tilt, no margin (owner 2026-08-01) */
.nup-stamp.nup-kick{transform:rotate(6deg);margin:0;}
.closer-card .nup-stamp{margin:0 auto 22px;}
.jx-hero .nup-stamp{margin:0 auto 26px;}
.jx-hero:has(> .wrap > .nup-stamp){padding-top:32px;}
.hero-copy .nup-stamp{margin:0 0 26px;}
.nup-row{text-align:center;margin:0 0 28px;}
.hero-note-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.hero-note-row .hero-facts{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;line-height:1.6;flex:1;min-width:240px;}
.hero-note-row .hero-facts span{white-space:nowrap;}
@media(max-width:860px){.hero-note-row{justify-content:center;text-align:center;}.hero-note-row .hero-facts{justify-content:center;flex:none;}}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;}
/* standardize heading line-wrapping site-wide so titles break evenly instead of orphaning a word */
h1,h2,h3{text-wrap:pretty;}
/* Numberline headlines - Figtree 600 (weight restraint, tight tracking). Body + UI text stay Plus Jakarta Sans. */
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.035em;}
/* Brand rule: marketing headlines are ALWAYS ink - never colored. Accent lives in eyebrows, links, and function icons only. */
h1,h2,h3,.sec-head h2,.sec-head h3{color:var(--ink);}
/* default links - Signal Blue, never browser blue */
a{color:var(--cta);}a:hover{color:var(--cta-dark);}
/* small labels / eyebrows - Plus Jakarta Sans 700, uppercase (per brand guidelines; no mono) */
/* exploration: warm Paper hero band */
.jx-hero{background:var(--paper);}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px;}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;text-decoration:none;border-radius:10px;font-size:.97rem;cursor:pointer;transition:transform .15s,background .15s;border:2px solid transparent;font-family:var(--sans);white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--cta);color:#fff;border-color:var(--cta);padding:13px 22px;}
.btn-primary:hover{background:var(--cta-dark);color:#fff;border-color:var(--cta-dark);}
.btn-secondary{background:#fff;border-color:var(--cta);color:var(--cta);padding:12px 22px;}
.btn-secondary:hover{background:var(--cta-soft);border-color:var(--cta-dark);color:var(--cta-dark);}
.btn-white{background:#fff;color:var(--ink);padding:15px 28px;}
.btn-lg{padding:15px 28px;font-size:1rem;}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);padding:12px 22px;}
.btn-ghost:hover{border-color:var(--ink);}
.btn-arrow svg{width:18px;height:18px;transition:transform .18s;}
.btn-arrow:hover svg{transform:translateX(3px);}
/* arrow glyph used on CTAs */
.btn-guillemet{font-family:var(--display);font-weight:700;font-size:1.15em;line-height:1;display:inline-block;position:relative;top:.03em;margin-left:-.06em;transition:transform .18s;}
.btn-arrow:hover .btn-guillemet{transform:translateX(3px);}
.link-arrow{color:var(--accent-ink);text-decoration:none;font-weight:700;font-size:.9rem;}

/* keep FAQ question text as a single flex item */
.faq-q summary>.fq-text{min-width:0;}

/* nav */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);z-index:50;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:88px;}
.logo{display:inline-flex;flex-direction:row;align-items:center;gap:.345em;font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:.015em;color:var(--ink);text-decoration:none;line-height:1;}
.logo .lw{display:block;line-height:.9;white-space:nowrap;}
.logo .lmark{width:1.25em;height:1.25em;flex:none;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M 17.5 33 L 82.5 33 Q 86 33 86 36.5 L 86 63.5 Q 86 67 82.5 67 L 79.5 67 Q 76 67 76 63.5 L 76 46.5 Q 76 43 72.5 43 L 27.5 43 Q 24 43 24 46.5 L 24 63.5 Q 24 67 20.5 67 L 17.5 67 Q 14 67 14 63.5 L 14 36.5 Q 14 33 17.5 33 Z%22 fill=%22%23000%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M 17.5 33 L 82.5 33 Q 86 33 86 36.5 L 86 63.5 Q 86 67 82.5 67 L 79.5 67 Q 76 67 76 63.5 L 76 46.5 Q 76 43 72.5 43 L 27.5 43 Q 24 43 24 46.5 L 24 63.5 Q 24 67 20.5 67 L 17.5 67 Q 14 67 14 63.5 L 14 36.5 Q 14 33 17.5 33 Z%22 fill=%22%23000%22/%3E%3C/svg%3E") center/contain no-repeat;}
.logo .lmr{display:none;}
.logo.nomark .lmark{display:none;}
.logo,.logo:hover,.logo:focus{color:var(--ink);}
.logo.lg{font-size:2.1rem;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{color:var(--body);text-decoration:none;font-weight:600;font-size:.94rem;transition:color .18s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta-m{display:none;}
.nav-links a.active{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:var(--accent);}
.nav-cta{background:var(--cta);color:#fff!important;padding:11px 22px;border-radius:10px;font-weight:700!important;text-decoration:none;}
.nav-cta:hover{background:var(--cta-dark);}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;color:var(--ink);}
.hamburger svg{width:28px;height:28px;display:block;}
@media(max-width:860px){
  .hamburger{display:block;}
  .nav-links{position:fixed;top:88px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 0;box-shadow:0 16px 40px rgba(15,17,21,.08);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto;}
  .nav-links a:not(.nav-cta){display:block!important;padding:15px 24px;font-size:1.05rem;border-bottom:1px solid var(--line);}
  .nav-links a.nav-cta{display:none;}
  .nav-cta-m{display:inline-flex;align-items:center;margin-left:auto;margin-right:14px;padding:9px 15px;font-size:.82rem;border-radius:9px;}
}

/* NOTE: section / .sec-head / .kicker / .closer are intentionally NOT shared -
   pages diverge (centered vs left-aligned headers, gradient vs solid CTA).
   Those stay page-local until a deliberate unification pass. */

/* footer */
footer{background:var(--bg);border-top:1px solid var(--line);padding:56px 0 32px;}
footer .wrap{max-width:1140px;} /* footer owns its width - page-local .wrap overrides must not squeeze it */
.foot-inner{display:flex;flex-direction:column;gap:44px;}
.foot-top{display:flex;gap:56px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand{max-width:380px;flex:0 1 340px;min-width:280px;}
.foot-linkcols{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:34px 28px;flex:1 1 640px;min-width:0;}
/* Desktop (owner 2026-09-10): the brand block gets a real column and the four link columns spread to the container's right edge instead of bunching left. */
@media(min-width:901px){
  .foot-top{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:56px;align-items:flex-start;}
  .foot-brand{max-width:none;min-width:0;}
  .foot-linkcols{grid-template-columns:repeat(4,minmax(0,max-content));justify-content:space-between;gap:34px 24px;}
}
@media(min-width:901px) and (max-width:1099px){.foot-top{grid-template-columns:minmax(240px,270px) minmax(0,1fr);gap:40px;}}
@media(min-width:1100px){.foot-col a{white-space:nowrap;}}
@media(max-width:900px){.foot-linkcols{grid-template-columns:repeat(2,minmax(0,auto));}}
.foot-brand .logo{font-size:1.5rem;}
.foot-brand p{font-family:var(--sans);color:var(--body);margin-top:10px;font-size:.95rem;font-weight:500;line-height:1.6;}
.foot-cols{display:flex;gap:80px;flex-wrap:wrap;width:100%;padding-top:44px;border-top:1px solid var(--line);}
.foot-col-wide .foot-links a{white-space:nowrap;}
.foot-col-stack{display:flex;flex-direction:column;gap:28px;}
.foot-group h5{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:14px;}
.foot-group a{display:block;color:var(--body);text-decoration:none;font-size:.92rem;font-weight:600;margin-bottom:9px;}
.foot-group a:hover{color:var(--ink);}
.foot-col h5{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:14px;}
.foot-col a{display:block;color:var(--body);text-decoration:none;font-size:.92rem;font-weight:600;margin-bottom:9px;}
.foot-col h5 a,.m2 .foot-col h5 a,.home2 .foot-col h5 a{display:inline;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;margin:0;text-decoration:none;} .foot-col h5 a:hover,.m2 .foot-col h5 a:hover,.home2 .foot-col h5 a:hover{color:var(--ink);}
.foot-col a:hover{color:var(--ink);}
.foot-col .soon{display:block;color:var(--muted);opacity:.55;font-size:.92rem;font-weight:600;margin-bottom:9px;cursor:default;}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;}
.foot-legal{display:inline-flex;flex-wrap:wrap;gap:22px;}
.foot-legal a{color:var(--muted);text-decoration:none;font-weight:600;}
.foot-legal a:hover{color:var(--ink);}
@media(max-width:620px){
  footer{padding:40px 0 28px;}
  .foot-inner{gap:28px;}
  /* Seamless single top-to-bottom column on mobile: brand, then each link
     group stacked full width (no side-by-side Product / Company). */
  .foot-top{flex-direction:column;gap:32px;}
  .foot-brand{min-width:0;max-width:none;flex:none;}
  .foot-linkcols{grid-template-columns:1fr;gap:32px;flex:none;}
  .foot-col{width:100%;}
  .foot-cols{flex-direction:column;gap:28px;padding-top:28px;}
  .foot-base{margin-top:28px;}
}


/* ============================================================
   BRANDED FUNCTION DESIGN - canonical way to show how Numberline works.
   One row per function: colored icon tile + bold name + outcome chip.
   Rows NEVER wrap to two lines. (Born on the homepage hero.)
   Rows use black icon tiles + one accent chip (Direction C).
   Function → color, for chips/badges where a function appears in isolation:
     fn-number  Get a number          blue   #2454D6 / #EEF4FF
     fn-ext     Extensions            yellow #57534E on #FEFCE8
     fn-fwd     Forward calls         purple #611F69 / #F6F2FF
     fn-vm      Voicemails            green  #15803D / #ECFDF3
     fn-sms     Texts / WhatsApp      cyan   #0369A1 / #ECFEFF
     fn-ai      Integrations / AI     pink   #BE185D / #FCE7F3
   Markup:
   <ol class="hsteps">
     <li class="hstep fn-number"><div class="hstep-body">
       <div class="hstep-title"><span class="hstep-ic">SVG</span><b>Get a number</b></div>
       <div class="hstep-flow"><span class="hstep-out"><span class="hstep-res">Toll-free or local</span></span></div>
     </div></li>
   </ol>
   ============================================================ */
:root{
  --fn-number:#12308F;--fn-number-soft:#CFE0FF;--fn-number-line:#A8C4FF;
  --fn-ext:#6B5A12;--fn-ext-soft:#FBF3C4;--fn-ext-line:#EAD98A;
  --fn-fwd:#4A1160;--fn-fwd-soft:#E9D2FF;--fn-fwd-line:#D9B8FF;
  --fn-vm:#0A5A2A;--fn-vm-soft:#A8F5C8;--fn-vm-line:#7FE8AB;
  --fn-sms:#08525E;--fn-sms-soft:#9FEFFF;--fn-sms-line:#6FE0F5;
  --fn-ai:#B0447F;--fn-ai-soft:#FBE3F0;--fn-ai-line:#F6D0E4;
}
/* mark.svc - service-name highlights inside function-list rows; never browser-default yellow */
mark.svc{background:none;padding:0;font-weight:700;color:inherit;}
mark.svc.slack{--svc:#EBD6ED;}
mark.svc.wa{--svc:#A8F5C8;}
mark.svc.ai{--svc:#CFE0FF;}
mark.svc.zap{--svc:#FCFA4D;}
.fn-number{--c:var(--fn-number);--cs:var(--fn-number-soft);--cl:var(--fn-number-line);}
.fn-ext{--c:var(--fn-ext);--cs:var(--fn-ext-soft);--cl:var(--fn-ext-line);}
.fn-fwd{--c:var(--fn-fwd);--cs:var(--fn-fwd-soft);--cl:var(--fn-fwd-line);}
.fn-vm{--c:var(--fn-vm);--cs:var(--fn-vm-soft);--cl:var(--fn-vm-line);}
.fn-sms{--c:var(--fn-sms);--cs:var(--fn-sms-soft);--cl:var(--fn-sms-line);}
.fn-ai{--c:var(--fn-ai);--cs:var(--fn-ai-soft);--cl:var(--fn-ai-line);}
.hsteps{list-style:none;margin:0;padding:0;position:relative;container-type:inline-size;}
/* stepper spine: continuous line through the icon column, icons sit on top */
.hsteps::before{content:'';position:absolute;left:21px;top:26px;bottom:26px;width:2px;background:var(--line);transform:translateX(-50%);}
.hstep{display:flex;align-items:center;position:relative;padding-bottom:20px;}
.hstep:last-child{padding-bottom:0;}
.hstep-ic{position:relative;z-index:1;}
.hstep-body{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;width:100%;min-width:0;}
.hstep-title{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;}
.hstep-title b{font-size:1rem;color:var(--ink);font-weight:800;white-space:nowrap;}
.hstep-ic{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--cs,#eef) 55%,#fff);border:1px solid color-mix(in srgb,var(--cl,var(--line)) 45%,#fff);display:grid;place-items:center;flex:none;}
.hstep-ic svg{width:22px;height:22px;color:var(--c,var(--ink));}
.hstep-flow{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 1 auto;min-width:0;margin-left:auto;}
.hstep-out{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;min-width:0;}
.hstep-res{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:100px;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
/* narrow containers: shrink instead of overlapping - rows still never wrap */
@container (max-width:335px){
  .hstep-title b{font-size:.9rem;}
  .hstep-ic{width:36px;height:36px;border-radius:10px;}
  .hstep-ic svg{width:19px;height:19px;}
  .hstep-res{font-size:.72rem;padding:3px 8px;}
  .hstep-title{gap:9px;}
  .hstep-body{gap:8px;}
  .hsteps::before{left:18px;}
}
@container (max-width:295px){
  .hstep-title b{font-size:.82rem;}
  .hstep-ic{width:32px;height:32px;}
  .hstep-ic svg{width:17px;height:17px;}
  .hstep-res{font-size:.68rem;}
}
/* generic pieces for reusing the palette on other components */
.fn-chip{display:inline-flex;align-items:center;gap:7px;background:var(--cs,var(--accent-soft));color:var(--c,var(--accent-text));font-weight:700;font-size:.85rem;padding:5px 12px;border-radius:100px;white-space:nowrap;}
.fn-chip svg{width:15px;height:15px;color:var(--c,var(--accent-text));flex:none;}
.fn-tile{width:42px;height:42px;border-radius:12px;background:var(--cs,var(--accent-soft));display:grid;place-items:center;flex:none;}
.fn-tile svg{width:22px;height:22px;color:var(--c,var(--accent-text));}

/* card wrapper so the function list can drop into any page's "How it works" section as-is */
.fnlist-card{max-width:560px;margin:0 auto;background:#F7F7F8;border:1px solid var(--line);border-radius:24px;padding:28px;}
@media(max-width:620px){.fnlist-card{padding:18px 14px;}}

/* grid variant: full-width section row layout (not a hero copy) - 2-col tiles, no stepper spine */
.fnlist-card.grid{max-width:940px;background:transparent;border:none;padding:0;}
.hsteps.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hsteps.grid::before{display:none;}
.hsteps.grid .hstep{min-width:0;padding-bottom:0;background:#fff;border:1px solid var(--cl,var(--line));border-radius:16px;padding:18px 20px;}
.hsteps.grid .hstep-body{gap:12px;}
@media(max-width:720px){.hsteps.grid{grid-template-columns:1fr;}}
/* campaign feature grids: each tile is its own container so the shrink steps above fire per tile */
.fnlist-card.grid:not(.glance-tiles) .hsteps.grid .hstep{container-type:inline-size;}
@media(max-width:720px){
  .fnlist-card.grid:not(.glance-tiles) .hsteps.grid .hstep{padding:14px 14px;}
  .fnlist-card.grid:not(.glance-tiles) .hsteps.grid .hstep-body{gap:8px;}
}