/* ============================================================
   NOAH PREDICT: the Noah Wire chassis in the other order.
   cusp.css is copied from noahwire.com untouched. This file loads
   after it and only moves colour: teal where Wire is lime, a night
   teal stage where Wire's is teal, lime kept for buttons and
   headlines on dark, pink for the full stop and the live details.
   Nothing here touches layout, motion or the Safari/iOS fixes.
   ============================================================ */

:root {
  --night: #022F38;
  --night-deep: #01242B;
  --night-text: #CFE3E7;
}

/* ---------- Canvas: teal, like the bar ---------- */
html { background: var(--teal); scrollbar-color: var(--pink) var(--teal); }
html::-webkit-scrollbar { background: var(--teal); }
html::-webkit-scrollbar-thumb { border-color: var(--teal); }
::selection { background: var(--lime); color: var(--ink); }

/* ---------- Wordmark: "noah predict." with a pink full stop ---------- */
.mark .mark__w { letter-spacing: -0.02em; }
.mark__dot { color: var(--pink); }
.foot__big .mark__dot { color: var(--pink); }

/* ---------- Top bar: teal, paper text ---------- */
.actions { background: var(--teal); color: var(--paper); }
.is-rail-open .actions, .is-menu-open .actions { background: var(--night); color: var(--lime); }
.pill--ghost { background: rgba(250,250,250,.14); color: var(--paper); }
.pill--ghost:hover { background: rgba(250,250,250,.26); }
.pill--ink { background: var(--ink); color: var(--lime); }
.pill--ink:hover { background: var(--ink-2); }

/* ---------- Drawer: night, lime active ---------- */
.rail, html[data-rail="lime"] .rail, .is-split .rail { background: var(--night); color: var(--paper); box-shadow: none; }
.rail__index a.is-active, html[data-rail="lime"] .rail__index a.is-active, .is-split .rail__index a.is-active { background: var(--lime); color: var(--ink); }
html[data-rail="lime"] .rail__index a:hover { background: rgba(250,250,250,.1); }
.rail__foot a:hover, html[data-rail="lime"] .rail__foot a:hover, .is-split .rail__foot a:hover { color: var(--lime); }
.rail__scrim { background: rgba(2,47,56,0); }
.is-rail-pinned .rail__scrim { background: rgba(2,47,56,.45); }

/* ---------- Loader and band sweeps: night ---------- */
.loader, .loader__bar { background: var(--night); }
.is-wiping .loader { background: transparent; }
.jump span { background: var(--night); }

/* ---------- Stage: night teal, lime headline ---------- */
.stage { background: var(--night); }
.stage__bg::after { background: linear-gradient(180deg, rgba(2,47,56,.55), var(--night) 80%); }
.stage__bg video { opacity: .3; }
.stage__lede { color: var(--paper); }
.plain { color: var(--paper); }

/* ---------- Content: unchanged stone and paper; teal accents hold ---------- */
.sixsteps li .mono { color: var(--teal); }
.cell--teal { background: var(--teal); }
.cell--teal:hover { background: var(--teal-deep); }

/* ---------- Five-ways card: ours, so no pink outline; the verb takes the pink ---------- */
.predict.ask, .predict.ask:hover { background: var(--paper); box-shadow: none; cursor: default; }
.predict.ask .predict__head .mono, .predict.ask .predict__live { color: var(--teal) !important; }
.predict.ask .predict__live i { background: var(--pink); }
.predict.ask .predict__verb { color: var(--pink); }
.predict.ask .link-mono { color: var(--teal) !important; }
.predict.ask .link-mono:hover { color: var(--ink) !important; }
@media (min-width: 1024px) { .predict.ask { min-height: 0; } }

