/* ------------------------------------------------------------------
   Lampson 2026 - LIGHT theme layer.
   Loaded after site.css. Removing this one <link> returns the dark look.
   Direction taken from boldin.com, parkshieldins.com, wealthspire.com:
   light surfaces, generous space, navy ink, gold used only as an accent.
   ------------------------------------------------------------------ */

:root{
  --navy:#13314f;
  --navy-2:#0f2740;
  --ink:#13314f;
  --ink-2:#1b3d60;
  --ink-3:#eef1f5;
  --body:#525c68;
  --paper:#ffffff;
  --wash:#f5f7f9;
  --gold:#c8963e;
  --gold-lt:#d8ab5e;
  --line:#e3e7ec;
}

/* ---------- type: sans headings, matching the new wordmark ---------- */
body.lampson-2026-page h1,
body.lampson-2026-page h2,
body.lampson-2026-page h3,
body.lampson-2026-page h4,
body.lampson-2026-page .brand .bt,
body.lampson-2026-page .stats div b,
body.lampson-2026-page .band p,
body.lampson-2026-page .figure .tag b,
body.lampson-2026-page .promise b,
body.lampson-2026-page footer .brandf b{
  font-family:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--navy);letter-spacing:-.02em;
}
body.lampson-2026-page h1{font-weight:800;line-height:1.06}
body.lampson-2026-page h2{font-weight:800}
body.lampson-2026-page h3{font-weight:700}

/* ---------- top strip stays dark, like Wealthspire ---------- */
body.lampson-2026-page .topbar{background:var(--navy);color:rgba(255,255,255,.78)}
body.lampson-2026-page .topbar a{color:rgba(255,255,255,.86)}

