/* ============================================================
   FALDEX - AGENT MODE APPLIED TO THE PUBLIC SITE
   PREVIEW ONLY. 09-08-2026. Not deployed, not linked from
   anything live. Built to answer one question: what would the
   consumer site look like in Carbon & Citron?

   Source of the style: 02_Brand/1.0 Brand-Guidelines/
   09-05-2026_Agent-Style-Pack.html, and /careers/ which is the
   only place it currently ships.

   WHAT IS DELIBERATELY DIFFERENT FROM /careers/
   The careers page sells a job to a 25 year old. These pages
   sell final expense insurance to someone between 50 and 80.
   Three concessions to that reader, all reversible:

   1. Body text is 18px, not 17px, and sits at 1.68 line height.
      Contrast on body copy is lifted to #D6D7D2 rather than the
      #A5A6A1 dim used on careers. Careers can afford low
      contrast; a page a 72 year old has to read cannot.
   2. Photographs of people keep more of their colour. Careers
      grades the bull to near monochrome because the bull is
      atmosphere. Here the family photo is the trust signal, and
      draining it drains the reason it is on the page.
   3. Citron is used for emphasis and never for a primary button
      on its own. On careers, citron means "we do this with you".
      Here the same rule holds: it marks the moments Faldex is
      involved, not every clickable thing.

   If you decide against this direction, nothing needs undoing.
   Delete this folder.
   ============================================================ */

:root{
  --ink:#0A0A0B;
  --text:#F6F6F4;
  --body:#D6D7D2;          /* lifted from careers --dim for readability */
  --dim:#A5A6A1;
  --dimmer:#7C7D79;
  --stone:#ADB0A6;
  --stone-deep:#3A3D33;
  --citron:#D7F25A;
  --citron-deep:#9CB33A;
  --glass:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.02));
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.032));
  --edge:rgba(255,255,255,.11);
  --edge-soft:rgba(255,255,255,.065);
  --r:16px; --r-in:10px;
  --wrap:1160px; --pad:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;color:var(--body);background:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The ambient field. Same recipe as careers, warmed slightly: an extra
   amber wash bottom left so the page does not read as cold. Cold is fine
   for a recruiting page and wrong for a page about a family. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
    radial-gradient(1080px 740px at 3% -16%, rgba(104,126,44,.50), transparent 62%),
    radial-gradient(940px 800px at 99% -2%, rgba(22,88,80,.46), transparent 64%),
    radial-gradient(820px 620px at 86% 58%, rgba(60,72,32,.44), transparent 66%),
    radial-gradient(980px 660px at 58% 112%, rgba(215,242,90,.16), transparent 60%),
    radial-gradient(880px 700px at 6% 88%, rgba(140,84,36,.34), transparent 66%),
    radial-gradient(700px 600px at 34% 44%, rgba(18,20,18,.55), transparent 70%),
    var(--ink);
}

h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;margin:0;
  letter-spacing:-.035em;line-height:1.03;color:var(--text)}
p{margin:0 0 1em}
a{color:var(--citron)}
img{max-width:100%;height:auto}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.glass{background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  border-radius:var(--r)}
.eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);margin:0 0 20px;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--citron);color:#0A0A0B;
  padding:10px 18px;border-radius:4px;font-weight:600}
:focus-visible{outline:2px solid var(--stone);outline-offset:3px;border-radius:2px}
.sr{position:absolute;left:-9999px}

/* ---------- buttons ----------
   Same hairline, near-square shape as careers. Citron is reserved for the
   one action Faldex performs with you, which on these pages is the quote. */
