/* ══════════════════════════════════════════════════════════════════════════ Midnight — the public site, refined (31 Oct 2026, owner chose direction A of the redesign mockups: keep the black and teal, cut the noise). Registered straight after css/v3/public.css by header-public.php, inside the SAME layer (et-v3-pub) with every declaration !important, for the reason public.css gives: an important declaration in a layer beats every unlayered important one. Same layer and later in the cascade, so a rule here wins over public.css at equal specificity. Rollback is the one registration line in header-public.php. 1 type and colour larger, tighter headings; readable grey body text 2 chrome header links, the footer 3 inner pages long-form prose is one reading column, not a card inside a card; FAQs are hairline rows 4 home centred hero, the start card as a window, the studio drawing, numbers, steps, prices, features ══════════════════════════════════════════════════════════════════════════ */ @layer et-v3-pub { /* ── 1. Type and colour ─────────────────────────────────────────────────── */ body.v3-pub { --md-body: #A1A6AB; /* paragraphs and leads: 8:1 on black, #71767B is for small print */ --md-soft: #C9CDD1; /* list text inside cards */ --md-glow: rgba(45, 212, 191, 0.08); } body.v3-pub :is(.text-muted-et, .et-kb-hero-lead, .et-hd-lead, .et-hd-hero__lead, .lead) { color: var(--md-body) !important; } body.v3-pub :is(h1, .display-heading) { letter-spacing: -0.035em !important; } body.v3-pub h2 { letter-spacing: -0.03em !important; } /* ── 2. Chrome ──────────────────────────────────────────────────────────── */ body.v3-pub .et-navbar .et-navbar-nav > .nav-item > .nav-link { color: var(--md-body) !important; font-weight: 500 !important; } body.v3-pub .et-navbar .et-navbar-nav > .nav-item > .nav-link:hover { color: var(--v3-strong) !important; } body.v3-pub .et-site-footer { padding-top: 56px !important; } body.v3-pub .et-site-footer :is(h2, h3, h4, h5, h6, .et-site-footer__heading, .et-footer-nav-title) { color: var(--v3-strong) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; font-weight: 600 !important; } body.v3-pub .et-site-footer a:not(.et-site-footer__social a) { color: var(--md-body) !important; } body.v3-pub .et-site-footer a:not(.et-site-footer__social a):hover { color: var(--v3-strong) !important; } body.v3-pub .et-site-footer__social a { box-shadow: none !important; } /* Quieter on a desktop; a finger-sized 44px on a phone. */ @media (min-width: 768px) { body.v3-pub .et-site-footer__social a { width: 32px !important; height: 32px !important; } } @media (max-width: 767.98px) { body.v3-pub .et-site-footer__social a { width: 44px !important; height: 44px !important; } } /* ── 3. Inner pages ─────────────────────────────────────────────────────── */ /* A kb/about section was a bordered card holding a paragraph or two: boxes inside a column inside a page. The prose now sits on the page. */ body.v3-pub :is(.kb-section, .ab-section) > :is(.kb-card, .ab-card) { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } body.v3-pub :is(.kb-section, .ab-section) > :is(.kb-card, .ab-card) > .et-card-body { padding: 0 !important; } body.v3-pub :is(.kb-section, .ab-section) { padding-top: 40px !important; padding-bottom: 8px !important; } body.v3-pub :is(.kb-section, .ab-section) :is(p, li) { color: var(--md-soft) !important; line-height: 1.65 !important; } /* Tiles inside those sections stay tiles, quieter. */ body.v3-pub :is(.heat-card, .subgenre-item, .trope-item, .arc-step, .kb-tip) { background: var(--v3-surface) !important; border: 1px solid var(--v3-line) !important; box-shadow: none !important; } /* Heat levels: line icons in the accent, not emoji (romance page). */ body.v3-pub .heat-icon { color: var(--v3-accent) !important; font-size: 20px !important; letter-spacing: 2px !important; } /* FAQs: hairline rows, not a stack of boxes. */ body.v3-pub .et-faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--v3-line) !important; border-radius: 0 !important; box-shadow: none !important; } body.v3-pub .et-faq-list { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } body.v3-pub .et-faq-q { padding: 18px 0 !important; font-size: 17px !important; font-weight: 500 !important; color: var(--v3-strong) !important; } /* ── 4. Home ────────────────────────────────────────────────────────────── */ body.v3-pub.et-home-d2 .et-hd-wrap { max-width: 1160px !important; } body.v3-pub.et-home-d2 .et-hd-section { padding-top: 112px !important; padding-bottom: 0 !important; border-top: 0 !important; } body.v3-pub.et-home-d2 .et-hd-section--flush { padding-top: 112px !important; } /* Labels over a heading: teal words, no square, no capitals. */ body.v3-pub.et-home-d2 .et-hd-kicker { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v3-accent) !important; } body.v3-pub.et-home-d2 .et-hd-kicker::before { display: none !important; } body.v3-pub.et-home-d2 .et-hd-h2 { font-size: clamp(32px, 4vw, 48px) !important; line-height: 1.08 !important; letter-spacing: -0.035em !important; max-width: 760px !important; } body.v3-pub.et-home-d2 .et-hd-head { gap: 12px !important; margin-bottom: 44px !important; } body.v3-pub.et-home-d2 .et-hd-lead { font-size: 18px !important; line-height: 1.55 !important; max-width: 640px !important; } /* Hero: centred, one column, the start card below the words. */ body.v3-pub.et-home-d2 .et-hd-hero { padding: 104px 0 0 !important; } body.v3-pub.et-home-d2 .et-hd-hero__grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 48px !important; } body.v3-pub.et-home-d2 .et-hd-hero__copy { align-items: center !important; text-align: center !important; max-width: 880px !important; padding-top: 0 !important; gap: 22px !important; } body.v3-pub.et-home-d2 .et-hd-hero .et-hd-kicker { padding: 6px 14px !important; border: 1px solid var(--v3-line) !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--md-body) !important; } body.v3-pub.et-home-d2 .et-hd-hero__title { font-size: clamp(44px, 6.6vw, 80px) !important; line-height: 1.02 !important; letter-spacing: -0.045em !important; } body.v3-pub.et-home-d2 .et-hd-hero__title .et-hd-accent { display: block !important; color: var(--v3-sec) !important; } body.v3-pub.et-home-d2 .et-hd-hero__lead { max-width: 640px !important; font-size: 20px !important; line-height: 1.5 !important; letter-spacing: -0.01em !important; } /* The four chips read as one line of small print. */ body.v3-pub.et-home-d2 .et-hd-chips { justify-content: center !important; gap: 4px 18px !important; } body.v3-pub.et-home-d2 .et-hd-chip { padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--v3-sec) !important; font-size: 14px !important; } body.v3-pub.et-home-d2 .et-hd-chip .bi { color: var(--v3-accent) !important; margin-right: 4px !important; } body.v3-pub.et-home-d2 .et-hd-hero__links { align-items: center !important; padding: 0 !important; } body.v3-pub.et-home-d2 :is(.et-hd-resume, .et-hd-arrival) { text-align: center !important; justify-content: center !important; } body.v3-pub.et-home-d2 .et-hd-arrival { border-radius: 14px !important; background: var(--v3-surface-2) !important; } /* The start card: a window, the studio's own shape. */ body.v3-pub.et-home-d2 .et-hd-composer { width: 100% !important; max-width: 780px !important; border: 1px solid var(--v3-line) !important; border-radius: 20px !important; background: var(--v3-surface) !important; box-shadow: 0 40px 120px var(--md-glow) !important; overflow: hidden !important; } body.v3-pub.et-home-d2 .et-hd-composer__head { justify-content: center !important; position: relative !important; min-height: 44px !important; border-bottom: 1px solid var(--v3-surface-2) !important; } body.v3-pub.et-home-d2 .et-hd-composer__head::before { content: '' !important; position: absolute !important; left: 18px !important; top: 50% !important; width: 11px !important; height: 11px !important; margin-top: -5.5px !important; border-radius: 50% !important; background: var(--v3-line) !important; box-shadow: 18px 0 0 var(--v3-line), 36px 0 0 var(--v3-line) !important; } body.v3-pub.et-home-d2 .et-hd-composer__title { font-size: 13px !important; font-weight: 500 !important; color: var(--v3-sec) !important; } body.v3-pub.et-home-d2 .et-hd-composer__mark { display: none !important; } body.v3-pub.et-home-d2 .et-hd-composer__body { background: transparent !important; text-align: left !important; } body.v3-pub.et-home-d2 .et-hd-composer__foot { border-top: 1px solid var(--v3-surface-2) !important; background: transparent !important; } body.v3-pub.et-home-d2 .et-hs__more { max-width: 320px !important; min-width: 0 !important; } body.v3-pub.et-home-d2 .et-hs__select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* The studio drawing. */ body.v3-pub.et-home-d2 .et-md-studio { padding: 96px 0 0 !important; } .et-md-shot { margin: 0 !important; border: 1px solid var(--v3-line) !important; border-radius: 20px !important; overflow: hidden !important; background: var(--v3-surface) !important; box-shadow: 0 40px 120px var(--md-glow, rgba(45, 212, 191, 0.08)) !important; } .et-md-shot__bar { display: flex !important; align-items: center !important; gap: 7px !important; height: 44px !important; padding: 0 18px !important; border-bottom: 1px solid var(--v3-surface-2) !important; } .et-md-shot__bar span { width: 11px !important; height: 11px !important; border-radius: 50% !important; background: var(--v3-line) !important; } .et-md-shot__bar b { flex: 1 !important; margin-right: 51px !important; text-align: center !important; font-size: 13px !important; font-weight: 500 !important; color: var(--v3-sec) !important; } .et-md-shot__body { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) 300px !important; min-height: 440px !important; } .et-md-shot p { margin: 0 !important; } .et-md-shot__label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--v3-sec) !important; } .et-md-shot__side { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 20px 12px !important; border-right: 1px solid var(--v3-surface-2) !important; } .et-md-shot__side .et-md-shot__label { margin: 0 8px 10px !important; } .et-md-shot__ch { display: flex !important; align-items: center !important; gap: 9px !important; padding: 8px !important; border-radius: 8px !important; font-size: 14px !important; color: var(--md-body, #A1A6AB) !important; white-space: nowrap !important; overflow: hidden !important; } .et-md-shot__ch i { flex: none !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--v3-accent) !important; } .et-md-shot__ch.is-on { background: var(--v3-surface-2) !important; color: var(--v3-strong) !important; } .et-md-shot__ch.is-on i { background: var(--v3-warn) !important; } .et-md-shot__ch.is-plan { color: var(--v3-sec) !important; } .et-md-shot__ch.is-plan i { background: transparent !important; box-shadow: inset 0 0 0 1px var(--v3-sec) !important; } .et-md-shot__page { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 40px 56px !important; } .et-md-shot__title { margin: -4px 0 12px !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--v3-strong) !important; } .et-md-shot__page span { display: block !important; height: 10px !important; border-radius: 5px !important; background: #202327 !important; } .et-md-shot__page span.is-new { background: rgba(45, 212, 191, 0.28) !important; } .et-md-shot__page span.is-new:first-of-type, .et-md-shot__page span.is-new + span:not(.is-new) { margin-top: 12px !important; } .et-md-shot__kestrel { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 20px !important; border-left: 1px solid var(--v3-surface-2) !important; } .et-md-shot__who { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--v3-strong) !important; } .et-md-shot__who i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--v3-kestrel-bg) !important; color: var(--v3-kestrel) !important; font-size: 12px !important; font-style: normal !important; } .et-md-shot__ask { padding: 12px 14px !important; border-radius: 14px !important; background: var(--v3-surface-2) !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--v3-text) !important; } .et-md-shot__reply { font-size: 14px !important; line-height: 1.5 !important; color: var(--md-soft, #C9CDD1) !important; } .et-md-shot__keep { display: flex !important; gap: 8px !important; } .et-md-shot__keep b { display: inline-flex !important; align-items: center !important; height: 34px !important; padding: 0 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; background: var(--v3-accent) !important; color: var(--v3-accent-ink) !important; } .et-md-shot__keep b + b { background: transparent !important; color: var(--v3-text) !important; box-shadow: inset 0 0 0 1px var(--v3-line) !important; } .et-md-shot__compose { margin-top: auto !important; padding: 12px 14px !important; border: 1px solid var(--v3-line) !important; border-radius: 14px !important; font-size: 14px !important; color: var(--v3-sec) !important; } .et-md-shot__cap { padding: 14px 20px !important; border-top: 1px solid var(--v3-surface-2) !important; text-align: center !important; font-size: 14px !important; color: var(--v3-sec) !important; } /* Numbers. */ .et-md-proof { display: grid !important; grid-auto-columns: minmax(0, 1fr) !important; grid-auto-flow: column !important; margin: 56px 0 0 !important; padding: 36px 0 !important; list-style: none !important; border-top: 1px solid var(--v3-surface-2) !important; border-bottom: 1px solid var(--v3-surface-2) !important; text-align: center !important; } .et-md-proof li { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0 12px !important; } .et-md-proof b { white-space: nowrap !important; font-size: clamp(22px, 3vw, 36px) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--v3-strong) !important; } .et-md-proof span { font-size: 14px !important; color: var(--v3-sec) !important; } /* The wizard's four steps: a rule over each, not four boxes. */ body.v3-pub.et-home-d2 .et-hd-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; } body.v3-pub.et-home-d2 .et-hd-steps .et-hd-step { background: transparent !important; border: 0 !important; border-top: 2px solid var(--v3-line) !important; border-radius: 0 !important; padding: 20px 0 0 !important; box-shadow: none !important; } body.v3-pub.et-home-d2 .et-hd-steps .et-hd-step.is-here { border-top-color: var(--v3-accent) !important; } body.v3-pub.et-home-d2 .et-hd-step__tag { background: transparent !important; padding: 0 !important; color: var(--v3-sec) !important; font-size: 13px !important; } body.v3-pub.et-home-d2 .et-hd-step__num { background: transparent !important; color: var(--v3-sec) !important; width: auto !important; height: auto !important; margin-right: 6px !important; } body.v3-pub.et-home-d2 .et-hd-step__title { font-size: 19px !important; font-weight: 600 !important; color: var(--v3-strong) !important; } body.v3-pub.et-home-d2 .et-hd-step__body { font-size: 15px !important; line-height: 1.5 !important; color: var(--md-body) !important; } /* Cards on the home page. */ body.v3-pub.et-home-d2 .et-hd-grid { gap: 16px !important; } body.v3-pub.et-home-d2 .et-hd-panel { padding: 32px !important; border-radius: 20px !important; border: 1px solid var(--v3-line) !important; background: var(--v3-surface) !important; gap: 10px !important; } body.v3-pub.et-home-d2 .et-hd-panel--link:hover { background: #101113 !important; border-color: #3E4247 !important; } body.v3-pub.et-home-d2 .et-hd-panel__title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: var(--v3-strong) !important; } body.v3-pub.et-home-d2 .et-hd-panel__body { font-size: 15px !important; line-height: 1.55 !important; color: var(--md-body) !important; } body.v3-pub.et-home-d2 .et-hd-panel__meta { color: var(--v3-sec) !important; font-size: 13px !important; } body.v3-pub.et-home-d2 .et-hd-panel > .et-hd-panel__row > .et-hd-panel__icon { width: auto !important; height: auto !important; background: transparent !important; font-size: 26px !important; color: var(--v3-accent) !important; } body.v3-pub.et-home-d2 #features .et-hd-panel { min-height: 220px !important; } @media (min-width: 992px) { body.v3-pub.et-home-d2 #features .et-hd-panel--wide { grid-column: span 2 !important; } } /* Prices: the plan, then the number large. */ body.v3-pub.et-home-d2 .et-md-plan { gap: 8px !important; } body.v3-pub.et-home-d2 .et-md-plan__name { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; font-size: 17px !important; } .et-md-plan__flag { padding: 4px 10px !important; border-radius: 999px !important; background: var(--v3-accent) !important; color: var(--v3-accent-ink) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .et-md-plan__price { margin: 8px 0 0 !important; font-size: 44px !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--v3-strong) !important; } .et-md-plan__price span { font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--v3-sec) !important; } .et-md-plan__alt { margin: 0 0 8px !important; font-size: 14px !important; color: var(--v3-sec) !important; } body.v3-pub.et-home-d2 .et-md-plan--featured { border-color: var(--v3-accent) !important; background: linear-gradient(#0A1F1D, var(--v3-surface)) !important; } body.v3-pub.et-home-d2 .et-md-plan .et-hd-panel__body { color: var(--md-soft) !important; } /* Free AI novel writer: the callout is a quiet card. */ body.v3-pub.et-home-d2 .et-hd-callout { box-shadow: none !important; border: 1px solid var(--v3-line) !important; border-radius: 20px !important; background: var(--v3-surface) !important; color: var(--md-soft) !important; padding: 24px !important; } body.v3-pub.et-home-d2 .et-hd-prose p { font-size: 17px !important; line-height: 1.6 !important; color: var(--md-body) !important; } /* Translate list: hairline rows. */ body.v3-pub.et-home-d2 .et-hd-list li { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--v3-surface-2) !important; border-radius: 0 !important; padding: 16px 0 !important; color: var(--md-soft) !important; } /* More about + FAQ: hairline rows, not boxes. */ body.v3-pub.et-home-d2 .et-hd-faq { gap: 0 !important; } body.v3-pub.et-home-d2 .et-hd-faq__item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--v3-line) !important; border-radius: 0 !important; box-shadow: none !important; } body.v3-pub.et-home-d2 .et-hd-faq__item:first-child { border-top: 1px solid var(--v3-line) !important; } body.v3-pub.et-home-d2 .et-hd-faq__q { padding: 20px 0 !important; font-size: 17px !important; font-weight: 500 !important; color: var(--v3-strong) !important; background: transparent !important; } body.v3-pub.et-home-d2 .et-hd-faq__a { padding: 0 0 20px !important; color: var(--md-body) !important; } body.v3-pub.et-home-d2 .et-hd-fold__body { padding: 8px 0 32px !important; } /* The last call. */ body.v3-pub.et-home-d2 .et-hd-coda { margin: 112px auto 112px !important; max-width: 1096px !important; padding: 88px 32px !important; border: 1px solid var(--v3-line) !important; border-radius: 28px !important; background: radial-gradient(ellipse at top, #0A1F1D, var(--v3-bg) 70%) !important; text-align: center !important; } body.v3-pub.et-home-d2 .et-hd-coda .et-hd-h2 { margin: 0 auto !important; font-size: clamp(34px, 4.4vw, 52px) !important; } body.v3-pub.et-home-d2 .et-hd-coda .et-hd-lead { margin: 16px auto 0 !important; } body.v3-pub.et-home-d2 .et-hd-coda .et-hd-kicker { justify-content: center !important; } body.v3-pub.et-home-d2 .et-hd-coda::before { display: none !important; } /* Buttons on the home page: 48px pills. */ body.v3-pub.et-home-d2 .et-hd-btn { min-height: 48px !important; padding: 0 22px !important; font-size: 16px !important; letter-spacing: -0.01em !important; } /* ── 5. Pricing (owner, 31 Oct 2026: "Yes, do pricing") ─────────────────── */ /* The markup is unchanged (its copy and buttons are pinned by tests); this is layout. The page was one 880px column, so three dense cards, a five-fact strip and the table were squeezed into it. Now: a 1160px page, a centred hero, wide cards and table, and the prose kept to a 760px reading column. */ body.v3-pub.et-page-pricing .et-public-content-section > .container--article { max-width: 1160px !important; } body.v3-pub.et-page-pricing .container--article > :is(h2, .ab-card, .et-pricing-more, .kb-section, p.text-muted-et, .pr-unit-note) { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } /* Hero */ body.v3-pub.et-page-pricing :is(.pr-eyebrow, .display-heading, .et-kb-hero-lead, .pr-proof) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } body.v3-pub.et-page-pricing .pr-eyebrow { margin-top: 48px !important; font-family: var(--v3-font-text) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v3-accent) !important; } body.v3-pub.et-page-pricing .display-heading { max-width: 900px !important; font-size: clamp(38px, 5.6vw, 64px) !important; line-height: 1.04 !important; letter-spacing: -0.045em !important; } body.v3-pub.et-page-pricing .et-kb-hero-lead { max-width: 660px !important; font-size: 19px !important; line-height: 1.5 !important; } body.v3-pub.et-page-pricing .pr-proof { margin-bottom: 56px !important; color: var(--v3-sec) !important; font-size: 14px !important; } body.v3-pub.et-page-pricing .pr-proof strong { color: var(--v3-strong) !important; } /* The three plans */ body.v3-pub.et-page-pricing .pr-plans { gap: 16px !important; margin-bottom: 40px !important; } body.v3-pub.et-page-pricing .pr-plan { position: relative !important; padding: 32px !important; border: 1px solid var(--v3-line) !important; border-radius: 20px !important; background: var(--v3-surface) !important; box-shadow: none !important; } body.v3-pub.et-page-pricing .pr-plan--featured { border-color: var(--v3-accent) !important; background: linear-gradient(#0A1F1D, var(--v3-surface) 60%) !important; } /* The flag is a pill top right, beside the name, not a line above it. */ body.v3-pub.et-page-pricing .pr-plan__flag { position: absolute !important; top: 30px !important; right: 28px !important; min-height: 0 !important; margin: 0 !important; } body.v3-pub.et-page-pricing .pr-plan--featured .pr-plan__flag { padding: 4px 10px !important; border-radius: 999px !important; background: var(--v3-accent) !important; color: var(--v3-accent-ink) !important; font-family: var(--v3-font-text) !important; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; } body.v3-pub.et-page-pricing .pr-plan__name { font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .pr-plan__price { margin: 14px 0 6px !important; font-size: 48px !important; line-height: 1 !important; letter-spacing: -0.035em !important; color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .pr-plan__price span { margin: 10px 0 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; color: var(--v3-sec) !important; } body.v3-pub.et-page-pricing .pr-plan__lede { margin: 12px 0 20px !important; font-size: 16px !important; line-height: 1.45 !important; color: var(--v3-text) !important; } body.v3-pub.et-page-pricing .pr-plan__cta { min-height: 48px !important; font-size: 16px !important; } body.v3-pub.et-page-pricing .pr-plan__note { margin: 10px 0 24px !important; text-align: center !important; font-size: 13px !important; color: var(--v3-sec) !important; } /* Ticks, not bullets. */ body.v3-pub.et-page-pricing .pr-plan__list { margin: 0 0 24px !important; padding: 20px 0 0 !important; border-top: 1px solid var(--v3-surface-2) !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } body.v3-pub.et-page-pricing .pr-plan__list li { position: relative !important; padding-left: 26px !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--md-soft) !important; } body.v3-pub.et-page-pricing .pr-plan__list li::marker { content: none !important; } body.v3-pub.et-page-pricing .pr-plan__list li::before { content: '' !important; position: absolute !important; left: 2px !important; top: 4px !important; width: 6px !important; height: 11px !important; border: solid var(--v3-accent) !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; background: none !important; border-radius: 0 !important; } body.v3-pub.et-page-pricing .pr-plan__list strong { color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .pr-plan__foot { margin: auto 0 0 !important; padding-top: 16px !important; border-top: 1px solid var(--v3-surface-2) !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--v3-sec) !important; } /* Reading the numbers, then the five facts as one ruled row. */ body.v3-pub.et-page-pricing .pr-unit-note { padding: 0 !important; background: transparent !important; border: 0 !important; text-align: center !important; font-size: 14px !important; color: var(--v3-sec) !important; } body.v3-pub.et-page-pricing .pr-facts { margin: 40px 0 !important; padding: 28px 0 !important; border: 0 !important; border-top: 1px solid var(--v3-surface-2) !important; border-bottom: 1px solid var(--v3-surface-2) !important; border-radius: 0 !important; background: transparent !important; gap: 24px !important; } body.v3-pub.et-page-pricing .pr-facts li { font-size: 14px !important; line-height: 1.5 !important; color: var(--v3-sec) !important; } body.v3-pub.et-page-pricing .pr-facts strong { display: block !important; margin-bottom: 4px !important; font-size: 15px !important; color: var(--v3-strong) !important; } /* Jump to: a row of pills. */ body.v3-pub.et-page-pricing .pr-jump { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-bottom: 96px !important; font-size: 0 !important; color: transparent !important; } body.v3-pub.et-page-pricing .pr-jump a { display: inline-flex !important; align-items: center !important; min-height: 36px !important; padding: 0 16px !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px var(--v3-line) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--v3-text) !important; text-decoration: none !important; } body.v3-pub.et-page-pricing .pr-jump a:hover { background: var(--v3-hover) !important; color: var(--v3-strong) !important; } /* Section headings: the home page's size, centred over wide blocks. */ body.v3-pub.et-page-pricing .container--article > h2:not(.visually-hidden) { margin-top: 0 !important; margin-bottom: 32px !important; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -0.035em !important; color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .container--article > :is(#fit, #compare) { max-width: none !important; } /* Which plan fits me: three columns under a rule each, not three boxes. */ body.v3-pub.et-page-pricing .pr-fit { gap: 24px !important; margin-bottom: 112px !important; } body.v3-pub.et-page-pricing .pr-fit__col { padding: 20px 0 0 !important; border: 0 !important; border-top: 2px solid var(--v3-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.v3-pub.et-page-pricing .pr-fit__col:nth-child(2) { border-top-color: var(--v3-accent) !important; } body.v3-pub.et-page-pricing .pr-fit__head { margin-bottom: 12px !important; font-size: 19px !important; font-weight: 600 !important; color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .pr-fit__col li { margin-bottom: 8px !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--md-body) !important; } /* The comparison: hairline rows, the Pro column tinted. */ body.v3-pub.et-page-pricing .table-responsive { border: 1px solid var(--v3-line) !important; border-radius: 20px !important; background: var(--v3-surface) !important; padding: 0 !important; } body.v3-pub.et-page-pricing .cmp-table { margin: 0 !important; font-size: 14px !important; } /* Equal plan columns: the widest cell text was setting them. */ @media (min-width: 768px) { body.v3-pub.et-page-pricing .cmp-table { table-layout: fixed !important; } body.v3-pub.et-page-pricing .cmp-table thead th:first-child { width: 22% !important; } } body.v3-pub.et-page-pricing .cmp-table :is(th, td) { padding: 16px 20px !important; border: 0 !important; border-bottom: 1px solid var(--v3-surface-2) !important; background: transparent !important; color: var(--md-soft) !important; line-height: 1.45 !important; } body.v3-pub.et-page-pricing .cmp-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; } body.v3-pub.et-page-pricing .cmp-table thead th { padding-top: 24px !important; padding-bottom: 20px !important; font-size: 17px !important; font-weight: 600 !important; color: var(--v3-strong) !important; border-bottom: 1px solid var(--v3-line) !important; } body.v3-pub.et-page-pricing .cmp-table .pr-th-price { display: block !important; margin-top: 4px !important; font-size: 14px !important; font-weight: 400 !important; color: var(--v3-sec) !important; } body.v3-pub.et-page-pricing .cmp-table tbody th[scope="row"] { font-weight: 500 !important; color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .cmp-table :is(th, td):nth-child(3) { background: rgba(45, 212, 191, 0.05) !important; } body.v3-pub.et-page-pricing .cmp-table .pr-cmp-all td { background: transparent !important; color: var(--md-body) !important; } body.v3-pub.et-page-pricing .pr-caption { caption-side: bottom !important; padding: 16px 20px !important; font-size: 13px !important; color: var(--v3-sec) !important; } body.v3-pub.et-page-pricing .pr-mid-cta { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; margin: 32px 0 112px !important; } body.v3-pub.et-page-pricing :is(.pr-mid-cta, .et-kb-bottom-cta) .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; min-height: 48px !important; padding: 0 22px !important; font-size: 16px !important; line-height: 1.2 !important; } body.v3-pub.et-page-pricing .pr-mid-cta__note { width: 100% !important; text-align: center !important; font-size: 13px !important; color: var(--v3-sec) !important; } /* Billing and pacing: prose on the page. */ body.v3-pub.et-page-pricing .container--article > .ab-card { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } body.v3-pub.et-page-pricing .container--article > .ab-card > .et-card-body { padding: 0 !important; } body.v3-pub.et-page-pricing .container--article > .ab-card p { color: var(--md-soft) !important; } body.v3-pub.et-page-pricing .container--article > h2.mt-5 { margin-top: 96px !important; } body.v3-pub.et-page-pricing .container--article > .ab-card + h2 { margin-top: 72px !important; } /* More details: one fold row. */ body.v3-pub.et-page-pricing .et-pricing-more { margin-top: 48px !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--v3-line) !important; border-bottom: 1px solid var(--v3-line) !important; border-radius: 0 !important; box-shadow: none !important; } body.v3-pub.et-page-pricing .et-pricing-more > summary { padding: 20px 0 !important; font-size: 17px !important; font-weight: 500 !important; color: var(--v3-strong) !important; } body.v3-pub.et-page-pricing .et-pricing-more > .et-card-body { padding: 0 0 24px !important; } body.v3-pub.et-page-pricing .et-pricing-more .ab-card { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.v3-pub.et-page-pricing .et-pricing-more .ab-card > .et-card-body { padding: 0 !important; } /* The last call, as on the home page. */ body.v3-pub.et-page-pricing .et-kb-bottom-cta { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; margin: 96px 0 96px !important; padding: 72px 32px !important; border: 1px solid var(--v3-line) !important; border-radius: 28px !important; background: radial-gradient(ellipse at top, #0A1F1D, var(--v3-bg) 70%) !important; } body.v3-pub.et-page-pricing .pr-foot-lede { width: 100% !important; margin: 0 0 16px !important; font-size: clamp(28px, 3.6vw, 44px) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.1 !important; color: var(--v3-strong) !important; } @media (max-width: 991.98px) { body.v3-pub.et-page-pricing .pr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 767.98px) { body.v3-pub.et-page-pricing .pr-eyebrow { margin-top: 16px !important; } body.v3-pub.et-page-pricing .et-kb-hero-lead { font-size: 17px !important; } body.v3-pub.et-page-pricing .pr-plans { grid-template-columns: minmax(0, 1fr) !important; } body.v3-pub.et-page-pricing .pr-plan { padding: 24px !important; } body.v3-pub.et-page-pricing .pr-plan__flag { top: 22px !important; right: 20px !important; } body.v3-pub.et-page-pricing .pr-fit { grid-template-columns: minmax(0, 1fr) !important; margin-bottom: 72px !important; } body.v3-pub.et-page-pricing .pr-facts { grid-template-columns: minmax(0, 1fr) !important; } body.v3-pub.et-page-pricing .pr-jump { margin-bottom: 72px !important; } body.v3-pub.et-page-pricing .cmp-table :is(th, td) { padding: 12px 14px !important; } body.v3-pub.et-page-pricing .et-kb-bottom-cta { padding: 48px 20px !important; margin: 72px 0 !important; } } /* ── Phones and tablets ─────────────────────────────────────────────────── */ @media (max-width: 991.98px) { .et-md-shot__body { grid-template-columns: minmax(0, 1fr) 280px !important; } .et-md-shot__side { display: none !important; } body.v3-pub.et-home-d2 .et-hd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px !important; } } @media (max-width: 767.98px) { body.v3-pub.et-home-d2 .et-hd-hero { padding-top: 48px !important; } body.v3-pub.et-home-d2 .et-hd-hero__grid { gap: 32px !important; } body.v3-pub.et-home-d2 .et-hd-hero__lead { font-size: 17px !important; } /* home-d2 ran the card edge to edge (margin -gutter); a window keeps the gutter. */ body.v3-pub.et-home-d2 .et-hd-composer { margin: 0 !important; border-radius: 20px !important; border-left: 1px solid var(--v3-line) !important; border-right: 1px solid var(--v3-line) !important; } body.v3-pub.et-home-d2 :is(.et-hd-section, .et-hd-section--flush) { padding-top: 72px !important; } body.v3-pub.et-home-d2 .et-md-studio { padding-top: 56px !important; } .et-md-shot__body { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; } .et-md-shot__page { padding: 24px 20px !important; gap: 10px !important; } .et-md-shot__title { font-size: 22px !important; } .et-md-shot__kestrel { border-left: 0 !important; border-top: 1px solid var(--v3-surface-2) !important; } .et-md-shot__compose { display: none !important; } .et-md-proof { margin-top: 32px !important; padding: 24px 0 !important; } .et-md-proof span { font-size: 12px !important; } body.v3-pub.et-home-d2 .et-hd-steps { grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px !important; } body.v3-pub.et-home-d2 .et-hd-panel { padding: 24px !important; } body.v3-pub.et-home-d2 #features .et-hd-panel { min-height: 0 !important; } body.v3-pub.et-home-d2 .et-hd-coda { margin: 72px 16px !important; padding: 56px 20px !important; } } /* ── Focus: one line, never two (owner, 31 Oct 2026: "when i click in a form input dont have the double teal borders … all input fields throughout the site"). A focused field shows one thing, its own border. public.css added a 1px teal ring round the teal border. Fields take no outline and no glow; buttons, links and ticks keep the outline keyboard users follow. */ html body.v3-pub :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image]), textarea, select, [contenteditable]:not([contenteditable="false"])):is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; } }