/* ==========================================================================
   MyPholyo homepage restyle, round 1. Sits on top of home.css.
   Colours come from the Art Toolkit: Energy, Earth, Warmth, Balance, Night,
   Violet, Nature and the red to orange Gradient.
   ========================================================================== */
:root {
  --balance: #F1EEE7;
  --violet:  #A9B7DE;
  --nature:  #770003;
  --nature-olive: #776A03;
  --red:     #E8423B;
}
html { background: var(--char); }
body { background: transparent; overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Scrubbed layers
   -------------------------------------------------------------------------- */
#moxie-stage { display: none; pointer-events: none; }
.mx-live #moxie-stage { display: block; position: fixed; inset: 0; z-index: 8; overflow: hidden; }
.mx-live #moxie {
  display: block; position: absolute; left: 0; top: 0;
  width: 360px; height: 360px; transform-origin: 50% 50%; will-change: transform;
}

/* --------------------------------------------------------------------------
   Slots: where the assistant rests in each section, and what it says there
   -------------------------------------------------------------------------- */
.mx-slot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mx-bird { width: var(--bird, 200px); aspect-ratio: 1; flex: 0 0 auto; }
.mx-static { display: none; width: 100%; height: 100%; object-fit: contain; transform: scale(1.43); }
.mx-slot[data-face="-1"] .mx-static { transform: scale(-1.43, 1.43); }
.mx-live .mx-static { display: none; }
html:not(.mx-live) .mx-static { display: block; }

.mx-say {
  position: relative; margin: 0; max-width: 250px;
  padding: 12px 16px; border-radius: 16px;
  background: var(--balance); color: var(--char);
  font-size: .86rem; line-height: 1.4;
  transition: opacity .35s, transform .35s;
}
.mx-live .mx-slot .mx-say { opacity: 0; transform: translateY(6px); pointer-events: none; }
.mx-live .mx-slot.on .mx-say { opacity: 1; transform: none; pointer-events: auto; }
.mx-next, .say-l {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: #B4470F; white-space: nowrap; text-decoration: none;
  /* a comfortable tap area without changing the line height */
  padding: 8px 4px; margin: -8px -4px;
}
.mx-next::after { content: " ↓"; }
.say-l::after { content: " →"; }
.mx-next:hover, .say-l:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Hero: the headline says what we are, the product sits in the middle
   -------------------------------------------------------------------------- */
.home-hero { padding: 104px 0 0; overflow: visible; text-align: left; }
.hero-grid {
  max-width: 1320px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 44px; align-items: start;
}
.home-hero .hero-title {
  position: static; grid-column: 1 / -1; width: 100%; max-width: none; justify-self: center; text-align: center;
  font-size: clamp(2.2rem, 4.5vw, 4.3rem); line-height: 1.06; margin: 8px 0 34px;
}
.hero-slot { --bird: clamp(150px, 15vw, 220px); align-self: start; padding-top: 70px; }
.hero-copy {
  position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding-top: 110px;
}
.hero-copy::before { display: none; }
.hero-copy .sub { width: auto; max-width: 320px; font-size: 1.06rem; line-height: 1.55; margin: 0; text-wrap: pretty; }
.hero-copy .actions { flex-wrap: wrap; flex-direction: column; align-items: flex-start; gap: 10px; }

/* --------------------------------------------------------------------------
   Phone: built in HTML from the app's own screens, so type stays sharp and
   matches what people meet at app.mypholyo.com. All sizes scale from --pw.
   -------------------------------------------------------------------------- */