/* ---------- Ask sheet: example questions with copy ---------- */
.ask-sheet { margin: 0 clamp(1.4rem, 3vw, 3rem) 4rem 2rem; }
.ask-list { list-style: none; margin: 0; padding: 0; }
.ask-list li { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--stone); }
.ask-list li[hidden] { display: none; }
.ask-verb { color: var(--teal); padding-top: 0.25rem; }
.ask-q { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.ask-copy { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; border: 1px solid var(--stone-line); background: transparent; color: var(--ink); padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.ask-copy:hover { border-color: var(--ink); }
.ask-copy.is-done { background: var(--lime); border-color: var(--lime); }
.ask-sheet .sheet__foot { display: flex; gap: 1.2rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--stone-line); }
@media (max-width: 1023px) { .ask-sheet { margin: 0 1.4rem 4rem; } }
@media (max-width: 860px) {
  .ask-list li { grid-template-columns: 1fr auto; gap: 0.35rem 0.8rem; }
  .ask-verb { grid-column: 1 / -1; padding-top: 0; }
  .ask-q { font-size: 1.05rem; }
}

/* ---------- Comparison card ---------- */
.compare { display: flex; flex-direction: column; min-height: 22rem; }
.compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0 1.6rem; }
.compare h4 { color: var(--lime); margin: 0 0 0.4rem; }
.compare .ticks--dark { padding-top: 0; }
@media (max-width: 639px) { .compare__cols { grid-template-columns: 1fr; } }

/* ---------- Pricing: Desk is the lime plan ---------- */
.tier--lime .pill--ink { margin-top: auto; }

/* ---------- Connect block: night, with two doors ---------- */
.cta { background: var(--night); color: var(--paper); }
.cta h2 { color: var(--paper); }
.cta p { color: var(--night-text); }
.cta > .cta__inner > .cta__grid > div > .mono:first-child { color: var(--lime); }
.cta__mail { color: var(--night-text); }
.cta__mail a { color: var(--paper); }
.cta__url { color: var(--lime); text-transform: none; cursor: copy; border-bottom: 1px solid currentColor; }
.cta__url.is-done { color: var(--paper); }
.on-lime .pill--demo { background: var(--lime); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 2rem; }
.door { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.7rem; border-radius: 0.6rem; background: var(--paper); color: var(--ink); text-decoration: none; min-height: 14rem; transition: transform .35s var(--ease), background-color .3s; }
.door:hover { transform: translateY(-3px); }
.door--gpt { background: var(--lime); }
.door--gpt:hover { background: var(--lime-deep); }
.door .mono { color: var(--teal); }
.door--gpt .mono { color: var(--ink); }
.door h3 { font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.door p { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--ink-2); max-width: 30ch; }
.door .link-mono { margin-top: auto; align-self: flex-start; color: var(--ink); }
.door .link-mono:hover { color: var(--teal); }
.door--gpt .link-mono:hover { color: var(--ink); }
.form { background: rgba(250,250,250,.06); }
.form__title { display: block; color: var(--lime); }
.form label > .mono, .form legend { color: var(--night-text); }
.form input:not([type=radio]):not([type=checkbox]) { background: var(--paper); border-color: transparent; color: var(--ink); }
.form input:not([type=radio]):not([type=checkbox]):focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(136,255,130,.25); }
.opts span { background: rgba(250,250,250,.08); border-color: rgba(250,250,250,.3); color: var(--paper); }
.opts label:hover span { border-color: var(--paper); }
.opts input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--ink); }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } .door { min-height: 0; } }

/* ---------- Footer: teal ---------- */
.foot { background: var(--teal); color: var(--paper); }
.foot .mark { color: var(--paper); }
.foot p { color: var(--night-text); }
.foot h4 { color: var(--lime); }
.foot a:hover { color: var(--lime); }
.foot__legal { border-top-color: rgba(250,250,250,.25); color: var(--night-text); }

