.EForm {max-width: var(--e-measure);}
.EForm .EFormRow {display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px;}
.EForm label {display: block; padding: 20px 0 0; background: none; border: 0; border-bottom: 1px solid var(--e-hairline); border-radius: 0; cursor: text; transition: border-color 160ms;}
.EForm label > span, .EForm label > div {display: block; padding: 0 0 6px; font-family: var(--michroma); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 55%, transparent); transition: color 160ms;}
.EForm input, .EForm textarea {display: block; width: 100%; height: auto; padding: 0 0 14px; background: none; border: 0; outline: none; font-family: var(--raleway); font-size: 18px; line-height: 1.4; color: var(--font-color);}
.EForm textarea {min-height: 92px; resize: vertical;}
.EForm label:focus-within {border-color: var(--highlight-color);}
.EForm label:focus-within > span, .EForm label:focus-within > div {color: var(--highlight-color);}
.EFormFull {grid-column: 1 / -1;}
.EForm button, .EForm .Button {margin-top: 32px; min-width: 0; padding: 14px 36px; border-radius: 999px; border: 1px solid var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 14%, transparent); box-shadow: none; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--highlight-color); cursor: pointer; transition: background-color 180ms, border-color 180ms;}
.EForm button:hover, .EForm .Button:hover {background: color-mix(in srgb, var(--highlight-color) 26%, transparent); border-color: var(--highlight-color); box-shadow: none; color: var(--highlight-color);}

@media (max-width: 640px) {
	.EForm .EFormRow {grid-template-columns: 1fr;}
}

.InquirySection {border-top: 1px solid var(--e-hairline, color-mix(in srgb, var(--font-color) 16%, transparent)); padding-top: 72px;}
.InquirySection .SignUpHeading {font-family: var(--raleway); font-weight: 800; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--font-color);}
.InquirySection .SignUpHeading .HighlightColor {color: var(--highlight-color);}
.InquirySection .SignUpSubheading {font-family: var(--raleway); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 24px 0 8px; color: var(--font-color);}
.InquirySection .SignUpText {font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--font-color); max-width: var(--e-measure, 720px); margin: 0 0 8px;}
.InquirySection .EForm {margin-top: 22px;}
.InquirySection .EForm .SignUpText {margin: 20px 0 0;}
.InquirySection .EFormMsg {display: block;}/* QuickContact - editorial contact block: hairline two-column grid (form | info), underline fields,
   michroma labels, pill submit. Used on Contact, Join and (scoped tighter) the homepage. Shared, so
   it lives in Design. Tokens come from Editorial.css (:root), with light-mode firming below. */

.QuickContact {max-width: none; margin: 0;}
.QuickContact h2 {font-family: var(--raleway); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--font-color);}

.QuickContactBoxes {display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; margin-top: 20px; align-items: stretch; border-top: 1px solid var(--e-hairline); border-left: 1px solid var(--e-hairline);}

.QuickContact .FormBox {padding: 40px clamp(24px, 3vw, 44px) 44px; border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline);}
.QuickContact .FormBox .Text {display: none;}
.QuickContact .FormBox > p {margin: 0 0 20px; max-width: 46ch; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--font-color);}

.QuickContactForm label {display: block; width: auto; height: auto; margin: 0; padding: 20px 0 0; background: none; border: 0; border-bottom: 1px solid var(--e-hairline); border-radius: 0; cursor: text; transition: border-color 160ms;}
.QuickContactForm label + label {margin-top: 0;}
.QuickContactForm label:has(textarea) {height: auto;}
.QuickContactForm label div {display: block; flex: none; padding: 0 0 6px; font-family: var(--michroma); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 55%, transparent); transition: color 160ms;}
.QuickContactForm input, .QuickContactForm textarea {display: block; width: 100%; height: auto; padding: 0 0 14px; background: none; outline: none; border: 0; font-family: var(--raleway); font-size: 18px; line-height: 1.4; color: var(--font-color);}
.QuickContactForm textarea {min-height: 92px; resize: vertical;}
.QuickContactForm label:focus-within {border-color: var(--highlight-color);}
.QuickContactForm label:focus-within div {color: var(--highlight-color);}

