/* ============================================================
   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); }