.btn{font-family:'Inter';font-weight:500;font-size:16px;text-decoration:none;
  padding:15px 27px;border-radius:4px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid transparent;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.btn.pri{background:var(--citron);color:#0A0A0B;border-color:var(--citron);font-weight:600}
.btn.pri:hover{background:#E4FF74;border-color:#E4FF74;transform:translateY(-1px)}
/* The explicit padding below is not decoration, it is a fix. ".sec" means
   two different things in this stylesheet: a page section (padding:92px 0,
   further down) and a secondary button. Both selectors are one class, so
   they have equal specificity, and the section rule is declared later and
   wins. Without this line every "Schedule a meeting" button renders about
   90px tall. The identical bug shipped on /careers/ once already.
   If this design is adopted, rename the section class instead of patching
   the button. See the note at the bottom of this file. */
.btn.sec{background:rgba(0,0,0,.34);color:var(--text);border-color:rgba(255,255,255,.85);
  padding:15px 27px}
.btn.sec:hover{background:var(--text);color:var(--ink);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.24)}
.btn.ghost:hover{border-color:var(--stone);color:var(--stone);transform:translateY(-1px)}
/* Stone focus rings vanish against citron. Dark ring on the citron button. */
.btn.pri:focus-visible,.sub:focus-visible{outline:2px solid #0A0A0B;outline-offset:3px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.62);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--edge-soft)}
.nav .wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text)}
.brand img{height:32px;width:auto;display:block}
.navlinks{display:flex;gap:26px;align-items:center;margin-left:auto;margin-right:24px}
.navlinks a{font-weight:500;font-size:15px;color:var(--dim);text-decoration:none;transition:color .16s}
.navlinks a:hover{color:var(--text)}
.navlinks a[aria-current="page"]{color:var(--citron)}
.nav .btn{font-size:14.5px;padding:11px 20px}
@media(max-width:900px){
  .nav .wrap{flex-wrap:wrap;row-gap:12px}
  .navlinks{order:3;width:100%;margin:0;gap:20px;padding-top:11px;
    border-top:1px solid var(--edge-soft);overflow-x:auto}
  .navbook{margin-left:auto}
}

/* ---------- hero ----------
   Reworked from the deploy layout. There the photo sits in an arch beside
   the copy. Here it becomes a full-bleed layer behind the page, the way the
   bull works on careers, and the copy sits on glass over it. */
.hero{position:relative;padding:104px 0 92px}
.herowrap{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.herowrap img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(120%,2200px);height:auto;display:block;
  /* Only a light grade. This photo is the trust signal, see note at top. */
  filter:grayscale(.34) saturate(1.05) contrast(1.06) brightness(.62);
  opacity:.5;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center;
  position:relative;z-index:1}
.hero h1{font-weight:700;font-size:clamp(42px,5.4vw,72px);max-width:13ch;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--citron)}
.lede{font-size:clamp(18px,1.5vw,20.5px);color:var(--body);max-width:50ch;margin-bottom:32px}
.micro{display:flex;flex-direction:column;gap:10px;margin-top:30px;
  font-size:15.5px;color:var(--dim)}
.micro span{display:flex;gap:11px;align-items:baseline}
.micro b{color:var(--citron);font-weight:600;flex:0 0 auto}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:44px}.hero{padding:72px 0 64px}}

/* trust panel in the hero, mirrors the careers "10 steps" panel */
.panel{padding:26px 26px 24px}
.panel .ptop{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--edge-soft)}
.panel .ptop span{font-weight:600;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dimmer)}
.pill{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;
  background:rgba(173,176,166,.12);color:var(--stone);border:1px solid rgba(173,176,166,.26)}
.prow{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--edge-soft)}
.prow:last-child{border-bottom:0}
.prow i{flex:0 0 auto;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:10.5px;font-weight:600;
  border:1px solid rgba(173,176,166,.4);color:var(--stone);background:rgba(58,61,51,.26)}
.prow.us i{border-color:rgba(215,242,90,.45);color:var(--citron);background:rgba(156,179,58,.13)}
.prow b{font-weight:500;font-size:15.5px;color:var(--text);flex:1 1 auto}
.prow em{font-style:normal;font-size:13px;color:var(--dimmer);white-space:nowrap}
.prow.us em{color:var(--citron);opacity:.85}

