/* ============================================================
   THE BUYER APP  —  built to references/SHARK-DESIGN-SYSTEM.md

   Same house style as the rep marketing-links hub, for the same reason: a rep
   opens both on a phone, one-handed, usually from a message in another app.
   Two surfaces that feel different read as two products.

   WHAT CHANGED FROM THE FIRST VERSION, and why:
     * It was DARK. The house pages are paper. A dark admin panel bolted onto a
       light product is the tell that one of them was an afterthought.
     * It was TABLES. Seven columns of lead data is a spreadsheet, and a
       spreadsheet on a 390px phone is the clutter. §1: "cards, not sections.
       The page is a list, not a landing page."
     * It used the system font stack. The three faces below are the voice.

   The nine palette tokens are the only thing that would change for another
   brand. Neutrals are biased toward the accent on purpose (§2): a generic grey
   beside a violet accent is the tell that the palette was not chosen.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  /* the nine, SHARK house purple */
  --sk-brand:#7729EE;
  --sk-brand-deep:#571EAE;
  --sk-brand-tint:#F1EAFD;
  --sk-ink:#141021;
  --sk-ink-soft:#5B5570;
  --sk-ink-faint:#6E6884;   /* 4.9:1 on paper, 4.5:1 on line-soft (was #8E88A3, 3.1:1) */
  --sk-paper:#F7F5FB;
  --sk-line:#E5E0EF;
  --sk-line-soft:#EFEBF7;
  --sk-card:#ffffff;

  --sk-brand-rgb:119,41,238;
  --sk-brand-deep-rgb:87,30,174;
  --sk-paper-rgb:247,245,251;
  --sk-line-rgb:229,224,239;
  --sk-shadow-rgb:20,16,33;

  /* status stays semantic. Purple means "ours"; green, amber and red keep
     meaning delivered, pending and failed, or the one screen a buyer reads for
     bad news becomes unreadable. */
  --sk-ok:#1E7A46;
  --sk-warn:#9A6206;
  --sk-bad:#B3261E;
  --sk-ok-bg:#E8F6ED;
  --sk-warn-bg:#FDF3E2;
  --sk-bad-bg:#FCEBEA;

  --sk-r:18px;
  --sk-r-sm:12px;
  --sk-pad:20px;
  --sk-shadow:0 1px 2px rgba(var(--sk-shadow-rgb),.04), 0 8px 24px -12px rgba(var(--sk-shadow-rgb),.18);
  --sk-shadow-lift:0 2px 4px rgba(var(--sk-shadow-rgb),.05), 0 18px 40px -18px rgba(var(--sk-shadow-rgb),.28);
  --sk-grad:linear-gradient(122deg, var(--sk-brand) 0%, var(--sk-brand-deep) 88%);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  /* Full bleed ground, capped content, as a GRID COLUMN and never margin:auto
     (§1) -- components that set the `margin` shorthand would reset it and the
     page would drift left while the header stayed centred. */
  display:grid;
  grid-template-columns:1fr min(620px,100%) 1fr;
  min-height:100vh;
  /* ⚠️ align-content, not a typo for align-items. The three children (header, account
     bar, main) are three AUTO rows, and min-height:100vh leaves spare space on a short
     page which grid distributes BETWEEN them by default -- pushing the heading half a
     screen down from the nav. Only visible when content is short, which is why it
     survived until an empty inbox rendered it. */
  align-content:start;
  padding:0 16px calc(56px + env(safe-area-inset-bottom));
  background:var(--sk-paper);
  color:var(--sk-ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:17.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body > *{grid-column:2}

/* paper grain, so the flat off-white does not read as an unstyled default */
body::before{
  content:"";
  position:fixed;inset:0;
  grid-column:1/-1;
  pointer-events:none;z-index:0;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:1}

@keyframes sk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- shell
 *
 * An appbar and five bottom tabs. The old strip scrolled eight links sideways, which on a
 * phone means the ones past the edge are never found -- depth is free when every screen is
 * obvious, breadth is not.
 *
 * ⚠️ THE TAB BAR IS FIXED, so `main` must reserve room for it or the last row of every
 * list sits under it, unreachable and invisible. env(safe-area-inset-bottom) is what keeps
 * it above the home indicator on a notched phone rather than behind it.
 */
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:10px 0 10px;
  background:color-mix(in srgb, var(--sk-paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--sk-line-soft);
}
.brand{display:block;text-decoration:none;margin-right:auto;animation:sk-rise .6s cubic-bezier(.2,.7,.3,1) both}
.brand img{display:block;width:104px;height:auto}
.brand img.syslogo{width:176px;max-width:48vw}
/* The tagline is a client directive, not decoration: "AI MARKETING SYSTEM" is the
   house tagline on every system, so the app wears it where the pages do. */
.brand .tag{
  display:block;margin-top:2px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sk-ink-faint);
}

.iconbtn{
  position:relative;flex:none;
  width:44px;height:44px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--sk-card);border:1px solid var(--sk-line);
  color:var(--sk-ink-soft);text-decoration:none;
}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iconbtn i{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:9px;
  background:var(--sk-brand);border:2px solid var(--sk-card);
}
.avatar{
  flex:none;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;text-decoration:none;
  background:var(--sk-grad);color:#fff;
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 700;font-size:14.5px;
  letter-spacing:.02em;
}

main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--sk-card) 94%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--sk-line);
}
.tabs a{
  position:relative;
  display:grid;justify-items:center;align-content:center;gap:3px;
  padding:6px 2px;border-radius:11px;
  color:var(--sk-ink-faint);text-decoration:none;
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 600;font-size:12px;
}
.tabs a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabs a[aria-current],.tabs a[aria-selected]{color:var(--sk-brand-deep);background:var(--sk-brand-tint)}
.tabs a[aria-current] svg,.tabs a[aria-selected] svg{stroke-width:2}
/* Unread on a tab is a dot, not a count: the number belongs on the screen that can act on
   it, and a badge on five tabs turns into decoration. */
/* The desktop menu's dropdowns (shared.mjs SUBS); the phone keeps five plain tabs. */
.tabs .tabgrp{display:none}
.tabs .dot{
  position:absolute;top:4px;right:calc(50% - 16px);
  width:7px;height:7px;border-radius:9px;background:var(--sk-brand);
}

/* ⚠️ IN FLOW, NOT FIXED. Fixed, it floated over whatever the page ended with --
   on an empty Leads screen it sat straight across the "no leads yet" line. */
.adminlink{margin:26px 0 0;text-align:center}
.adminlink a{
  pointer-events:auto;
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--sk-ink);color:var(--sk-paper);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;opacity:.78;
}

/* the account switcher, a utility strip rather than a second nav */
.tenantbar{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.tenantbar > span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint);
}
.tenantbar a{
  padding:5px 12px;border:1px solid var(--sk-line);border-radius:999px;
  background:var(--sk-card);color:var(--sk-ink-soft);
  font-size:14.5px;text-decoration:none;white-space:nowrap;
}
.tenantbar a[aria-current]{border-color:rgba(var(--sk-brand-rgb),.5);color:var(--sk-brand-deep);font-weight:600}

/* ----------------------------------------------------------------- type */

main{padding:26px 0 0}

h1{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 106,"wght" 800;
  font-size:clamp(26px,7.2vw,32px);
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
  animation:sk-rise .6s .06s cubic-bezier(.2,.7,.3,1) both;
}
h1 em{
  font-style:normal;
  background:var(--sk-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.06em .1em;margin:-.06em -.1em;
}

/* Group label + rule + count, sticky so a long list always says where you are */
h2{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;gap:12px;
  margin:38px 0 12px;padding:14px 2px 12px;
  background:linear-gradient(var(--sk-paper) 62%, rgba(var(--sk-paper-rgb),0));
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 88,"wght" 700;
  font-size:13px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--sk-brand-deep);
}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--sk-line),rgba(var(--sk-line-rgb),0))}

h3{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:18px;line-height:1.22;letter-spacing:-.006em;text-wrap:balance;
}

.sub{margin:8px 0 0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--sk-ink-soft)}
.sub a{color:var(--sk-brand-deep)}
.muted{margin-top:3px;font-size:14.5px;color:var(--sk-ink-faint)}

/* ---------------------------------------------------------------- cards */