/* ---------- Inner pages on the same chassis (connect/claude) ---------- */
.inner { position: relative; z-index: 1; background: var(--stone); }
.inner .stage { min-height: 100vh; }
.inner .main { padding-top: var(--content-top); }
.copyfield { display: flex; align-items: center; gap: 0.8rem; margin: 0.6rem 0 0; background: var(--paper); border: 1px solid var(--stone-line); border-radius: 0.6rem; padding: 0.4rem 0.4rem 0.4rem 1rem; }
.copyfield code { font-family: var(--mono); font-size: 1rem; color: var(--ink); flex: 1; overflow-wrap: anywhere; }
.steps--big { margin: 0; gap: 0; }
.steps--big li { grid-template-columns: 3rem 1fr; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--stone); font-size: 1.1rem; }
.steps--big li .mono { color: var(--teal); padding-top: 0.2rem; }
.steps--big h3 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.steps--big p { margin: 0; color: var(--ink-2); max-width: 56ch; }
.steps--big .copyfield { max-width: 36rem; }
.note { font-size: 0.95rem; color: var(--mute); margin: 0.6rem 0 0; max-width: 56ch; }


/* ---------- Tiers: ghost pill on a paper card ---------- */
.pill--stone { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill--stone:hover { background: var(--ink); color: var(--lime); }
.tier .pill { margin-top: auto; white-space: nowrap; }

/* ---------- Footer: "NOAH PREDICT." is longer than "NOAH WIRE" ---------- */
.foot__big { font-size: min(14.5rem, 11.4cqw); }
@media (max-width: 860px) { .foot__big { font-size: 11vw; } }

/* ---------- Connect block: the two mono lines, a touch smaller ---------- */
.cta__mail { font-size: 1.15rem; }
@media (max-width: 860px) { .cta__mail { font-size: 1rem; } }

/* ---------- Inner pages: clear the bar; no tall empty stage on phones ---------- */
html[data-inner] main { padding-top: var(--bar-h); }
@media (max-width: 1023px) { .inner .stage { min-height: 0; } .inner .main { padding-top: 2.5rem; } }


/* ---------- Two floating pills on the hero: ChatGPT, then Claude under it ---------- */
.actions .pill--claude { position: fixed; right: 1.4rem; z-index: 45; background: var(--paper); color: var(--ink); transition: opacity .35s, transform .35s var(--ease), background-color .25s; }
.actions .pill--claude:hover { background: #fff; }
@media (min-width: 861px) {
  .actions .pill--claude { top: calc(var(--bar-h) + 2.6rem + 4.3rem + 0.7rem); height: 3.4rem; padding: 0 1.8rem; font-size: 1.15rem; gap: 0.7rem; }
}
@media (max-width: 860px) {
  .actions .pill--claude { top: calc(var(--bar-h) + 1.1rem + 3.1rem + 0.6rem); right: 1.1rem; height: 3.1rem; padding: 0 1.25rem; font-size: 0.95rem; gap: 0.5rem; z-index: 46; }
}
.is-menu-open .actions .pill--claude, .is-rail-open .actions .pill--claude { opacity: 0; pointer-events: none; }
/* Past the hero the pills step aside ... */
.np-past-hero .actions .pill--demo, .np-past-hero .actions .pill--claude, .at-start .actions .pill--claude { opacity: 0; transform: translateY(-0.5rem); pointer-events: none; }

/* ... and two small circles take over: the ChatGPT mark on lime, the Claude mark on paper.
   Desktop: top right under the bar, where the pills were. Phones: bottom right, anchored to the
   real viewport (this element is not inside the transformed bar, so "bottom" tracks Safari's toolbar). */
.fab { position: fixed; z-index: 45; display: flex; gap: 0.6rem; opacity: 0; pointer-events: none; transform: translateY(-0.5rem); transition: opacity .35s, transform .35s var(--ease); }
.np-past-hero .fab { opacity: 1; pointer-events: auto; transform: none; }
.at-start .fab, .is-rail-open .fab, .is-menu-open .fab { opacity: 0; pointer-events: none; }
html:not(.is-loaded) .fab { opacity: 0; }
.fab__btn { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; text-decoration: none; transition: transform .25s var(--ease), background-color .25s; box-shadow: 0 2px 10px rgba(2,47,56,.18); }
.fab__btn:hover { transform: translateY(-2px); }
.fab__btn svg { width: 1.7rem; height: 1.7rem; display: block; }
.fab__btn--gpt { background: var(--lime); }
.fab__btn--gpt:hover { background: var(--lime-deep); }
.fab__btn--gpt svg { fill: var(--ink); }
.fab__btn--claude { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), 0 2px 10px rgba(2,47,56,.18); }
.fab__btn--claude:hover { background: #fff; }
.fab__btn--claude svg { fill: #D97757; }
@media (min-width: 861px) { .fab { top: calc(var(--bar-h) + 1.4rem); right: 1.4rem; } }
@media (max-width: 860px) { .fab { top: calc(var(--bar-h) + 1.1rem); right: 1.1rem; gap: 0.5rem; } .fab__btn { width: 3rem; height: 3rem; } .fab__btn svg { width: 1.55rem; height: 1.55rem; } }

/* ---------- Connect block: two big stacked pills ---------- */
.doors--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; margin: 0 0 2.2rem; }
.pill--big { height: 4.3rem; padding: 0 2.4rem; font-size: 1.6rem; gap: 0.8rem; }
.pill--paper { background: var(--paper); color: var(--ink); }
.pill--paper:hover { background: #fff; }
@media (max-width: 860px) { .pill--big { height: 3.6rem; padding: 0 1.6rem; font-size: 1.15rem; } }

/* ---------- Inner pages: a flat band between stacked panels ---------- */
.inner + .inner { border-top: 1px solid rgba(250,250,250,.08); }


/* ============================================================
   THE DOG-EAR (experiment, 1 Oct 2026). Bottom left: a folded
   corner showing the sister site's colour. Hover lifts it, a drag
   or click peels the page along the diagonal. peel.js does the
   geometry with clip-paths; this is only the look.
   ============================================================ */
:root { --peel-under: #88FF82; --peel-ink: #141414; --peel-back: #FF7EC4; --ear: 3.6rem; }
.ear { position: fixed; left: 0; bottom: 0; z-index: 47; width: var(--ear); height: var(--ear); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; transition: width .35s var(--ease), height .35s var(--ease); }
.ear__fold { position: absolute; inset: 0; display: block; }
/* the sister colour showing where the corner has lifted ... */
.ear__fold::before { content: ''; position: absolute; inset: 0; background: var(--peel-under); clip-path: polygon(0 0, 0 100%, 100% 100%); }
/* ... and the back of this page, folded over */
.ear__fold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(225deg, #FFB3DC 0%, var(--peel-back) 55%, #E25FA6 100%); clip-path: polygon(0 0, 100% 100%, 100% 0); filter: drop-shadow(-2px 2px 3px rgba(2,47,56,.25)); }
.ear__tip { position: absolute; left: calc(100% + 0.6rem); bottom: 0.9rem; white-space: nowrap; color: var(--paper); background: var(--night); padding: 0.35rem 0.6rem; border-radius: 0.4rem; font-size: 0.75rem; opacity: 0; transform: translateX(-0.4rem); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; }
.peel-hover .ear { width: calc(var(--ear) * 1.6); height: calc(var(--ear) * 1.6); }
.peel-hover .ear__tip { opacity: 1; transform: none; }
.peel-drag .ear { opacity: 0; }
.at-start .ear, .is-rail-open .ear, .is-menu-open .ear, html:not(.is-loaded) .ear { opacity: 0; pointer-events: none; }
.ear { transition: width .35s var(--ease), height .35s var(--ease), opacity .3s; }
@media (hover: hover) { .ear:hover .ear__fold::after { filter: drop-shadow(-3px 3px 6px rgba(2,47,56,.35)); } }

/* The sheet: the other site's canvas underneath, the flap (back of this page) along the fold, a shadow on the sheet */
.peel { position: fixed; inset: 0; z-index: 85; pointer-events: none; display: none; }
.peel.is-on { display: block; }
.peel__under { position: absolute; inset: 0; background: var(--peel-under); color: var(--peel-ink); }
/* The sheet underneath, set like a card: one light statement in the middle, the name big in the corner */
.peel__inner { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.peel__line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); margin: 0; text-align: center; font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.035em; white-space: nowrap; }
.peel__mark { position: absolute; left: clamp(1.2rem, 3.5vw, 3.6rem); bottom: clamp(0.8rem, 2.2vw, 2rem); font-weight: 400; font-size: clamp(6rem, 16vw, 17rem); line-height: 0.82; letter-spacing: -0.05em; }
.peel__flap { position: absolute; inset: 0; background: var(--peel-back); }
.peel__shade { position: absolute; inset: 0; opacity: 0; }
.peel.is-gone { transition: opacity .25s; }
@media (max-width: 860px) { :root { --ear: 3rem; } .ear__tip { display: none; } }

/* Phones: the two circles sit top right under the bar, so a stage headline at a paging stop starts below them */
@media (max-width: 860px) { .np-past-hero .stage { padding-top: 6.6rem; } }

/* Phones: nothing may be wider than the screen. The dictionary slide's one long word set its own width. */
.carousel, .slides, .slide { min-width: 0; max-width: 100%; }
.def__word { overflow-wrap: anywhere; }
@media (max-width: 860px) { .def__word { font-size: clamp(2.2rem, 10.5vw, 4.5rem); letter-spacing: -0.04em; } }

/* ---------- The two connect pills: the same size, the maker's mark in place of the arrow ---------- */
.pill__logo { width: 1.45rem; height: 1.45rem; flex: none; fill: var(--ink); }
.pill__logo--claude { fill: #D97757; }
@media (min-width: 861px) {
  .actions .pill--demo { top: calc(var(--bar-h) + 2.6rem); height: 3.7rem; padding: 0 1.9rem; font-size: 1.3rem; gap: 0.8rem; }
  .actions .pill--claude { top: calc(var(--bar-h) + 2.6rem + 3.7rem + 0.7rem); height: 3.7rem; padding: 0 1.9rem; font-size: 1.3rem; gap: 0.8rem; }
  .pill--big { height: 3.9rem; padding: 0 2rem; font-size: 1.35rem; gap: 0.9rem; }
  .pill--big .pill__logo { width: 1.6rem; height: 1.6rem; }
}
@media (max-width: 860px) {
  .actions .pill--demo { height: 3.1rem; padding: 0 1.25rem; font-size: 0.95rem; gap: 0.6rem; }
  .actions .pill--claude { top: calc(var(--bar-h) + 1.1rem + 3.1rem + 0.6rem); height: 3.1rem; padding: 0 1.25rem; font-size: 0.95rem; gap: 0.6rem; }
  .pill__logo { width: 1.2rem; height: 1.2rem; }
  .pill--big { height: 3.4rem; padding: 0 1.4rem; font-size: 1.05rem; gap: 0.7rem; }
}

/* Same width too, so the two marks sit in a column */
.actions .pill--demo, .actions .pill--claude, .pill--big { justify-content: space-between; }
@media (min-width: 861px) { .actions .pill--demo, .actions .pill--claude { width: 18.2rem; } .pill--big { width: 19.4rem; } }
@media (max-width: 860px) { .actions .pill--demo, .actions .pill--claude { width: 13.6rem; } .pill--big { width: 15rem; } }

/* The sheet: "take me to" and the destination in the footer's big capitals, bottom left */
.peel__inner { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 clamp(1.2rem, 3.5vw, 3.6rem) clamp(1.2rem, 3.5vw, 3rem); }
.peel__line { display: none; }
.peel__take { margin: 0 0 0.15em 0; font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; }
.peel__mark { position: static; font-weight: 400; letter-spacing: -0.045em; line-height: 0.85; white-space: nowrap; }
.peel__mark .mark__dot { color: var(--pink); }

/* The sheet, finished: house eyebrow above the name, the name rises in, the dot breathes */
.peel__inner { transition: opacity .2s, transform .35s var(--ease); will-change: transform; }
.peel__take { font-family: var(--mono); font-weight: 500; font-size: clamp(1rem, 1.75vw, 1.65rem); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; margin: 0 0 1.1em 0; color: var(--peel-take, inherit); opacity: .9; }
.peel__mark .mark__dot { display: inline-block; animation: peelbreathe 2.4s ease-in-out infinite; transform-origin: 50% 72%; }
@keyframes peelbreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .peel__mark .mark__dot { animation: none; } }
:root { --peel-take: var(--ink); }

/* ---------- Pricing: three individual plans, two team plans, the report note ---------- */
.tiers--three { grid-template-columns: repeat(3, 1fr); }
.tiers--two { grid-template-columns: repeat(2, 1fr); margin-top: 1.2rem; }
.tiers--three .tier--lime { grid-column: auto; }
.tier .tier__price { font-size: 2.6rem; }
.tier--teal .tier__price { font-size: 2.6rem; }
.tiers--two .tier__price { font-size: 2.2rem; }
.report-note { margin: 1rem 0 0.4rem; font-size: 1.05rem; line-height: 1.45; color: var(--ink); max-width: 64ch; }
.report-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; padding-top: 0.6rem; }
@media (max-width: 1100px) { .tiers--three { grid-template-columns: 1fr 1fr; } .tiers--three .tier--lime { grid-column: span 2; } }
@media (max-width: 860px) { .tiers--three, .tiers--two, .report-ticks { grid-template-columns: 1fr; } .tiers--three .tier--lime { grid-column: auto; } }

/* Dollar price point beside the pound */
.tier__usd { font-size: 0.5em; color: var(--mute); letter-spacing: -0.01em; margin-left: 0.15em; }
.tier--lime .tier__usd { color: var(--ink-2); }
.tier--teal .tier__usd { color: #B9DDE3; }


/* ============================================================
   NOAH COMMS PROFESSIONAL (noahwire.com/comms-pro), 9 Oct 2026.
   The Predict chassis on the Wire's lime canvas: lime bar, drawer
   and footer like noahwire.com, the night-teal stage and lime pills
   from noahpredict.com. Appended after the Predict rules so it wins.
   ============================================================ */
html { background: var(--lime); scrollbar-color: var(--pink) var(--lime); }
html::-webkit-scrollbar { background: var(--lime); }
html::-webkit-scrollbar-thumb { border-color: var(--lime); }
.actions { background: var(--lime); color: var(--ink); }
.is-rail-open .actions, .is-menu-open .actions { background: var(--night); color: var(--lime); }
.pill--ghost { background: rgba(20,20,20,.08); color: var(--ink); }
.pill--ghost:hover { background: rgba(20,20,20,.14); }
.rail, html[data-rail="lime"] .rail, .is-split .rail { background: var(--lime); color: var(--ink); }
.rail__index a.is-active, html[data-rail="lime"] .rail__index a.is-active, .is-split .rail__index a.is-active { background: var(--ink); color: var(--lime); }
html[data-rail="lime"] .rail__index a:hover { background: rgba(20,20,20,.08); }
.rail__foot a:hover, html[data-rail="lime"] .rail__foot a:hover, .is-split .rail__foot a:hover { color: var(--teal); }
.foot { background: var(--lime); color: var(--ink); }
.foot .mark { color: var(--ink); }
.foot p { color: var(--ink-2); }
.foot h4 { color: var(--ink); }
.foot a:hover { color: var(--teal); }
.foot__legal { border-top-color: rgba(20,20,20,.2); color: var(--ink-2); }
.foot__big .mark__dot, .mark__dot { color: var(--pink); }
/* the hero's supporting line under the first statement */
.screen__sub { margin: 1.1rem 0 0; font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 1.3; max-width: 44ch; color: rgba(250,250,250,.9); }
.screen__sub { opacity: 0; transform: translateY(0.6rem); transition: opacity .6s .5s, transform .6s .5s var(--ease); }
.screen.is-in .screen__sub { opacity: 1; transform: none; }
/* the "three things" card: lime details on this page */
.predict.ask .predict__head .mono, .predict.ask .predict__live, .predict.ask .link-mono { color: var(--teal) !important; }
/* the demonstration feed sits in the content column, not flush */
#try .sheet { margin: 0; }
/* the sheet underneath the peel: teal, both sisters offered */
:root { --peel-under: #017288; --peel-ink: #FAFAFA; --peel-back: #FF7EC4; --peel-ear-under: #6FE86A; --peel-ear-face: #B7FFB3; }
.peel-on .chat-trigger { opacity: 0 !important; pointer-events: none; }


/* ---------- The dog-ear, quietened (9 Oct 2026): at rest it is a fold in the page's own colour.
   Hover or touch shows the pink back and the sister colour; the sheet can offer several names. ---------- */
.ear { width: 3rem; height: 3rem; }
.ear__fold::before { background: var(--peel-ear-under, var(--peel-under)); transition: background-color .3s; }
.ear__fold::after { background: linear-gradient(225deg, var(--peel-ear-face, #fff) 0%, var(--peel-ear-face, #fff) 60%, var(--peel-ear-under, #ccc) 100%); filter: drop-shadow(-1px 1px 2px rgba(20,20,20,.18)); transition: background .3s, filter .3s; }
.peel-hover .ear__fold::before, .peel-drag .ear__fold::before { background: var(--peel-under); }
.peel-hover .ear__fold::after, .peel-drag .ear__fold::after { background: linear-gradient(225deg, #FFB3DC 0%, var(--peel-back) 55%, #E25FA6 100%); filter: drop-shadow(-2px 2px 3px rgba(2,47,56,.25)); }
.peel-hover .ear { width: 4.8rem; height: 4.8rem; }
@media (hover: none) { .ear { width: 2.6rem; height: 2.6rem; } }
/* several destinations: the names are offered, the sheet stays until one is chosen */
.peel--choice.is-choice { pointer-events: auto; }
.peel--choice .peel__inner { gap: 0.25em; }
.peel--choice .peel__mark { display: block; text-decoration: none; color: inherit; transition: opacity .25s; }
.peel--choice.is-choice .peel__mark:hover { opacity: .75; }
.peel__stay { position: absolute; top: calc(var(--bar-h, 4.9rem) + 1.2rem); right: 1.4rem; background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; opacity: 0; transition: opacity .3s; }
.peel--choice.is-choice .peel__stay { opacity: .85; }
.peel--choice.is-choice .peel__stay:hover { opacity: 1; }
/* Phones: the audience cards stack, so long single words never force the grid past the screen */
@media (max-width: 860px) { #who .grid--3, #how .eco { grid-template-columns: minmax(0, 1fr); } .cell h3 { overflow-wrap: anywhere; } }

.peel__flap, .peel__shade { pointer-events: none; }

/* The corner at rest is neutral: a translucent fold that takes its tone from whatever is behind it */
:root { --peel-ear-under: rgba(20,20,20,.16); --peel-ear-face: rgba(250,250,250,.5); }
.ear { width: 2.7rem; height: 2.7rem; }
.ear__fold::after { filter: drop-shadow(-1px 1px 1.5px rgba(20,20,20,.14)); }

.rail__family { border-bottom-color: rgba(20,20,20,.14); }
.rail__family a.is-here { background: rgba(20,20,20,.08); }
.rail__family a:hover { background: rgba(20,20,20,.12); }


/* ---------- The family mark: a square pink full stop, everywhere the name is printed (9 Oct 2026) ---------- */
.mark__dot { display: inline-block; width: 0.17em; height: 0.17em; margin-left: 0.07em; background: var(--pink); color: transparent; overflow: hidden; line-height: 0; vertical-align: baseline; border-radius: 0; }
.rail__family .mark__dot, .sister h2 .mark__dot, .peel__mark .mark__dot, .foot__big .mark__dot, .chat-welcome__logo .mark__dot { color: transparent; background: var(--pink); }

.rail__family a b .mark__dot { font-size: inherit; opacity: 1; }   /* the row rule for the small line (a span) must not shrink the dot */

/* No stop on the wordmark in the top bar or the drawer head (Ivan, 9 Oct 2026): it stays on the big footer name, the family rows, the peel sheet and the share images. */
.actions .mark .mark__dot, .rail .mark .mark__dot { display: none; }