/* ---------- facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:54px;
  position:relative;z-index:1}
.facts div{padding:26px 26px 24px}
.facts b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:26px;
  letter-spacing:-.03em;color:var(--citron);margin-bottom:8px}
.facts span{font-size:15.5px;color:var(--dim);line-height:1.55}
@media(max-width:820px){.facts{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.sec{padding:92px 0;position:relative}
.sec h2{font-weight:700;font-size:clamp(30px,4.1vw,52px);max-width:19ch;margin-bottom:20px}
.sec .intro{color:var(--body);max-width:60ch;font-size:18.5px}
.sec.tight{padding:64px 0}

/* two-up with a photo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-top:44px}
.duo.flip > .shot{order:-1}
.shot{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge)}
.shot img{display:block;width:100%;
  filter:grayscale(.3) saturate(1.04) contrast(1.05) brightness(.82)}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0) 40%,rgba(10,10,11,.55) 100%)}
.tagchip{position:absolute;left:18px;bottom:18px;z-index:2;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--citron);
  background:rgba(10,10,11,.72);border:1px solid rgba(215,242,90,.34);
  padding:7px 14px;border-radius:999px}
@media(max-width:860px){.duo{grid-template-columns:1fr;gap:32px}.duo.flip > .shot{order:0}}

.fine{font-size:15px;color:var(--dim);border-left:2px solid var(--stone-deep);
  padding-left:18px;margin-top:24px}
.fine strong{color:var(--text)}

/* ---------- spine, the three steps ---------- */
.spine{list-style:none;margin:52px 0 0;padding:0;position:relative}
.spine::before{content:"";position:absolute;left:26px;top:22px;bottom:26px;width:1px;
  background:linear-gradient(180deg,rgba(173,176,166,.5) 0%,rgba(173,176,166,.5) 40%,
    rgba(215,242,90,.55) 52%,rgba(215,242,90,.55) 100%)}