.card{
  padding:var(--sk-pad);
  border:1px solid var(--sk-line);
  border-radius:var(--sk-r);
  background:var(--sk-card);
  box-shadow:var(--sk-shadow);
  animation:sk-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.card + .card{margin-top:10px}

/* Counts: two up on a phone, three on anything wider. Never a row of five
   squeezed to 60px each. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:520px){ .cards{grid-template-columns:repeat(3,1fr)} }
.cards .card{padding:16px 14px;text-align:center}
.cards .n{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 800;
  font-size:28.5px;line-height:1.05;
}
.cards .k{
  margin-top:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);
}

/* ------------------------------------------------------------ list rows */

/* THIS IS WHAT REPLACED THE TABLES. A lead is a row you tap, not seven columns
   you squint at. The meta line carries what the columns used to. */
.rows{border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);overflow:hidden}
/* ⚠️ min-width:0 ON THE GRID CHILD. A grid item defaults to min-width:auto, so the
   nowrap meta line refused to shrink, pushed the row past the card, and took the pill
   and the date off the right edge entirely. body has overflow-x:clip, so the document
   never scrolled sideways and a scrollWidth check reported "no overflow" while content
   was being cut off. Only the screenshot showed it. */
.row > :first-child{min-width:0}
.row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:14px var(--sk-pad);
  text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.row + .row{border-top:1px solid var(--sk-line-soft)}
.row:hover{background:var(--sk-brand-tint)}
.row .nm{font-size:16px;font-weight:600;line-height:1.3}
/* ONE LINE. A long email plus a funnel name wrapped to three lines and made every
   row a different height, which is what turns a list into a wall. Scanning a list
   needs an even rhythm more than it needs the whole address. */
.row .meta{
  margin-top:1px;font-size:14px;line-height:1.4;color:var(--sk-ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row .when{font-size:12.5px;color:var(--sk-ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
/* A lead row carries initials. .lead, not every .row: conversations and alerts
   share .row with two children, and a third column would shift them all. */
.row.lead{grid-template-columns:auto 1fr auto;gap:11px;padding:12px 16px}
/* ⚠️ The text is the SECOND child here. .row > :first-child{min-width:0} now lands on
   the avatar, the text column refuses to shrink past its nowrap meta line, and the pill
   and date are pushed off the right edge -- the exact bug that guard was written for. */
.row.lead > div{min-width:0}
.lav{
  width:34px;height:34px;border-radius:99px;display:grid;place-items:center;
  background:var(--sk-brand-tint);color:var(--sk-brand-deep);
  font-size:13px;font-weight:700;letter-spacing:.02em;
}
.row .right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}

/* ---------------------------------------------------------------- pills */

.pill{
  display:inline-block;
  padding:3px 8px;border-radius:999px;
  border:1px solid transparent;background:var(--sk-line-soft);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--sk-ink-soft);
  white-space:nowrap;
}
.pill.ok{color:var(--sk-ok);background:var(--sk-ok-bg);border-color:transparent}
.pill.warn{color:var(--sk-warn);background:var(--sk-warn-bg);border-color:transparent}
.pill.bad{color:var(--sk-bad);background:var(--sk-bad-bg);border-color:transparent}

/* --------------------------------------------------------------- inputs */

.btn,button{
  display:inline-block;
  padding:11px 16px;
  border:1.5px solid transparent;border-radius:10px;
  background:var(--sk-brand);color:var(--sk-brand-ink,#fff);
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:15.5px;letter-spacing:0;
  text-decoration:none;text-align:center;cursor:pointer;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.btn.ghost,button.ghost{
  background:var(--sk-card);color:var(--sk-ink);
  border:1.5px solid var(--sk-line);box-shadow:none;
}
.btn:active,button:active{transform:translateY(1px)}

input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],input[type=number],input[type=url]{
  width:100%;padding:12px 14px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);color:var(--sk-ink);
  font:inherit;font-size:17.5px;   /* 16px or iOS zooms the page on focus */
}
input::placeholder{color:var(--sk-ink-faint)}
input:focus{outline:3px solid var(--sk-brand-deep);outline-offset:2px;border-color:var(--sk-brand-deep)}

form.search{display:flex;gap:8px;margin:0 0 14px}
form.search input{min-width:0}   /* same trap: width:100% in a flex row overflows */
form.search button{flex:none}

/* minmax(0,1fr): the column is the screen's width, not its widest child's (an email preview
   made the admin email editor 481px wide on a phone, 2026-09-30). */
.field{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;padding:12px 0;border-bottom:1px solid var(--sk-line-soft)}
.field:last-child{border-bottom:0}
.field span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);
}

/* --------------------------------------------------------------- pieces */

.empty{
  padding:28px var(--sk-pad);
  border:1px dashed var(--sk-line);border-radius:var(--sk-r);
  background:var(--sk-card);
  text-align:center;color:var(--sk-ink-soft);font-size:17px;
}

dl.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
dl.kv dt{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);
  padding-top:3px;
}
dl.kv dd{margin:0;font-size:17px;overflow-wrap:anywhere}
dl.kv dd a{color:var(--sk-brand-deep)}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 18px 18px;border-left:1px solid var(--sk-line)}
.timeline li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--sk-brand)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline .when{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--sk-ink-faint);
}
.timeline strong{display:block;margin-top:5px;font-size:17px}
.timeline p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--sk-ink-soft)}
.timeline dl.answers{margin:8px 0 0;display:grid;gap:12px}
.timeline dl.answers dt{font-size:14px;color:var(--sk-ink-faint);line-height:1.4}
.timeline dl.answers dd{margin:2px 0 0;font-size:16px;line-height:1.45;color:var(--sk-ink)}

/* opportunity + search cards */
.card.opp{border-left:3px solid transparent;border-image:var(--sk-grad) 1;border-top:0;border-right:0;border-bottom:0;
  border:1px solid var(--sk-line);border-left:3px solid var(--sk-brand)}
.opp-top{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.card.opp h3 a{color:inherit;text-decoration:none}
.card.opp h3 a:hover{color:var(--sk-brand-deep)}
.opp-why{margin:8px 0 0;font-size:17px;line-height:1.5;color:var(--sk-ink-soft)}
.opp-angle{margin:10px 0 0;font-size:17px;line-height:1.5}
.opp-angle strong{color:var(--sk-brand-deep);font-weight:700}
.opp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.opp-acts form{display:contents}
.opp-acts .btn,.opp-acts button{padding:10px 14px;font-size:14px}

/* links list */
.linkrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px var(--sk-pad)}
.linkrow > :first-child{min-width:0}
.linkrow + .linkrow{border-top:1px solid var(--sk-line-soft)}
.linkrow .nm{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104,"wght" 700;font-size:16.5px}
.linkrow .u{
  margin-top:3px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;color:var(--sk-ink-soft);overflow-wrap:anywhere;
}
.linkrow .u a{color:var(--sk-brand-deep);text-decoration:none}
.linkrow button{padding:8px 12px;font-size:12.5px}

/* the operator table stays a table: it is a desktop tool for one person */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--sk-r)}
table{width:100%;border-collapse:collapse;background:var(--sk-card);border:1px solid var(--sk-line);border-radius:var(--sk-r);overflow:hidden;box-shadow:var(--sk-shadow)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--sk-line-soft);font-size:15.5px;vertical-align:top;white-space:nowrap}
th{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);font-weight:400}
tr:last-child td{border-bottom:0}
td a{color:var(--sk-brand-deep);text-decoration:none;font-weight:600}

/* --------------------------------------------------------------- log in */

.login{max-width:380px;margin:12vh auto;grid-column:2}
.login .brand{margin:0 0 22px}
.login .brand img{width:150px;max-width:60%}
.login h1{font-size:25.5px}
.login form{margin-top:18px;display:grid;gap:12px}
.note{margin-top:16px;font-size:15.5px;color:var(--sk-ink-soft)}
.note.ok{color:var(--sk-brand-deep)}

ul{margin:0;padding-left:20px}
li{font-size:17px;line-height:1.55;color:var(--sk-ink-soft)}
li + li{margin-top:8px}

/* ---------------------------------------------------- layout corrections
   Found by looking at the rendered phone view, which is the only way these
   show up: each one passes every structural check and still reads as clutter. */

/* Three counts in a two-up grid left the third stranded in its own row looking
   like a mistake. An odd last tile spans instead, which reads as deliberate. */
/* ⚠️ SCOPED TO THE TWO-COLUMN CASE. Unscoped, this also caught the THIRD card once
   .cards went 3-across at 520px -- so the desktop hub showed two stats on one row and a
   full-width third, which read as a layout bug because it was one. */
@media (max-width:519px){ .cards .card:last-child:nth-child(odd){grid-column:1/-1} }

/* Eight platform buttons as free-flowing pills wrapped into three ragged rows
   and dominated the card. A grid puts them in two even rows on a phone. */