.QuickContact .ButtonBox {text-align: left; padding-top: 32px;}
.QuickContact .ButtonBox button {min-width: 0; padding: 14px 36px; border-radius: 999px; border: 1px solid var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 14%, transparent); box-shadow: none; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--highlight-color); cursor: pointer; transition: background-color 180ms, border-color 180ms;}
.QuickContact .ButtonBox button:hover {background: color-mix(in srgb, var(--highlight-color) 26%, transparent); border-color: var(--highlight-color); box-shadow: none; color: var(--highlight-color);}
.QuickContact .ButtonBox button:active {box-shadow: none;}

.QuickContact .InfoBoxes {display: flex; flex-direction: column; gap: 0; padding: 0; height: 100%; background: var(--e-soft); border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline);}
.QuickContact .InfoBox {min-width: 0; flex: 1; padding: 34px clamp(24px, 2.4vw, 40px); background: none; border: 0; border-radius: 0; font-size: 17px;}
.QuickContact .InfoBox + .InfoBox {border-top: 1px solid var(--e-hairline);}
.QuickContact .InfoBox .Heading {margin-bottom: 16px; font-family: var(--michroma); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--highlight-color);}
.QuickContact .InfoBox a {display: block; line-height: 1.7; color: var(--font-color);}
.QuickContact .InfoBox a:hover {color: var(--highlight-color); text-decoration: none;}
.QuickContact .InfoBox strong {font-weight: 700;}

@media (max-width: 860px) {
	.QuickContactBoxes {grid-template-columns: 1fr;}
	.QuickContact .FormBox {border-right: 1px solid var(--e-hairline);}
}

@media (prefers-color-scheme: light) {
	.QuickContact {--e-hairline: color-mix(in srgb, var(--font-color) 24%, transparent); --e-soft: color-mix(in srgb, var(--font-color) 5%, transparent);}
}/* Site footer - editorial: hairline top rule, michroma column headings, understated links. On every
   page, so it stays in Design. */
#Footer {margin-top: 120px; line-height: 160%; padding-top: 60px; border-top: 1px solid var(--e-hairline);}
#Footer > div {display: flex; align-items: start; flex-wrap: wrap; gap: 40px;}
#Footer > div > div {flex: 1; min-width: 200px;}

#Footer .Legal {flex: 0 0 100%; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0.5; margin-top: 80px; font-family: var(--michroma); font-size: 12px; letter-spacing: 0.08em;}
#Footer .Legal nav {display: flex; gap: 10px;}

#Footer .Heading {font-family: var(--michroma); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--highlight-color); margin-bottom: 18px;}

#Footer .Explore ul {list-style: none; margin: 0; padding: 0;}
#Footer .Explore a {display: inline-block; padding: 5px 0;}

#Footer .LinkV {display: flex; align-items: center; justify-content: left; font-family: Syncopate, var(--raleway); gap: 20px; font-size: 22px; letter-spacing: 0.4em; font-weight: bold; text-decoration: none; margin-bottom: 40px;}
#Footer .LinkV img {width: 62px; height: auto;}

#Footer .Langs {display: flex; align-items: center; justify-content: left; flex-wrap: wrap; gap: 5px 10px; text-transform: uppercase; margin-top: 40px;}
#Footer .LangsH {flex: 0 0 100%; text-transform: none; font-weight: 500; opacity: 0.5; font-size: smaller; letter-spacing: 0.5px;}

#Footer a[href*="mailto"], #Footer a[href*="tel"] {display: block; width: max-content; padding: 5px 0;}
#Footer address {display: block; font-style: normal; margin-top: 25px;}

#Footer a {position: relative;}
#Footer a::after {display: block; content: ''; width: 0; height: 1px; background: var(--font-color); transition: width 0.1s; position: absolute; bottom: 0;}
#Footer a:hover::after {width: 100%;}
.FAQList {margin-top: 44px;}
.FAQObj {max-width: var(--e-measure);}
.FAQObj + .FAQObj {margin-top: 40px;}
.FAQObj h3 {font-family: var(--raleway); font-weight: 700; font-size: 21px; line-height: 1.3; margin: 0 0 12px; color: var(--font-color);}
.FAQObj h3::before {content: "\201C"; color: var(--highlight-color);}
.FAQObj h3::after {content: "\201D"; color: var(--highlight-color);}
.FAQObj p {font-size: 17px; line-height: 1.7; color: var(--font-color); margin: 0;}
.FAQObj p a {color: var(--highlight-color);}/* No1Publishers - below-the-fold, page-unique components (deferred). The "math" fee table, outcome grid,
   assurance, proof rows, pricing tiers, the stay-vs-own ledger and the conversation form are all
   bespoke to this page. Shared primitives live in Design/CSS/Editorial.css. */