/* ---------- buttons ---------- */
body.lampson-2026-page .btn-dark,
body.lampson-2026-page .btn-dark:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
body.lampson-2026-page .btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* ---------- hero: light ---------- */
body.lampson-2026-page .hero{
  background:linear-gradient(180deg,#fbfcfd 0%,#f4f7f9 100%);
  color:var(--body);
}
body.lampson-2026-page .hero::before,
body.lampson-2026-page .hero::after,
body.lampson-2026-page .final::before{display:none}
body.lampson-2026-page .hero h1{color:var(--navy)}
body.lampson-2026-page .hero .lede{color:var(--body)}
body.lampson-2026-page .hero .lede em{color:var(--navy);font-style:italic}
body.lampson-2026-page .hero .napline{color:#7a8492}
body.lampson-2026-page .hero .figure{background:transparent}
body.lampson-2026-page .figure .tag{background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(19,49,79,.08)}
body.lampson-2026-page .figure .tag b{color:var(--navy)}
body.lampson-2026-page .promise{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px}
body.lampson-2026-page .promise b{color:var(--navy)}

/* ---------- stats ---------- */
body.lampson-2026-page .stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.lampson-2026-page .stats div b{color:var(--navy)}
body.lampson-2026-page .stats div span{color:#7a8492}

/* ---------- cards ---------- */
body.lampson-2026-page .tri article,
body.lampson-2026-page .svc article,
body.lampson-2026-page .tst article,
body.lampson-2026-page .team article,
body.lampson-2026-page .leads article{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(19,49,79,.04);
}
body.lampson-2026-page .leads article.gold{background:var(--navy);border-color:var(--navy);color:#fff}
body.lampson-2026-page .leads article.gold h3{color:#fff}

/* ---------- bands that were black ---------- */
body.lampson-2026-page .dark,
body.lampson-2026-page .media{background:var(--wash);color:var(--body)}
body.lampson-2026-page .dark h2,
body.lampson-2026-page .media h2,
body.lampson-2026-page .dark h3{color:var(--navy)}
body.lampson-2026-page .band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.lampson-2026-page .band p{color:var(--navy)}
body.lampson-2026-page .cya{background:var(--wash)}

/* ---------- closing CTA + footer stay navy ---------- */
body.lampson-2026-page .final{background:var(--navy);color:rgba(255,255,255,.82)}
body.lampson-2026-page .final h2{color:#fff}
body.lampson-2026-page footer{background:var(--navy-2);color:rgba(255,255,255,.68)}
body.lampson-2026-page footer a{color:rgba(255,255,255,.72)}
body.lampson-2026-page footer .brandf b{color:#fff}

/* ---------- interior pages ---------- */
body.lampson-2026-page .pagehero{
  background:linear-gradient(180deg,#fbfcfd 0%,#f4f7f9 100%);
  color:var(--body);border-bottom:1px solid var(--line);
}
body.lampson-2026-page .pagehero h1{color:var(--navy)}
body.lampson-2026-page .napcard{
  background:var(--wash);color:var(--body);
  border:1px solid var(--line);border-left:4px solid var(--gold);
}
body.lampson-2026-page .napcard b,
body.lampson-2026-page .napcard strong{color:var(--navy)}

/* ---------- misc ---------- */
body.lampson-2026-page .eyebrow{color:var(--gold)}
body.lampson-2026-page .eyebrow::after,
body.lampson-2026-page .eyebrow.ctr::before{background:var(--line)}
body.lampson-2026-page .lp-burger span{background:var(--navy)}
body.lampson-2026-page .lp-drawer{background:#fff;border-top:1px solid var(--line)}

/* ---------- contrast: gold reads fine on black, not on white ----------
   Large display type keeps the warm gold (AA large = 3:1); small labels
   drop to a deeper gold that clears 4.5:1, matching how the reference
   sites use gold for buttons and rules rather than for body type. */
:root{ --gold-deep:#a9762a; --gold-ink:#8a6a2e; }

body.lampson-2026-page .hero h1 em{color:var(--gold-deep)}
body.lampson-2026-page .eyebrow,
body.lampson-2026-page .pagehero .eyebrow,
body.lampson-2026-page .brand .bs,
body.lampson-2026-page .svc .n,
body.lampson-2026-page .media .k,
body.lampson-2026-page .team figcaption span{color:var(--gold-ink)}
body.lampson-2026-page .tst .stars{color:var(--gold-deep)}
body.lampson-2026-page .media a,
body.lampson-2026-page .napcard a{color:var(--navy);border-bottom-color:var(--gold)}
body.lampson-2026-page .hero .lede em{color:var(--navy)}
body.lampson-2026-page .stats b{color:var(--navy)}
/* footer sits on navy, so gold stays as-is there */
body.lampson-2026-page footer .brandf .tl{color:var(--gold-lt)}

/* ---------- contrast audit fixes ----------
   Found by walking every text node and comparing computed colour against its
   effective background, not by eye. Three of these were invisible-on-purpose
   colours inherited from the dark theme, and three were my own doing. */

/* leftovers that were cream-on-black and are now cream-on-white */
body.lampson-2026-page .btn-ghost{color:var(--navy);border-color:#c3ccd6}
body.lampson-2026-page .btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
body.lampson-2026-page .hero p.note{color:var(--body)}
body.lampson-2026-page .hero .napline a{color:var(--body)}
body.lampson-2026-page .media p{color:var(--body)}
body.lampson-2026-page .promise{color:var(--gold-ink)}

/* greys that cleared 4.5:1 on black but not on white */
body.lampson-2026-page .hero .napline,
body.lampson-2026-page .stats div span{color:#5c6773}
body.lampson-2026-page .tst article span,
body.lampson-2026-page .tst .who{color:#5f6875}
body.lampson-2026-page .tst .stars{color:#8a6a2e}

/* my own regressions: the blanket navy heading rule hit the navy footer,
   and one eyebrow lives inside the navy lead card */
body.lampson-2026-page footer h4{color:#fff}
body.lampson-2026-page footer .disc{color:rgba(248,245,239,.66)}
body.lampson-2026-page .leads article.gold .eyebrow,
body.lampson-2026-page .leads article.gold .eyebrow::after{color:var(--gold-lt)}
body.lampson-2026-page .leads article.gold p,
body.lampson-2026-page .leads article.gold li{color:rgba(255,255,255,.86)}
body.lampson-2026-page .tst figcaption span{color:#5f6875}
body.lampson-2026-page .band .who{color:#6b6047}
body.lampson-2026-page .promise{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:600}

/* ================= LAYOUT ==================================================
   Measured against the three sites he sent. On boldin / parkshield /
   wealthspire the whole hero - eyebrow, headline, one paragraph, buttons and
   the image - sits inside the first screen, and the headline is 46-52px.
   Mine was 70px and four lines, so the first screen held the headline and
   nothing else, and the photo hung off the bottom edge. Fixes below.
   ========================================================================= */

/* --- header: one line of brand, shorter bar --- */
body.lampson-2026-page header.site .wrap{height:84px;gap:30px}
body.lampson-2026-page .brand{gap:11px}
body.lampson-2026-page .brand img{width:auto;height:34px;object-fit:contain}
body.lampson-2026-page .brand .bt{
  font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;
  font-size:1.06rem;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  text-transform:uppercase;
}
body.lampson-2026-page .brand .bs{
  font-size:.58rem;letter-spacing:.235em;margin-top:5px;font-weight:700;
}
body.lampson-2026-page footer .brandf img{width:auto;height:32px;object-fit:contain}
body.lampson-2026-page footer .brandf b{
  font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;
  font-size:1.02rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
}
body.lampson-2026-page footer .brandf .tl{letter-spacing:.235em;margin-top:5px}

/* --- hero: everything on the first screen --- */
body.lampson-2026-page .hero .wrap{padding:54px 28px 0}
/* the column split lives in the min-width block further down - one place only,
   so it can never sit after the mobile reset and leak onto phones */
body.lampson-2026-page .hero h1{
  font-size:clamp(2.15rem,3.55vw,3.05rem);line-height:1.07;margin-top:.28em;
}
body.lampson-2026-page .hero .lede{font-size:1.045rem;line-height:1.68;max-width:33em;margin-top:19px}
body.lampson-2026-page .hero .cta{margin-top:26px;flex-wrap:nowrap}
body.lampson-2026-page .hero .cta .btn{white-space:nowrap}
body.lampson-2026-page .hero .note{margin-top:20px;font-size:.83rem;max-width:34em}
body.lampson-2026-page .hero .napline{margin-top:16px;font-size:.82rem;line-height:1.6}

/* buttons before the promise card, so the calls to action clear the fold */
body.lampson-2026-page .hero-grid>div:first-child{display:flex;flex-direction:column}
body.lampson-2026-page .hero .eyebrow{order:1}
body.lampson-2026-page .hero h1{order:2}
body.lampson-2026-page .hero .lede{order:3}
body.lampson-2026-page .hero .cta{order:4}
body.lampson-2026-page .hero .promise{order:5;margin-top:26px;max-width:29em}
body.lampson-2026-page .hero .note{order:6}
body.lampson-2026-page .hero .napline{order:7}

/* photo: top edge lines up with the eyebrow, not floating half a screen down */
body.lampson-2026-page .figure{margin-top:4px}
body.lampson-2026-page .figure .ph img{height:466px;object-position:50% 18%}
body.lampson-2026-page .stats{margin-top:56px}

@media(max-width:860px){
  body.lampson-2026-page header.site .wrap{height:68px}
  body.lampson-2026-page .brand img{height:28px}
  body.lampson-2026-page .brand .bt{font-size:.95rem}
  body.lampson-2026-page .hero .wrap{padding:34px 20px 0}
  /* the two-column split above is desktop-only. It carries `body.lampson-2026-page`,
     so it outranks site.css's own mobile rule and has to be undone here by hand -
     left un-undone it resolved to `2px 551px` and threw the whole hero off-screen
     right, while scrollWidth still read 390 == innerWidth and looked clean. */
  body.lampson-2026-page .hero-grid{grid-template-columns:1fr;gap:30px}
  body.lampson-2026-page .hero .cta{flex-wrap:wrap}
  body.lampson-2026-page .hero .cta .btn{white-space:normal;text-align:center}
  body.lampson-2026-page .hero .lede,
  body.lampson-2026-page .hero .promise,
  body.lampson-2026-page .hero .note{max-width:none}
  body.lampson-2026-page .figure{margin-top:0}
  body.lampson-2026-page .figure .ph img{height:290px}
  body.lampson-2026-page .stats{margin-top:40px}
}

/* Two responsive gaps the desktop pass hid, both found by walking every element
   at 360/390/430/600/768/860/900/1024/1280/1440/1920 and flagging any box whose
   edge left the viewport. Neither showed up as a scrollbar - a parent clips the
   overflow, so scrollWidth still matched innerWidth on both. */

/* 1. Header. The nav's six links plus the Free-analysis button stop fitting at
      about 1000px, but the button was only being hidden at 860, so between the
      two it hung off the right edge. */
@media(max-width:999px){
  body.lampson-2026-page header.site .btn{display:none}
}

/* 2. Stats strip. Two columns, and the headline word alone ("Guaranteed" at
      1.72rem) needs ~154px plus 44px of padding. Two of those is 396px against
      a 350px content box on a 390px phone, so cells 2 and 3 ran off. One column
      below 520. */
@media(max-width:520px){
  body.lampson-2026-page .stats{grid-template-columns:1fr}
  body.lampson-2026-page .stats div{border-right:0;padding:22px 20px 26px}
  body.lampson-2026-page .stats div:not(:last-child){border-bottom:1px solid var(--line)}
  body.lampson-2026-page .stats div:last-child{border-bottom:0}
  body.lampson-2026-page .stats b{font-size:1.5rem}
}

/* C-Y-A letters: the green (3.96) and red (5.33) carried over to white fine,
   the amber landed at 2.62 against the 3.0 large-text floor. --gold-deep is
   3.95, so all three letters now sit at roughly the same weight. */
body.lampson-2026-page .cya .y .letter{color:var(--gold-deep)}

/* Interior pages: two paragraphs kept the dark theme's cream (rgba(248,245,239,.82))
   after the surfaces under them turned light - 1.01 and 1.07 against white, i.e.
   invisible, live, on /safe-retirement-annuities/. Named individually rather than
   as `p{color:...}` because the same cream is CORRECT in .final and footer .disc,
   which are still navy. */
body.lampson-2026-page .pagehero p{color:var(--body)}
body.lampson-2026-page .napcard p{color:var(--body)}
body.lampson-2026-page .napcard a{color:var(--navy);border-bottom:1px solid var(--gold)}

/* ==========================================================================
   NO GOLD ON WHITE  (client: "I do not like the gold on White")
   Gold stays where he likes it - on the navy surfaces (footer, closing CTA,
   and the navy hero in variant C). On every light surface the accent becomes
   navy. Written as its own block so the two decisions stay separable.
   ========================================================================== */
body.lampson-2026-page .eyebrow,
body.lampson-2026-page .pagehero .eyebrow,
body.lampson-2026-page .brand .bs,
body.lampson-2026-page .svc .n,
body.lampson-2026-page .media .k,
body.lampson-2026-page .team figcaption span,
body.lampson-2026-page .tst .stars,
body.lampson-2026-page .cya .y .letter,
body.lampson-2026-page .promise,
body.lampson-2026-page .hero h1 em{color:var(--navy)}
body.lampson-2026-page .eyebrow{color:#5c6773}
body.lampson-2026-page .hero h1 em{color:#3d5f85}      /* second line, still a step down from the first */
body.lampson-2026-page .promise{border-left-color:var(--navy);color:var(--body)}
body.lampson-2026-page .promise b{color:var(--navy)}
body.lampson-2026-page .cya .y .letter{color:#3d5f85}
body.lampson-2026-page .media a,
body.lampson-2026-page .napcard a{border-bottom-color:#b9c4d1}
body.lampson-2026-page .figure .tag,
body.lampson-2026-page .eyebrow::after,
body.lampson-2026-page .eyebrow.ctr::before{background:var(--line)}
/* the primary button on a light surface: navy, not gold */
body.lampson-2026-page .hero .btn-gold,
body.lampson-2026-page section .btn-gold,
body.lampson-2026-page .lp-drawer .btn-gold{background:var(--navy);border-color:var(--navy);color:#fff}
body.lampson-2026-page .hero .btn-gold:hover,
body.lampson-2026-page section .btn-gold:hover{background:var(--navy-2);border-color:var(--navy-2)}
/* gold is still gold on navy */
body.lampson-2026-page .final .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
body.lampson-2026-page footer .brandf .tl{color:var(--gold-lt)}

/* ==========================================================================
   HERO VARIANTS.  Third layout attempt, so this time he picks rather than
   me guessing again. Body class chooses: .lp-a / .lp-b / .lp-c. .lp-b is the
   default if none is set. The markup is identical in all three - only CSS
   differs, so switching is one class and nothing can drift out of sync.
   ========================================================================== */

/* ---- the panel that replaced the founder's photo ---- */
body.lampson-2026-page .factpanel{
  background:var(--navy);color:rgba(255,255,255,.80);border-radius:14px;
  padding:30px 30px 26px;align-self:start;
  box-shadow:0 18px 44px rgba(19,49,79,.14);
}
body.lampson-2026-page .factpanel .fp-mark{margin-bottom:20px}
body.lampson-2026-page .factpanel .fp-mark img{width:auto;height:40px;object-fit:contain}
body.lampson-2026-page .factpanel ul{list-style:none;margin:0;padding:0}
body.lampson-2026-page .factpanel li{padding:15px 0;border-top:1px solid rgba(255,255,255,.14)}
body.lampson-2026-page .factpanel li:first-child{border-top:0;padding-top:0}
body.lampson-2026-page .factpanel li b{
  display:block;color:#fff;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;margin-bottom:3px;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
}
body.lampson-2026-page .factpanel li span{display:block;font-size:.87rem;line-height:1.5}
body.lampson-2026-page .factpanel .fp-cta{
  display:inline-block;margin-top:22px;color:var(--gold-lt);   /* gold, but on navy */
  font-weight:700;font-size:.94rem;text-decoration:none;border-bottom:1px solid rgba(216,171,94,.5);
  padding-bottom:2px;
}

/* ---- A: no panel at all. One column, centred, nothing but the message. ---- */
body.lp-a .hero-grid{display:block;max-width:860px;margin:0 auto;text-align:center}
body.lp-a .factpanel{display:none}
body.lp-a .hero .eyebrow{justify-content:center}
body.lp-a .hero .eyebrow::after{display:none}
body.lp-a .hero h1{font-size:clamp(2.3rem,4.1vw,3.5rem);margin-top:.3em}
body.lp-a .hero .lede{max-width:41em;margin-left:auto;margin-right:auto}
body.lp-a .hero .cta{justify-content:center}
/* centred, the box dropped: a narrow bordered card in the middle of a wide
   centred hero reads as a stray element rather than a statement. */
body.lp-a .hero .promise{
  margin:30px auto 0;max-width:none;text-align:center;
  background:transparent;border:0;border-radius:0;padding:0;
  font-size:1.35rem;line-height:1.35;
}
body.lp-a .hero .promise b{display:inline;font-size:inherit}
body.lp-a .hero .note,
body.lp-a .hero .napline{margin-left:auto;margin-right:auto;max-width:38em}
body.lp-a .hero .wrap{padding-bottom:8px}

/* ---- B (default): text left, navy fact panel right. ----
   Declared inside a MIN-width query on purpose. Stated unconditionally it would
   sit after the max-width:860px reset and win at every width by source order -
   which is exactly how the hero got blown out to `2px 551px` last time. A
   min-width query cannot leak downwards, so the ordering stops mattering. */
@media(min-width:861px){
  body.lampson-2026-page .hero-grid{grid-template-columns:1.16fr .84fr;gap:56px;align-items:start}
}
body.lp-b .hero .promise{order:5}

/* ---- C: the whole first screen navy. Gold is allowed here. ---- */
body.lp-c .hero{background:var(--navy);color:rgba(255,255,255,.80)}
body.lp-c .hero h1{color:#fff}
body.lp-c .hero h1 em{color:var(--gold-lt)}
body.lp-c .hero .eyebrow{color:var(--gold-lt)}
body.lp-c .hero .eyebrow::after{background:rgba(255,255,255,.22)}
body.lp-c .hero .lede{color:rgba(255,255,255,.80)}
body.lp-c .hero .lede em{color:#fff}
/* `p.note` - the light-theme fix above is (0,0,3,2) because it names the
   element, so this has to match it or the grey survives on navy. */
body.lp-c .hero p.note{color:rgba(255,255,255,.72)}
body.lp-c .hero .napline{color:rgba(255,255,255,.62)}
body.lp-c .hero .napline a{color:rgba(255,255,255,.78)}
body.lp-c .hero .promise{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--gold);color:rgba(255,255,255,.82);
}
body.lp-c .hero .promise b{color:#fff}
body.lp-c .hero .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
body.lp-c .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
body.lp-c .hero .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
body.lp-c .factpanel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);box-shadow:none;
}
body.lp-c .stats{background:var(--navy-2);border-color:rgba(255,255,255,.12)}
body.lp-c .stats div{border-right-color:rgba(255,255,255,.12)}
body.lp-c .stats div b{color:#fff}
body.lp-c .stats div span{color:rgba(255,255,255,.62)}
body.lp-c header.site{border-bottom:0}

@media(max-width:860px){
  body.lampson-2026-page .factpanel{padding:24px 22px 22px}
  body.lampson-2026-page .factpanel .fp-mark img{height:34px}
  body.lp-a .hero h1{font-size:clamp(2rem,7vw,2.4rem)}
}

/* Gold-on-light stragglers, found by walking every element's colour, border,
   outline and text-decoration and keeping only those over a light backdrop
   (goldscan.py). Screenshots had shown none of these - they are all 1px rules. */
body.lampson-2026-page nav.main a.on{border-bottom-color:var(--navy)}
body.lampson-2026-page .svc article a,
body.lampson-2026-page .media a,
body.lampson-2026-page .napcard a{border-bottom-color:#b9c4d1}
body.lampson-2026-page .hero .napline a{border-bottom-color:#c3ccd6}

/* ---------- contact page (v1.4.0) ----------
   The heading group above is `body.lampson-2026-page h3`, which outranks a plain
   `.cdet h3` in site.css. These four labels are eyebrows, not headings, so they need
   the same specificity to win back the small uppercase gold treatment. */
body.lampson-2026-page .cdet h3{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);line-height:1.3;
}
body.lampson-2026-page .cdet{border-color:var(--line);background:var(--line)}
body.lampson-2026-page .cdet > div{background:#fff}
body.lampson-2026-page .cf label{color:var(--navy)}

/* ---------- contact form controls: beating the Elementor global kit ----------
   The inputs were coming out square, 2px-bordered and pale blue instead of the rounded
   white fields site.css asks for. The winner was not the theme - it was Elementor's own
   kit stylesheet (css/post-724.css):

       .elementor-kit-724 input:not([type="button"]):not([type="submit"]) { ... }

   That is (0,0,3,1) - one class, two attribute selectors, one element - and it outranks
   `.cf input[type="text"]` at (0,0,2,1) no matter which file loads last. Matching the
   kit's own shape and adding the page class takes it to (0,0,4,1), which settles it by
   specificity rather than by load order, so a plugin update that reshuffles the queue
   cannot quietly hand the form back to the kit.

   Found by enumerating every rule in all 62 readable stylesheets that matches the field,
   rather than guessing at a third override. */
body.lampson-2026-page .cf input:not([type="button"]):not([type="submit"]):not([type="checkbox"]),
body.lampson-2026-page .cf textarea:not([type="button"]){
  -webkit-appearance:none;appearance:none;
  display:block;box-sizing:border-box;width:100%;max-width:100%;margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1rem;line-height:1.5;font-style:normal;letter-spacing:normal;font-weight:400;
  color:var(--navy);background:#fff;background-color:#fff;
  border:1px solid var(--line);border-width:1px;border-style:solid;border-color:var(--line);
  border-radius:10px;
  padding:13px 15px;height:auto;min-height:0;box-shadow:none;outline:0;
  transition:border-color .18s,box-shadow .18s;
}
body.lampson-2026-page .cf textarea:not([type="button"]){min-height:150px;resize:vertical}
body.lampson-2026-page .cf input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):focus,
body.lampson-2026-page .cf textarea:not([type="button"]):focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,62,.18);outline:0;background:#fff}
/* the kit also colours placeholders; keep them legible but clearly secondary */
body.lampson-2026-page .cf input::placeholder,
body.lampson-2026-page .cf textarea::placeholder{color:#8b95a3;opacity:1}