/* sec-home.css: the VORA home page (builder A). Tokens only for colour, radius, shadow and easing. Photographs of people lead every
   section; the four-shape motif (base.css .shp / .chip) is the only decoration. Pins and scrubs are added by sec-home.js from
   1024px up with motion allowed; every section's DEFAULT state below is its plain, finished layout (no JS, reduced motion, phones). */

/* ---- 1. hero: a photo, the chat card, the one H1 ------------------------------------------------------- */
.hero { position: relative; min-height: max(700px, calc(100svh - 64px)); display: flex; color: #fff; background: var(--ink); overflow: hidden; }
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { transform-origin: 62% 40%; }
.hero__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(23, 24, 26, .86) 0%, rgba(23, 24, 26, .66) 36%, rgba(23, 24, 26, .12) 70%, rgba(23, 24, 26, 0) 100%), linear-gradient(0deg, rgba(23, 24, 26, .5) 0%, rgba(23, 24, 26, 0) 30%); }
.hero__in { position: relative; width: min(100% - 2 * var(--gutter-x), var(--content)); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 410px); gap: 48px; align-items: end; padding-block: 132px 64px; }
.hero__h1 { color: #fff; font-size: clamp(44px, 6.2vw, 92px); line-height: .96; }
.hero__h1 em { display: inline-block; }
.hero__lead { margin: 24px 0 0; max-width: 33rem; font: 500 clamp(17px, 1.5vw, 21px)/1.4 var(--body); color: rgba(255, 255, 255, .9); }
.hero__actions { margin-top: 30px; }
.hero__note { margin: 18px 0 0; font-size: 14px; line-height: 1.4; color: var(--white-72); }

.chat { background: var(--card); color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .36); padding: 16px 18px 20px; width: 100%; justify-self: end; }
.chat__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--edge); }
.chat__face { position: relative; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; background: var(--paper-2); }
.chat__face picture, .chat__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.chat__name { font-weight: 700; font-size: 16px; }
.chat__shapes { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.chat__shapes .shp { height: 9px; }
.chat__thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.chat__msg { display: flex; flex-direction: column; gap: 4px; max-width: 90%; }
.chat__msg--owner { align-self: flex-end; align-items: flex-end; }
.chat__who { font: 700 12px/1 var(--body); letter-spacing: 0; color: var(--ink-70); font-family: var(--wordmark); font-weight: 600; }
.chat__b { position: relative; margin: 0; padding: 11px 14px; border-radius: 16px; font: 500 15px/1.35 var(--body); background: var(--paper-2); color: var(--ink); }
.chat__msg--owner .chat__b { background: var(--ink); color: #fff; }
.chat__dots { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: none; gap: 5px; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-50); animation: chatdot 1s infinite ease-in-out; }
.chat__msg--owner .chat__dots i { background: rgba(255, 255, 255, .7); }
.chat__dots i:nth-child(2) { animation-delay: .15s; } .chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes chatpop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.chat.is-armed .chat__msg { visibility: hidden; }
.chat.is-armed .chat__msg.is-typing, .chat.is-armed .chat__msg.is-in { visibility: visible; }
.chat.is-armed .chat__msg.is-typing .chat__t { opacity: 0; }
.chat.is-armed .chat__msg.is-typing .chat__dots { display: flex; }
.chat.is-armed .chat__msg.is-in .chat__b { animation: chatpop .4s var(--ease-rise); }

/* ---- 2. the day: the owner at the centre, eight questions come back to her ---------------------------------- */
.day { position: relative; padding-top: var(--band-pad); overflow-x: clip; }
.day__head { max-width: 1100px; margin-inline: auto; }
.day__h { font-size: clamp(28px, 4.2vw, 50px); line-height: 1.06; max-width: 26ch; text-wrap: balance; }
.day__stage { width: min(100% - 2 * var(--gutter-x), var(--content)); margin: 40px auto 0; display: flex; flex-direction: column; gap: 28px; padding-bottom: var(--band-pad); }
.day__core { display: contents; }
.day__owner { order: -1; align-self: center; position: relative; width: 176px; aspect-ratio: 1; }
.day__ph { position: absolute; inset: 9px; border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.day__ph picture, .day__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.day__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.day__ring circle { fill: none; stroke-width: 2.6; }
.day__ring-bg { stroke: var(--ink-10); }
.day__ring-fg { stroke: var(--sun); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.day__readout { order: 2; text-align: center; }
.day__clock { display: none; }
.day__close { margin: 0 auto; max-width: 22ch; font: 400 clamp(26px, 3.4vw, 34px)/1.1 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.day__cards { order: 1; list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid var(--ink-10); display: flex; flex-direction: column; gap: 14px; }
.dcard { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 400px; background: var(--card); border-radius: var(--r-md); padding: 10px 16px 10px 10px; box-shadow: var(--shadow-card); }
.dcard::before { content: ""; position: absolute; left: -34px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--ground); }
.dcard:nth-child(4n+2)::before { background: var(--sun); } .dcard:nth-child(4n+3)::before { background: var(--leaf); } .dcard:nth-child(4n+4)::before { background: var(--violet); }
.dcard__ph { position: relative; flex: none; width: 72px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.dcard__ph picture, .dcard__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dcard__meta { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--body); color: var(--ink-70); }
.dcard__time { color: var(--ink); font-weight: 700; }
.dcard__q { font: 400 22px/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); }

@media (min-width: 1024px) {
  .day__stage { display: block; position: relative; height: clamp(560px, calc(100svh - 112px), 820px); margin-top: 24px; padding-bottom: 0; }
  .day__cards { position: absolute; inset: 0; padding: 0; border-left: 0; display: grid; grid-template-columns: 1fr minmax(270px, 350px) 1fr; grid-template-rows: repeat(4, 1fr); column-gap: 30px; align-items: center; }
  .dcard { max-width: 376px; }
  .dcard::before { display: none; }
  .dcard__ph { width: clamp(66px, 11vh, 96px); }
  .dcard__q { font-size: clamp(19px, 2.9vh, 24px); }
  .dcard--l { grid-column: 1; justify-self: end; }
  .dcard--r { grid-column: 3; justify-self: start; }
  .dcard:nth-child(1), .dcard:nth-child(2) { grid-row: 1; } .dcard:nth-child(3), .dcard:nth-child(4) { grid-row: 2; }
  .dcard:nth-child(5), .dcard:nth-child(6) { grid-row: 3; } .dcard:nth-child(7), .dcard:nth-child(8) { grid-row: 4; }
  .dcard--l { rotate: -1.8deg; } .dcard--r { rotate: 1.5deg; }
  .dcard:nth-child(4n+3) { rotate: 1.2deg; } .dcard:nth-child(4n+4) { rotate: -1.2deg; }
  .day__core { display: flex; position: absolute; left: 50%; top: 50%; width: 350px; transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none; }
  .day__owner { order: 0; width: clamp(190px, 31vh, 296px); }
  .day__readout { order: 0; display: grid; justify-items: center; width: 100%; }
  .day__readout > * { grid-area: 1 / 1; }
  .day__close { font-size: clamp(24px, 3.7vh, 32px); }
  .day.is-pinned .dcard { rotate: none; }
  .day.is-pinned .day__clock { display: block; }
  .day.is-pinned .day__close { opacity: 0; }
  .day__time { margin: 0; font: 400 clamp(46px, 8vh, 80px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .day__count { margin: 6px 0 0; font: 600 14px/1 var(--body); color: var(--ink-70); }
}

/* ---- 3. One Screen: five tabs, a scene photo and a product card each --------------------------------------- */
.os { position: relative; padding-top: var(--band-pad); padding-bottom: calc(var(--band-pad) * .8); overflow-x: clip; }
.os__head { margin-bottom: 36px; }
.os__lead { margin-top: 14px; max-width: 40rem; }
.os__tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.os__tabs::-webkit-scrollbar { display: none; }
.os__tabs[hidden] { display: none; }
.os__tab { flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 20px 10px 16px; border: 1.5px solid var(--ink-30); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.os__tab .shp { height: 12px; }
.os__tab:hover { background: var(--paper-2); }
.os__tab.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.os__panels { position: relative; }
.os__panel { position: relative; display: flex; flex-direction: column; margin-bottom: 28px; }
.os.is-js .os__panel { display: none; margin-bottom: 0; }
.os.is-js .os__panel.is-on { display: flex; animation: ospanel .45s var(--ease-rise); }
@keyframes ospanel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.os__scene { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--ink); }
.os__veil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(0deg, rgba(23, 24, 26, .82) 0%, rgba(23, 24, 26, .5) 42%, rgba(23, 24, 26, 0) 75%); }
.os__cap { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; color: #fff; }
.os__cap .chip { align-self: flex-start; background: rgba(255, 255, 255, .94); }
.os__line { color: #fff; font-size: clamp(25px, 6.4vw, 32px); line-height: 1.05; }
.os__sub { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.os__card { position: relative; margin-top: 14px; }
.os__close { margin: 28px 0 0; max-width: 34rem; font: 400 clamp(26px, 3vw, 38px)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }

.pc { background: var(--card); color: var(--ink); border-radius: var(--r-md); padding: 18px 18px 16px; box-shadow: var(--shadow-card); font-size: 14px; line-height: 1.35; }
.pc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--edge); }
.pc__title { margin: 0; font: 700 15px/1.25 var(--body); }
.pc__tag { flex: none; font: 600 11px/1 var(--wordmark); letter-spacing: 0; color: var(--ink-70); }
.pc__stats { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pc__stats div { background: var(--ground); border-radius: 10px; padding: 9px 11px; }
.pc__stats dt { font: 700 11px/1.2 var(--body); letter-spacing: 0; color: var(--ink-70); }
.pc__stats dd { margin: 3px 0 0; font: 600 18px/1.15 var(--wordmark); letter-spacing: -.01em; }
.pc__group { margin-top: 14px; }
.pc__glabel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 11px/1 var(--body); letter-spacing: 0; color: var(--ink-70); }
.pc__glabel .shp { height: 10px; }
.pc__rows { list-style: none; margin: 0; padding: 0; }
.pc__rows li { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--edge); }
.pc__rows li:first-child { border-top: 0; padding-top: 2px; }
.pc__rt { font-weight: 700; }
.pc__rd { color: var(--ink-70); font-weight: 500; }
.pc__rows--inline li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
.pc__rows--inline .pc__rd { text-align: right; }
.pc__vora { margin-top: 14px; padding: 13px 14px 14px; border-radius: 12px; background: var(--ground); }
.pc__vlabel { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font: 700 11px/1 var(--body); letter-spacing: 0; color: var(--ink-70); }
.pc__vlabel .shp { height: 10px; }
.pc__vname { color: var(--ink); }
.pc__vhead { margin: 0 0 4px; font: 700 15px/1.25 var(--body); }
.pc__vbody { margin: 0; color: var(--ink); font-weight: 500; }
.pc__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pc__act { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 14px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); font: 700 13px/1 var(--body); }
.pc__act--main { background: var(--sun); border-color: var(--sun); }

@media (min-width: 1024px) {
  .os__head { margin-bottom: 28px; display: flex; align-items: baseline; gap: 36px; flex-wrap: wrap; }
  .os__lead { margin: 0; }
  .os__stage { padding-top: 6px; }
  .os__tabs { overflow: visible; padding: 0 0 18px; }
  .os__panel { display: block; height: var(--os-h, clamp(500px, calc(100svh - 170px), 700px)); border-radius: var(--r-lg); overflow: hidden; margin: 0; }
  .os__scene { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
  .os__veil { background: linear-gradient(90deg, rgba(23, 24, 26, .78) 0%, rgba(23, 24, 26, .46) 38%, rgba(23, 24, 26, 0) 64%), linear-gradient(0deg, rgba(23, 24, 26, .5) 0%, rgba(23, 24, 26, 0) 40%); }
  .os__cap { right: auto; width: 44%; padding: 36px 36px 40px 40px; gap: 14px; }
  .os__line { font-size: clamp(30px, 3.1vw, 46px); }
  .os__sub { font-size: 16px; }
  .os__card { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: min(440px, 48%); margin: 0; max-height: calc(100% - 40px); font-size: clamp(13px, 1.7vh, 15px); }
  .os__card .pc { font-size: inherit; padding: 16px 18px 14px; }
  .os__close { margin-top: 36px; }
}
@media (min-width: 1024px) and (max-height: 820px), (min-width: 1024px) and (max-width: 1199px) {
  .pc__stats { gap: 7px 10px; margin-top: 9px; }
  .pc__stats div { padding: 6px 9px; }
  .pc__stats dd { font-size: 16px; }
  .pc__group, .pc__vora { margin-top: 9px; }
  .pc__rows li { padding: 4px 0; }
}

/* ---- 4. our story: THEIR founder photo and their words --------------------------------------------------------- */
.story { padding-block: var(--band-pad); overflow-x: clip; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.story__photo { margin: 0; position: relative; width: min(100%, 440px); aspect-ratio: 800 / 1240; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.story__photo picture, .story__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story__h { font-size: var(--fs-h2); max-width: 15ch; margin-bottom: 26px; }
.story__p { margin: 0 0 18px; max-width: 34rem; font: 500 18px/1.5 var(--body); color: var(--ink-70); }
.story__p--2 { font: 400 clamp(26px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.015em; color: var(--ink); margin: 26px 0; }
.story__sign { margin: 28px 0 0; max-width: 34rem; padding-top: 18px; border-top: 1px solid var(--edge); font: 500 15px/1.45 var(--body); color: var(--ink-70); }
.story__sign strong { color: var(--ink); font-weight: 700; }
@media (min-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); }
  .story__photo { width: 100%; max-width: 480px; justify-self: end; }
}

/* ---- 5. FAQ: the eight questions, an accordion -------------------------------------------------------------------- */
.fq { padding-block: 0 var(--band-pad); }
.fq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.fq__h { line-height: .98; }
.fq__list { border-top: 1.5px solid var(--ink); }
.fq__item { border-bottom: 1px solid var(--edge); }
.fq__qh { margin: 0; font: inherit; }
.fq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 20px 0; background: transparent; border: 0; color: var(--ink); text-align: left; font: 600 18px/1.3 var(--body); cursor: pointer; border-radius: 0; }
.fq__q:focus-visible { outline-offset: -3px; }
.fq__pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); transition: background .25s; }
.fq__pm::before, .fq__pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-rise); }
.fq__pm::after { transform: rotate(90deg); }
.fq__item.is-open .fq__pm { background: var(--sun); }
.fq__item.is-open .fq__pm::after { transform: rotate(0deg); }
.fq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s var(--ease-rise), visibility 0s; }
.fq__ai { overflow: hidden; min-height: 0; }
.fq__ai p { margin: 0 0 22px; max-width: 46rem; color: var(--ink-70); font-size: 17px; line-height: 1.5; }
.fq.is-js .fq__item:not(.is-open) .fq__a { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease-rise), visibility 0s linear .35s; }
@media (min-width: 900px) {
  .fq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .fq__side { position: sticky; top: 130px; }
}
@media (max-width: 899px) {
  /* below 900px the photo is a band across the top of the hero (his face clear of the header pill, the headline and the chat card),
     fading into the ink the headline, the lead and the chat card sit on */
  .hero__photo { top: 28px; bottom: auto; height: clamp(380px, 108vw, 540px); }
  .hero__photo img { object-position: 82% 30%; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; padding-block: clamp(358px, calc(92vw + 28px), 508px) 40px; }
  .hero__veil { top: 28px; bottom: auto; height: clamp(380px, 108vw, 540px); background: linear-gradient(180deg, rgba(23, 24, 26, .5) 0%, rgba(23, 24, 26, 0) 26%, rgba(23, 24, 26, 0) 56%, var(--ink) 100%); }
  .chat { justify-self: stretch; max-width: 460px; }
}
@media (min-width: 900px) {
  /* the chat card is a fixed window on the thread: it never grows tall enough to cover his head, the newest line scrolls into view as it
     arrives, and the earlier lines stay one wheel-turn away. The photo is anchored near the top so his face clears the header pill at every height. */
  .hero__photo img { object-position: 50% 30%; }
  .chat { max-width: 390px; padding: 14px 16px 16px; }
  .chat__head { padding-bottom: 10px; margin-bottom: 12px; }
  .chat__thread { position: relative; gap: 10px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
  .chat__b { font-size: 14px; padding: 9px 13px; }
}
.hero .chat :focus-visible { outline-color: var(--ink); outline-offset: 2px; }
@media (max-width: 479px) {
  .hero__h1 { font-size: 46px; }
  .fq__q { font-size: 17px; }
}