.step{position:relative;padding:0 0 14px 74px}
.step .card{padding:24px 28px 22px}
.step .n{position:absolute;left:0;top:14px;width:53px;height:53px;border-radius:50%;
  display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:14px;
  background:rgba(10,10,11,.9);border:1px solid rgba(173,176,166,.45);color:var(--stone);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.step.us .n{border-color:rgba(215,242,90,.5);color:var(--citron)}
.step h3{font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.step p{color:var(--body);font-size:16.5px;margin:0;max-width:58ch}
@media(max-width:620px){
  .step{padding-left:58px}
  .step .n{width:42px;height:42px;font-size:12.5px;top:12px}
  .spine::before{left:21px}
}

/* ---------- chips row ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.chip{font-size:13.5px;font-weight:500;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(173,176,166,.28);color:var(--stone);background:rgba(58,61,51,.22)}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.fcard{padding:44px 38px;text-align:center}
.fcard img{height:52px;width:auto;margin:0 auto 22px;display:block;opacity:.9}
.fdiv{width:52px;height:1px;background:rgba(215,242,90,.5);margin:0 auto 20px}
.fcard .nm{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--text);
  letter-spacing:-.02em}
.fcard .ti{font-size:13.5px;color:var(--dimmer);margin-top:8px;line-height:1.6}
blockquote{margin:0;font-family:'Space Grotesk';font-weight:500;
  font-size:clamp(21px,2.5vw,29px);line-height:1.35;letter-spacing:-.025em;color:var(--text)}
blockquote em{font-style:normal;color:var(--citron)}
.attr{margin-top:26px;font-size:15px;color:var(--dim)}
.attr small{display:block;color:var(--dimmer);font-size:13.5px;margin-top:4px}
@media(max-width:860px){.founder{grid-template-columns:1fr;gap:34px}}

/* ---------- form ---------- */
.formgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:start}
.formgrid h2{font-size:clamp(30px,3.9vw,46px);margin-bottom:20px}
form{padding:34px 32px 30px}
form h3{font-weight:700;font-size:21px;letter-spacing:-.02em;margin-bottom:6px}
form .cs{font-size:14.5px;color:var(--dimmer);margin-bottom:22px}
.f{margin-bottom:18px}
.f label{display:block;font-weight:600;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:9px}
.f input,.f select{width:100%;font-family:'Inter';font-size:16.5px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:var(--r-in);
  padding:14px 15px;transition:border-color .16s,background .16s}
.f input:focus,.f select:focus{border-color:var(--stone);background:rgba(255,255,255,.075);outline:none}
.f select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A5A6A1' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.f select option{background:#17180F;color:var(--text)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 4px}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--citron-deep)}
.consent label{font-size:13px;line-height:1.62;color:var(--dimmer);margin:0;
  text-transform:none;letter-spacing:0;font-weight:400}
.consent label a{color:var(--dim)}
.sub{width:100%;margin-top:18px;font-family:'Inter';font-weight:600;font-size:17px;
  color:#0A0A0B;background:var(--citron);border:1px solid var(--citron);
  border-radius:4px;padding:16px;cursor:pointer;transition:background .16s,transform .16s}
.sub:hover{background:#E4FF74;transform:translateY(-1px)}
.formnote{font-size:12.5px;color:var(--dimmer);margin:16px 0 0;text-align:center}
@media(max-width:900px){.formgrid{grid-template-columns:1fr;gap:36px}}

/* ---------- faq ---------- */
.faq{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.faq details{padding:0;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;gap:18px;
  align-items:baseline;justify-content:space-between;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:18.5px;
  letter-spacing:-.02em;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter';font-weight:400;font-size:22px;
  color:var(--citron);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--citron)}
.faq .a{padding:0 26px 24px;color:var(--body);font-size:16.5px;max-width:70ch}
.faq .a p{margin:0}

/* ---------- closing cta ---------- */
.cta{padding:52px 48px 48px;background:var(--glass-hi)}
.cta h2{font-size:clamp(27px,3.4vw,40px);margin-bottom:16px;max-width:20ch}
.cta h2 em{font-style:normal;color:var(--citron)}
.cta p{color:var(--body);max-width:56ch;margin-bottom:28px}
@media(max-width:620px){.cta{padding:34px 26px 32px}}

/* ---------- disclosure and footer ---------- */
.disclose{padding:0 0 78px}
.disclose > .wrap > div{padding:30px 32px}
.disclose h2{font-family:'Space Grotesk';font-weight:600;font-size:16.5px;
  letter-spacing:-.01em;color:var(--dim);margin-bottom:13px}
.disclose p{font-size:13.5px;color:var(--dimmer);line-height:1.78;margin:0;max-width:94ch}
.foot{padding:36px 0 64px;border-top:1px solid var(--edge-soft)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .flinks a{color:var(--dim);text-decoration:none;font-size:15px;margin-right:24px;
  display:inline-block;margin-bottom:6px}
.foot .flinks a:hover{color:var(--citron)}
.foot small{color:var(--dimmer);font-size:13px}

/* preview banner. Not part of the style, just so nobody mistakes these
   files for the live site. Remove if this direction is adopted. */
body{padding-bottom:40px}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.sub:hover{transform:none}
}

/* ============================================================
   BATCH 2 additions (09-08-2026): Products, Final Expense,
   About, Book. Patterns the first three pages did not need.
   ============================================================ */

/* sub-page hero. Shorter than the home hero, no side panel. */
.subhero{padding:84px 0 24px;position:relative;z-index:1}
.subhero h1{font-weight:700;font-size:clamp(36px,4.6vw,60px);max-width:17ch;margin-bottom:20px}
.subhero .lede{margin-bottom:28px}

/* ticked lists. The tick is citron because every one of these is
   something Faldex is telling you it does, not a cost you carry. */
.checks{list-style:none;margin:26px 0 0;padding:0}
.checks li{position:relative;padding-left:32px;margin-bottom:14px;
  font-size:16.5px;color:var(--body);line-height:1.6}
.checks li:last-child{margin-bottom:0}
.checks li::before{content:"";position:absolute;left:0;top:9px;width:15px;height:8px;
  border-left:2px solid var(--citron);border-bottom:2px solid var(--citron);
  transform:rotate(-45deg)}

/* plain bulleted list, stone marker. Used where the items are facts
   rather than promises. */
.plain{list-style:none;margin:22px 0 0;padding:0}
.plain li{position:relative;padding-left:25px;margin-bottom:13px;
  font-size:16.5px;color:var(--body);line-height:1.6}
.plain li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:2px;
  border-radius:2px;background:var(--stone)}

/* key takeaways / callout card */
.kt{padding:32px 32px 28px}
.kt h3{font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:6px;color:var(--citron)}

/* source attribution. Deliberately quiet but never hidden: a cited
   figure with an invisible source is worse than no figure. */
.src{font-size:13px;color:var(--dimmer);margin-top:18px;line-height:1.6}

/* three payout structures */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.tiers .t{padding:28px 26px 24px}
.tiers h3{font-weight:700;font-size:18px;letter-spacing:-.02em;margin-bottom:10px;color:var(--citron)}
.tiers p{color:var(--body);font-size:15.5px;margin:0}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}

