/* ==========================================================================
   ProminAI portal stylesheet, 2026 edition.
   --------------------------------------------------------------------------
   Rebuilt 6 September 2026 onto the same tokens the live website uses, taken
   out of prominai-2026/css/prominai.css. Nothing here invents a colour, a type
   size or a claim. The shell is a navy rail beside a light workspace, and the
   only call to action colour on any screen is the orange the website uses.

   FIVE RULES CARRIED FORWARD. EVERY ONE OF THEM CAUSED A REAL BUG BEFORE.

   1. Any rule that changes a colour because of the band around it is prefixed
      with .pai and lives in ONE block at the very bottom, DARK CONTEXT
      OVERRIDES. Never add a rule below that block.
   2. A full sentence a member has to read is 15.5px or larger. Smaller than
      that is a label, a caption or a source line.
   3. A card grid controls its own height. Flex column, body flex:1, the bottom
      row on margin-top:auto, so a row of cards never ends ragged.
   4. An inline SVG with no width fills its container. .pai .ic sets the size
      once, globally, for every icon wherever it is used.
   5. Position beats correctness. A rule written after an equal weight rule wins
      even when it is wrong, so every responsive band below is written out in
      full rather than left to fall through.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts. Self hosted, so the portal reads in the same face as the website
   instead of falling back to whatever the device happens to have.
   -------------------------------------------------------------------------- */

@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   Tokens, lifted from the live website stylesheet.
   -------------------------------------------------------------------------- */