.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px}
@media (min-width:420px){ .platforms{grid-template-columns:repeat(4,1fr)} }
.platforms .btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 6px;font-size:12.5px;letter-spacing:.06em;
}
/* The glyph inherits the button's ink rather than the brand's own hex. Eight brand
   colours in one card fights the palette, and the SHAPE is what carries recognition --
   nobody identifies Reddit by the orange alone. Switching to brand colour is one rule
   here if we ever want it. */
.platforms .btn svg{flex:none;display:block}
.platforms .btn span{white-space:nowrap}

/* Below ~360px, eight labelled buttons stop fitting three-up. Drop the label and let
   the mark stand alone rather than shrinking the type past legibility. */
@media (max-width:359px){
  .platforms{grid-template-columns:repeat(4,1fr)}
  /* The glyph alone, but the NAME still reaches a screen reader: the link carries an
     aria-label, so hiding the text here costs nothing to anyone not looking at it. */
  .platforms .btn span{display:none}
  .platforms .btn svg{width:17px;height:17px}
  .platforms .btn{padding:12px 4px}
}

.opp-note{
  margin:14px 0 0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--sk-ink-faint);
}

/* ------------------------------------------------------- conversations */

/* The unread count beside a name in the list. The TAB carries a dot instead: a number on
   five tabs turns into decoration, and the count belongs on the screen that can act on it.
   Sized in em so it
   tracks whatever it sits next to instead of needing a value per context. */
.badge{
  display:inline-block;margin-left:7px;padding:1px 7px;
  border-radius:999px;
  background:var(--sk-brand-deep);color:#fff;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72em;font-weight:500;line-height:1.55;
  vertical-align:middle;
}

/* Unread is carried by WEIGHT and a brand rule, not by a background wash. A tinted
   row competes with .row:hover, so on a phone every row you touched looked unread. */
.row.unread{border-left:3px solid var(--sk-brand)}
.row.unread .nm{font-weight:700}
.row.unread .meta{color:var(--sk-ink)}

.thread{display:grid;gap:10px;margin:18px 0 22px}

.bubble{
  max-width:82%;
  padding:11px 14px;
  border-radius:var(--sk-r);
  font-size:17.5px;
  box-shadow:var(--sk-shadow);
}
.bubble p{margin:0;overflow-wrap:anywhere;white-space:pre-line}   /* a pasted URL must not widen the column */
.bubble strong{display:block;margin-bottom:3px;font-size:16px}
.bubble .when{
  margin-top:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}

/* THEM on the left in paper-white, US on the right in brand. The asymmetry is the
   whole point: a rep scanning a thread should not have to read it to know who spoke. */
.bubble.them{justify-self:start;background:var(--sk-card);border:1px solid var(--sk-line);border-bottom-left-radius:6px}
.bubble.them .when{color:var(--sk-ink-faint)}
.bubble.us{justify-self:end;background:var(--sk-grad);color:#fff;border-bottom-right-radius:6px}
.bubble.us .when{color:rgba(255,255,255,.72)}
.bubble.us .pill.bad{background:rgba(255,255,255,.22);color:#fff}

form.reply{
  display:grid;gap:9px;
  padding:var(--sk-pad);
  border:1px solid var(--sk-line);border-radius:var(--sk-r);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  position:sticky;bottom:12px;   /* stays reachable one-handed in a long thread */
}
form.reply textarea{
  width:100%;padding:11px 13px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-paper);color:var(--sk-ink);
  font:inherit;font-size:17.5px;   /* 16px or iOS zooms on focus */
  resize:vertical;
}
form.reply textarea:focus{outline:3px solid var(--sk-brand-deep);outline-offset:2px;border-color:var(--sk-brand-deep)}

/* Text / Email picker. Radios, so it works with no JavaScript. */
.seg{display:flex;gap:6px}
.seg label{flex:none;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{
  display:block;padding:6px 13px;
  border:1px solid var(--sk-line);border-radius:999px;
  color:var(--sk-ink-soft);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 600;
  font-size:14.5px;
}
.seg input:checked + span{background:var(--sk-brand-tint);border-color:rgba(var(--sk-brand-rgb),.45);color:var(--sk-brand-deep)}
.seg input:focus-visible + span{outline:3px solid var(--sk-brand-deep);outline-offset:2px}
/* Text before texting is set up: shown, greyed, not pickable (the note below says why). */
.seg-off{display:block;padding:6px 13px;border:1px dashed var(--sk-line);border-radius:999px;color:var(--sk-ink-soft);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 600;font-size:14.5px}
/* The subject only for email, the texting line only for text: :has() keeps it free of script. */
form.reply .reply-subj{width:100%;padding:10px 13px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-paper);color:var(--sk-ink);font:inherit;font-size:16.5px}
form.reply:has(input[name=channel][value=sms]:checked) .reply-subj{display:none}
form.reply .text-only{display:none}
form.reply:has(input[name=channel][value=sms]:checked) .text-only{display:block}
.reply-note{margin:0;font-size:14px;line-height:1.45;color:var(--sk-ink-soft)}
.reply-note a{font-weight:600;color:var(--sk-brand-deep)}
ul.rules{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--sk-ink-soft)}

.notice{
  margin:0 0 14px;padding:11px 14px;
  border-radius:var(--sk-r-sm);
  font-size:16.5px;
}
.notice.ok{background:var(--sk-ok-bg);color:var(--sk-ok)}
.notice.bad{background:var(--sk-bad-bg);color:var(--sk-bad)}

/* ------------------------------------------------------- the buy funnel */

/* Where you are in the sequence. The GHL funnel has fifteen steps and no indicator, so
   a buyer cannot tell whether the next click charges them again -- which is exactly the
   anxiety that makes people abandon an upsell chain. */
.progress{display:flex;gap:7px;margin:0 0 20px;flex-wrap:wrap}
.progress span{
  padding:4px 11px;border-radius:999px;
  border:1px solid var(--sk-line);background:var(--sk-card);color:var(--sk-ink-faint);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
}
.progress .done{background:var(--sk-brand-tint);border-color:transparent;color:var(--sk-brand-deep)}
.progress .now{background:var(--sk-grad);border-color:transparent;color:#fff}

.stack{display:grid;gap:4px}
.stack .field{border-bottom:0;padding:8px 0}
.stack .field small{color:var(--sk-ink-faint);font-size:14.5px}

.tiers{display:grid;gap:12px;margin-top:14px}
.tier{padding:var(--sk-pad);border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-paper)}
.tier h3,.offer h3{
  margin:0 0 4px;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 105,"wght" 700;font-size:18.5px;text-transform:uppercase;
}
.tier p,.offer p{margin:0 0 12px;color:var(--sk-ink-soft);font-size:17px}

/* The price is the LABEL of the button, not text beside it. One tap, and what you are
   agreeing to is written on the thing you tapped. */
.picks{display:flex;gap:9px;flex-wrap:wrap}
.picks .btn{flex:1 1 auto;display:grid;gap:1px;padding:11px 16px;line-height:1.15}
.picks .btn small{display:block;font-size:12.5px;opacity:.82;font-weight:400;text-transform:none;letter-spacing:0}

.offer{margin-top:14px;margin-bottom:12px}   /* it sat flush against the card above it */
.offer h3 .pill{vertical-align:middle;margin-left:6px}
.offer .added{margin:0;color:var(--sk-ok);font-size:17px}

/* The decline is a plain link, never a button. A styled "no thanks" competing with the
   offer is the dark-pattern version of this page. */
.skip{margin:16px 0 0;text-align:center}
.skip a{color:var(--sk-ink-faint);font-size:16px}

.notice.warn{background:var(--sk-warn-bg);color:var(--sk-warn)}


/* =====================================================================
   DESKTOP  —  the app is not a phone artefact

   SHARK-DESIGN-SYSTEM §9 leaves this open deliberately: a links hub
   genuinely IS a phone thing, a training page is not. The buyer app is
   not either -- it is opened on a laptop to work through leads, and the
   how-to pages already set the precedent of widening at 900px.

   WHAT WIDENS AND WHAT DOES NOT is the whole point. Lists, rows and card
   grids get the width because scanning benefits from it. PROSE DOES NOT:
   a 1080px line of body text is measurably harder to read than a 65ch
   one, so paragraphs keep a ch-based measure (§: "constrain prose with a
   ch measure, not a pixel width"). Widening everything is not a desktop
   layout, it is a stretched phone.
   ===================================================================== */