.phone {
  --pw: 340;
  position: relative; width: calc(var(--pw) * 1px);
  padding: calc(var(--pw) * .03px);
  border-radius: calc(var(--pw) * .15px);
  background: #1D1716;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--linen) 14%, transparent), 0 40px 80px -20px rgba(0,0,0,.55);
}
.hero-phone { --pw: 340; }
@media (max-width: 1240px) { .hero-phone { --pw: 300; } }
.app {
  position: relative; overflow: hidden;
  font-size: calc(var(--pw) * .94 / 390 * 16px);
  aspect-ratio: 390 / 800;
  border-radius: calc(var(--pw) * .125px);
  background: var(--balance); color: var(--char);
  padding: 3.1em 1.5em 0;
  font-family: var(--sans); line-height: 1.3;
  display: flex; flex-direction: column; gap: .75em;
}
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-wm { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.6em; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .3em; line-height: 1; }
.app-wm::after { content: ""; width: .28em; height: .28em; border-radius: 50%; background: var(--signal); }
.app-avatar { width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--char); color: var(--bone); display: grid; place-items: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.05em; }
.app-h { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 3.05em; line-height: 1.02; letter-spacing: -.01em; }
.app-m { font-family: var(--mono); font-size: .72em; letter-spacing: .13em; text-transform: uppercase; color: var(--nature-olive); line-height: 1.35; }
.app-m.mute { color: var(--stone); }
.app-m.olive { color: var(--nature-olive); }
.app-m.small { font-size: .6em; letter-spacing: .1em; }

.card { border-radius: 1.15em; padding: 1em 1.25em; flex: 0 0 auto; }
.card-dark { background: var(--char); color: var(--bone); }
.card-light { background: #fff; }
.card-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.85em; line-height: 1.12; margin-top: .2em; }
.card-sub { font-size: .84em; color: var(--linen); margin-top: .35em; }
.card-arch { display: flex; align-items: center; gap: 1em; }
.arch-ic { width: 3.4em; height: 3.4em; flex: 0 0 auto; border-radius: 50%; background: var(--balance); color: var(--char); display: grid; place-items: center; }
.arch-ic svg { width: 58%; height: 58%; }
.card-tag { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1em; color: var(--linen); margin-top: .1em; }