/* products: available now vs coming soon */
.soon{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.soon .c{padding:26px 24px 24px;text-decoration:none;display:block}
.soon .c span{display:block;font-weight:600;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:10px}
.soon .c h3{font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--dim)}
.soon .c.live{background:var(--glass-hi);border-color:rgba(215,242,90,.34)}
.soon .c.live span{color:var(--citron)}
.soon .c.live h3{color:var(--text)}
.soon a.c:hover{border-color:rgba(215,242,90,.5)}
@media(max-width:860px){.soon{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.soon{grid-template-columns:1fr}}

/* about: what we stand for */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.vals .v{padding:30px 28px 26px}
.vals h3{font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:10px;color:var(--citron)}
.vals p{color:var(--body);font-size:16px;margin:0}
@media(max-width:860px){.vals{grid-template-columns:1fr}}

/* prose column, for the founder story */
.prose{max-width:64ch;color:var(--body);font-size:17.5px}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}

/* book: scheduler card. In the preview this holds a placeholder rather
   than the real Calendly embed, so that opening the file offline does
   not fire a third-party script or create a real booking. */
.bkcard{padding:0;overflow:hidden;margin-top:40px}
.bkstub{min-height:460px;display:grid;place-items:center;text-align:center;padding:60px 30px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 14px,transparent 14px 28px)}
.bkstub h3{font-weight:700;font-size:21px;margin-bottom:12px;color:var(--dim)}
.bkstub p{color:var(--dimmer);font-size:15.5px;max-width:44ch;margin:0}
.bkalt{margin-top:28px;font-size:16px;color:var(--body);line-height:1.9}
.bkpoints{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;font-size:15.5px;color:var(--dim)}
.bkpoints span{display:flex;gap:10px;align-items:baseline}
.bkpoints b{color:var(--citron)}

/* ============================================================
   BATCH 3 (09-08-2026): Privacy, Terms, Card.
   ============================================================ */

/* Long legal copy. This is where a dark palette is most likely to fail,
   so the settings here are deliberately more generous than anywhere else
   on the site: 17.5px, 1.8 line height, a 68ch measure, and body text at
   full --body brightness rather than --dim. Someone reading a privacy
   policy is usually reading it because they are worried. Do not make
   them squint. */
.legal{padding:12px 0 90px;position:relative;z-index:1}
.legal .inner{max-width:74ch;padding:44px 46px 40px}
.legal p{font-size:17.5px;line-height:1.8;color:var(--body);margin:0 0 1.15em;max-width:68ch}
.legal p:last-child{margin-bottom:0}
.legal h2{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:21px;letter-spacing:-.025em;color:var(--citron);
  margin:42px 0 14px;padding-top:26px;border-top:1px solid var(--edge-soft)}
.legal h2:first-of-type{margin-top:34px}
.legal ul{list-style:none;margin:0 0 1.3em;padding:0;max-width:68ch}
.legal li{position:relative;padding-left:25px;margin-bottom:12px;
  font-size:17px;line-height:1.75;color:var(--body)}
.legal li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:2px;
  border-radius:2px;background:var(--stone)}
.legal a{color:var(--citron);text-decoration:underline;text-underline-offset:3px}
.eff{font-size:14.5px;color:var(--dimmer);margin:0}
@media(max-width:680px){
  .legal .inner{padding:30px 24px 28px}
  .legal p,.legal li{font-size:16.5px}
}

/* ---------- digital business card ----------
   A single object on an empty page. It keeps the glass treatment but
   drops the ambient field's busier corners, because anything behind a
   card this small reads as noise. */
body.cardpage{display:grid;place-items:center;min-height:100vh;padding:28px 18px 60px}
.vcard{width:100%;max-width:400px;padding:0;overflow:hidden;text-align:center}
.vcard .head{padding:38px 28px 26px;border-bottom:1px solid var(--edge-soft)}
.vcard .sym{width:66px;height:66px;display:block;margin:0 auto 16px}
.vcard .wm{font-family:'Space Grotesk';font-weight:700;font-size:22px;
  letter-spacing:.22em;color:var(--text)}