@media (min-width:900px){
  /* The measure is still a GRID COLUMN, never margin:auto -- a component
     setting the `margin` shorthand would reset it and the page would
     drift left while the header stayed centred. (§1) */
  body{grid-template-columns:1fr min(1080px,100%) 1fr;padding-left:32px;padding-right:32px}

  main{padding-top:34px}

  /* Prose keeps its measure even though the column grew. */
  .sub,
  .card > p,
  .empty{max-width:68ch}

  /* ⚠️ auto-fit, NOT repeat(2,1fr). A fixed two-column grid left a SINGLE opportunity
     stranded in the left half with an empty column beside it -- which reads as a missing
     card rather than a deliberate layout. auto-fit lets one card take the full width and
     two sit side by side, so the grid follows the content instead of the content having
     to fill the grid. */
  .opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:14px;align-items:start}

  /* Offers and tiers sit side by side rather than stacking a screen deep. */
  .tiers{grid-template-columns:repeat(2,1fr)}
  .offer{margin-bottom:0}
  .offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;align-items:start}

  /* A message bubble must NOT grow to 1080px. A chat line that wide stops
     reading as a message and the left/right asymmetry that tells you who
     spoke gets lost. */
  .bubble{max-width:min(62%,560px)}

  /* The reply box stops being sticky: there is no thumb reach problem on a
     desktop, and a pinned box just eats vertical space. */
  form.reply{position:static}

  /* Rows get the width -- that is what they are for. Give the name room to
     breathe against the meta line. */
  .row{padding:15px 18px}
  .rows{border-radius:var(--sk-r)}
}

@media (min-width:1240px){
  /* Three stats across stays right; the leads list gains nothing from more
     than ~1080px, so the column stops growing rather than sprawling. */
  body{grid-template-columns:1fr min(1140px,100%) 1fr}
}

/* --------------------------------------------------- the page builder
   Reuses .field throughout; these are the few shapes it adds. */

/* A textarea was never styled because nothing had one until reps started writing their
   own pages. Same rules as the inputs, including the 16px that stops iOS zooming. */
textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);color:var(--sk-ink);
  font:inherit;font-size:17.5px;line-height:1.5;resize:vertical;
}
textarea:focus{outline:3px solid var(--sk-brand-deep);outline-offset:2px;border-color:var(--sk-brand-deep)}

/* The helper line under a field. Sentence case on purpose: .field span is the uppercase
   mono label, and a hint that shouted would compete with it. */
.field small{color:var(--sk-ink-faint);font-size:14.5px;line-height:1.45}
.field small strong{color:var(--sk-ink);font-weight:600}

/* A choice reads left to right: the control, then what it means. `.plain` opts out of the
   uppercase mono treatment .field span carries, since this one is a sentence. */
.field.choice{grid-template-columns:auto 1fr;align-items:start;gap:11px}
.field.choice input{width:auto;margin-top:3px}
.field.choice .plain{
  font-family:inherit;font-size:16.5px;letter-spacing:normal;text-transform:none;color:var(--sk-ink);
}
/* Its hint line too: ".field span" reached the inner <span class="sub"> and set it in the
   spaced grey capitals of a field label (Account's reply choices, Notifications). */
.field.choice .plain span{font-family:inherit;font-size:15px;letter-spacing:normal;text-transform:none;color:var(--sk-ink-soft)}
/* Every tick box and radio in the system's colour, not the browser's blue. */
input[type=checkbox],input[type=radio]{accent-color:var(--sk-brand)}

.rowtop{display:flex;align-items:center;gap:9px;justify-content:space-between}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14.5px;word-break:break-all}
.card.ok{border-color:var(--sk-ok);background:var(--sk-ok-bg)}
.card.bad{border-color:var(--sk-bad);background:var(--sk-bad-bg)}

/* A held-submissions banner. A link that looks like a warning, because it is explaining a
   silence the rep has already noticed and is worried about. */
.heldbar{display:block;text-decoration:none;color:inherit}
.heldbar:hover{border-color:var(--sk-bad)}
.heldbar .sub{display:block;margin-top:3px}
.plainlist{margin:8px 0 0;padding-left:18px;display:grid;gap:7px}
.plainlist li{font-size:16px;line-height:1.5;color:var(--sk-ink-soft)}
.plainlist strong{color:var(--sk-ink)}

/* A notification row's icon. Emoji rather than an inlined set, because these are five
   fixed meanings and a sprite would be five more things to keep in step. */
.nico{width:32px;height:32px;border-radius:9px;background:var(--sk-brand-tint);
  display:grid;place-items:center;flex:none;font-size:17px}
/* A notification: icon, then its title over one line of detail. The lead row's two columns
   put the icon first and squeezed title and detail into one run ("You got a new leadLeah"). */
.row.nrow{grid-template-columns:auto 1fr}
.nrow .t{display:grid;gap:2px;min-width:0}
.nrow .t b{font-size:16px;font-weight:600;line-height:1.3}
.nrow .t span{font-size:14px;line-height:1.4;color:var(--sk-ink-faint)}

/* =========================================================== the daily shape
 *
 * Ported from the clickable prototype Jeff showed Joe, because the live app had
 * the same routes and did not FEEL like it: three outsized stat cards, then a
 * wall of text. Joe, 2026-09-27: "lots of pages, not a lot on each page." The
 * home screen is now a greeting, one hero, and a short stack of tappable rows.
 *
 * ⚠️ THE PALETTE DOES NOT COME WITH IT. The prototype is GLP forest-and-orange;
 * these are the same --sk-* nine every other surface uses, so a tenant reskin
 * still reaches this screen. What was copied is the SHAPE, not the colours.
 */

/* mono eyebrow. Quieter than h2's sticky rule, for labelling one block rather
   than opening a section. */
.lbl{
  display:block;margin:0 0 9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sk-ink-faint);
}

.greet{animation:sk-rise .5s cubic-bezier(.2,.7,.3,1) both}
.greet h1{text-transform:none;font-variation-settings:"wdth" 106,"wght" 800;font-size:clamp(26px,7.2vw,32px)}
.greet p{margin:4px 0 0;font-size:16px;color:var(--sk-ink-faint)}

/* Three numbers as a strip, not three full-width cards. The old ones stacked to
   a third of a phone screen and pushed everything the rep came for below the
   fold -- a count is a glance, not a headline. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat{
  padding:11px 12px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  animation:sk-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.stat b{
  display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 800;
  font-size:23px;line-height:1;font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--sk-ink-faint)}
.stat.up b{color:var(--sk-brand)}

/* The hero. One thing to do today, and it is dark so it cannot be mistaken for
   another card in the stack. */
.today{
  display:block;margin-top:18px;padding:17px;
  border-radius:var(--sk-r);background:var(--sk-grad);color:#fff;text-decoration:none;
  box-shadow:var(--sk-shadow-lift);
  animation:sk-rise .5s .04s cubic-bezier(.2,.7,.3,1) both;
}
/* ⚠️ Fixed light-on-dark values inside, NOT palette tokens. This card is dark on
   every tenant; --sk-ink-faint here would resolve to a colour meant for paper. */
.today .lbl{color:rgba(255,255,255,.92)}
.today h3{font-size:19px;line-height:1.22;color:#fff}
.today .src{display:flex;align-items:baseline;gap:7px;margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.92)}
.today .src i{flex:none;width:5px;height:5px;border-radius:9px;background:#8BF0B0;transform:translateY(-2px)}
.today .why{margin:11px 0 0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.86)}
.today .platforms{margin-top:14px;grid-template-columns:repeat(4,1fr)}
.today .platforms .btn span{display:none}
.today .platforms .btn{padding:11px 4px;display:grid;place-items:center}
.today .platforms .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.today .platforms .btn:hover{background:rgba(255,255,255,.18)}

/* A tappable row: icon tile, two lines, then either a chevron or a count.
 *
 * ⚠️ .mrow, NOT .row. .row is the LEAD row and carries .nm/.meta/.right; one
 * class for both meant every menu row inherited a lead's layout. Different
 * thing, different name.
 */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