/* MyPholyo Verified: how much of the record is confirmed */
.verify-bar { height: .36em; margin-top: .85em; border-radius: 1em; overflow: hidden; background: color-mix(in srgb, var(--linen) 24%, transparent); }
.verify-bar i { display: block; height: 100%; border-radius: 1em; background: var(--signal); }
.soon-tag { font-family: var(--mono); font-size: .62em; letter-spacing: .08em; text-transform: uppercase; color: #B4470F; white-space: nowrap; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }

.earn { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; margin-top: .55em; }
.earn-l { font-size: .78em; color: var(--stone); }
.earn-n { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.9em; line-height: 1.2; color: var(--char); font-variant-numeric: lining-nums; }
.earn-n.red { color: var(--red); }
.earn-n.big { font-size: 2.6em; }
.earn-s { font-size: .72em; color: var(--red); }
.earn-bar { display: flex; height: .9em; margin-top: .7em; border-radius: 1em; overflow: hidden; background: var(--violet); }
.earn-bar i { display: block; background: var(--violet); }
.earn-bar b { display: block; background: var(--signal); }
.match-t { font-family: var(--sans); font-weight: 700; font-size: 1.05em; margin: .4em 0 .25em; }

.tabbar {
  position: absolute; left: .9em; right: .9em; bottom: .9em; z-index: 2;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: .8em .35em .7em; border-radius: 1.7em; background: var(--char); color: var(--bone);
  box-shadow: 0 -1.5em 1.8em -1em var(--balance);
}
.tabbar span { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .52em; line-height: 1.1; text-align: center; }
.tabbar svg { width: 2.7em; height: 2.7em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tabbar .on { color: var(--signal); }
.tabbar .is-soon { color: var(--stone); }
.tabbar em { font-style: normal; font-family: var(--mono); font-size: .82em; letter-spacing: .04em; text-transform: uppercase; color: var(--signal); }

/* Screens inside the "Tell it once" phone */
.feature-phone { --pw: 330; }
.app-screens { display: block; padding: 0; }
.screen { position: absolute; inset: 0; padding: 2.6em 1.2em 1em; display: flex; flex-direction: column; gap: .62em; transition: opacity .35s, transform .35s; }
.app-screens[data-screen="roles"] .screen-bench,
.app-screens[data-screen="bench"] .screen-roles { opacity: 0; transform: translateY(.8em); pointer-events: none; }
.screen-top { display: flex; align-items: center; gap: .7em; }
.screen-top .app-wm { font-size: 1.2em; }
.back { font-size: .95em; }
.dots { margin-left: auto; display: flex; gap: .22em; }
.dots i { width: .34em; height: .34em; border-radius: 50%; background: var(--char); }
.dots i.off { background: var(--linen); }
.screen-h { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.55em; line-height: 1.12; margin-top: .2em; }
.center { text-align: center; }
.screen-p { font-size: .72em; color: var(--lichen); text-wrap: balance; }
.row-between { margin-top: .3em; }
.role { background: #fff; border-radius: .9em; padding: .7em .9em; display: flex; flex-direction: column; gap: .18em; }
.role-t { font-weight: 700; font-size: .82em; }
.role-o { font-size: .72em; color: var(--lichen); }
.role-f { display: flex; justify-content: space-between; margin-top: .3em; padding-top: .4em; border-top: 1px solid color-mix(in srgb, var(--char) 10%, transparent); font-size: .66em; color: var(--lichen); }
.edit { color: #B4470F; }
.add-role { border: 1px solid var(--stone); border-radius: 2em; text-align: center; font-size: .74em; font-weight: 500; padding: .6em; }
.rule-under { padding-bottom: .5em; border-bottom: 1px solid var(--nature-olive); margin-top: .4em; }
.bench-card { margin-top: .2em; }
.how-box { background: #E7E3DA; border-radius: .9em; padding: .85em 1em; font-size: .72em; color: var(--char); }
.how-t { font-weight: 700; margin-bottom: .4em; }
.how-box p { margin: 0 0 .5em; color: var(--char); line-height: 1.4; }
.how-box p:last-child { margin: 0; }
.app-cta { margin-top: auto; margin-bottom: .6em; background: var(--char); color: var(--bone); border-radius: 2em; text-align: center; font-weight: 700; font-size: .84em; padding: .9em; }

.phone-col { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.screen-switch { display: inline-flex; padding: 4px; border: 1px solid var(--line-mid); border-radius: 999px; }
.screen-switch button {
  font: 500 .86rem var(--sans); color: var(--ink-soft); background: transparent; border: 0;
  min-height: 40px; padding: 0 20px; border-radius: 999px; cursor: pointer;
}
.screen-switch button.on { background: var(--signal); color: var(--on-signal); }

/* --------------------------------------------------------------------------
   01 layout: assistant, phone, copy
   -------------------------------------------------------------------------- */
.home-feature { padding: 110px 0 120px; }
.home-feature .feature-grid {
  max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(170px, 250px);
  gap: 56px; align-items: center;
}
/* Copy, then the phone, then the assistant on the far side pointing back at it */
.feature-grid .copy { order: 1; }
.feature-grid .phone-col { order: 2; }
.feature-grid .mx-slot { order: 3; }
.feature-grid .mx-slot { --bird: clamp(150px, 15vw, 220px); }

/* --------------------------------------------------------------------------
   02 orbit: product icons around the assistant. They are real buttons now.
   -------------------------------------------------------------------------- */
.home-list .head { flex: 0 0 460px; }
/* overflow: clip stops the turning ring's square corners from widening the page on a phone */
.orbit { max-width: 440px; margin: 28px 0 0; overflow: clip; }
.say-l { margin-right: 10px; }
.orbit-glow, .orbit-pipe { display: none; }
.orbit-disc {
  position: absolute; inset: 22%; border-radius: 50%;
  background: color-mix(in srgb, var(--char) 82%, #000);
  border: 2px solid color-mix(in srgb, var(--bone) 34%, transparent);
}
.orbit .mx-bird { position: absolute; inset: 25%; width: auto; }
.orbit:is(:hover, :focus-within, .paused) .orbit-marks,
.orbit:is(:hover, :focus-within, .paused) .mark { animation-play-state: paused; }
.orbit-marks .mark {
  padding: 0; cursor: pointer; color: var(--ink-soft);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.orbit-marks .mark svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.orbit-marks .mark:hover { border-color: var(--signal); color: var(--signal); }
.orbit-marks .mark[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.orbit-marks .mark:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.orbit-marks .mark.is-soon { border-style: dashed; color: var(--stone); }
.orbit-marks .mark.is-soon[aria-pressed="true"] { color: var(--on-signal); border-style: solid; }
.orbit-say { min-height: 92px; margin-top: 18px; }
.orbit-say .mx-say { max-width: 400px; }
.say-t { display: block; font-weight: 700; }
.say-t:empty { display: none; }
.soon-pill { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 9px; border: 1px solid var(--signal); border-radius: 999px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }

/* --------------------------------------------------------------------------
   03, stats, event, close: same content and textures as the restyle
   -------------------------------------------------------------------------- */
.home-brief { padding-bottom: 110px; }
.home-brief .mx-slot { --bird: 170px; flex-direction: row-reverse; justify-content: flex-start; align-self: stretch; }

.proof-grid.wrap { display: grid; grid-template-columns: 220px repeat(3, 1fr); gap: 40px; align-items: center; max-width: 1320px; }
.proof-grid .mx-slot { --bird: 180px; }

.event-card {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.ev-panel { display: grid; place-items: center; background: var(--balance); padding: 32px; }
.ev-panel .mx-slot { --bird: clamp(200px, 22vw, 300px); }
.ev-panel .mx-say { background: var(--char); color: var(--bone); }
.ev-panel .mx-next { color: var(--signal); }

.home-close { padding-bottom: 170px; }
.home-close .close-grid { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 32px; align-items: center; }
.close-copy { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 700px; }
.home-close .mx-slot { --bird: clamp(160px, 16vw, 230px); grid-column: 1; grid-row: 1; }

/* Tablet: the phone stays in the middle, the rest stacks round it */
@media (max-width: 1100px) {
  .home-feature .feature-grid { grid-template-columns: auto minmax(150px, 200px); justify-content: center; }
  .feature-grid .phone-col { order: 1; }
  .feature-grid .mx-slot { order: 2; }
  .feature-grid .copy { order: 3; grid-column: 1 / -1; max-width: none; }
  .proof-grid.wrap { grid-template-columns: repeat(3, 1fr); }
  .proof-grid .mx-slot { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
  .home-close .close-grid { grid-template-columns: 1fr; justify-items: center; }
  .close-copy { grid-column: 1; }
  .home-close .mx-slot { grid-column: auto; grid-row: auto; order: -1; }
  .home-list .wrap { flex-direction: column; }
  .home-list .head { flex: 0 0 auto; width: 100%; }
}

/* Phone: headline, buttons, then the product above the fold. The assistant shares
   a row with what it says, so neither ever covers the copy. */
@media (max-width: 900px) {
  .home-hero { padding: 88px 0 0; }
  .hero-grid { grid-template-columns: 1fr; justify-items: center; padding: 0 16px; }
  .home-hero .hero-title { font-size: clamp(2rem, 9vw, 3rem); margin: 0 0 16px; text-wrap: balance; }
  .br-d { display: none; }
  .hero-copy { display: contents; }
  .hero-copy .actions { order: 2; flex-direction: row; justify-content: center; margin-bottom: 14px; }
  .hero-copy .actions .btn { width: auto; }
  .hero-copy .actions .btn-ghost { display: none; }
  .hero-slot { order: 3; padding-top: 0; margin-bottom: 8px; }
  .hero-phone { order: 4; --pw: 290; }
  .hero-copy .sub { order: 5; text-align: center; margin: 32px auto 0; max-width: 340px; }
  /* Moxie swaps sides from section to section, and always faces its line */
  .mx-slot, .proof-grid .mx-slot { flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; --bird: 104px; }
  .mx-slot[data-face="-1"], .home-brief .mx-slot { flex-direction: row-reverse; }
  .mx-say { flex: 0 1 auto; max-width: 62vw; font-size: .82rem; }

  .home-feature { padding: 64px 0 70px; }
  .home-feature .feature-grid { grid-template-columns: 1fr; justify-items: center; gap: 28px; padding: 0 16px; }
  .feature-phone { --pw: 300; }
  .feature-grid .mx-slot { order: 0; }
  .feature-grid .phone-col { order: 1; }
  .feature-grid .copy { order: 2; }
  .home-feature .copy { justify-self: stretch; }

  .home-list .head { flex: 0 0 auto; }
  .orbit { max-width: 340px; margin: 22px auto 0; }
  .orbit-say .mx-say { max-width: none; }

  .home-brief .mx-slot { --bird: 104px; align-items: center; }
  .proof-grid.wrap { grid-template-columns: 1fr; gap: 28px; }

  .event-card { grid-template-columns: 1fr; }
  .ev-panel { padding: 20px 16px; }
  .ev-panel .mx-slot { --bird: 120px; }

  .home-close { padding-bottom: 96px; }
  .home-close .close-grid { gap: 22px; }
  .home-close .mx-slot { --bird: 112px; }
}
@media (max-width: 480px) {
  main .btn { width: auto; }
  .close-copy .btn, .acts .btn { width: 100%; justify-content: center; }
  .event-card .acts { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Reduced motion: no scrubbing. Each section shows its own still pose and line. */
@media (prefers-reduced-motion: reduce) {
  .orbit-marks, .orbit-marks .mark { animation: none; }
  .mx-say, .screen { transition: none; }
}

/* ---------- Typography: matched to the live mypholyo.com ----------
   Headings in Cormorant Garamond, body in Objektiv Mk1 (DM Sans as the fallback),
   labels in Roboto Mono. Objektiv is self-hosted on mypholyo.com, so it loads there;
   anywhere else the page falls back to DM Sans. */
@font-face { font-family: 'Objektiv Mk1'; src: url('/assets/fonts/objektiv/ObjektivMk1-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Objektiv Mk1'; src: url('/assets/fonts/objektiv/ObjektivMk1-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --display: 'Cormorant Garamond', Georgia, serif;
  --display-tracking: -.01em;
  --sans: 'Objektiv Mk1', 'DM Sans', 'Helvetica Neue', sans-serif;
}
.home-proof .num { font-size: clamp(2.4rem, 3.6vw, 3.2rem); }

/* Film grain sits on the page background only, behind the phones, cards, buttons and
   mascot. In home.css it was a layer over the whole page (z-index 90). */
body::after { z-index: -1; }

/* ---------- From the hero into the page ----------
   The hero keeps June's motion blur and sits above the grain, so it stays clean.
   Its lower part dissolves away, so the grain begins softly after the hero. */
.home-hero { padding-bottom: 140px; }
.home-hero::after {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--char) 70%, transparent) 0%, transparent 26%),
    linear-gradient(90deg, color-mix(in srgb, var(--char) 50%, transparent) 0%, transparent 32%, transparent 68%, color-mix(in srgb, var(--char) 50%, transparent) 100%);
}
/* the hero dissolves into the page texture underneath, so there is no edge */
.home-hero::before, .home-hero::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
@media (max-width: 900px) { .home-hero { padding-bottom: 72px; } }

/* ---------- Cookie banner and Zoho help widget consent ----------
   The homepage doesn't load style.css, so the banner that /assets/js/consent.js adds
   (Google Analytics and the Zoho Desk widget, both behind consent) is styled here to
   match the rest of the site. Accept and Decline stay identical in size and weight,
   so rejecting is exactly as easy as accepting (ICO guidance on equal prominence). */
.consent-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 100;
  max-width: 720px; margin: 0 auto;
  background: #2a2322; color: #ded9cd; border: 1px solid rgba(222,217,205,.14); border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  padding: 22px 26px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  font-family: 'Objektiv Mk1', 'DM Sans', 'Helvetica Neue', sans-serif;
}
.consent-banner p { margin: 0; flex: 1 1 320px; font-size: 0.92rem; line-height: 1.5; color: #ded9cd; }
.consent-banner a { color: inherit; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-banner .btn {
  display: inline-block; border-radius: 999px; cursor: pointer; line-height: 1;
  padding: 12px 22px; font-size: 0.88rem; font-weight: 500; font-family: inherit;
  border: 1px solid rgba(222,217,205,.4); min-width: 172px; text-align: center;
}
.consent-accept { background: #fc7934; color: #302827; border-color: #fc7934 !important; }
.consent-decline { background: transparent; color: #f1eee7; }
.consent-manage { cursor: pointer; }