.No1Sym {font-family: var(--raleway); font-weight: 800; font-size: 0.92em;}

/* what this is - plain, direct statement of the offer */
.No1WhatLede {font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--font-color); max-width: 820px; margin-bottom: 28px;}
.No1WhatBody {max-width: var(--no1-maxtext);}
.No1WhatBody p {font-size: 18px; line-height: 1.65; color: var(--font-color);}
.No1WhatBody p + p {margin-top: 1.1em;}

/* fee table */
.No1FeeTable {margin-top: 48px; max-width: var(--no1-maxtext); font-family: var(--michroma); font-size: 15px; border-top: 1px solid var(--no1-hairline);}
.No1FeeRow {display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--no1-hairline); align-items: baseline;}
.No1FeeHead {color: var(--font-color); font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em;}
.No1FeeRow span:nth-child(2) {color: var(--font-color);}
.No1FeeRow span:nth-child(3) {color: var(--highlight-color); font-weight: 700;}
.No1Callout {margin-top: 48px; border-left: 3px solid var(--highlight-color); padding: 8px 0 8px 30px; max-width: 660px; font-family: var(--michroma); font-size: 16px; color: var(--font-color); line-height: 1.7;}
.No1Callout strong {color: var(--font-color); font-size: 18px;}

/* what you get - outcome grid */
.No1OutGrid {display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border-top: 1px solid var(--no1-hairline); border-left: 1px solid var(--no1-hairline);}
.No1OutCell {padding: 34px 34px 38px; border-right: 1px solid var(--no1-hairline); border-bottom: 1px solid var(--no1-hairline);}
.No1OutCell h3 {font-weight: 800; font-size: 20px; margin-bottom: 10px;}
.No1OutCell p {font-size: 16px;}
.No1OutKey {display: block; font-family: var(--michroma); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--highlight-color); margin-bottom: 14px;}

/* assurance - single technical block */
.No1Assurance {border-left: 3px solid var(--highlight-color); padding: 6px 0 6px 38px; max-width: 760px;}
.No1Assurance p {font-size: 18px; color: var(--font-color); font-weight: 500; line-height: 150%;}
.No1Assurance p + p {margin-top: 1em;}
.No1AssuranceSmall {font-size: 16px; color: var(--font-color); font-weight: 400;}

/* proof */
.No1ProofRows {margin-top: 48px;}
.No1ProofRow {display: grid; grid-template-columns: 220px 1fr; gap: 36px; padding: 32px 0; border-bottom: 1px solid var(--no1-hairline); align-items: center;}
.No1ProofRow:last-child {border-bottom: none;}
.No1ProofNum {font-weight: 900; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--font-color);}
.No1ProofRow h3 {font-weight: 700; font-size: 18px; margin-bottom: 15px; color: var(--font-color);}
.No1ProofRow p {font-size: 16px;}
.No1ProofRow p:last-child {margin-bottom: 0;}

