/* Text layouts (c-layouts, S132, S134, S169; Atlas 2026-10-27).
   Text that is alone in its section runs wider or sits beside something,
   and pages mix several layouts instead of one centered 640px column.
   Opt-in by class on the section; nothing here touches a section without one.
     tl-rail       heading (and short answer card) left, text right, About-style rule
     tl-aside      heading on top, text left, short answer card right
     tl-statement  short text, bigger type, wide
     tl-media      text beside a picture
     tl-wide       cards, steps and plain text simply run wider
   Loaded last on every page, so it wins over the calm-page 640px cap. */

/* ---------- shared: lift the narrow caps inside an opted-in section ---------- */
html body section.sec:is(.tl-rail,.tl-aside,.tl-statement,.tl-media,.tl-wide) :is(.lead-prose,.lk-prose,div[style*="max-width:760px"],div[style*="max-width: 760px"],div[style*="max-width:640px"],.tldr,.head,.head.left,.bio-flow,.cs-facts,.faq-list,.ty-steps,.series-in){
  max-width:none !important;
}
html body section.sec.sec:is(.tl-rail,.tl-aside,.tl-statement,.tl-media,.tl-groups) > .container.container{
  max-width:1200px !important;
}
html body section.sec.sec.tl-wide > .container.container{max-width:1064px !important}

/* ---------- tl-rail ---------- */
@media (min-width:961px){
  html body section.sec.tl-rail > .container{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
    column-gap:72px;
    align-items:start;
  }
  html body section.sec.tl-rail > .container > *{grid-column:2;margin-left:0 !important;margin-right:0 !important}
  html body section.sec.tl-rail > .container > .tl-left{
    grid-column:1;grid-row:1 / span 40;
    position:sticky;top:120px;align-self:start;
  }
  html body section.sec.tl-rail > .container > .tl-left .head{text-align:left !important;margin:0 0 24px !important}
  html body section.sec.tl-rail > .container > .tl-left .head h2{font-size:clamp(28px,2.6vw,38px)}
  html body section.sec.tl-rail > .container > .tl-left .head h2::after{margin-left:0 !important}
  html body section.sec.tl-rail > .container > .tl-left .tldr{margin:0 !important}
  html body section.sec.tl-rail > .container > .tl-left .tldr .frame-card{padding:22px 22px 20px}
  html body section.sec.tl-rail > .container > .tl-left .tldr .frame-card p{font-size:15.5px;line-height:1.65}
  /* the About-style rule beside the text */
  html body section.sec.tl-rail > .container > .tl-body{
    position:relative;padding-left:40px;border-left:1px solid rgba(34,58,76,.14);
  }
  html body section.sec.tl-rail > .container > .tl-body::before{
    content:"";position:absolute;left:-7px;top:6px;width:11px;height:11px;border-radius:3px;
    background:#fff;border:2px solid var(--teal);
  }
}