.vcard .tag{font-size:10.5px;font-weight:600;letter-spacing:.34em;
  color:var(--citron);margin-top:6px}
.vcard .who{padding:28px 28px 22px}
.vcard .name{font-family:'Space Grotesk';font-weight:700;font-size:27px;
  letter-spacing:-.03em;color:var(--text)}
.vcard .title{font-size:14px;color:var(--dim);margin-top:7px}
.vcard .rows{padding:0 18px}
.vcard .row{display:flex;gap:15px;align-items:center;text-align:left;
  padding:15px 12px;border-radius:var(--r-in);text-decoration:none;
  border-bottom:1px solid var(--edge-soft);transition:background .16s}
.vcard .row:last-child{border-bottom:0}
.vcard .row:hover{background:rgba(255,255,255,.045)}
.vcard .ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;
  place-items:center;border:1px solid rgba(215,242,90,.36);background:rgba(156,179,58,.12)}
.vcard .ic svg{width:18px;height:18px}
.vcard .lbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:3px}
.vcard .val{display:block;font-size:15.5px;color:var(--text)}
.vcard .acts{padding:22px 24px 4px;display:flex;flex-direction:column;gap:10px}
.vcard .acts .btn{width:100%;gap:10px}
.vcard .acts .btn svg{width:18px;height:18px}
.vcard .cfoot{padding:24px 26px 28px;margin-top:18px;border-top:1px solid var(--edge-soft)}
.vcard .lic{font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.vcard .disc{font-size:11.5px;color:var(--dimmer);margin-top:7px;line-height:1.6}

/* ============================================================
   KNOWN ISSUE TO FIX BEFORE THIS SHIPS
   ============================================================
   ".sec" is overloaded: it is both a page section and a secondary
   button. Equal specificity, section declared later, so the section
   wins and secondary buttons render ~90px tall. It is patched above
   with an explicit .btn.sec padding, which works but is a plaster.

   This exact bug already shipped once on /careers/ and had to be
   found by looking at a screenshot. It will come back the next time
   anyone adds a property to .sec that a button also uses.

   The real fix is to rename one of them. Recommended: rename the
   SECTION class to .band across careers.css and this file, and leave
   .btn.sec alone, because .sec as a button name is documented in the
   Agent Style Pack and used in markup that is already live.

   Not done here because it touches the shipped careers stylesheet,
   which is a change Tim should approve rather than find.
   ============================================================ */

/* ============================================================
   PRODUCTION PIECES  ·  added 09-08-2026 during the port

   The preview was built to be judged on a desktop, so three things
   the live pages carry were not in it. They are added here rather
   than in the page markup, so all ten pages pick them up.
   ============================================================ */

/* Tap-to-call bar. Phone only, and it is the primary conversion
   route for this audience, so it does not get to be subtle.
   Citron on ink reads 15.8:1. body.no-callbar suppresses it, which
   is how the agent pages opt out. */
.mcall{display:none}
@media(max-width:640px){
  body{padding-bottom:58px}
  body.no-callbar{padding-bottom:0}
  .mcall{display:block;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:var(--citron);color:var(--ink);text-align:center;
    font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:16px;
    padding:16px;text-decoration:none;letter-spacing:.01em}
}

/* Calendly on /book/. The widget is recoloured to Carbon through its
   data-url query string; this only reserves the space so the page does
   not jump when the iframe loads. */
#calendly{min-width:320px;height:1000px}
@media(max-width:640px){#calendly{height:1150px}}

/* Agent Login sits in the consumer nav and should read as a quieter,
   separate destination rather than another top-level page. */
.navlinks a.agentlink{color:var(--dimmer);position:relative;padding-left:26px}
.navlinks a.agentlink::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:15px;background:var(--edge)}
.navlinks a.agentlink:hover{color:var(--dim)}

/* /card/ contact rows: the label and value stack beside the icon. The
   preview relied on .lbl and .val being block-level and never styled
   their wrapper, which left the two running together. */
.meta{display:flex;flex-direction:column;gap:2px;min-width:0}