/* tiers */
.No1Tiers {display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; border-top: 1px solid var(--no1-hairline); gap: 0;}
.No1Tier {padding: 48px 40px 52px; display: flex; flex-direction: column;}
.No1Tier:first-child {border-right: 1px solid var(--no1-hairline);}
.No1TierFeatured {background: var(--no1-soft); border-top: 3px solid var(--highlight-color); margin-top: -2px;}
.No1Tag {font-family: var(--michroma); font-size: 14px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--font-color); margin-bottom: 20px;}
.No1TierFeatured .No1Tag {color: var(--highlight-color); font-weight: 700;}
.No1Tier h3 {font-weight: 800; font-size: 34px; line-height: 1; margin-bottom: 10px;}
.No1TierWho {font-size: 16px; margin-bottom: 28px;}
.No1Tier ul {list-style: none; flex: 1; margin: 0; padding: 0;}
.No1Tier li {padding: 13px 0 13px 28px; border-bottom: 1px solid var(--no1-hairline); font-size: 16px; font-weight: 500; color: var(--font-color); position: relative;}
.No1Tier li::before {content: "\2192"; position: absolute; left: 0; top: 13px; color: var(--highlight-color); font-weight: 800;}
.No1Tier li strong {display: block; font-weight: 800; margin-bottom: 4px;}
.No1Tier li span {display: block; color: var(--font-color);}
.No1Price {font-weight: 900; font-size: 34px; letter-spacing: -0.01em; margin: 32px 0 4px;}
.No1Price small {font-size: 14px; font-weight: 600; color: var(--font-color); letter-spacing: 0;}
.No1PriceNote {font-family: var(--michroma); font-size: 14px; margin-bottom: 10px; color: var(--font-color);}
.No1PriceNoteHot {color: var(--highlight-color); font-weight: 700;}
.No1Payback {font-family: var(--michroma); font-size: 14px; line-height: 1.9; color: var(--font-color);}
.No1Payback span {color: var(--font-color); font-weight: 700;}
.No1Tier .No1Cta {margin-top: 26px; align-self: stretch;}
.No1Footnote {margin-top: 34px; font-family: var(--michroma); font-size: 14px; max-width: var(--no1-maxtext); color: var(--font-color);}

/* comparison ledger - stay vs own, real numbers only */
.No1Ledger {margin-top: 52px; max-width: 680px; font-family: var(--michroma); border-top: 1px solid var(--no1-hairline);}
.No1LedgerRow {display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--no1-hairline); align-items: baseline;}
.No1LedgerRow > span {font-size: 16px; color: var(--font-color);}
.No1LedgerRow > span:nth-child(2), .No1LedgerRow > span:nth-child(3) {text-align: right; white-space: nowrap;}
.No1LedgerOwn {border-left: 1px solid var(--no1-hairline); padding-left: 16px;}
.No1LedgerHead > span {font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;}
.No1LedgerHead .No1LedgerOwn {color: var(--highlight-color); font-weight: 700;}
.No1LedgerRow .No1LedgerOwn {font-weight: 700;}
.No1LedgerTotal {border-bottom: none; border-top: 2px solid var(--no1-hairline); margin-top: 6px; padding-top: 18px;}
.No1LedgerTotal > span {font-size: 18px; font-weight: 700;}
.No1LedgerOwnRow {border-bottom: none; padding-top: 4px;}
.No1LedgerOwnRow .No1LedgerOwn {color: var(--highlight-color); font-weight: 700;}
.No1LedgerDiff {border-bottom: none; align-items: baseline; padding-top: 12px;}
.No1LedgerDiff > span:first-child {font-size: 16px;}
.No1LedgerDiff .No1DiffNum {grid-column: 2 / 4; text-align: right; font-weight: 900; font-size: clamp(24px, 3.2vw, 38px); line-height: 1; letter-spacing: -0.01em; color: var(--highlight-color); white-space: nowrap;}
.No1LedgerNote {margin-top: 28px; max-width: 680px; font-family: var(--michroma); font-size: 14px; line-height: 1.7; color: var(--font-color);}

.No1Final {border-top: 1px solid var(--no1-hairline);}

/* premium conversation form */
.No1Conversation {background: none; text-align: left; padding: 0 0 20px;}
.No1ConvCard {max-width: 860px; margin: 0 auto; border: 1px solid var(--no1-hairline); border-top: 3px solid var(--highlight-color); background: var(--no1-soft); padding: 52px 48px 48px;}
.No1ConvHeading {font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 16px;}
.No1ConvIntro {font-size: 18px; font-weight: 500; color: var(--font-color); max-width: 640px; margin-bottom: 36px;}
.No1ConvForm {margin: 0;}
.No1ConvRow {display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 24px;}
.No1ConvForm label {display: block; text-align: left;}
.No1ConvForm label span {display: block; margin-bottom: 8px; font-family: var(--michroma); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--highlight-color);}
.No1ConvForm input, .No1ConvForm textarea {width: 100%; border: 1px solid var(--no1-hairline); background: var(--bg-color); color: var(--font-color); padding: 0 16px; font-weight: 500; border-radius: 6px;}
.No1ConvForm input {height: 52px;}
.No1ConvForm textarea {min-height: 120px; padding: 14px 16px; line-height: 1.6;}
.No1ConvForm input:focus, .No1ConvForm textarea:focus {outline: none; border-color: var(--highlight-color);}
.No1ConvMsg {margin-bottom: 28px;}
.No1ConvFoot {display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;}
.No1ConvNote {font-size: 15px; color: var(--font-color); max-width: 440px; margin: 0;}
.No1ConvFoot .Button {margin: 0;}