/* ---------- tl-aside ---------- */
@media (min-width:961px){
  html body section.sec.tl-aside > .container{
    display:grid !important;
    grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
    column-gap:64px;
    align-items:start;
  }
  html body section.sec.tl-aside > .container > *{grid-column:1;margin-left:0 !important;margin-right:0 !important}
  html body section.sec.tl-aside > .container > .head{grid-column:1 / -1;text-align:left !important;margin:0 0 36px !important;max-width:820px !important}
  html body section.sec.tl-aside > .container > .head h2::after{margin-left:0 !important}
  html body section.sec.tl-aside > .container > .tl-side{
    grid-column:2;grid-row:2 / span 40;position:sticky;top:120px;align-self:start;margin:0 !important;
  }
  html body section.sec.tl-aside > .container > .tl-side.tl-side.tl-side .frame-card.frame-card{
    background:var(--navy) !important;color:#fff !important;border:0 !important;
    box-shadow:0 30px 60px -34px rgba(22,51,63,.65) !important;padding:28px 28px 26px !important;
  }
  html body section.sec.tl-aside > .container > .tl-side.tl-side.tl-side .frame-card.frame-card *{color:#fff !important}
  html body section.sec.tl-aside > .container > .tl-side.tl-side.tl-side .frame-card.frame-card .lbl{color:var(--sky) !important}
  html body section.sec.tl-aside > .container > .tl-side.tl-side.tl-side .frame-card.frame-card a{color:var(--sky) !important}
  html body section.sec.tl-aside > .container > .tl-side.tl-side.tl-side .frame-card.frame-card p{font-size:16.5px;line-height:1.65}
}

/* ---------- tl-statement ---------- */
html body section.sec.tl-statement > .container > *:not(.head){max-width:920px !important;margin-left:0 !important;margin-right:auto !important}
html body section.sec.tl-statement > .container > .head{text-align:left !important;margin-left:0 !important;max-width:920px !important}
html body section.sec.tl-statement > .container > .head h2::after{margin-left:0 !important}
html body section.sec.tl-statement > .container > *:not(.head) p{font-size:clamp(18px,1.55vw,21px);line-height:1.6;color:var(--ink)}
@media (min-width:961px){
  html body section.sec.tl-statement > .container > *:not(.head){padding-left:28px;border-left:3px solid var(--teal)}
}

/* ---------- tl-media ---------- */
@media (min-width:961px){
  html body section.sec.tl-media > .container > .tl-pair{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:64px;align-items:center;
  }
  html body section.sec.tl-media.tl-media--flip > .container > .tl-pair > .tl-fig{order:-1}
  html body section.sec.tl-media.tl-media--flip > .container > .tl-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  html body section.sec.tl-media > .container > .head{text-align:left !important;margin-left:0 !important}
  html body section.sec.tl-media > .container > .head h2::after{margin-left:0 !important}
}
html body section.sec.tl-media .tl-pair > *{margin-left:0 !important;margin-right:0 !important;max-width:none !important}
html body section.sec.tl-media .tl-fig{margin:0}
html body section.sec.tl-media .tl-fig img{display:block;width:100%;height:auto}

/* ---------- tl-wide ---------- */
html body section.sec.tl-wide > .container > *:not(.head){max-width:1000px !important;margin-left:auto !important;margin-right:auto !important}
html body section.sec.tl-wide > .container > .head{max-width:1000px !important}
html body section.sec.tl-wide :is(.lead-prose,.lk-prose) p{max-width:none}

/* ---------- tl-quick: a quick-answer card on its own, label left, answer right ---------- */
html body section.sec.sec.tl-quick > .container.container{max-width:1064px !important}
html body section.sec.tl-quick .tldr{max-width:none !important;margin:0 !important}
@media (min-width:961px){
  html body section.sec.tl-quick .tldr .frame-card{
    display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:40px;align-items:start;
    padding:34px 40px !important;
  }
  html body section.sec.tl-quick .tldr .frame-card > .lbl{grid-column:1;grid-row:1 / span 20;
    font-family:var(--font-display);font-size:22px !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.2;
    padding-top:4px;border-top:3px solid var(--teal);padding-top:14px}
  html body section.sec.tl-quick .tldr .frame-card > :not(.lbl){grid-column:2}
  html body section.sec.tl-quick .tldr .frame-card p{font-size:18px;line-height:1.65}
}

/* ---------- tl-groups: subsections side by side as cards ---------- */
html body section.sec.tl-groups > .container{max-width:1200px !important}
html body section.sec.tl-groups > .container > .head{text-align:left !important;margin-left:0 !important;max-width:820px !important}
html body section.sec.tl-groups > .container > .head h2::after{margin-left:0 !important}
html body section.sec.tl-groups .tl-body{max-width:none !important;margin:0 !important}
html body section.sec.tl-groups .tl-intro{max-width:820px}
html body section.sec.tl-groups .tl-grid{columns:2 320px;column-gap:22px;margin:8px 0 0}
html body section.sec.tl-groups .tl-group{break-inside:avoid;display:block;margin:0 0 22px}
html body section.sec.tl-groups .tl-group{background:#fff;border:1px solid rgba(34,58,76,.10);border-top:3px solid var(--teal);border-radius:16px;padding:24px 24px 20px;box-shadow:0 22px 44px -34px rgba(22,51,63,.45)}
html body section.sec.tl-groups .tl-group > :first-child{margin-top:0 !important}
html body section.sec.tl-groups .tl-group > :last-child{margin-bottom:0 !important}
html body section.sec.tl-groups .tl-group h3{font-size:20px;color:var(--navy)}
html body section.sec.tl-groups .tl-outro{max-width:820px;margin-top:26px}

/* ---------- the LEAD AI visual (S168) ---------- */
.lead-art{margin:0;position:relative}
.lead-art img{display:block;width:100%;height:auto}
.lead-art--card{background:#fff;border:1px solid rgba(34,58,76,.10);border-radius:var(--radius-lg,22px);padding:22px;box-shadow:0 30px 60px -40px rgba(22,51,63,.45)}
.lead-art--navy{border-radius:var(--radius-lg,22px);overflow:hidden;box-shadow:0 34px 70px -36px rgba(5,15,22,.7)}
.lead-art figcaption{margin-top:12px;font-size:13.5px;color:var(--ink-faint);text-align:center}
.lead-steps{list-style:none;margin:0 !important;padding:0 !important;display:grid;gap:18px}
.lead-steps li{margin:0 !important;padding:0 0 0 18px;border-left:3px solid var(--teal)}
.lead-steps h3{margin:0 0 4px;font-size:19px;color:var(--navy)}
.lead-steps p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.lead-protect{margin-top:22px !important;padding:16px 18px;border-radius:14px;background:var(--mist,#E6F8FA);font-size:15px;line-height:1.6;color:var(--ink)}

/* ---------- the Applied ID Portfolio Method visual (2026-10-26) ---------- */
.method-art{margin:0 auto;position:relative}
.method-art img{display:block;width:100%;height:auto}
.method-art--navy{background:linear-gradient(165deg,#2A4558 0%,#1F3546 55%,#172A38 100%);border-radius:var(--radius-lg,22px);padding:clamp(18px,3.4vw,40px);box-shadow:0 34px 70px -36px rgba(5,15,22,.7)}
.method-art--card{background:#fff;border:1px solid rgba(34,58,76,.10);border-radius:var(--radius-lg,22px);padding:clamp(14px,2.6vw,26px);box-shadow:0 30px 60px -40px rgba(22,51,63,.45)}
.method-art--wide{max-width:1000px}
.method-art--prose{max-width:640px;margin:10px auto 30px}
.method-art figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-soft);text-align:center}
.method-art--navy figcaption{color:rgba(255,255,255,.78)}

/* ---------- phones and small tablets: everything stacks ---------- */
@media (max-width:960px){
  html body section.sec:is(.tl-rail,.tl-aside) > .container > .tl-left,
  html body section.sec.tl-aside > .container > .tl-side{position:static}
  html body section.sec.tl-aside > .container > .tl-side{margin:24px 0 0 !important}
  html body section.sec.tl-rail > .container > .tl-left .head{text-align:left !important;margin-left:0 !important}
  html body section.sec.tl-media .tl-fig{margin-top:28px}
}

/* the hairline between calm-page sections spans the new width */
html body.calm section.sec:is(.tl-rail,.tl-aside,.tl-statement,.tl-media,.tl-wide,.tl-quick,.tl-groups) > .container{background-size:calc(100% - 64px) 1px !important}

/* AIDA pages: a split that was stacked to one column comes back side by side in an opted-in section */
@media (min-width:961px){
  html body.aida-site section.sec.tl-wide > .container > .ac-split.ac-split{
    display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important;gap:56px !important;align-items:center !important;max-width:1000px !important;
  }
  html body.aida-site.calm section.sec.tl-wide .ac-split > div > h2{text-align:left !important}
}
/* the side box in tl-aside when it is not a short-answer card */
@media (min-width:961px){
  html body section.sec.tl-aside > .container > .np-honest.tl-side{margin:0 !important}
}

/* ---------- tl-read: plain pages (legal, /llm/, thank-you pages) stay plain, with wider, slightly bigger text (C8, 2026-10-27) ---------- */
html body section.sec.sec.tl-read > .container.container{max-width:884px !important}
html body section.sec.sec.tl-read:has(.ty-steps) > .container.container{max-width:960px !important}
html body section.sec.sec.tl-read:has(.legal-wrap) > .container.container{max-width:1080px !important}
@media (min-width:961px){html body section.sec.tl-read .legal-wrap{grid-template-columns:minmax(0,920px) !important;justify-content:center}}
html body section.sec.tl-read :is(.lead-prose,.lk-prose,article,.legal,.ty-steps,.head,.tldr,div[style*="max-width"],p[style*="max-width"]){max-width:none !important}
html body section.sec.tl-read :is(p,li){font-size:clamp(17px,1.35vw,18.5px) !important;line-height:1.72 !important}

/* ---------- nothing at 640 (Jill 2026-10-27): every reading column is about 820px, and plain prose is a little bigger ---------- */
html body{--ds-read:820px}
html body.guide{--g-col:820px}
html body.calm section.sec :is(div[style*="max-width:760px"],div[style*="max-width: 760px"],.lead-prose,.lk-prose){max-width:820px !important}
html body section.sec :is(.lead-prose,.lk-prose,.ds-read,.tl-body,.tl-statement) > p,
html body section.sec :is(.lead-prose,.lk-prose,.ds-read,.tl-body) > ul > li,
html body section.sec :is(.lead-prose,.lk-prose,.ds-read,.tl-body) > ol > li{font-size:clamp(17px,1.3vw,18px);line-height:1.72}

/* contact strip ("Questions before you join?") and other short centered text: wider, a little bigger */
html body section.sec.cs-block > .container{max-width:884px !important}
html body section.sec.cs-block p{font-size:17px !important}

/* ---------- No narrow text anywhere (Jill, 2026-10-27): plain text runs about 820px and a little bigger ----------
   :not(#_) lifts these over the older page rules that set the narrow caps. Cards (price cards, story cards, the resume mock) keep their own widths. */
html body section:not(#_):not(#_a) :is(.head,.head.left,.pp-head,.fr-head,.h-sub){max-width:820px !important}
html body section:not(#_):not(#_a) .head > p{font-size:clamp(17px,1.3vw,18.5px)}
html body section:not(#_):not(#_a) :is(.lead-prose,.lk-prose,.tldr,.faq-list,.byline,.series-in,.rd-list,.ac-ess,.ac-note,.ac-wait,.pf-note,ol.steps,.np-under,.bio-flow,.cs-facts,.cd-side,.res-intro,.tool-cards.one){max-width:820px !important}
/* About bio: titles sit in their own left column beside a 720px text column, so the block runs full width (the 820px cap above squeezed the titles to ~28px and they spilled over the line) */
html body.hub-about section:not(#_):not(#_a):not(#_b) .bio-flow{max-width:none !important}
html body section:not(#_):not(#_a) :is(.ac-narrow,.ac-split,.ac-jill,.ac-lonefaq){max-width:820px !important}
html body section:not(#_):not(#_a) :is(p,div,ul,ol,article)[style*="max-width:7"],
html body section:not(#_):not(#_a) :is(p,div,ul,ol,article)[style*="max-width:6"],
html body section:not(#_):not(#_a) :is(p,div,ul,ol,article)[style*="max-width:5"],
html body section:not(#_):not(#_a) :is(p,div,ul,ol,article)[style*="max-width: 7"],
html body section:not(#_):not(#_a) :is(p,div,ul,ol,article)[style*="max-width: 6"]{max-width:820px !important}
html body section:not(#_):not(#_a) > .container[style*="max-width:7"],
html body section:not(#_):not(#_a) > .container[style*="max-width:6"]{max-width:884px !important}
html body section:not(#_):not(#_a) > .container.ep-in,html body section.g-toc-sec:not(#_):not(#_a) > .container{max-width:884px !important}
html body section:not(#_):not(#_a) :is(.ep-article){max-width:900px !important}
html body section:not(#_):not(#_a) :is(.pg-sub){max-width:780px !important}
html body section:not(#_):not(#_a) :is(.lead-prose,.lk-prose,.ep-article,.tl-body,.faq-list .fbody,.rd-list) :is(p,li){font-size:clamp(17px,1.3vw,18.5px);line-height:1.72}
html body section.sec-navy:not(#_):not(#_a) > .container > :is(p,.lede,.head,small){max-width:820px !important}
html body section.sec-navy:not(#_):not(#_a) > .container[style*="max-width:7"]{max-width:884px !important}
html body section:not(#_):not(#_a) > .container > p{max-width:820px !important}
html body section:not(#_):not(#_a) :is(.head,.anat-head) > p,html body section:not(#_):not(#_a) .anat-head{max-width:820px !important}
/* inside widened sections, running text keeps a reading width; numbered step lists run the same width */
html body section.tl-wide:not(#_):not(#_a) > .container > div > p,html body section.tl-wide:not(#_):not(#_a) > .container > p{max-width:820px !important}
html body section:not(#_):not(#_a) > .container > .steps{max-width:820px !important}
html body section:not(#_):not(#_a) :is(.final .inner,.container.ws-inner){max-width:884px !important}
html body section:not(#_):not(#_a) .final .inner p{max-width:820px !important}
/* Headings line up with the left-aligned text under them (S185, sitewide audit 2026-10-27 night) */
html body section.cs-block:not(#_):not(#_a) > .container > h2{max-width:820px !important;margin-left:auto !important;margin-right:auto !important}
html body section:not(#_):not(#_a) > .container > .ma-steps-h{max-width:820px !important;margin-left:auto !important;margin-right:auto !important}
html body .cmp-article:not(#_) > .faq-list{margin-left:0 !important;margin-right:auto !important}

/* No one-word last lines (Jill 2026-10-30): every paragraph, list item and heading wraps "pretty",
   so the browser moves a word down instead of leaving one alone on the last line, at every screen width.
   :where() keeps this at zero specificity, so anything that already sets balance or its own wrap keeps it.
   Chrome, Edge and Safari honor it; browsers that don't simply wrap as before. */
/* Jill 10/31 night: text fills the line before it wraps ("should be on the same line and then wrap when there are too many words, not wrap early").
   Pretty wrapping moved words down early in narrow cards (grad cards, quick answers), so it is off. The no-one-word-last-line rule is kept by
   the last-two-words join in first-touch.js, which now covers short text blocks too. (Superseded the same night by the everywhere rule at the end of this file.) */


/* ===== Alignment rules (S235, Jill 2026-10-30) =====
   Short section openers (heading plus a line or two) over cards, grids or buttons center. Text longer than about three
   lines reads left. Side-by-side sections are left inside their columns. Reading pages run left top to bottom with a
   centered closing panel, and the same component looks the same on every page.
   Hooks, added to the section in the page's HTML:
     al-c    a section on a centered page whose heading sat left: the heading and its intro center; reading text stays
             left in a centered column
     al-l    a section on a left page that was centered: the heading lines up with the content's left edge
             (--al-w on the section sets that column's width; 820px by default)
     al-txt  a long intro under a centered heading reads left */
html body section.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container > .head,html body section.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container > div > .head,html body section.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container.head,html body section.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container.head > div{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
html body section.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) :is(.head,.container.head) :is(h2,p){text-align:center !important;margin-left:auto !important;margin-right:auto !important}
html body section.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container > :not(.head):not(.tl-left):not(.tl-body){margin-left:auto !important;margin-right:auto !important}
html body section.al-l:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container > :is(.head,h2){text-align:left !important;max-width:var(--al-w,820px) !important;margin-left:auto !important;margin-right:auto !important}
html body section.al-l:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .container > .head :is(h2,p){text-align:left !important;margin-left:0 !important;margin-right:0 !important;max-width:none !important}
html body section.al-txt:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) .head p{text-align:left !important}
/* "Questions before you join?" card: one look on every page (the AIDA pages' tinted card, text left) */
html body:not(.aida-site) section.cs-block:not(#_):not(#_a){padding:40px 0 48px !important;background:transparent !important}
html body:not(.aida-site) section.cs-block:not(#_):not(#_a) > .container{max-width:900px !important;margin-left:auto !important;margin-right:auto !important;background:var(--ds-tint,#EEF6F4);border:1px solid rgba(10,104,112,.14);border-radius:18px;padding:26px 30px !important;text-align:left !important;box-sizing:border-box}
html body section.cs-block:not(#_):not(#_a) > .container :is(h2,p){text-align:left !important;margin-left:0 !important;margin-right:0 !important}
html body:not(.aida-site) section.cs-block:not(#_):not(#_a) h2{font-size:22px !important;margin-bottom:8px !important}
html body:not(.aida-site) section.cs-block:not(#_):not(#_a) p{font-size:15px !important}
@media (max-width:720px){html body:not(.aida-site) section.cs-block:not(#_):not(#_a) > .container{margin-left:20px !important;margin-right:20px !important;width:auto;padding:22px 20px !important}}
/* AIDA mentor bios read left under the centered photo and name */
html body .ac-mentor:not(#_) > div > p{text-align:left !important}

/* Testimonial sign-offs (Jill 2026-10-30, S236): the name on its own line, then the career change as a sign-off,
   titles capitalized ("Former Title (Years) → Current Title, Company"), and any extra note on a third line.
   Markup: <span class="so"><span class="so-n">Name</span><span class="so-r">Line</span><span class="so-x">Note</span></span> */
.so{display:inline-flex;flex-direction:column;gap:2px;vertical-align:middle;max-width:100%}
.so .so-n{font-weight:600;color:inherit;letter-spacing:0;text-transform:none}
.so .so-r{font-weight:400;font-size:.92em;color:inherit;opacity:.85;letter-spacing:0;text-transform:none;line-height:1.45}
.so .so-x{font-weight:400;font-size:.85em;color:inherit;opacity:.72;letter-spacing:0;text-transform:none;font-style:normal;line-height:1.45}
.so .so-x a{color:inherit;text-decoration:underline;text-underline-offset:2px}
:is(.qa,cite,figcaption,.w-attr,.bq-who,.who):has(> .so,> span > .so){font-style:normal}
:is(.qa,cite,figcaption):has(> .so) > img{flex:none}
/* The freedom picker's sign-off line, darker and in regular case (homepage and Reviews) */
html body .fr-arc:not(#_){font-size:13.5px !important;letter-spacing:0 !important;text-transform:none !important;color:var(--ink-soft,#4A5B66) !important}

/* Footer (Jill 2026-10-30, S238): the company statement sits under the social icons as fine print (still real text for AI,
   Meg's Signal Week 4); the brand column is wider and the link columns sit further right; one legal strip across the bottom. */
html body .footer .fbrand .footer-ess:not(#_){font-size:12.5px !important;line-height:1.6 !important;color:rgba(255,255,255,.62) !important;max-width:none !important;margin:22px 0 0 !important;opacity:1 !important}
html body .footer .fbrand .footer-ess.footer-aidc:not(#_){margin-top:10px !important}
html body .footer .fbrand .footer-ess a:not(#_){color:rgba(255,255,255,.8) !important;text-decoration:underline;text-underline-offset:2px}
html body .footer .fsoc:not(#_){justify-content:space-between;max-width:340px}
@media (min-width:1001px){
  html body .footer .footer-grid:not(#_){grid-template-columns:1.75fr .95fr 1.55fr 1fr !important;column-gap:64px !important}
}
html body .footer .footer-bottom .container:not(#_){display:block}
html body .footer .footer-bottom .footer-legal:not(#_){margin:0;font-size:13px !important;line-height:1.7;color:rgba(255,255,255,.64) !important}
html body .footer .footer-bottom .footer-legal .fl-sep:not(#_){margin:0 8px;opacity:.5}
html body .footer .footer-bottom .footer-legal :is(.fl-a,.fl-b):not(#_){white-space:nowrap}
@media (max-width:640px){html body .footer .footer-bottom .footer-legal .fl-mid:not(#_){display:none}html body .footer .footer-bottom .footer-legal :is(.fl-a,.fl-b):not(#_){display:block;white-space:normal}}
html body .footer .footer-bottom .footer-legal a:not(#_){color:rgba(255,255,255,.86) !important;font-weight:600;text-decoration:none}
html body .footer .footer-bottom .footer-legal a:not(#_):hover{text-decoration:underline;text-underline-offset:3px}

/* Stories Like Yours (Jill 2026-10-30): an opened story spans the full row, so the cards beside it keep their size */
@media (min-width:721px){
  body.hub-stories #lsd-proof-tool .pt-grid{grid-auto-flow:row dense}
  body.hub-stories #lsd-proof-tool .pt-card.open{grid-column:1 / -1}
  body.hub-stories #lsd-proof-tool .pt-card.open .pt-full p{max-width:760px}
}
body.hub-stories #lsd-proof-tool .pt-card{scroll-margin-top:120px}


/* S239 (Jill, 2026-10-30): footer columns evenly spaced with Company where it was, wider social row, statement ends level with the last AIDA link, bigger logo */
@media (min-width:1001px){
  html body .footer .footer-grid:not(#_){grid-template-columns:minmax(0,1fr) max-content max-content 180px !important;column-gap:88px !important}
  html body .footer .footer-grid > .fbrand:not(#_){display:flex;flex-direction:column;align-self:stretch}
  html body .footer .fbrand > p.footer-ess:not(.footer-aidc):not(#_){margin-top:auto !important;padding-top:18px}
  html body .footer .fsoc:not(#_){max-width:none;width:100%}
  html body .footer .fbrand > p.footer-ess:last-child:not(#_){margin-bottom:8px !important}
}
html body .footer .fbrand > img:not(#_){width:262px !important;max-width:100%;height:auto}

/* S244 (Jill, 2026-10-30, 11:15pm): one spacing rhythm on every page. From the end of one section's content to the start of the next: 140px on desktop and tablet, 96px on phones. Each content section gets half of that above and below. Heroes keep their own spacing. On "calm" pages, where sections share a background, the hairline divider sits halfway between them. */
:root{--sec-pad:70px}
@media (max-width:720px){:root{--sec-pad:48px}}
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d){padding-top:var(--sec-pad) !important;padding-bottom:var(--sec-pad) !important}
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > :first-child{margin-top:0 !important}
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > :last-child{margin-bottom:0 !important}
html body.calm section.sec.sec:not(.sec-navy) + section.sec.sec:not(.sec-navy):not(.cs-block):not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d){padding-top:0 !important}
html body.calm section.sec.sec:not(.sec-navy) + section.sec.sec:not(.sec-navy):not(.cs-block):not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container{padding-top:var(--sec-pad) !important}
html body section.pod-band:not(#_):not(#_a):not(#_b):not(#_c):not(#_d){padding-top:var(--sec-pad) !important;padding-bottom:var(--sec-pad) !important}
/* S244 follow-ups: the author box carries no extra divider or padding of its own (the section spacing does that job); case study chapters start at the section's top padding; anatomy pages use the same section rhythm */
html body section.sec:not(#_):not(#_a):not(#_b) .byline{border-top:0 !important;padding-top:0 !important;margin-top:0 !important}
html body section.sec:not(#_):not(#_a):not(#_b) .cs-article > .bio-chap:first-child{padding-top:0 !important;margin-top:0 !important}
html body section[class*="anat-"]:not(.sec):not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d){padding-top:var(--sec-pad) !important;padding-bottom:var(--sec-pad) !important}
html body.t2o.calm section.sec + section.sec:not(#_):not(#_a):not(#_b):not(#_c)::before{margin-bottom:0 !important}
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > :last-child > :last-child,
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > :last-child > :last-child > :last-child{margin-bottom:0 !important}
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > :first-child > :first-child,
html body section.sec.sec:not(:has(h1)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) > .container > :first-child > :first-child > :first-child{margin-top:0 !important}

/* S246 (Jill, 2026-10-30, 11:37pm): the line under the headline lines up with the headline. Centered heroes center every line under the headline (some sat on the left edge of a narrow box); left heroes stay left */
@media (min-width:721px){html body.calm .pg-hero:not(:has(.wb-fine)):not(#_):not(#_a):not(#_b) :is(p.pg-sub,p.pg-byline,p.reveal,p.t2-hero-cta,.pg-sub,.pg-byline){margin-left:auto !important;margin-right:auto !important;text-align:center !important}}
@media (max-width:720px){html body.calm .pg-hero:not(#_):not(#_a):not(#_b) :is(p.pg-sub,p.pg-byline,p.reveal,p.t2-hero-cta,.pg-sub,.pg-byline){margin-left:0 !important;margin-right:0 !important;text-align:left !important}}
html body:is(:not([class]),.hub-topic-ty) .pg-hero:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) h1:not(#_){margin-left:0 !important}
html body section.sec:not(#_):not(#_a):not(#_b) .cs-article > .bio-chap:last-child{padding-bottom:0 !important;margin-bottom:0 !important}
/* 2026-10-31 pm: the rule that zeroed the podcast plug's bottom padding came off (the subscribe line touched the card edge) */
html body section.sec.sec:has(.pod-phone):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){padding-bottom:calc(var(--sec-pad) + 57px) !important}
@media (max-width:720px){html body section.sec.sec:has(.pod-phone):not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){padding-bottom:calc(var(--sec-pad) + 77px) !important}}

/* S248 D3 (Jill, 2026-10-31, 12:39am: "yes, fix it. Do A"): on phones the closing panel runs left (heading, text, button). Desktop stays centered (S235). */
@media (max-width:720px){
html body section:is(.sec-navy,[class*="-close"],[class*="-final"]):is(:has(+ .pod-band),:has(+ footer),:has(+ .footer),:has(+ script),:has(+ .sticky-cta),:last-of-type):not(#_):not(#_a):not(#_b):not(#_c) :is(.container,h2,p,.micro,div){text-align:left !important}
html body section:is(.sec-navy,[class*="-close"],[class*="-final"]):is(:has(+ .pod-band),:has(+ footer),:has(+ .footer),:has(+ script),:has(+ .sticky-cta),:last-of-type):not(#_):not(#_a):not(#_b):not(#_c) :is(p,h2,.micro){margin-left:0 !important;margin-right:0 !important}
html body section:is(.sec-navy,[class*="-close"],[class*="-final"]):is(:has(+ .pod-band),:has(+ footer),:has(+ .footer),:has(+ script),:has(+ .sticky-cta),:last-of-type):not(#_):not(#_a):not(#_b):not(#_c) :is(div[style*="flex"],.btn-row,.cta-row,[class*="ctas"]){justify-content:flex-start !important;align-items:flex-start !important}
}

/* S249: "Last updated: October 2026" on its own line under the bio sentence */
html body .bio-updated{display:inline-block;margin-top:4px}

/* S248 D4 type scale (Jill 10/31: yes). Classes are added per element by site-build/tools/scale-classes.js from what each element is today.
   Headings: 40px section (ts-h40), 28px sub-section (ts-h28), 22px card title (ts-h22). Text: 18.5px body (ts-b), 16.5px secondary (ts-s), 15px small (ts-x).
   Left alone on purpose: the homepage hero, every H1, script accents, labels and fine print under 14px, buttons, and the mockups inside the anatomy pages. */
html body .ts-h40:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:40px !important;line-height:1.15 !important}
html body .ts-h28:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:28px !important;line-height:1.22 !important}
html body .ts-h22:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:22px !important;line-height:1.3 !important}
html body .ts-b:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:18.5px !important;line-height:1.7 !important}
html body .ts-s:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:16.5px !important;line-height:1.65 !important}
html body .ts-x:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:15px !important;line-height:1.6 !important}
@media (max-width:720px){
html body .ts-h40:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:30px !important}
html body .ts-h28:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:24px !important}
html body .ts-h22:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:20px !important}
html body .ts-b:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:17px !important}
html body .ts-s:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:15.5px !important}
html body .ts-x:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){font-size:14.5px !important}
}
/* S248 D5 card corners (Jill 10/31: yes): 14px small items (chips, step badges), 22px cards, 32px big panels. Classes from scale-classes.js. */
html body .tr-14:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){border-radius:14px !important}
html body .tr-22:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){border-radius:22px !important}
html body .tr-32:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){border-radius:32px !important}

/* S246 follow-up (10/31): in two-column heroes the headline runs left, so the line under it runs left too (it was centering under a left headline) */
@media (min-width:721px){html body.calm .pg-hero:is(:has(.pg-hero-grid),:has(.le-grid)):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) :is(.pg-hero-grid,.le-grid) > div:first-child :is(p.pg-sub,p.pg-byline,p.reveal,.pg-sub){margin-left:0 !important;margin-right:0 !important;text-align:left !important}}

/* S248 D8 spacing leftovers (Jill 10/31: yes): items whose own padding added 25 to 45px at the end of a section */
html body section.sec:not(#_):not(#_a):not(#_b):not(#_c) .steps > .step:last-child{padding-bottom:0 !important;margin-bottom:0 !important}
html body section.sec:not(#_):not(#_a):not(#_b):not(#_c) .container > :last-child > :last-child:is(.step,.s-links,.faq-list,.tl-row){margin-bottom:0 !important}
@media (max-width:720px){html body section:is(.sec-navy,[class*="-close"],[class*="-final"]):is(:has(+ .pod-band),:has(+ footer),:has(+ .footer),:has(+ script),:has(+ .sticky-cta),:last-of-type):not(#_):not(#_a):not(#_b):not(#_c) .btn{max-width:100% !important;white-space:normal !important;text-align:center !important}}
html body section:not(#_):not(#_a):not(#_b):not(#_c) .bio-flow > .bio-chap:last-child{padding-bottom:0 !important}
html body section.anat-five:not(#_):not(#_a){margin-top:0 !important}

/* Lines fill before they wrap, everywhere: headings, hero lines, cards, everything (Jill 10/31 night: "It needs to be really everywhere... it shouldn't just be headings").
   Overrides every balance and pretty rule on the site (stylesheets and inline styles). The no-one-word-last-line rule
   comes from the last-two-words join in first-touch.js. A grad's company may sit alone on the last line (Jill 10/31). */
html body *:not(#_0):not(#_1):not(#_2):not(#_3):not(#_4):not(#_5):not(#_6):not(#_7):not(#_8):not(#_9){text-wrap-style:auto !important}

/* Centered text sits in a centered box (Jill 10/31 night, alignment sweep). The 10/27 "no narrow text" caps set max-width:820px
   on these without centering the box, so centered lines sat about 100 to 160px left of the section's center. */
html body section:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) :is(.ac-note,.lbtp-src,.peek-more,.gx-close-p,p[style*="text-align:center"],p[style*="text-align: center"],div.micro[style*="text-align:center"]){margin-left:auto !important;margin-right:auto !important}

/* c-secmix (Jill 10/31 night): a picture-and-list section whose heading centers (al-c) centers its intro line too */
html body section.tl-media.al-c:not(#_):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) > .container > .head > p{margin-left:auto !important;margin-right:auto !important}
/* On phones these headings go left like the sections around them (S246) */
@media (max-width:720px){html body section.mix-c:not(#_0):not(#_1):not(#_2):not(#_3):not(#_4):not(#_5):not(#_6):not(#_7) > .container > .head,html body section.mix-c:not(#_0):not(#_1):not(#_2):not(#_3):not(#_4):not(#_5):not(#_6):not(#_7) > .container > .head :is(h2,p){text-align:left !important;margin-left:0 !important}}
@media (max-width:720px){html body section.mix-c:not(#_0):not(#_1):not(#_2):not(#_3):not(#_4):not(#_5):not(#_6):not(#_7) > .container > .ds-swipe{margin-left:-32px !important;margin-right:-32px !important}}