:root{
  --pai-navy:#001C64;
  --pai-navy-d:#00113F;
  --pai-blue:#0032A2;
  --pai-sky:#41C9F4;
  --pai-cyan:#00AEB8;
  --pai-cyan-lt:#00C4CC;
  --pai-teal:#00727C;
  --pai-orange:#FF8A3D;
  --pai-orange-2:#FF6E24;
  --pai-orange-d:#E86F22;
  --pai-orange-txt:#B4500E;
  --pai-mint:#54E6A6;
  --pai-ink:#152238;
  --pai-slate:#4C586F;
  --pai-mute:#5C6880;
  --pai-mist:#F5F7FB;
  --pai-wash:#EEF7FF;
  --pai-warm:#FFF7F0;
  --pai-line:#E9EEF6;
  --pai-line-2:#C8D7EF;
  --pai-green:#08735B;
  --pai-red:#B3261E;
  --pai-gold:#E0A800;
  --pai-gold-txt:#7A5B00;
  --pai-wa:#0A7A45;

  --pai-r:16px;
  --pai-rb:10px;
  --pai-rs:8px;
  --pai-max:1280px;
  --pai-rail:268px;
  --pai-topbar:70px;

  --pai-sh:0 1px 2px rgba(0,28,100,.04), 0 8px 28px rgba(0,28,100,.06);
  --pai-shx:0 2px 6px rgba(0,28,100,.07), 0 22px 50px rgba(0,28,100,.13);
  --pai-sh-or:0 10px 24px rgba(245,130,32,.24), inset 0 1px 0 rgba(255,255,255,.25);

  --pai-grad:linear-gradient(135deg,#001C64 0%,#0032A2 50%,#0A62A6 100%);
  --pai-grad-cy:linear-gradient(135deg,#41C9F4 0%,#00C4CC 100%);
  --pai-grad-or:linear-gradient(135deg,#FF8A3D 0%,#FF6E24 100%);
  --pai-grad-rule:linear-gradient(90deg,#0032A2 0%,#168FC9 52%,#FF8A3D 100%);
  --pai-grad-soft:linear-gradient(145deg,#FFFFFF 0%,#EEF7FF 100%);
  --pai-grad-dark:radial-gradient(circle at 82% -20%,rgba(68,215,210,.30),transparent 38%),
                  linear-gradient(118deg,#07152F 0%,#0A2853 48%,#075C6B 100%);
  --pai-grad-rail:radial-gradient(760px 380px at -8% 4%,rgba(65,201,244,.22),transparent 58%),
                  radial-gradient(620px 420px at 108% 88%,rgba(0,196,204,.16),transparent 60%),
                  linear-gradient(168deg,#001C64 0%,#00174F 44%,#001233 100%);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pai{
  margin:0;background:var(--pai-mist);color:var(--pai-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
.pai h1,.pai h2,.pai h3,.pai h4{
  font-family:"Plus Jakarta Sans",Inter,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--pai-navy);margin:0 0 10px;line-height:1.22;letter-spacing:-.015em;
}
.pai h1{font-size:31px;font-weight:800;letter-spacing:-.028em}
.pai h2{font-size:23px;font-weight:800}
.pai h3{font-size:17.5px;font-weight:700}
.pai h4{font-size:15.5px;font-weight:700}
.pai p{margin:0 0 12px}
.pai a{color:var(--pai-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.pai a:hover{color:var(--pai-navy)}
.pai img{max-width:100%;height:auto}
.pai ul,.pai ol{margin:0 0 12px;padding-left:20px}
.pai :focus-visible{outline:3px solid var(--pai-orange);outline-offset:2px;border-radius:4px}
.pai hr{border:0;height:1px;background:var(--pai-line);margin:22px 0}

.pai-lead{font-size:17.5px;color:var(--pai-slate);line-height:1.58}
.pai-help{font-size:14.5px;color:var(--pai-slate)}
.pai-src{font-size:12px;color:var(--pai-mute)}
.pai-hint{font-size:13.5px;color:var(--pai-mute);line-height:1.5}
.pai-label{font-size:12.5px;font-weight:700;color:var(--pai-navy);display:block;margin-bottom:6px}
.pai-eyebrow{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pai-blue);margin:0 0 8px;display:block;
}
.pai-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
.pai-nowrap{white-space:nowrap}
.pai-center{text-align:center}
.pai-hide{display:none !important}
.pai-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Rule 4. Every icon carries its size from here, wherever it is used. */
.pai .ic{width:20px;height:20px;flex:0 0 20px;display:inline-block;vertical-align:middle}
.pai .ic-lg{width:26px;height:26px;flex:0 0 26px}
.pai .ic-sm{width:16px;height:16px;flex:0 0 16px}

.pai-skip{
  position:absolute;left:-9999px;top:0;z-index:400;background:var(--pai-navy);
  padding:12px 18px;border-radius:0 0 var(--pai-rb) 0;font-weight:700;text-decoration:none;
}
.pai-skip:focus{left:0}

/* --------------------------------------------------------------------------
   Buttons. Orange is the only call to action colour, exactly as on the site.
   -------------------------------------------------------------------------- */

.pai .pai-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--pai-rb);font-weight:700;font-size:15px;
  text-decoration:none;border:1.6px solid transparent;cursor:pointer;
  font-family:Inter,Arial,sans-serif;line-height:1.2;min-height:46px;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s;
  /* Three places in the live code write class="pai-btn" with no variant after
     it: the locked screen's upgrade link, Raise this invoice, and the return
     from a payment. With structure only they rendered as bare underlined text.
     A button with no variant is the primary one. The variants below all come
     after this rule, so each of them still wins where one is named. */
  background:var(--pai-grad-or);color:#fff;box-shadow:var(--pai-sh-or);
}
.pai a.pai-btn:hover,.pai button.pai-btn:hover{
  background:linear-gradient(135deg,#FF7C29 0%,#E86F22 100%);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,111,34,.32);
}
.pai .pai-btn-p,.pai a.pai-btn-p,.pai button.pai-btn-p{
  background:var(--pai-grad-or);color:#fff;border-color:transparent;box-shadow:var(--pai-sh-or);
}
.pai .pai-btn-p:hover,.pai a.pai-btn-p:hover,.pai button.pai-btn-p:hover{
  background:linear-gradient(135deg,#FF7C29 0%,#E86F22 100%);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,111,34,.32);
}
.pai .pai-btn-o,.pai a.pai-btn-o,.pai button.pai-btn-o{
  background:#fff;color:var(--pai-navy);border-color:var(--pai-line-2);box-shadow:0 4px 14px rgba(0,28,100,.05);
}
.pai .pai-btn-o:hover,.pai a.pai-btn-o:hover,.pai button.pai-btn-o:hover{
  background:#fff;color:var(--pai-blue);border-color:var(--pai-blue);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,28,100,.1);
}
.pai .pai-btn-q,.pai a.pai-btn-q,.pai button.pai-btn-q{
  background:#fff;color:var(--pai-slate);border-color:var(--pai-line);
}
.pai .pai-btn-q:hover,.pai a.pai-btn-q:hover,.pai button.pai-btn-q:hover{
  background:var(--pai-mist);color:var(--pai-navy);border-color:var(--pai-line-2);
}
.pai .pai-btn-wa,.pai a.pai-btn-wa{background:var(--pai-wa);color:#fff;border-color:var(--pai-wa)}
.pai .pai-btn-wa:hover,.pai a.pai-btn-wa:hover{background:#086539;border-color:#086539;color:#fff;transform:translateY(-2px)}
.pai .pai-btn-sm{padding:9px 15px;font-size:14px;min-height:40px;border-radius:var(--pai-rs)}
.pai .pai-btn-full{width:100%}
.pai .pai-btn[disabled],.pai .pai-btn.is-off{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.pai-btns{display:flex;gap:11px;flex-wrap:wrap;align-items:center}

.pai .pai-textbtn{
  background:none;border:0;padding:8px 10px;min-height:44px;cursor:pointer;
  font:600 14.5px Inter,Arial,sans-serif;color:var(--pai-blue);text-decoration:underline;
  text-underline-offset:2px;border-radius:var(--pai-rs);
}
.pai .pai-textbtn:hover{color:var(--pai-navy);background:var(--pai-wash)}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.pai-field{margin-bottom:16px}
.pai-field label,.pai-field > .pai-label{display:block;font-size:13px;font-weight:700;color:var(--pai-navy);margin-bottom:6px}
.pai .pai-input,.pai input[type=text],.pai input[type=email],.pai input[type=password],
.pai input[type=url],.pai input[type=date],.pai input[type=number],.pai input[type=tel],
.pai input[type=search],.pai select,.pai textarea{
  width:100%;padding:12px 14px;border:1.6px solid var(--pai-line);border-radius:var(--pai-rb);
  font-size:15.5px;font-family:Inter,Arial,sans-serif;color:var(--pai-ink);background:#fff;
  transition:border-color .15s,box-shadow .15s;min-height:46px;
}
.pai textarea{min-height:130px;line-height:1.6;resize:vertical}
.pai .pai-input:focus,.pai input:focus,.pai select:focus,.pai textarea:focus{
  outline:none;border-color:var(--pai-cyan);box-shadow:0 0 0 3px rgba(0,196,204,.18);
}
.pai input::placeholder,.pai textarea::placeholder{color:#95A0B4}
.pai .pai-input[readonly],.pai input[readonly]{background:var(--pai-mist);color:var(--pai-slate)}
.pai select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C586F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}

.pai-check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:15px;cursor:pointer;line-height:1.5}
.pai-check input{width:19px;height:19px;flex:0 0 19px;margin:2px 0 0;accent-color:var(--pai-blue)}
.pai-pw{position:relative;display:flex;align-items:center;gap:6px}
.pai-pw .pai-input{padding-right:78px}
.pai-pw .pai-textbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.pai-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:30px;letter-spacing:.34em;text-align:center;font-weight:700;padding:14px;
}
.pai-stack{display:grid;gap:14px}
.pai-split{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
/* One card left standing. The Starter foot drops whichever card has nothing
   to say, and a lone card in a 1.4fr 1fr grid would sit in a narrow column
   with a gap beside it, which looks like something failed to load. */
.pai-split.is-one{grid-template-columns:1fr}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.pai-note{
  border:1px solid var(--pai-line);border-left:4px solid var(--pai-blue);
  border-radius:var(--pai-rb);padding:14px 18px;margin:0 0 18px;background:#fff;
  box-shadow:0 1px 2px rgba(0,28,100,.04);
}
.pai-note p{margin:0}
.pai-note p + p{margin-top:8px}
.pai-note.is-good{border-left-color:var(--pai-green);background:#F1FBF7}
.pai-note.is-bad{border-left-color:var(--pai-red);background:#FDF4F3}
.pai-note.is-warn{border-left-color:var(--pai-gold);background:var(--pai-warm)}
.pai-note.is-info{border-left-color:var(--pai-cyan);background:var(--pai-wash)}

.pai-empty{
  text-align:center;padding:44px 26px;border:1.6px dashed var(--pai-line-2);
  border-radius:var(--pai-r);background:var(--pai-grad-soft);color:var(--pai-slate);
}
.pai-empty h3,.pai-empty b{
  display:block;margin:0 0 6px;font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;
  font-size:17px;font-weight:700;color:var(--pai-navy);
}
.pai-empty p{max-width:460px;margin:0 auto 12px}
.pai-empty img{width:150px;margin:0 auto 16px;border-radius:12px;opacity:.95}

/* --------------------------------------------------------------------------
   The shell. A navy rail beside a light workspace.

   The rail is the one dark surface in the product. Its text colours are all in
   DARK CONTEXT OVERRIDES at the bottom, per rule 1, so nothing general can ever
   repaint them.
   -------------------------------------------------------------------------- */

.pai-shell{display:flex;min-height:100vh;min-height:100svh}

.pai-side{
  width:var(--pai-rail);flex:0 0 var(--pai-rail);
  background:var(--pai-grad-rail);background-color:#001233;
  position:sticky;top:0;align-self:flex-start;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;overflow:hidden;z-index:60;
}
.pai-side::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(65,201,244,.55),rgba(0,196,204,.16) 55%,transparent);
}
.pai-side .brand{padding:20px 20px 16px;flex:0 0 auto}
.pai-side .brand a{display:block;text-decoration:none;line-height:0}
.pai-side .brand img{width:154px;height:auto;display:block}
.pai-side .brand .tag{
  display:inline-block;margin-top:11px;font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:rgba(65,201,244,.16);border:1px solid rgba(65,201,244,.34);
}

.pai-side .pai-nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 12px 14px;scrollbar-width:thin}
.pai-side .pai-nav::-webkit-scrollbar{width:6px}
.pai-side .pai-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.pai-side .pai-nav .grp{
  font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  padding:16px 10px 7px;
}
.pai-side .pai-nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:2px;
  border-radius:var(--pai-rb);text-decoration:none;font-size:14.6px;font-weight:600;
  position:relative;transition:background .14s,color .14s;
}
.pai-side .pai-nav a .ic{opacity:.72;transition:opacity .14s}
.pai-side .pai-nav a:hover .ic{opacity:1}
.pai-side .pai-nav a[aria-current=page]::before{
  content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--pai-grad-cy);
}
.pai-side .pai-nav a[aria-current=page] .ic{opacity:1}
.pai-side .pai-nav .pip{
  margin-left:auto;font-size:11px;font-weight:800;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
}

.pai-side .foot{flex:0 0 auto;padding:13px 20px 18px;border-top:1px solid rgba(255,255,255,.12)}
.pai-side .foot a{font-size:14.5px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.pai-side .foot a:hover{text-decoration:underline}

.pai-scrim{display:none;position:fixed;inset:0;background:rgba(0,17,63,.55);z-index:55;backdrop-filter:blur(2px)}
.pai-scrim.is-on,.pai-scrim.is-open{display:block}

.pai-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}

/* A slim bar across the very top of every admin screen, so nobody ever mistakes
   the admin area for the member portal. The gradient is painted as the border
   image, which leaves the bar itself white and readable. The markup is the live
   markup: the words and the Test mode chip are both already inside it, so this
   is styled around what is there rather than the other way round. */
.pai-adminstripe{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:7px 26px;
  background-image:linear-gradient(#fff,#fff),var(--pai-grad-rule);
  background-origin:padding-box,border-box;background-clip:padding-box,border-box;
  border-top:3px solid transparent;border-bottom:1px solid var(--pai-line);
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pai-mute);
}
.pai-adminstripe .test{margin-left:auto}

.pai-top{
  position:sticky;top:0;z-index:50;height:var(--pai-topbar);flex:0 0 auto;
  display:flex;align-items:center;gap:14px;padding:0 26px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--pai-line);
}
.pai-top .toplogo{display:none;line-height:0}
.pai-top .toplogo img{width:112px;height:auto}
.pai-top .pgname{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:19px;font-weight:800;
  color:var(--pai-navy);margin:0;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pai-top .spacer{flex:1 1 auto}
.pai-top .who{
  display:flex;flex-direction:column;line-height:1.3;font-size:12.5px;color:var(--pai-mute);
  text-align:right;max-width:230px;
}
.pai-top .who b{font-size:14px;color:var(--pai-navy);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pai-burger{
  display:none;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:var(--pai-rb);
  background:var(--pai-navy);cursor:pointer;padding:0;position:relative;
}
.pai-burger span{
  position:absolute;left:12px;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform .2s,opacity .15s;
}
.pai-burger span:nth-child(1){top:15px}
.pai-burger span:nth-child(2){top:21px}
.pai-burger span:nth-child(3){top:27px}
.pai-burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pai-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.pai-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.pai-wrap{
  flex:1 1 auto;width:100%;max-width:var(--pai-max);margin:0 auto;padding:26px 26px 44px;
}

.pai-foot{
  border-top:1px solid var(--pai-line);padding:22px 26px 34px;background:#fff;
}
.pai-foot p{
  max-width:var(--pai-max);margin:0 auto 7px;font-size:12.5px;color:var(--pai-mute);line-height:1.55;
}
.pai-foot p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Sections, cards, grids.
   Rule 3: a card is a flex column, its body grows, its bottom row sticks to the
   bottom, so a row of cards is never ragged.
   -------------------------------------------------------------------------- */

.pai-sec{margin:0 0 34px}
.pai-sec > h2{margin-bottom:4px}
.pai-sec > .sub{font-size:15.5px;color:var(--pai-slate);margin:0 0 18px;max-width:760px}

.pai-card{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-r);
  box-shadow:var(--pai-sh);display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.pai-card > .hd{
  padding:17px 22px;border-bottom:1px solid var(--pai-line);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(180deg,#FCFDFF,#fff);
}
.pai-card > .hd h2,.pai-card > .hd h3{margin:0}
.pai-card > .bd{padding:22px;flex:1 1 auto;min-width:0}
.pai-card > .bd > :last-child{margin-bottom:0}
.pai-card > .ft{
  padding:15px 22px;border-top:1px solid var(--pai-line);background:var(--pai-mist);
  margin-top:auto;display:flex;gap:11px;flex-wrap:wrap;align-items:center;
}
.pai-card.is-hover:hover{box-shadow:var(--pai-shx);transform:translateY(-2px);transition:.18s}
.pai-card .meta{font-size:12.5px;color:var(--pai-mute)}

.pai-grid{display:grid;gap:18px}
.pai-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pai-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pai-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pai-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.pai-table{width:100%;border-collapse:collapse;font-size:14.8px}
.pai-table th{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pai-mute);padding:11px 14px;border-bottom:1.6px solid var(--pai-line);white-space:nowrap;
}
.pai-table td{padding:13px 14px;border-bottom:1px solid var(--pai-line);vertical-align:top;color:var(--pai-ink)}
.pai-table tr:last-child td{border-bottom:0}
.pai-table tbody tr:hover{background:var(--pai-mist)}
.pai-table .num,.pai-table .tot{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pai-table .was{color:var(--pai-mute);text-decoration:line-through}
.pai-card > .bd > .pai-table:only-child{margin:-8px 0}

/* --------------------------------------------------------------------------
   Badges. Dark text on a tint, never colour on white.
   -------------------------------------------------------------------------- */

.pai-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid transparent;
}
/* badge() writes the tone as is-<tone>. Reading the function rather than
   guessing the class name is the whole of why these are not .grey and .green. */
.pai-badge.is-grey{background:#EEF1F7;color:var(--pai-slate);border-color:#DEE4EF}
.pai-badge.is-blue{background:var(--pai-wash);color:var(--pai-blue);border-color:#CFE4F8}
.pai-badge.is-navy{background:#E4EAF7;color:var(--pai-navy);border-color:#CBD8EF}
.pai-badge.is-teal{background:#E4F7F8;color:var(--pai-teal);border-color:#BFE9EC}
.pai-badge.is-green{background:#E6F5EF;color:var(--pai-green);border-color:#BFE6D7}
.pai-badge.is-gold{background:#FCF3DA;color:var(--pai-gold-txt);border-color:#F0DFAE}
.pai-badge.is-red{background:#FBEAE8;color:var(--pai-red);border-color:#F2CFCB}
.pai-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}

.pai-planbadge{
  display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:999px;
  background:var(--pai-grad-soft);border:1px solid var(--pai-line-2);
  font-size:12.5px;font-weight:700;white-space:nowrap;
}
.pai-planbadge .nm{color:var(--pai-navy);font-weight:800}
.pai-planbadge .dv{width:1px;height:13px;background:var(--pai-line-2)}
.pai-planbadge .dy{color:var(--pai-slate);font-weight:600}
.pai-planbadge.is-soon{background:var(--pai-warm);border-color:#F3D9BE}
.pai-planbadge.is-soon .dy{color:var(--pai-orange-txt)}
.pai-planbadge.is-over{background:#FBEAE8;border-color:#F2CFCB}
.pai-planbadge.is-over .dy{color:var(--pai-red)}

.pai-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.pai-chips .chip,.pai .chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:#fff;border:1px solid var(--pai-line-2);font-size:13.5px;font-weight:600;
  color:var(--pai-navy);text-decoration:none;cursor:pointer;transition:.15s;
}
.pai .chip:hover,.pai .chip.on{background:var(--pai-navy);border-color:var(--pai-navy);color:#fff}
.pai-dots{display:flex;gap:6px;align-items:center}
.pai-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--pai-line-2)}
.pai-dots .dot.on{background:var(--pai-cyan)}

/* --------------------------------------------------------------------------
   Counter tiles. Rule: a large number gets line-height 1.2 and bottom padding,
   or its descenders are clipped.
   -------------------------------------------------------------------------- */

.pai-stat{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-r);
  padding:18px 20px 20px;box-shadow:var(--pai-sh);display:flex;flex-direction:column;
  position:relative;overflow:hidden;min-width:0;
}
.pai-stat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--pai-grad-rule);opacity:.85;
}
.pai-stat .lb{
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pai-mute);margin-bottom:7px;
}
.pai-stat .nu{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:33px;font-weight:800;
  color:var(--pai-navy);line-height:1.2;padding-bottom:3px;letter-spacing:-.03em;
}
.pai-stat .nu small{font-size:16px;font-weight:700;color:var(--pai-mute);letter-spacing:0}
.pai-stat .cap{font-size:13.5px;color:var(--pai-slate);margin:5px 0 0;line-height:1.48;flex:1 1 auto}
.pai-stat .bar{
  margin-top:14px;height:6px;border-radius:3px;background:#E7EDF7;overflow:hidden;
}
.pai-stat .bar i{display:block;height:100%;border-radius:3px;background:var(--pai-grad);min-width:3px}
.pai-stat.is-done::before{background:linear-gradient(90deg,#08735B,#54E6A6)}
.pai-stat.is-done .bar i{background:linear-gradient(90deg,#08735B,#2FB98C)}

/* --------------------------------------------------------------------------
   Waiting on you, what happens next, the fix list feed
   -------------------------------------------------------------------------- */

/* pai-tw is the TABLE WRAP. It is used more than eighty times across the
   product, always around a table or the empty state that stands in for one.
   Read that off the screens rather than guessing from the name: styling it as a
   banner would have turned every table in the admin area into a coloured box. */
.pai-tw{
  border:1px solid var(--pai-line);border-radius:var(--pai-r);background:#fff;
  overflow-x:auto;overflow-y:hidden;box-shadow:var(--pai-sh);margin:0 0 18px;max-width:100%;
}
.pai-tw > .pai-table{margin:0}
.pai-tw > .pai-table th:first-child,.pai-tw > .pai-table td:first-child{padding-left:18px}
.pai-tw > .pai-table th:last-child,.pai-tw > .pai-table td:last-child{padding-right:18px}
.pai-tw > .pai-empty{border:0;border-radius:var(--pai-r);background:#fff}
.pai-card > .bd > .pai-tw:only-child{border:0;box-shadow:none;margin:-8px -6px;border-radius:0}

/* pai-next is the one line that says what happens next, and who is holding it
   up. A heading, a line, and one button. */
.pai-next{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-radius:var(--pai-r);padding:20px 24px;
  background:var(--pai-grad-soft);border:1px solid #CFE4F8;
  border-left:5px solid var(--pai-cyan);box-shadow:var(--pai-sh);
}
.pai-next .tx{flex:1 1 320px;min-width:0}
.pai-next .tx h2,.pai-next .tx h3{margin:0 0 4px;font-size:18px}
.pai-next .tx p{margin:0;color:var(--pai-slate)}
.pai-next .pai-btn{flex:0 0 auto}

.pai-todo{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pai-todo li{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--pai-rb);
  background:var(--pai-mist);border:1px solid var(--pai-line);
}
.pai-todo li .ic{margin-top:2px;color:var(--pai-blue)}
.pai-todo .t{font-weight:700;color:var(--pai-navy)}
.pai-todo .n{font-size:14px;color:var(--pai-slate);margin:2px 0 0}

.pai-feed{list-style:none;padding:0;margin:0}
.pai-feed li{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:10px 0;
  border-bottom:1px solid var(--pai-line);font-size:14.5px;align-items:baseline;
}
.pai-feed li:last-child{border-bottom:0;padding-bottom:0}
.pai-feed li:first-child{padding-top:0}
.pai-feed li:not(:has(time)){grid-template-columns:minmax(0,1fr)}
.pai-feed .days,.pai-feed time{color:var(--pai-mute);font-size:13px;white-space:nowrap}
.pai-feed .ln{color:var(--pai-ink)}

/* More from StartupFeed, the service cards */
.pai-more{margin-top:8px}
.pai-svc{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-r);padding:22px;
  box-shadow:var(--pai-sh);display:flex;flex-direction:column;gap:12px;
}
.pai-svc .hd{display:flex;align-items:center;gap:12px}
.pai-svc .mk{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--pai-rb);background:var(--pai-navy);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;overflow:hidden;
}
/* A logo is not an avatar. Given one, the mark becomes a white plate that takes
   the width the artwork needs. Scores 0,4,0 so it beats the dark override at
   0,3,0 without having to sit below it. */
.pai .pai-svc .mk.has-logo{
  width:auto;flex:0 0 auto;max-width:170px;height:44px;padding:8px 12px;background:#fff;
  border:1px solid var(--pai-line);
}
.pai .pai-svc .mk.has-logo img{max-height:100%;width:auto;object-fit:contain;display:block}
.pai-svc h3{margin:0}
.pai-svc ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--pai-slate)}
.pai-svc ul li{margin-bottom:5px}
.pai-svc .ft{margin-top:auto;padding-top:4px}
.pai-svc .ext{font-size:12px;color:var(--pai-mute);text-align:center;margin:8px 0 0}

/* --------------------------------------------------------------------------
   The sign in pages. Two panels: the brand on the left, the form on the right.
   On a phone the art panel collapses to a short navy header so the form is the
   first thing on screen and nothing has to be scrolled past to sign in.
   -------------------------------------------------------------------------- */

body.pai-auth{
  min-height:100vh;min-height:100svh;margin:0;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  background:var(--pai-mist);
}
.pai-authart{
  position:relative;overflow:hidden;padding:46px 52px;
  background:var(--pai-grad-rail);background-color:#001233;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.pai-authart::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:58px 58px;opacity:.7;
}
.pai-authart > *{position:relative;z-index:2}
.pai-authart .lg img{width:172px;height:auto;display:block}
.pai-authart h2{font-size:33px;font-weight:800;line-height:1.2;margin:0 0 14px;max-width:15ch}
.pai-authart .pai-lead{font-size:17px;max-width:44ch;margin:0 0 26px}
.pai-authart .pl{list-style:none;margin:0;padding:0;display:grid;gap:13px;max-width:46ch}
.pai-authart .pl li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5}
.pai-authart .pl .ic{margin-top:2px;flex:0 0 20px}
.pai-authart .shot{
  margin:26px 0 0;border-radius:14px;overflow:hidden;max-width:430px;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 60px rgba(0,10,40,.5);
  position:relative;
}
.pai-authart .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(0,28,100,.14),rgba(0,17,51,.34));
  mix-blend-mode:multiply;
}
.pai-authart .shot img{display:block;width:100%}
.pai-authart .legal{font-size:12px;line-height:1.5;margin:0;max-width:52ch}

.pai-authbox{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:40px 26px 44px;width:100%;position:relative;
  background:
    radial-gradient(620px 380px at 82% 6%,rgba(65,201,244,.14),transparent 62%),
    radial-gradient(520px 340px at 6% 96%,rgba(255,138,61,.10),transparent 62%),
    linear-gradient(160deg,#FBFDFF 0%,#F1F5FC 100%);
}
.pai-authlogo{width:150px;height:auto;margin:0 auto 22px;display:none}
.pai-authcard{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-r);
  padding:32px 30px;box-shadow:var(--pai-shx);width:100%;max-width:436px;
}
.pai-authcard h1{font-size:27px;margin-bottom:6px}
.pai-authcard .intro{font-size:15px;color:var(--pai-slate);margin:0 0 22px}
.pai-authcard form{margin:0}
.pai-authcard .pai-btn-full{margin-top:6px}
.pai-authalt{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--pai-line);
  font-size:14.5px;text-align:center;color:var(--pai-slate);
}
.pai-authalt a{font-weight:600}
.pai-authfoot{
  max-width:436px;margin:20px auto 0;font-size:13.5px;color:var(--pai-slate);
  text-align:center;line-height:1.55;
}
/* auth_close() prints this as a direct child of body, so on the two panel
   layout it became a third grid item and pushed a white strip under the art
   panel. The art panel already carries the same line, so it is hidden while
   that panel is on screen and shown again once the panel collapses. */
.pai-authlegal{
  grid-column:1 / -1;display:none;
  max-width:520px;margin:0 auto 22px;font-size:11.5px;color:var(--pai-mute);
  text-align:center;line-height:1.5;
}

/* --------------------------------------------------------------------------
   The admin area. Same shell, three deliberate differences so nobody ever
   confuses the two: a warmer rail, the word Admin on the badge, and a coloured
   hairline across the very top of the page.
   -------------------------------------------------------------------------- */

.pai-side.is-admin{
  background:radial-gradient(700px 380px at -6% 2%,rgba(255,138,61,.20),transparent 56%),
             radial-gradient(600px 400px at 106% 92%,rgba(65,201,244,.16),transparent 60%),
             linear-gradient(168deg,#0B1B3E 0%,#0A1733 46%,#080F24 100%);
  /* A background shorthand carrying only images resets background-color to
     transparent. Without this line the whole admin rail had no colour under the
     gradients, and the contrast check measured every white menu word against
     white at a ratio of 1.00. */
  background-color:#080F24;
}
.pai-side.is-admin .brand .tag{background:rgba(255,138,61,.18);border-color:rgba(255,138,61,.42)}
.pai .pai-adminstripe .test,.pai .pai-top .test{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  background:#FCF3DA;color:var(--pai-gold-txt);border:1px solid #F0DFAE;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.pai-doc{max-width:820px}
.pai-doc h2{margin-top:26px}
.pai-doc p,.pai-doc li{font-size:15.5px}

/* ==========================================================================
   THE STARTER HOME SCREEN
   --------------------------------------------------------------------------
   A Starter has bought one article. Four of the five ordinary counters would
   read 0 of 0, so this screen shows something true instead: the public record
   as it stands, one piece of it, against what a membership builds. Every figure
   is computed from canon.php at render time. Nothing here is typed by hand and
   nothing claims an outcome on an AI platform.
   ========================================================================== */

.pai-st-band{
  position:relative;overflow:hidden;border-radius:var(--pai-r);
  background:var(--pai-grad-rail);background-color:#001233;
  padding:34px 36px 36px;margin:0 0 30px;box-shadow:var(--pai-shx);
}
.pai-st-band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;opacity:.75;
}
.pai-st-band > *{position:relative;z-index:2}
.pai-st-band h1{font-size:32px;margin:0 0 10px;max-width:20ch}
.pai-st-band .pai-st-lead{font-size:17px;line-height:1.6;max-width:56ch;margin:0 0 22px}
.pai-st-badge{
  display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;
  background:rgba(65,201,244,.16);border:1px solid rgba(65,201,244,.36);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}
.pai-st-band .pai-btns{margin-top:4px}
.pai-st-band .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}

/* the six steps an article walks through */
.pai-st-steps{display:flex;gap:8px;list-style:none;padding:0;margin:18px 0 16px;flex-wrap:wrap}
.pai-st-steps li{flex:1 1 92px;min-width:88px}
.pai-st-steps .bar{display:block;height:6px;border-radius:3px;background:#E7EDF7;margin-bottom:7px}
.pai-st-steps .t{font-size:12.5px;font-weight:600;color:var(--pai-mute);display:block;line-height:1.35}
.pai-st-steps li.done .bar{background:linear-gradient(90deg,#08735B,#2FB98C)}
.pai-st-steps li.done .t{color:var(--pai-slate)}
.pai-st-steps li.now .bar{background:var(--pai-grad-or)}
.pai-st-steps li.now .t{color:var(--pai-orange-txt);font-weight:800}
.pai-st-linkrow{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px;
  padding-top:14px;border-top:1px solid var(--pai-line);
}
.pai-st-linkrow .pai-btn{margin-left:auto}

/* the record, as dots. one lit dot for each piece of proof that exists */
.pai-st-viz{
  position:relative;overflow:hidden;border-radius:var(--pai-r);
  background:var(--pai-grad-dark);background-color:#07152F;
  padding:30px 32px 32px;box-shadow:var(--pai-shx);
}
.pai-st-viz > *{position:relative;z-index:2}
.pai-st-viz h3{font-size:20px;margin:0 0 8px}
.pai-st-viz .pai-lead{font-size:16px;max-width:62ch;margin:0 0 22px}
.pai-st-record{
  display:grid;grid-template-columns:repeat(22,minmax(0,1fr));gap:6px;
  padding:20px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);margin:0 0 18px;
}
.pai-st-record i{
  display:block;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.13);
  transition:background .5s ease,box-shadow .5s ease,transform .5s ease;
}
.pai-st-record i.on{
  background:var(--pai-grad-cy);box-shadow:0 0 0 2px rgba(65,201,244,.18),0 0 12px rgba(65,201,244,.5);
}
.pai-st-record i.own{background:var(--pai-grad-or);box-shadow:0 0 0 2px rgba(255,138,61,.24),0 0 14px rgba(255,138,61,.55);transform:scale(1.18)}
.pai-st-phase{
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  font-size:14.5px;margin:0 0 16px;
}
.pai-st-phase > span:last-child{flex:1 1 180px;min-width:0}
.pai-st-phase .big{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:30px;font-weight:800;
  line-height:1.2;padding-bottom:2px;letter-spacing:-.03em;
}
.pai-st-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0;margin:0;list-style:none}
.pai-st-stages li{display:flex}
.pai-st-stg{
  width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:var(--pai-rb);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  font-family:Inter,Arial,sans-serif;transition:background .16s,border-color .16s,transform .16s;
}
.pai-st-stg:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.pai-st-stg .t{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.pai-st-stg .n{display:block;font-size:12px;margin-top:3px;opacity:.72}
.pai-st-stg.on{background:rgba(65,201,244,.2);border-color:rgba(65,201,244,.6)}

.pai-st-eng{display:grid;gap:22px}
.pai-st-enginfo{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.pai-st-enginfo > div{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-rb);padding:17px 19px;
}
.pai-st-enginfo b{display:block;color:var(--pai-navy);font-size:15.5px;margin-bottom:4px}
.pai-st-enginfo p{margin:0;font-size:14.5px;color:var(--pai-slate)}

.pai-st-plat{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px}
.pai-st-plat .pl{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-size:13.5px;font-weight:600;
}
.pai-st-plat .pl svg{width:17px;height:17px;flex:0 0 17px}
.pai-st-beam{
  height:2px;border-radius:2px;margin:0 0 18px;
  background:linear-gradient(90deg,transparent,rgba(65,201,244,.75),rgba(255,138,61,.6),transparent);
  opacity:.85;
}



/* The upgrade quotes on the billing screen. The grid carries no column count of
   its own, so it needs one here rather than falling back to a single column. */
.pai-grid.plans{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* the ladder column in the Starter hero */
.pai-ladder{display:flex;flex-direction:column;gap:0}

/* what each piece of proof costs */
.pai-st-mrow{display:grid;gap:11px}
.pai-st-mrow .rl{
  display:grid;grid-template-columns:118px 1fr 96px;gap:14px;align-items:center;font-size:14.5px;
}
.pai-st-mrow .rl .nm{font-weight:700;color:var(--pai-navy)}
.pai-st-mrow .rl .rc{height:30px;border-radius:7px;background:#EDF2FA;overflow:hidden;position:relative}
.pai-st-mrow .rl .rc i{
  display:block;height:100%;border-radius:7px;background:var(--pai-grad);min-width:6px;
}
.pai-st-mrow .rl.is-you .rc i{background:var(--pai-grad-or)}
.pai-st-mrow .rl .v{text-align:right;font-weight:800;color:var(--pai-navy);font-variant-numeric:tabular-nums}
.pai-st-mrow .rl.is-you .v{color:var(--pai-orange-txt)}


/* the fork: what happens if nothing more is bought, beside what a membership
   adds. Neither side claims an outcome, so neither side is coloured as a win or
   a loss. The tick and the cross carry the meaning, not the panel. */
.pai-st-fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pai-st-way{
  border-radius:var(--pai-r);padding:24px 24px 22px;display:flex;flex-direction:column;
  border:1px solid var(--pai-line);background:#fff;box-shadow:var(--pai-sh);
}
.pai-st-way.is-stop{background:linear-gradient(150deg,#FBFCFE 0%,#F3F5FA 100%)}
.pai-st-way.is-go{background:var(--pai-grad-soft);border-color:#CFE4F8}
.pai-st-way .hd{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:18px;font-weight:800;
  color:var(--pai-navy);letter-spacing:-.02em;
}
.pai-st-way.is-stop .hd .ic{color:var(--pai-mute)}
.pai-st-way.is-go .hd .ic{color:var(--pai-orange-txt)}
.pai-st-way ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px;flex:1 1 auto}
.pai-st-way li{display:flex;gap:10px;align-items:flex-start;font-size:14.8px;color:var(--pai-slate);line-height:1.5}
.pai-st-way li .ic{margin-top:3px}
.pai-st-way li .ic.is-yes{color:var(--pai-green)}
.pai-st-way li .ic.is-no{color:var(--pai-red)}
.pai-st-way .ft{
  margin:0;padding-top:14px;border-top:1px solid var(--pai-line);
  font-size:13.5px;color:var(--pai-mute);font-style:normal;
}

/* the thirty day credit */
.pai-st-credit{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  border-radius:var(--pai-r);padding:22px 26px;
  background:linear-gradient(140deg,#FFF7F0 0%,#FFEFE2 100%);
  border:1px solid #F3D9BE;border-left:5px solid var(--pai-orange);box-shadow:var(--pai-sh);
}
.pai-st-credit .cnt{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:40px;font-weight:800;
  color:var(--pai-orange-txt);line-height:1.2;padding-bottom:2px;flex:0 0 auto;letter-spacing:-.03em;
}
.pai-st-credit .tx{flex:1 1 280px;min-width:0}
.pai-st-credit .tx b{display:block;color:var(--pai-navy);font-size:17px;margin-bottom:3px}
.pai-st-credit .tx p{margin:0;font-size:14.8px;color:var(--pai-slate)}

/* the membership cards */
.pai-st-plan{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-r);
  padding:24px 22px 22px;box-shadow:var(--pai-sh);display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.pai-st-plan::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--pai-grad)}
.pai-st-plan:hover{transform:translateY(-3px);box-shadow:var(--pai-shx)}
.pai-st-plan.on{border-color:var(--pai-orange);box-shadow:0 2px 6px rgba(0,28,100,.07),0 22px 46px rgba(232,111,34,.2)}
.pai-st-plan.on::before{background:var(--pai-grad-or)}
.pai-st-plan .add{
  align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;margin:0 0 12px;
  background:var(--pai-navy);color:#fff;
}
.pai-st-plan.on .add{background:var(--pai-grad-or)}
.pai-st-plan h3{margin:0 0 2px;font-size:19px}
.pai-st-plan .pd{font-size:13px;color:var(--pai-mute);margin:0 0 12px}
.pai-st-plan .pr{
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:29px;font-weight:800;
  color:var(--pai-navy);line-height:1.2;padding-bottom:2px;letter-spacing:-.03em;
}
.pai-st-plan .was{font-size:15px;color:var(--pai-mute);text-decoration:line-through;margin-left:8px;font-weight:600}
.pai-st-plan .pv{font-size:13px;color:var(--pai-mute);margin:2px 0 14px}
.pai-st-plan .ep{
  display:inline-flex;align-items:baseline;gap:7px;padding:8px 13px;border-radius:var(--pai-rs);
  background:var(--pai-wash);border:1px solid #CFE4F8;margin:0 0 14px;
}
.pai-st-plan .ep b{font-size:17px;color:var(--pai-navy);font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif}
.pai-st-plan .ep span{font-size:12.5px;color:var(--pai-slate)}
.pai-st-plist{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px;flex:1 1 auto}
.pai-st-plist li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--pai-slate);line-height:1.5}
.pai-st-plist .ic{color:var(--pai-green);margin-top:2px}
.pai-st-plan .ft{margin-top:auto}


/* The drawing above the closing call. It is captioned as a drawing on purpose:
   it is a picture of the idea, not a screenshot of anybody's account, and rule 3
   says nothing on this screen may look like proof that it is not. */
.pai-st-picture{margin:0 0 26px;max-width:760px;margin-inline:auto}
.pai-st-picture img{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 54px rgba(0,10,40,.45);
}
.pai-st-picture figcaption{margin-top:10px;font-size:12.5px;line-height:1.5}

/* the screens a Starter does not have yet */
.pai-st-empt{
  background:#fff;border:1px dashed var(--pai-line-2);border-radius:var(--pai-rb);
  padding:18px 20px;display:flex;flex-direction:column;gap:6px;position:relative;
}
.pai-st-empt .hd{display:flex;align-items:center;gap:10px}
.pai-st-empt .hd .ic{color:var(--pai-teal)}
.pai-st-empt h3{margin:0;font-size:15.5px}
.pai-st-empt p{margin:0;font-size:14px;color:var(--pai-slate)}
.pai-st-empt .m{font-size:12px;font-weight:700;color:var(--pai-teal);text-transform:uppercase;letter-spacing:.08em}

.pai-st-cta{
  border-radius:var(--pai-r);padding:32px 34px;text-align:center;position:relative;overflow:hidden;
  background:var(--pai-grad-rail);background-color:#001233;box-shadow:var(--pai-shx);
}
.pai-st-cta > *{position:relative;z-index:2}
.pai-st-cta h2{font-size:26px;margin:0 0 10px}
.pai-st-cta p{max-width:60ch;margin:0 auto 20px;font-size:16.5px}
.pai-st-cta .pai-btns{justify-content:center}
.pai-st-cta .legal{font-size:12.5px;margin:18px 0 0;opacity:.8}

/* ==========================================================================
   THE BUYER QUESTION PANEL
   Shows a real question this member's buyer could type, and what a platform
   would have to read if it went looking for the answer. The question is built
   only from what the member has already told us. Nothing typed here is saved
   or sent anywhere.
   ========================================================================== */

.pai-ask{
  border-radius:var(--pai-r);padding:26px 28px 28px;position:relative;overflow:hidden;
  background:var(--pai-grad-dark);background-color:#07152F;box-shadow:var(--pai-shx);
}
.pai-ask > *{position:relative;z-index:2}
.pai-ask h3{font-size:20px;margin:0 0 8px}
.pai-ask-box{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);margin:16px 0 8px;
}
.pai-ask-box .ic{opacity:.7;flex:0 0 20px}
/* .pai input[type=text] scores 0,2,1 and repainted this white. Written at 0,3,1
   so the field stays part of the dark panel. */
.pai .pai-ask-box input[type=text]{
  flex:1 1 auto;min-width:0;background:none;border:0;padding:0;min-height:auto;
  font-size:16px;font-family:Inter,Arial,sans-serif;box-shadow:none;
}
.pai .pai-ask-box input[type=text]:focus{outline:none;box-shadow:none;border:0;background:none}
.pai-ask-tip{font-size:13px;margin:0 0 20px;line-height:1.5;max-width:72ch}
.pai-ask-tl{
  border-radius:12px;padding:18px 20px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.pai-ask-think{display:flex;align-items:center;gap:9px;font-size:13.5px;margin:0 0 14px}
.pai-ask-think i{
  width:7px;height:7px;border-radius:50%;background:var(--pai-sky);display:inline-block;
  animation:paiPulse 1.4s ease-in-out infinite;
}
.pai-ask-think i:nth-child(2){animation-delay:.18s}
.pai-ask-think i:nth-child(3){animation-delay:.36s}
@keyframes paiPulse{0%,100%{opacity:.28;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.pai-ask-plat{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pai-ask-plat .pl{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:13px;font-weight:600;opacity:0;transform:translateY(5px);
  transition:opacity .45s ease,transform .45s ease,border-color .45s ease,background .45s ease;
}
.pai-ask-plat .pl svg{width:16px;height:16px;flex:0 0 16px}
.pai-ask.is-on .pai-ask-plat .pl{opacity:1;transform:none;background:rgba(65,201,244,.14);border-color:rgba(65,201,244,.4)}
.pai-ask-found{
  display:flex;gap:7px;flex-wrap:wrap;min-height:34px;padding:0;margin:0 0 16px;list-style:none;
}
.pai-ask-found li{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--pai-rs);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:12.5px;font-weight:600;opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease;
}
.pai-ask.is-on .pai-ask-found li{opacity:1;transform:none}
.pai-ask-found li.own{background:rgba(255,138,61,.16);border-color:rgba(255,138,61,.44)}
.pai-ask-punch{
  border-radius:var(--pai-rb);padding:15px 18px;margin:0;
  background:rgba(255,255,255,.06);border-left:4px solid var(--pai-sky);font-size:15.5px;line-height:1.6;
}
@media (prefers-reduced-motion:reduce){
  .pai-ask-think i{animation:none;opacity:.7}
  .pai-ask-plat .pl,.pai-ask-found li{transition:none;opacity:1;transform:none}
  .pai-st-record i{transition:none}
  .pai .pai-btn:hover,.pai-card.is-hover:hover,.pai-st-plan:hover,.pai-st-stg:hover{transform:none}
}


/* --------------------------------------------------------------------------
   Things only the live screens use.

   These seven classes were missing from the first draft of this stylesheet
   because the class list was taken from a copy of the portal that was a month
   behind the server. The locked menu row, the payment due banner and the delete
   preview lists are all real screens a member or an admin sees. Read the class
   list off the running site, not off the folder you happen to have.
   -------------------------------------------------------------------------- */

/* A menu row for a screen this plan does not include. It still links, because
   the screen itself explains what it is and offers the upgrade. */
.pai-side .pai-nav a.is-locked{opacity:.62}
.pai-side .pai-nav a.is-locked:hover{opacity:1}
.pai-side .pai-nav .pip-lock{
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:0 7px;height:18px;min-width:0;
}

/* Payment due. The one banner that is allowed to shout, because an unpaid
   invoice is the member's own money and they should not have to hunt for it. */
.pai-owing{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-radius:var(--pai-r);padding:20px 24px;margin:0 0 22px;
  background:linear-gradient(140deg,#FFF7F0 0%,#FFEFE2 100%);
  border:1px solid #F3D9BE;border-left:5px solid var(--pai-orange);box-shadow:var(--pai-sh);
}
.pai-owing .tx{flex:1 1 320px;min-width:0}
.pai-owing .lb{
  display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pai-orange-txt);margin-bottom:4px;
}
.pai-owing .amt{
  display:block;font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;
  font-size:26px;font-weight:800;color:var(--pai-navy);line-height:1.2;padding-bottom:2px;
  letter-spacing:-.03em;
}
.pai-owing p{margin:6px 0 0;font-size:14.8px;color:var(--pai-slate)}
.pai-owing .pai-help{margin-top:8px}
.pai-owing .act{display:flex;gap:11px;flex-wrap:wrap;align-items:center;flex:0 0 auto}
.pai-owing .act form{margin:0}
.pai .pai-btn-lg{padding:15px 28px;font-size:16.5px;min-height:54px}

/* A plain list of counts, used by the delete preview and the locked screens. */
.pai-ticks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.pai-ticks li{
  display:flex;gap:9px;align-items:baseline;font-size:14.8px;color:var(--pai-slate);
  line-height:1.5;padding-left:22px;position:relative;
}
.pai-ticks li::before{
  content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;
  background:var(--pai-cyan);
}
.pai-ticks li b{color:var(--pai-navy);font-weight:700;font-variant-numeric:tabular-nums}


/* A delete that has to be opened first. Plain details and summary, so it needs
   no script at all and cannot be tripped by a stray click. */
.pai-drop > td{background:var(--pai-mist);padding:0 !important}
.pai-drop details{padding:14px 18px}
.pai-drop details.pai-danger > summary{
  cursor:pointer;font-size:13.5px;font-weight:700;color:var(--pai-red);
  list-style:none;display:inline-flex;align-items:center;gap:7px;padding:4px 0;
}
.pai-drop details > summary::-webkit-details-marker{display:none}
.pai-drop details > summary::before{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s;
}
.pai-drop details[open] > summary::before{transform:rotate(45deg)}
.pai-drop details > summary:hover{text-decoration:underline}
.pai-drop details > form{
  margin:12px 0 4px;max-width:520px;padding:16px 18px;background:#fff;
  border:1px solid #F2CFCB;border-left:4px solid var(--pai-red);border-radius:var(--pai-rb);
}
.pai-drop details > form p{font-size:14.5px;color:var(--pai-slate);margin:0 0 14px}
.pai-drop details > form .pai-btn-p{background:var(--pai-red);box-shadow:none}
.pai-drop details > form .pai-btn-p:hover{background:#8F1E17;box-shadow:none}


/* the picture beside the Starter headline */
.pai-st-hero-art{margin:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 54px rgba(0,10,40,.45)}
.pai-st-hero-art img{display:block;width:100%;height:auto}

/* the six things a plan gives, as six plain cards */
.pai-gain{
  background:#fff;border:1px solid var(--pai-line);border-radius:var(--pai-r);
  padding:24px 22px 22px;box-shadow:var(--pai-sh);display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;
}
.pai-gain::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--pai-grad-rule)}
.pai-gain:hover{transform:translateY(-3px);box-shadow:var(--pai-shx)}
.pai-gain .ic-wrap{
  width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pai-wash);border:1px solid #CFE4F8;color:var(--pai-blue);margin:0 0 14px;
}
.pai-gain h3{margin:0 0 8px;font-size:17.5px}
.pai-gain p{margin:0;font-size:15px;color:var(--pai-slate);line-height:1.58}

/* how it builds up, month by month */
.pai-months{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pai-months li{display:grid;grid-template-columns:88px 1fr 190px;gap:16px;align-items:center}
.pai-months .mm{font-size:13.5px;font-weight:700;color:var(--pai-navy)}
.pai-months .bars{display:flex;gap:5px;min-width:0}
.pai-months .bars i{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:var(--pai-grad);
  box-shadow:0 2px 6px rgba(0,28,100,.16);
}
.pai-months li:last-child .bars i{background:var(--pai-grad-or)}
.pai-months .tot{font-size:14.5px;color:var(--pai-slate);text-align:right;font-variant-numeric:tabular-nums}

/* the side by side plan table */
.pai-compare th[scope=row]{
  text-align:left;font-size:14.8px;font-weight:600;color:var(--pai-ink);
  letter-spacing:0;text-transform:none;white-space:normal;min-width:190px;
}
.pai-compare thead th{text-align:center;vertical-align:bottom;padding-bottom:14px}
.pai-compare thead th:first-child{text-align:left}
.pai-compare thead .nm{
  display:block;font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:16px;
  font-weight:800;color:var(--pai-navy);letter-spacing:-.02em;text-transform:none;
}
.pai-compare thead .ln{display:block;font-size:11.5px;color:var(--pai-mute);text-transform:none;letter-spacing:0;margin-top:2px}
.pai-compare td{text-align:center;font-size:15px;color:var(--pai-slate)}
.pai-compare td b{color:var(--pai-navy);font-size:16.5px}
.pai-compare .was{font-size:12.5px;color:var(--pai-mute);text-decoration:line-through}
.pai-compare .is-now{background:var(--pai-mist);color:var(--pai-mute)}
.pai-compare thead .is-now{color:var(--pai-mute);font-size:11px}
.pai-compare .is-pick{background:var(--pai-warm)}
.pai-compare thead .is-pick{box-shadow:inset 0 3px 0 var(--pai-orange)}
.pai-compare tr.is-money td{padding-top:16px;padding-bottom:16px}
.pai-compare tr.is-money td b{font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;font-size:19px}
.pai-compare tr.is-act td{padding-bottom:18px}
.pai-compare tr.is-act .pai-btn{width:100%;max-width:150px}

/* ==========================================================================
   WIDTH BANDS
   --------------------------------------------------------------------------
   Every band is written out in full. Rule 5: a rule left to fall through is a
   rule that loses to whatever was written after it. On 6 August a grid rule
   with no media query sat below the block that stacks the same grid, so every
   phone showed five columns crammed side by side. The rule was right. Its
   position was not.
   ========================================================================== */

/* 1181px and up: as the class says. */
@media (min-width:1181px){
  .pai-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pai-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pai-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* 1025 to 1180px: five and four are too tight beside the rail. */
@media (min-width:1025px) and (max-width:1180px){
  .pai-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pai-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-grid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pai-grid.plans{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .pai-st-band .grid{grid-template-columns:1fr;gap:26px}
  .pai-st-enginfo{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 1024px and down: the rail slides in over the page instead of beside it. */
@media (max-width:1024px){
  .pai-side{
    position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);flex-basis:auto;
    height:100svh;max-height:100svh;
    transform:translateX(-101%);transition:transform .22s ease;z-index:70;
    box-shadow:0 0 60px rgba(0,10,40,.5);
  }
  .pai-side.is-open{transform:none}
  .pai-main{width:100%}
  .pai-burger{display:block}
  .pai-top{padding:0 16px;gap:11px}
  .pai-top .toplogo{display:block}
  .pai-top .pgname{display:none}
  .pai-wrap{padding:20px 16px 40px}
  .pai-foot{padding:20px 16px 30px}

  .pai-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-grid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pai-split{grid-template-columns:1fr;gap:18px}
  .pai-st-band{padding:26px 22px 28px}
  .pai-st-band .grid{grid-template-columns:1fr;gap:24px}
  .pai-st-enginfo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pai-st-fork{grid-template-columns:minmax(0,1fr)}
  .pai-months li{grid-template-columns:76px 1fr 150px;gap:10px}

  body.pai-auth{grid-template-columns:1fr}
  .pai-authart{padding:26px 22px 30px;gap:20px}
  .pai-authart h2{font-size:25px}
  .pai-authart .shot,.pai-authart .pl,.pai-authart .legal{display:none}
  .pai-authbox{padding:26px 18px 34px}
  .pai-authlegal{display:block}
}

/* 820px and down: one column, and the counter tiles two across. */
@media (max-width:820px){
  .pai-grid.c2,.pai-grid.c3,.pai-grid.c4,.pai-grid.c5,.pai-grid.plans{grid-template-columns:minmax(0,1fr)}
  /* Counter tiles read fine two across on a phone. If a browser does not know
     :has the rule is dropped and they stack, which is still correct. */
  .pai-grid:has(> .pai-stat){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pai-st-enginfo{grid-template-columns:minmax(0,1fr)}
  .pai-months li{grid-template-columns:minmax(0,1fr);gap:4px}
  .pai-months .tot{text-align:left}
  .pai-months .bars i{width:20px;height:20px}
  .pai-months li{padding-bottom:10px;border-bottom:1px solid var(--pai-line)}
  .pai-st-record{grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;padding:15px}
  .pai-st-mrow .rl{grid-template-columns:96px 1fr 82px;gap:10px;font-size:13.5px}
  .pai-feed li{grid-template-columns:1fr;gap:2px}
  .pai-feed .days,.pai-feed time{font-size:12px}
  .pai h1{font-size:26px}
  .pai h2{font-size:20px}
  .pai-st-band h1{font-size:26px}
  .pai-st-credit .cnt{font-size:34px}
  .pai-st-cta{padding:26px 20px}
  .pai-st-cta h2{font-size:22px}
  .pai-top .who{display:none}
  .pai-table{font-size:14px}
  .pai-table th,.pai-table td{padding:10px 9px}
  .pai-next li{flex-wrap:wrap}
  .pai-next .pai-btn{margin-left:34px;width:auto}
  .pai-tw{padding:18px 18px}
}

/* 460px and down */
@media (max-width:460px){
  .pai-grid:has(> .pai-stat){grid-template-columns:minmax(0,1fr)}
  .pai-st-record{grid-template-columns:repeat(11,minmax(0,1fr))}
  .pai-st-stg{flex:1 1 100%}
  .pai .pai-btn{width:100%}
  .pai-btns{gap:9px}
  .pai-btns .pai-btn{flex:1 1 100%}
  .pai-st-linkrow .pai-btn{margin-left:0}
  .pai-card > .bd,.pai-card > .hd,.pai-card > .ft{padding:16px}
  .pai-authcard{padding:24px 20px}
  .pai-code{font-size:24px;letter-spacing:.24em}
}

/* Anything wide that cannot shrink scrolls inside its own box, never the page. */
.pai-card > .bd,.pai-sec > .pai-tw,.pai-wrap > .pai-tw{max-width:100%}
.pai-card > .bd{overflow-x:auto}

@media print{
  .pai-side,.pai-top,.pai-burger,.pai-scrim,.noprint,.pai-adminstripe{display:none !important}
  body.pai{background:#fff}
  .pai-wrap{max-width:100%;padding:0}
  .pai-card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .pai-st-band,.pai-st-viz,.pai-ask,.pai-st-cta{background:#fff !important;color:#000 !important}
}


/* Odds and ends the screens use by short name. */
.pai-svc .ol{font-size:14.8px;color:var(--pai-slate);margin:0 0 10px}
.doc{max-width:820px;margin:0 auto;padding:28px 26px 60px;background:#fff}
.doc h1{font-size:26px}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 18px}
.doc th,.doc td{padding:9px 11px;border-bottom:1px solid var(--pai-line);text-align:left;vertical-align:top}
.doc th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--pai-mute)}

/* ==========================================================================
   DARK CONTEXT OVERRIDES.  THIS BLOCK MUST STAY LAST.
   --------------------------------------------------------------------------
   Rule 1, from CLAUDE.md. Any rule that changes a colour because of the band
   around it lives here and nowhere else, prefixed with .pai so it scores at
   least 0,2,0 and beats the general rules above.

   This has caused invisible text four separate times. The pattern is always the
   same: a heading or a link on a dark panel keeps the colour it was given by a
   general rule higher up, and navy on navy is not a colour anybody notices in a
   diff. It is only noticed by a customer.

   If you add a new dark band or a new dark component, add it here.
   NEVER ADD A RULE BELOW THIS BLOCK.
   ========================================================================== */

/* the navy rail */
.pai .pai-side{color:rgba(255,255,255,.82)}
.pai .pai-side .brand .tag{color:#9FE6FF}
.pai .pai-side .pai-nav .grp{color:rgba(255,255,255,.6)}
.pai .pai-side .pai-nav a{color:rgba(255,255,255,.8)}
.pai .pai-side .pai-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.pai .pai-side .pai-nav a[aria-current=page]{background:rgba(255,255,255,.14);color:#fff}
.pai .pai-side .pai-nav .pip{background:var(--pai-orange);color:#fff}
.pai .pai-side .pai-nav .pip-lock{background:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.pai .pai-side .foot a{color:rgba(255,255,255,.9)}
.pai .pai-side .foot a:hover{color:#fff}
.pai .pai-side.is-admin .brand .tag{color:#FFD3B0}

/* the sign in art panel */
.pai .pai-authart{color:rgba(255,255,255,.86)}
.pai .pai-authart h2{color:#fff}
.pai .pai-authart .pai-lead{color:rgba(255,255,255,.8)}
.pai .pai-authart .pl li{color:rgba(255,255,255,.88)}
.pai .pai-authart .pl .ic{color:var(--pai-sky)}
.pai .pai-authart .legal{color:rgba(255,255,255,.55)}
.pai .pai-authart a{color:#9FE6FF}

/* the Starter bands, the record panel, the question panel, the closing call */
.pai .pai-st-band,.pai .pai-st-viz,.pai .pai-ask,.pai .pai-st-cta,.pai .pai-navy-bg{color:rgba(255,255,255,.86)}
.pai .pai-st-band h1,.pai .pai-st-band h2,.pai .pai-st-band h3,
.pai .pai-st-viz h1,.pai .pai-st-viz h2,.pai .pai-st-viz h3,
.pai .pai-ask h1,.pai .pai-ask h2,.pai .pai-ask h3,
.pai .pai-st-cta h1,.pai .pai-st-cta h2,.pai .pai-st-cta h3,
.pai .pai-navy-bg h1,.pai .pai-navy-bg h2,.pai .pai-navy-bg h3{color:#fff}
.pai .pai-st-band .pai-lead,.pai .pai-st-viz .pai-lead,.pai .pai-ask .pai-lead,
.pai .pai-st-cta .pai-lead,.pai .pai-navy-bg .pai-lead,
.pai .pai-st-band .pai-st-lead{color:rgba(255,255,255,.8)}
.pai .pai-st-band .pai-help,.pai .pai-st-viz .pai-help,.pai .pai-ask .pai-help,
.pai .pai-st-cta .pai-help,.pai .pai-navy-bg .pai-help,
.pai .pai-st-band .pai-src,.pai .pai-st-viz .pai-src,.pai .pai-ask .pai-src,
.pai .pai-st-cta .pai-src,.pai .pai-navy-bg .pai-src{color:rgba(255,255,255,.62)}
.pai .pai-st-band a,.pai .pai-st-viz a,.pai .pai-ask a,.pai .pai-st-cta a,.pai .pai-navy-bg a{color:#9FE6FF}
.pai .pai-st-band a:hover,.pai .pai-st-viz a:hover,.pai .pai-ask a:hover,
.pai .pai-st-cta a:hover,.pai .pai-navy-bg a:hover{color:#fff}
.pai .pai-st-band .pai-eyebrow,.pai .pai-st-viz .pai-eyebrow,.pai .pai-ask .pai-eyebrow,
.pai .pai-st-cta .pai-eyebrow,.pai .pai-navy-bg .pai-eyebrow{color:var(--pai-sky)}
.pai .pai-st-badge{color:#9FE6FF}
.pai .pai-st-picture figcaption{color:rgba(255,255,255,.6)}
.pai .pai-st-phase{color:rgba(255,255,255,.76)}
.pai .pai-st-phase .big{color:#fff}
.pai .pai-st-stg{color:rgba(255,255,255,.86)}
.pai .pai-st-stg .t{color:#fff}
.pai .pai-st-plat .pl,.pai .pai-ask-plat .pl{color:rgba(255,255,255,.9)}
.pai .pai-ask-box input{color:#fff}
.pai .pai-ask-box input::placeholder{color:rgba(255,255,255,.5)}
.pai .pai-ask-box .ic{color:var(--pai-sky)}
.pai .pai-ask-tip{color:rgba(255,255,255,.66)}
.pai .pai-ask-think{color:rgba(255,255,255,.7)}
.pai .pai-ask-found li{color:rgba(255,255,255,.9)}
.pai .pai-ask-punch{color:#fff}
.pai .pai-ask-punch b{color:#fff}

/* A button is not a link. The rule above paints every anchor on a dark band
   pale blue, and it scores the same as the button colours further up, so it was
   winning: the WhatsApp button ended up pale blue on green at 3.92, which the
   contrast check failed. These two put the button colours back, after it. */
.pai .pai-st-band a.pai-btn-p,.pai .pai-st-viz a.pai-btn-p,.pai .pai-ask a.pai-btn-p,
.pai .pai-st-cta a.pai-btn-p,.pai .pai-navy-bg a.pai-btn-p,.pai .pai-authart a.pai-btn-p{color:#fff}
.pai .pai-st-band a.pai-btn-wa,.pai .pai-st-viz a.pai-btn-wa,.pai .pai-ask a.pai-btn-wa,
.pai .pai-st-cta a.pai-btn-wa,.pai .pai-navy-bg a.pai-btn-wa,.pai .pai-authart a.pai-btn-wa{
  color:#fff;background:var(--pai-wa);border-color:var(--pai-wa);
}

/* a secondary button on a dark band is a light outline, never a white plate */
.pai .pai-st-band .pai-btn-o,.pai .pai-st-band a.pai-btn-o,
.pai .pai-st-viz .pai-btn-o,.pai .pai-st-viz a.pai-btn-o,
.pai .pai-ask .pai-btn-o,.pai .pai-ask a.pai-btn-o,
.pai .pai-st-cta .pai-btn-o,.pai .pai-st-cta a.pai-btn-o,
.pai .pai-authart .pai-btn-o,.pai .pai-authart a.pai-btn-o{
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.36);box-shadow:none;
}
.pai .pai-st-band .pai-btn-o:hover,.pai .pai-st-band a.pai-btn-o:hover,
.pai .pai-st-viz .pai-btn-o:hover,.pai .pai-st-viz a.pai-btn-o:hover,
.pai .pai-ask .pai-btn-o:hover,.pai .pai-ask a.pai-btn-o:hover,
.pai .pai-st-cta .pai-btn-o:hover,.pai .pai-st-cta a.pai-btn-o:hover,
.pai .pai-authart .pai-btn-o:hover,.pai .pai-authart a.pai-btn-o:hover{
  background:#fff;color:var(--pai-navy);border-color:#fff;
}


/* the eyebrow on the sign in art panel. var(--pai-blue) on navy measured 1.74. */
.pai .pai-authart .pai-eyebrow{color:var(--pai-sky)}
/* the letter in a service mark sits on a navy square and had no colour of its own */
.pai .pai-svc .mk{color:#fff}
.pai .pai-svc .mk.has-logo{color:var(--pai-navy)}

/* the skip link. ".pai-skip" alone scores 0,1,0 and loses to ".pai a" at
   0,1,1, which painted it blue on navy and made it unreadable. */
.pai .pai-skip{color:#fff}
.pai .pai-skip:hover{color:#fff}