@media (max-width: 1024px) {
	.No1OutGrid {grid-template-columns: 1fr;}
	.No1Tiers {grid-template-columns: 1fr;}
	.No1Tier:first-child {border-right: none; border-bottom: 1px solid var(--no1-hairline);}
	.No1ProofRow {grid-template-columns: 1fr; gap: 10px;}
	.No1FeeRow {grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; font-size: 14px;}
	.No1LedgerRow {grid-template-columns: 1.2fr 1fr 1fr; gap: 10px;}
	.No1LedgerRow > span {font-size: 14px;}
	.No1LedgerOwn {padding-left: 10px;}
	.No1LedgerTotal > span {font-size: 15px;}
	.No1ConvCard {padding: 40px 24px 36px;}
	.No1ConvRow {grid-template-columns: 1fr; gap: 20px;}
	.No1ConvFoot {flex-direction: column; align-items: stretch;}
	.No1ConvFoot .Button {width: 100%;}
}

/* --- Publishers: "the shift" table reuses .No1FeeTable; figure column gets the crimson emphasis --- */
.No1Publishers .No1ShiftTable .No1FeeRow{grid-template-columns:minmax(90px,0.8fr) minmax(70px,0.5fr) minmax(0,2.4fr);align-items:baseline}
.No1Publishers .No1ShiftFig{color:var(--highlight-color);font-family:var(--michroma);font-size:clamp(18px,3vw,26px);white-space:nowrap}

/* --- interactive math table: one slider per input row, drives both columns (progressive enhancement) --- */
.No1MathTable .No1MathSlider{display:none}
.No1MathTable.No1MathLive .No1MathSlider{display:flex;align-items:center;gap:18px;padding:4px 0 16px;border-bottom:1px solid var(--no1-hairline)}
.No1MathTable.No1MathLive .No1MathHasSlider{border-bottom:none;padding-bottom:6px}
.No1Range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:4px;border-radius:999px;background:var(--no1-hairline);cursor:pointer;touch-action:pan-y;margin:0}
.No1Range:focus{outline:none}
.No1Range:focus-visible{outline:2px solid var(--highlight-color);outline-offset:6px}
.No1Range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--highlight-color);border:3px solid var(--bg-color);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer}
.No1Range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--highlight-color);border:3px solid var(--bg-color);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer}
.No1Range::-moz-range-track{height:4px;border-radius:999px;background:var(--no1-hairline)}
.No1RangeOut{flex:0 0 auto;font-family:var(--raleway);font-weight:800;font-size:14px;color:var(--highlight-color);min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
/* Newsletter sign-up. Self-contained so it looks identical wherever it is dropped (HP, article,
   anywhere). Uses the global editorial primitives (.Eyebrow / .Lede / .EForm from Editorial.css) and
   adds only the container, heading and the "Weekly" proof pill. Loaded after the document (.late). */
.Newsletter {--e-hairline: color-mix(in srgb, var(--font-color) 16%, transparent); --e-measure: 720px; max-width: var(--e-measure);}
.Newsletter h2 {font-family: var(--raleway); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(28px, 4.4vw, 48px); margin-bottom: 26px;}
.Newsletter .HighlightColor {color: var(--highlight-color);}
.NewsletterProof {display: inline-flex; align-items: center; gap: 11px; margin: 28px 0 0; padding: 6px 18px 6px 7px; border: 1px solid var(--e-hairline); border-radius: 999px; background: var(--e-soft); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--font-color);}
.NewsletterProofTag {display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: #41D857; color: #111; font-weight: 700; white-space: nowrap;}
.Newsletter .NewsletterForm {margin-top: 30px;}
.Newsletter .ButtonBox {text-align: left; padding-top: 8px;}

/* The global light theme flattens --highlight-color to translucent grey; the newsletter identity is
   green, so restore a readable brand green wherever the component appears. */
@media (prefers-color-scheme: light) {
	body:has(.Newsletter) {--highlight-color: #128A38;}
	.Newsletter {--e-hairline: color-mix(in srgb, var(--font-color) 24%, transparent);}
}