.card p{overflow-wrap:anywhere}
.mrow{
  display:flex;align-items:center;gap:11px;
  padding:12px 13px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  text-decoration:none;color:inherit;
  transition:border-color .15s,transform .14s;
  animation:sk-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.mrow:hover{border-color:var(--sk-brand)}
.mrow:active{transform:translateY(1px)}
.rico{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;background:var(--sk-brand-tint);
}
.rico svg{width:16px;height:16px;fill:none;stroke:var(--sk-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mrow .t{display:grid;gap:1px;min-width:0}
.mrow .t b{font-size:16px;font-weight:600;line-height:1.3}
.mrow .t span{font-size:13px;line-height:1.4;color:var(--sk-ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .chev{margin-left:auto;flex:none;color:var(--sk-ink-faint);display:grid}
.mrow .chev svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mrow .count{
  margin-left:auto;flex:none;padding:2px 8px;border-radius:99px;
  background:var(--sk-brand-deep);color:#fff;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
}

/* Funnel cards. Title and state, what it is, the one link, two actions. */
.fstack{display:grid;gap:10px}
.fcard{
  display:grid;gap:9px;padding:14px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  animation:sk-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.fcard .top{display:flex;align-items:center;gap:9px;justify-content:space-between}
.fcard .top b{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 700;
  font-size:17px;line-height:1.25;letter-spacing:-.01em;min-width:0;
}
.fcard .top .pill{flex:none}
.fcard .what{font-size:14px;line-height:1.4;color:var(--sk-ink-faint)}
/* The URL is shown, never wrapped: a link broken across two lines reads as two
   things and cannot be read aloud to anyone. Copy is what carries the whole of it. */
.fcard .url{
  padding:9px 11px;border:1px dashed var(--sk-line);border-radius:8px;background:var(--sk-paper);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--sk-ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fcard .acts{display:flex;gap:7px}
.fcard .acts > *{flex:1;padding:9px 12px;font-size:14.5px}
.fcard details.more summary{
  cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--sk-brand-deep);padding:2px 0;
}
.fcard details.more summary::-webkit-details-marker{display:none}
.fcard details.more summary::after{content:" +"}
.fcard details.more[open] summary::after{content:" \2013"}
.fcard details.more .linkrow{padding:10px 0;border-top:1px solid var(--sk-line-soft)}
.fcard details.more .linkrow .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}


/* Contact actions, Joe's pair: Email {name} and Call. */
.acts2{display:flex;gap:8px;margin-top:14px}
.acts2 > *{flex:1}
.acts2 + .card{margin-top:14px}

/* ============================================================== desktop
 *
 * At 900px and up the app stops pretending to be a phone.
 *
 * ⚠️ THE TAB BAR BECOMES A SIDEBAR. Five tabs spread along the bottom of a 1440px
 * screen put Home and Account a monitor's width apart, at the edge the eye never
 * visits. Same five links, same order, same markup -- only the layout moves, so a
 * route cannot exist on one width and not the other.
 *
 * ⚠️ THE COLUMN STOPS AT ~860px, not 1140. The screens are now a phone's worth of
 * rows, and a row stretched to 1140 puts its chevron a hand-span from its label and
 * turns a stat card into an empty box. Where there is spare width, the content
 * goes two-up (navigation rows, funnel cards) instead of getting wider.
 *
 * Placed LAST on purpose: it overrides the 900/1240 column widths above at equal
 * specificity, so it has to win on source order.
 */
@media (min-width:900px){
  body{
    grid-template-columns:1fr min(860px,100%) 1fr;
    padding-left:calc(236px + 40px);padding-right:40px;
  }
  /* No side menu on this page (sign-in, the marketingshark.app picker, error pages): the room
     kept for it pushed the content right of centre (Jeff, 2026-10-01: "the pages you make arent
     always centered"). */
  body:not(:has(.tabs)){padding-left:40px}

  .tabs{
    top:0;bottom:0;left:0;right:auto;width:236px;
    display:flex;flex-direction:column;gap:4px;
    padding:24px 14px;
    border-top:0;border-right:1px solid var(--sk-line);
    background:var(--sk-card);
  }
  .tabs a{
    display:flex;align-items:center;justify-content:flex-start;gap:12px;
    padding:11px 14px;font-size:15.5px;
  }
  .tabs .dot{top:50%;right:14px;transform:translateY(-50%)}

  /* The menu's dropdowns (shared.mjs SUBS): a section with pages of its own opens to list
     them, and the section you are in starts open. The plain tab beside it is the phone's. */
  .tabs a.tab.hassub{display:none}
  .tabs .tabgrp{display:block}
  .tabs .tabgrp summary{
    display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;cursor:pointer;list-style:none;
    color:var(--sk-ink-faint);font-family:"Archivo",sans-serif;font-variation-settings:"wght" 600;font-size:15.5px;
  }
  .tabs .tabgrp summary::-webkit-details-marker{display:none}
  .tabs .tabgrp summary svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .tabs .tabgrp summary[aria-current]{color:var(--sk-brand-deep);background:var(--sk-brand-tint)}
  .tabs .tabgrp .chev{margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
  .tabs .tabgrp[open] .chev{transform:rotate(-135deg)}
  .tabs .tabgrp a{display:block;padding:8px 14px 8px 47px;font-size:14.5px;border-radius:9px}
  .tabs .tabgrp a[aria-current]{color:var(--sk-brand-deep);background:none;font-variation-settings:"wght" 700}
  .tabs .tabgrp a:hover{background:var(--sk-brand-tint)}

  /* no bottom bar to clear any more */
  main{padding-bottom:56px}

  .stack{grid-template-columns:1fr 1fr}
  /* a lone row spans the grid rather than leaving an empty half beside it */
  .stack > :only-child{grid-column:1/-1}
  .fstack{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-items:start}
  .opps{grid-template-columns:1fr}
}

/* ---- admin: the funnel editor (admin-funnels.mjs) ---- */
.crumbs{margin:0 0 6px;font-size:14.5px;color:var(--sk-ink-faint)}
.crumbs a{color:var(--sk-brand-deep);text-decoration:none}
.card.rowlink{display:grid;gap:4px;text-decoration:none;color:var(--sk-ink)}
.card.rowlink .muted,.steprow .muted{font-size:14.5px;overflow-wrap:anywhere}
.steprow{display:flex;gap:10px;align-items:center;justify-content:space-between}
.stepmain{display:grid;gap:4px;min-width:0}
.stepmain a{color:var(--sk-ink);text-decoration:none}
.stepbtns{display:flex;gap:6px;flex:none}
.stepbtns form{margin:0}
button.small{padding:6px 11px;font-size:15px}
label.choice{display:flex;gap:9px;align-items:center;padding:4px 0;font-size:16.5px}
label.choice input{width:auto;margin:0}
select{width:100%;padding:12px 14px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);color:var(--sk-ink);font:inherit;font-size:17px}
[data-for][hidden]{display:none}
.card.stack a:not(.btn),.sub a{color:var(--sk-brand)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.edbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edbar select{width:auto;flex:1;min-width:0}
iframe.emailedit{width:100%;min-height:420px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:#fff}
iframe.preview{width:100%;height:260px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:#fff}
textarea{width:100%;padding:12px 14px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);color:var(--sk-ink);font:inherit;font-size:16.5px}
#raw{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px}
details.field summary{cursor:pointer;color:var(--sk-brand)}
/* A 600px-wide email must not push the page wider than a phone: every child of a form card
   may shrink, and the editor frame is a block that never exceeds its column. */
.card.stack > *,.field{min-width:0}
iframe.emailedit,iframe.preview{display:block;max-width:100%}
.field input,.field select,.field textarea{max-width:100%}
.waitrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.waitrow input[type=number]{width:80px;padding:9px 10px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);font:inherit;font-size:16.5px}
.waitrow select{width:auto;flex:1;min-width:0;padding:9px 10px;font-size:16px}
.stepmain .waitrow{margin-top:2px}
[data-kind][hidden]{display:none}

/* a colour picker (the quiz's look, 0068): a swatch, not a stretched text box */
input[type=color]{width:64px;height:44px;padding:3px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);cursor:pointer}

/* the wallet (0069) */
.wallet-bal{font-size:28px;line-height:1.2}
.wallet-add{display:flex;flex-wrap:wrap;gap:8px}
.wallet-add button{flex:1 1 90px;white-space:nowrap;padding-left:10px;padding-right:10px}
.wallet-line{display:flex;justify-content:space-between;gap:12px;margin:0}
.wallet-line > span:first-child{min-width:0}


/* a follow-up's branch (0072): its "if yes" / "otherwise" steps, indented under the condition */
.branch{border-left:3px solid var(--sk-line);padding-left:12px;margin-top:6px}
.branch > p{margin:0 0 6px}
.branch details{margin-top:8px}
.branch summary{cursor:pointer;color:var(--sk-brand);font-weight:600;font-size:15px}
.addsteps{gap:10px}
/* Steps wrap on a phone: the buttons drop under the step instead of pushing the page wide. */
.steprow{flex-wrap:wrap}
.steprow > .stepmain{flex:1 1 220px}
.waitrow input[type=text]{flex:1 1 140px;width:auto;min-width:0}
/* A branch: its own buttons first, at the right, then the condition and both sides full width. */
.branchrow{flex-direction:column;align-items:stretch}
.branchrow > .stepmain{flex:none;width:100%}
.branchbody{min-width:0}
.branch .card{padding:12px}
/* A grid column sizes to its widest content unless told otherwise; this one stays inside the card. */
.stepmain{grid-template-columns:minmax(0,1fr)}
.waitrow select{min-width:96px;flex:1 1 170px}
/* a rep's own domain (0073): each DNS record to copy */
.dnsrec code{word-break:break-all;font-size:14px;background:var(--sk-brand-tint);padding:2px 6px;border-radius:6px}
.dnsrec p{margin:0}

/* Admin accounts list (0081): filter chips that wrap on a phone. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.btn.sm{padding:7px 12px;font-size:14px;min-height:0}
/* View as a rep (admin): a bar at the top of every screen of theirs. */
.viewas{position:sticky;top:0;z-index:30;background:#1f1147;color:#fff;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14px}
.viewas a{color:#fff;font-weight:600;margin-left:6px}
button.danger{background:#b42318;border-color:#b42318;color:#fff}
/* Share Shark (Three and Free): three dots, filled as referrals pay. */
.tf-dots{display:flex;gap:10px}
.tf-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--sk-line,#d9d4e6);background:transparent}
.tf-dot.on{background:var(--sk-brand,#6d28d9);border-color:var(--sk-brand,#6d28d9)}
/* Quick start (0084): a popup the first time, a page after. The shadow is the backdrop, since
   the dialog is opened by markup (no showModal, so no ::backdrop). */
dialog.qs{position:fixed;inset:0;z-index:2000;margin:auto;width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 48px);
  overflow:auto;border:0;border-radius:18px;padding:22px 20px;background:var(--sk-card,#fff);color:inherit;
  box-shadow:0 0 0 100vmax rgba(17,12,40,.55),0 20px 60px rgba(0,0,0,.3)}
.qs-title{font-size:24px;font-weight:800;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.qs-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin:10px 0 4px}
.qs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.qs-steps{margin:12px 0 16px;padding-left:22px;display:grid;gap:12px}
.qs-steps li strong{display:block}
.qs-steps li .sub{display:block;margin:2px 0 4px}
.qs-steps li a{font-weight:600;color:var(--sk-brand-deep,#5b21b6);text-decoration:none}   /* the deep shade, like every other link */
dialog.qs form button{width:100%}
/* Support on every rep page (0084). */
.helpline{text-align:center;font-size:15px;margin:28px 0 6px}
.helpline a{color:var(--sk-brand-deep);font-weight:600}
.support-widget{min-height:560px;margin:10px 0}
/* body > * are each their own layer (z-index:1), so the popup cannot rise out of <main> on its
   own: lift <main> above the header (20) and tab bar (30) while it is open. */
main:has(> dialog.qs[open]){z-index:2000}
/* The menu (0086): Training, Support and the rest, from the header on every rep screen. */
details.menu{position:relative}
details.menu > summary{list-style:none;cursor:pointer}
details.menu > summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:200px;display:grid;padding:8px;
  background:var(--sk-card,#fff);border:1px solid var(--sk-line,#e6e1f0);border-radius:14px;box-shadow:0 14px 40px rgba(20,12,50,.18)}
.menu-panel a{padding:12px 14px;border-radius:10px;text-decoration:none;color:inherit;font-weight:600}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--sk-tint,#f3effc)}
.cal{position:relative;width:100%;height:520px;border-radius:12px;overflow:hidden}
.cal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* "How do I find this?" under a setup question (0092). */
.linkish{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--sk-brand-deep,#6d28d9);text-decoration:underline;cursor:pointer;width:auto;min-height:0;box-shadow:none}
dialog.howto{width:calc(100% - 32px);max-width:480px;max-height:calc(100dvh - 48px);overflow:auto;border:0;border-radius:18px;
  padding:22px 20px;background:var(--sk-card,#fff);color:inherit;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.howto::backdrop{background:rgba(17,12,40,.55)}
dialog.howto ol{margin:0 0 16px;padding-left:20px;display:grid;gap:12px;line-height:1.5}
dialog.howto li strong{display:block}
dialog.howto [data-close]{width:100%}
/* Put it on your phone (Jeff, 2026-09-30): the QR on a computer, the steps on a phone. */
.phone-card{margin:16px 0}
.phone-card .qs-title{margin-bottom:6px}
/* .stack goes two columns on a wide screen (Home's rows); a card of steps reads top to bottom. */
.card.stack.qs-page{grid-template-columns:1fr}
.qr{width:220px;max-width:100%;margin:6px 0;padding:10px;background:#fff;border-radius:14px;border:1px solid var(--sk-line-soft)}
.qr svg{display:block;width:100%;height:auto}
.installed-only{display:none}
@media (display-mode: standalone){.phone-card{display:none}.installed-only{display:block}}

/* Daily moves (0094): the dark card on Home, and the checklist it opens. */
.today.daily .btn{display:inline-block;margin-top:14px;background:#fff;color:var(--sk-brand-deep);border-color:#fff}
.dbar{height:8px;border-radius:9px;background:rgba(var(--sk-line-rgb),.6);overflow:hidden;margin:10px 0 4px}
.dbar i{display:block;height:100%;border-radius:9px;background:var(--sk-brand);transition:width .3s}
.today .dbar{background:rgba(255,255,255,.22)}
.today .dbar i{background:#fff}
.dprog{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:15px}
.dprog span{color:var(--sk-ink-soft);font-weight:600}
.dlist{padding:4px 16px;margin-top:14px}
.ditem{border-bottom:1px solid var(--sk-line-soft);scroll-margin-top:90px}
.ditem:last-child{border-bottom:0}
.ditem form{margin:0}
.dcheck{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 0;background:none;border:0;box-shadow:none;
  color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:0}
.dcheck:hover{background:none}
.dcheck .box{flex:none;width:28px;height:28px;margin-top:1px;border:2px solid var(--sk-line);border-radius:8px;display:grid;place-items:center;background:var(--sk-card,#fff)}
.ditem.on .box{background:var(--sk-check,var(--sk-brand));border-color:var(--sk-check,var(--sk-brand))}
.ditem.on .box::after{content:"";width:8px;height:14px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.dtext strong{display:block;font-size:17px;line-height:1.3;color:var(--sk-ink)}
.dtext small{display:block;margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--sk-ink-soft)}
.ditem.on .dtext strong{color:var(--sk-ink-soft);text-decoration:line-through;text-decoration-thickness:1.5px}
.dextra{margin:-6px 0 14px 42px}
.dtopic{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--sk-ink-soft)}
.dtopic a{font-weight:600;color:var(--sk-brand-deep)}
.dsearch{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:2px}
.dnote{margin:16px 0 0;padding:16px 18px;border-radius:var(--sk-r);background:var(--sk-tint);display:grid;gap:4px}
.dnote strong{font-size:16px}
.dnote span{font-size:15px;color:var(--sk-ink-soft)}

.dquick{display:flex;flex-wrap:wrap;gap:8px}
/* Jeff: "a pale nueva color, too flat plain white": the system's own tint, per system. */
.dquick .btn.ghost{background:var(--sk-brand-tint);border-color:color-mix(in srgb,var(--sk-brand) 35%,transparent);color:var(--sk-brand-deep)}
.dquick .btn.ghost:hover{background:color-mix(in srgb,var(--sk-brand) 22%,var(--sk-card))}
.dq{display:inline-flex;align-items:center;width:auto;margin:0;padding:9px 14px;font-size:15px;min-height:44px}
.dmore{margin-top:10px}
.dmore summary{cursor:pointer;font-weight:600;color:var(--sk-brand-deep);font-size:15px}
.dmore[open] summary{margin-bottom:8px}
.dmore p,.dsteps li{font-size:15.5px;line-height:1.55;color:var(--sk-ink-soft);margin:8px 0}
.dsteps{padding-left:20px;margin:6px 0}
.dhead{font-weight:700;color:var(--sk-ink)!important;margin-top:16px!important}
.dscript{margin:8px 0;padding:14px;border-radius:12px;background:var(--sk-tint);border:1px solid var(--sk-line-soft)}
.dscript p{color:var(--sk-ink)!important;margin:0 0 10px!important}
.dscript button{width:100%}
.dvar{padding:0 5px;border-radius:5px;background:rgba(var(--sk-brand-rgb),.14);color:var(--sk-brand-deep);font-weight:600}
.dvideo{position:relative;width:min(240px,100%);aspect-ratio:196/426;border-radius:12px;overflow:hidden;background:#000}
.dvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dthread{margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--sk-line-soft);display:grid;gap:6px}
.dthread span{font-size:13px;color:var(--sk-ink-faint);text-transform:uppercase;letter-spacing:.06em}
.dthread b{font-size:15.5px;line-height:1.4}
.dthread .dq{justify-self:start}

/* My funnels: each funnel's how-it-works and promotion links, from its how-to page (Jeff, 2026-09-30). */
.fres{margin-top:12px;border-top:1px solid var(--sk-line-soft)}
.fres .linkrow{padding:12px 0;grid-template-columns:1fr;gap:8px}
@media (min-width:641px){.fres .linkrow{grid-template-columns:1fr auto;gap:10px}}
.fres .linkrow .nm{font-size:15.5px;line-height:1.35}
.fres .linkrow .btn{justify-self:start;padding:8px 13px;font-size:13.5px;min-height:0;white-space:nowrap;margin:0;width:auto}
.fcard .what{line-height:1.5}

/* My funnels as the GHL rep hub (rep-hub.mjs, Jeff 2026-09-30: "we need to be on point"). */
.hgroup{display:flex;align-items:center;gap:10px;margin:24px 0 10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
.hgroup i{flex:1;height:1px;background:var(--sk-line-soft)}
.hgroup b{font-weight:600;color:var(--sk-ink-soft)}
.hcard{background:var(--sk-card,#fff);border:1px solid var(--sk-line-soft);border-radius:var(--sk-r);margin-bottom:12px;box-shadow:var(--sk-shadow)}
.hcard[open]{border-color:rgba(var(--sk-brand-rgb),.45)}
.hcard summary{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;list-style:none}
.hcard summary::-webkit-details-marker{display:none}
.hicon{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--sk-grad,var(--sk-brand))}
.hicon svg{width:24px;height:24px}
.hname{flex:1;min-width:0}
.hname b{display:block;font-size:17px;line-height:1.25;color:var(--sk-ink)}
.hname small{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:var(--sk-ink-soft)}
.hchev{flex:none;color:var(--sk-brand-deep);transition:transform .2s}
.hchev svg{width:22px;height:22px;display:block}
.hcard[open] .hchev{transform:rotate(180deg)}
.hbody{padding:0 16px 18px}
.hdesc{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--sk-ink-soft)}
.hcopy{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border-radius:14px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.hcopy svg{width:20px;height:20px}
.hurl{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 10px 10px 14px;border:1.5px dashed var(--sk-line);border-radius:12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13.5px;color:var(--sk-ink-soft)}
.hurl span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hurl a{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--sk-line);border-radius:10px;color:var(--sk-brand-deep);background:var(--sk-card,#fff)}
.hurl a svg,.hgo svg{width:18px;height:18px}
.hsub{margin:20px 0 10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
.hact{display:flex;align-items:flex-start;gap:14px;padding:14px;margin-bottom:10px;border:1px solid var(--sk-line-soft);border-radius:14px;color:var(--sk-ink);text-decoration:none;background:var(--sk-card,#fff)}
.hact:hover{border-color:rgba(var(--sk-brand-rgb),.45)}
.hmark{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sk-tint);color:var(--sk-brand-deep)}
.hmark svg{width:19px;height:19px}
.hmark.emoji{background:none;font-size:24px}
.hlabel{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.3;padding-top:7px}
.hact.sub .hlabel{padding-top:1px}
.hlabel small{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.45;color:var(--sk-ink-soft)}
.hgo{flex:none;color:var(--sk-ink-faint);padding-top:6px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--sk-line-soft);font-size:15.5px}
.hrow:first-child{border-top:0}
.hrow button{flex:none;width:auto;padding:8px 14px;font-size:13.5px;min-height:0;margin:0}

/* The thread on a phone (Jeff, 2026-09-30): the reply box rides ABOVE the fixed tab bar (it sat
   12px from the bottom, under the bar), and while they type the tab bar steps aside so the box
   and the keyboard have the screen. */
.more-mail summary{cursor:pointer;font-weight:600;margin-top:6px}
.bubble.us .more-mail summary{color:#fff}
.more-mail[open] summary{margin-bottom:6px}
@media (max-width:899px){
  form.reply{bottom:calc(84px + env(safe-area-inset-bottom));z-index:31}
  body:has(form.reply textarea:focus) .tabs{display:none}
  body:has(form.reply textarea:focus) form.reply{bottom:8px}
}

/* The reply box, compact like a messaging app: the pills small, the box and Send on one line. */
form.reply .reply-row{display:flex;align-items:flex-end;gap:8px}
form.reply .reply-row textarea{flex:1;min-width:0;min-height:52px;max-height:40vh;resize:none}
form.reply .reply-row button{flex:none;width:auto;margin:0;padding:14px 18px}
@media (max-width:899px){
  form.reply{padding:10px 12px;gap:8px}
  form.reply .seg label span{padding:6px 14px;font-size:15px}
}

/* Sign in (Jeff, 2026-09-30): password by default, the link one tap below. */
.login-form{display:grid;gap:12px;margin-top:18px}
.login-form .field{border:0;padding:0}
.showpass{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--sk-ink-soft);cursor:pointer}
.showpass input{width:22px;height:22px;margin:0;accent-color:var(--sk-brand)}
.login-alt{margin:14px 0 0;text-align:center;font-size:16px}
.login-alt a{color:var(--sk-brand-deep);font-weight:600}

/* A section that stays folded until it's wanted (Account > Ad tracking). */
.acc{margin:18px 0;border:1px solid var(--sk-line);border-radius:14px;background:var(--sk-card)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary>span{display:flex;flex-direction:column;gap:3px}
.acc>summary strong{font-size:16px;color:var(--sk-ink)}
.acc>summary small{font-size:13.5px;color:var(--sk-ink-soft)}
.acc>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--sk-ink-soft);border-bottom:2px solid var(--sk-ink-soft);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
.acc[open]>summary::after{transform:rotate(-135deg)}
.acc>summary:focus-visible{outline:2px solid var(--sk-brand);outline-offset:2px;border-radius:14px}
.acc-body{padding:0 18px 18px;border-top:1px solid var(--sk-line-soft)}
.acc-body h3{margin:18px 0 4px;font-size:15px}

/* Social content, one post a day (0100). */
.spost img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--sk-line)}
.spost .dquick{display:flex;flex-wrap:wrap;gap:8px}
.dpost{display:flex;gap:12px;align-items:center;margin-top:10px}
.dpost img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--sk-line);flex:none}
.dpost>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dpost span{font-weight:600;font-size:15px;color:var(--sk-ink)}

.ditem.off{opacity:.75}
.ditem.off .dcheck{cursor:default}
.dlock{font-size:14.5px;line-height:1.5;color:var(--sk-ink-soft);margin:6px 0 0}
.dlock a{font-weight:600;color:var(--sk-brand-deep)}

/* phone-type:start */
/* Generated by scripts-phone-type.mjs: every size a step bigger on a phone. Edit sizes above, then rerun it. */
@media (max-width:640px){
  body{font-size:19.5px}
  .brand .tag{font-size:11.5px}
  .avatar{font-size:16.5px}
  .tabs a{font-size:14px}
  .adminlink a{font-size:14px}
  .tenantbar > span{font-size:14px}
  .tenantbar a{font-size:16.5px}
  h2{font-size:15px}
  h3{font-size:20px}
  .sub{font-size:19px}
  .muted{font-size:16.5px}
  .cards .n{font-size:31.5px}
  .cards .k{font-size:14px}
  .row .nm{font-size:18px}
  .row .meta{font-size:16px}
  .row .when{font-size:14.5px}
  .lav{font-size:15px}
  .pill{font-size:14px}
  .btn,button{font-size:17.5px}
  input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],input[type=number],input[type=url]{font-size:19.5px}
  .field span{font-size:14px}
  .empty{font-size:19px}
  dl.kv dt{font-size:14px}
  dl.kv dd{font-size:19px}
  .timeline .when{font-size:14px}
  .timeline strong{font-size:19px}
  .timeline p{font-size:18px}
  .timeline dl.answers dt{font-size:16px}
  .timeline dl.answers dd{font-size:18px}
  .opp-why{font-size:19px}
  .opp-angle{font-size:19px}
  .opp-acts .btn,.opp-acts button{font-size:16px}
  .linkrow .nm{font-size:18.5px}
  .linkrow .u{font-size:15px}
  .linkrow button{font-size:14.5px}
  th,td{font-size:17.5px}
  th{font-size:14px}
  .login h1{font-size:28px}
  .note{font-size:17.5px}
  li{font-size:19px}
  .platforms .btn{font-size:14.5px}
  .opp-note{font-size:14px}
  .bubble{font-size:19.5px}
  .bubble strong{font-size:18px}
  .bubble .when{font-size:14px}
  form.reply textarea{font-size:19.5px}
  .seg span{font-size:16.5px}
  .notice{font-size:18.5px}
  .progress span{font-size:14px}
  .stack .field small{font-size:16.5px}
  .tier h3,.offer h3{font-size:20.5px}
  .tier p,.offer p{font-size:19px}
  .picks .btn small{font-size:14.5px}
  .offer .added{font-size:19px}
  .skip a{font-size:18px}
  textarea{font-size:19.5px}
  .field small{font-size:16.5px}
  .field.choice .plain{font-size:18.5px}
  .mono{font-size:16.5px}
  .plainlist li{font-size:18px}
  .nico{font-size:19px}
  .lbl{font-size:14px}
  .greet p{font-size:18px}
  .stat b{font-size:25.5px}
  .stat span{font-size:14px}
  .today h3{font-size:21px}
  .today .src{font-size:16.5px}
  .today .why{font-size:17.5px}
  .mrow .t b{font-size:18px}
  .mrow .t span{font-size:15px}
  .mrow .count{font-size:14.5px}
  .fcard .top b{font-size:19px}
  .fcard .what{font-size:16px}
  .fcard .url{font-size:15px}
  .fcard .acts > *{font-size:16.5px}
  .fcard details.more summary{font-size:16px}
  .fcard details.more .linkrow .u{font-size:15px}
  .crumbs{font-size:16.5px}
  .card.rowlink .muted,.steprow .muted{font-size:16.5px}
  button.small{font-size:17px}
  label.choice{font-size:18.5px}
  select{font-size:19px}
  textarea{font-size:18.5px}
  #raw{font-size:15px}
  .waitrow input[type=number]{font-size:18.5px}
  .waitrow select{font-size:18px}
  .wallet-bal{font-size:31px}
  .branch summary{font-size:17px}
  .dnsrec code{font-size:16px}
  .btn.sm{font-size:16px}
  .viewas{font-size:16px}
  .qs-title{font-size:26.5px}
  .helpline{font-size:16px}
  .linkish{font-size:16px}
  .dprog{font-size:17px}
  .dtext strong{font-size:19px}
  .dtext small{font-size:16.5px}
  .dtopic{font-size:16.5px}
  .dnote strong{font-size:18px}
  .dnote span{font-size:17px}
  .dq{font-size:17px}
  .dmore summary{font-size:17px}
  .dmore p,.dsteps li{font-size:17.5px}
  .dthread span{font-size:15px}
  .dthread b{font-size:17.5px}
  .fres .linkrow .nm{font-size:17.5px}
  .fres .linkrow .btn{font-size:15.5px}
  .hgroup{font-size:14px}
  .hname b{font-size:19px}
  .hname small{font-size:16px}
  .hdesc{font-size:17px}
  .hcopy{font-size:17px}
  .hurl{font-size:15.5px}
  .hsub{font-size:14px}
  .hmark.emoji{font-size:26.5px}
  .hlabel{font-size:18px}
  .hlabel small{font-size:16px}
  .hrow{font-size:17.5px}
  .hrow button{font-size:15.5px}
  .showpass{font-size:18px}
  .login-alt{font-size:18px}
  .acc>summary strong{font-size:18px}
  .acc>summary small{font-size:15.5px}
  .acc-body h3{font-size:17px}
  .dpost span{font-size:17px}
  .dlock{font-size:16.5px}
}
/* phone-type:end */

/* Texting sign-up (0107): the business questions only for "A business with an EIN", the
   "Your business name" box only for "Just me". */
.a2p-form .a2p-biz{display:none}
.a2p-form:has(input[name=kind][value=business]:checked) .a2p-biz{display:grid}
.a2p-form:has(input[name=kind][value=business]:checked) .a2p-sole{display:none}
/* On a wide screen .stack is two columns: the choice and the business questions each take the
   full width (the questions as their own two columns), and fields sit at the top of their row so
   a help line under one box does not stretch the box beside it (Jeff, 2026-10-01). */
.a2p-form,.a2p-form .a2p-biz{align-items:start}
.a2p-form > .field:first-child,.a2p-form > .a2p-biz{grid-column:1/-1}
.a2p-form > .a2p-biz{margin-top:0}
.a2p-form select{width:100%;padding:12px 14px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);color:var(--sk-ink);font:inherit;font-size:17.5px;min-height:calc(1.5em + 26px)}  /* the text boxes' size (a dropdown ignores line-height), so a row's boxes match */
@media (max-width:640px){.a2p-form select{font-size:19.5px}}

/* Admin: the social posts calendar (0109). Seven columns that fit a phone. */
.pcal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 8px}
.pcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;container-type:inline-size;height:auto}
.pcal-w{font-size:12px;text-align:center;color:var(--sk-ink-faint);padding-bottom:2px}
.pcal-day{position:relative;height:calc((100cqw - 24px) / 7);border-radius:8px;border:1px solid var(--sk-line);background:var(--sk-card);overflow:hidden;display:block}
.pcal-day.pad{border:0;background:none}
.pcal-day span{position:absolute;top:2px;left:4px;font-size:11px;font-weight:600;z-index:1;color:var(--sk-ink);text-shadow:0 0 3px #fff,0 0 3px #fff}
.pcal>*{margin:0!important}
.pcal-day img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pcal-day.past img{opacity:.55}
.pcal-day.today{outline:2px solid var(--sk-brand);outline-offset:1px}
.pcal-day.gap,.pcal-swatch.gap{background:repeating-linear-gradient(45deg,#fde8e8,#fde8e8 4px,#fff 4px,#fff 8px);border-color:#f3b4b4}
.pcal-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid;vertical-align:-2px;margin-right:4px}
.pcal-key{margin-top:8px}
.pcal-sent{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.pcal-sent figure{margin:0}
.pcal-sent img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--sk-line);display:block}
.pcal-sent figcaption{font-size:11px;text-align:center;margin-top:2px}

/* ---- accessibility pass (2026-10-01): WCAG AA for a 40-60 audience on phones ---- */
/* A visible ring on everything that can be tapped or focused, in the colour that passes on
   every system's palette (brand-deep). The browser default was the only ring before. */
.btn:focus-visible,button:focus-visible,a.row:focus-visible,.row:focus-visible,.mrow:focus-visible,.tabs a:focus-visible,
summary:focus-visible,.pcal-day:focus-visible,.iconbtn:focus-visible,.avatar:focus-visible,select:focus-visible,
.rowlink:focus-visible,.linkrow a:focus-visible{outline:3px solid var(--sk-brand-deep);outline-offset:2px}
/* Secondary buttons and chips reach the 44px tap minimum without changing their look. */
.linkrow button,.hrow button,.btn.sm,button.small,.fres .linkrow .btn,.fcard .acts>*,.opp-acts .btn,.opp-acts button,
.tenantbar a,.hurl a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.seg span{min-height:44px;display:inline-flex;align-items:center}
/* A text field's edge at 3:1 against the card, so the field reads as a field. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-color:#8A84A0}
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--sk-brand-deep)}
.stat.up b::after{content:" \2191";font-size:.7em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Reminders on your phone (0116, src/app/push.mjs): what they get, then one big button. */
.rem-card{margin:16px 0}
.rem-what{margin:14px 0}
.rem-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.rem-list li strong{display:block}
.rem-list li .sub{display:block;margin:2px 0 0}
.rem-states{margin:14px 0}
.rem-state[hidden]{display:none}
.rem-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:12px 0 0;font-size:17px}
.rem-acts{display:grid;gap:10px}
.rem-acts form{margin:0}
.rem-ok{color:var(--sk-ok);margin:0}
.rem-msg{margin:12px 0 0;font-size:16px;color:var(--sk-ink-soft)}
.rem-msg:empty{display:none}

/* Admin: Pages on Google (src/admin/seo.mjs). The address and its status on one line; the
   title and description under it, wrapped (a description is a long sentence). */
.seo-list .rowlink{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.seo-top .pill{white-space:normal}
.seo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seo-top .mono{overflow-wrap:anywhere}

/* Home: the action line on a warning card ("Turn on texting"), so the fix reads as a tap. */
.heldbar .go{color:var(--sk-brand-deep);font-weight:600;margin-top:4px}

/* A screen title with its one action beside it (My Leads: Buy leads). Wraps under on a phone. */
.titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.titlerow h1{margin-bottom:0}

/* --------------------------------------------------------------- Send your video (0120, send.mjs) */
.snd-pick{display:block;width:100%;margin:0 0 12px}
.snd-acts{display:grid;gap:10px;margin:14px 0}
.snd-acts .btn,.snd-acts button{width:100%;text-align:center}
.snd-link{overflow-wrap:anywhere}
.watch-acts{display:grid;gap:10px;margin:10px 0 4px}