/* Cloudsnap homepage V2, built from the Figma frame "Option 2 – Prototype" (V2 brand, Figma Round 2).
   Loaded after home.css and home-c.css: their base rules (resets, the phone mock-ups, the app screens and version
   C's pinned journey) stay in use, and this file sets the V2 page: Roboto Flex and EB Garamond, ivory, paper and ink,
   1328px content between 56px margins, square cards and 52px pill buttons. */

.v2page {
  --c-ivory: #F3EEE5; --c-paper: #FFFCF7; --c-cream: #F0E9DF; --c-sage: #D9DED0; --c-ink: #232323;
  --c-secondary: #6D6861; --c-terra: #A0522D; --c-border: #DDD4CA; --c-peach: #E5A587;
  --rf: 'Roboto Flex', system-ui, sans-serif; --garamond: 'EB Garamond', Georgia, serif;
  --m: 56px; --sec-y: 160px; --header-h: 83px;
  /* Motion tokens for the menu card (version C's values) */
  --dur-ui: 180ms; --dur-move: 420ms; --dur-scene: 800ms;
  --ease-enter: cubic-bezier(.16, 1, .3, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1); --ease-move: cubic-bezier(.65, 0, .35, 1);
  background: var(--c-ivory); color: var(--c-ink); font: 300 18px/1.4 var(--rf);
}
.v2page :focus-visible { outline: 2px solid var(--c-terra); outline-offset: 3px; }
.v2page .v2-dark :focus-visible { outline-color: var(--c-peach); }
.v2-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--m); }
.v2-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---------- Type: the V2 scale ---------- */
.v2page .display { font: 400 80px/1.2 var(--garamond); letter-spacing: 0; text-transform: uppercase; }
.h-xl { font: 500 42px/1.2 var(--rf); }
/* The Greek Heading XL style in Figma is now 44px (its English twin stays 42px). */
html[lang="el"] .h-xl { font-size: 44px; }
html[lang="el"] .v2page .v2 { --fs-h2: 44px; }
.h-lg { font: 500 28px/1.2 var(--rf); }
.h-xs { font: 500 18px/1.2 var(--rf); }
.body-xl { font: 300 20px/1.4 var(--rf); }
.body-lg { font: 300 18px/1.4 var(--rf); }
.body-md { font: 300 16px/1.4 var(--rf); }
.body-sm { font: 300 14px/1.4 var(--rf); }
.eyebrow { font: 500 14px/1.4 var(--rf); letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow-lg { font-size: 16px; }
.muted-70 { color: rgb(35 35 35 / 0.7); }
.secondary { color: var(--c-secondary); }
.terracotta { color: var(--c-terra); }
.muted-on-dark { color: rgb(255 255 255 / 0.7); }
.v2-dark { background: var(--c-ink); color: #fff; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 320px;
  font: 700 14px/1 var(--rf); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms, color 180ms, transform 180ms var(--ease-enter); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn-ink { background: var(--c-ink); color: rgb(255 255 255 / 0.85); }
.btn-ink:hover { background: #3a3a3a; color: #fff; }
.btn-white { background: #fff; color: var(--c-ink); }
.btn-white:hover { background: var(--c-ivory); }
.btn-outline { box-shadow: inset 0 0 0 1px var(--c-ink); color: var(--c-ink); }
.btn-outline:hover { background: var(--c-ink); color: #fff; }
.btn-sm { min-height: 44px; padding: 0 30px; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

/* ---------- Header ---------- */
/* Fixed over the page: the ivory bar, also above the hero photo. */
html:has(.v2page) { scroll-padding-top: 83px; }
.v2-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--c-ivory); color: var(--c-ink); border-bottom: 1px solid rgb(109 104 97 / 0.3); }
.v2-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; height: calc(var(--header-h) - 1px); }
.v2-logo { display: block; flex: none; }
.v2-logo img { height: 42px; width: auto; opacity: 0.88; }
.v2-nav { display: flex; gap: 32px; }
.v2-nav a, .v2-header-tools a:not(.btn) { font: 400 14px/16px var(--rf); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }
.v2-header-tools a:not(.btn) { font-weight: 500; }
.v2-nav a:hover, .v2-header-tools a:not(.btn):hover { text-decoration: underline; text-underline-offset: 6px; }
.v2-nav .has-menu::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.v2-header-tools { display: flex; align-items: center; gap: 20px; }
.v2-header-cta { min-height: 50px; padding: 0 20px; }
.v2page .menu-button { display: none; background: none; border: 0; padding: 8px 0; color: inherit; cursor: pointer; font: 500 14px/16px var(--rf); letter-spacing: 1.5px; }
.v2page .menu-button[aria-expanded="true"]::after { content: ' ×' / ''; }
.v2page .menu-panel { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: 0; color: var(--c-ink); }
.v2page .menu-list a { font-family: var(--rf); }
@media (max-width: 1179px) {
  .v2-nav, .v2-header-tools .hide-narrow { display: none; }
  .v2page .menu-button { display: block; }
}

/* ---------- 1. Hero ---------- */
/* Version C's hero (home-c.css) in the V2 type and colours: centred white text on a veiled photo, and the guest's
   event page in a phone that stands in front of a shallow curve of the page colour. */
/* At 1440 the text block is 960 wide and ends at 686; the phone starts 48px lower and shows 267px, so the hero is
   1001 tall as in Figma, and the ivory curve (an ellipse 130% of the width, 274px tall) rises 124px into it. */
.v2-hero { --phone-show: 267px; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 148px; color: #fff; text-align: center; overflow-x: clip; }
.v2-hero-photo { position: absolute; inset: 0; background-position: 50% 30%; }
.v2-hero-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(35 35 35 / 0.62) 0%, rgb(35 35 35 / 0.62) 50%, rgb(35 35 35 / 0.1) 100%); }
.v2-hero::after { content: ''; position: absolute; left: -15%; right: -15%; bottom: -150px; height: 274px; border-radius: 50%; background: var(--c-ivory); z-index: 1; }
.v2-hero-center { position: relative; z-index: 2; max-width: calc(960px + 2 * var(--m)); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.v2-hero .display { margin-bottom: 8px; }
.v2-hero .display .line { display: block; }
.v2-hero-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v2-hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 8px; }
.v2-text-link { font: 500 16px/1.2 var(--rf); color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.v2-text-link:hover { text-decoration-thickness: 2px; }
.v2-hero :focus-visible { outline-color: #fff; }
.v2-hero-phone-wrap { position: relative; z-index: 3; align-self: stretch; height: var(--phone-show); margin-top: 48px; display: flex; justify-content: center; }
.v2-hero-phone-wrap .phone { position: absolute; top: 0; }

/* ---------- 2. How it works: version C's journey with the V2 tokens ----------
   The section swaps the shared tokens for the V2 ones, so C's journey rules render in Roboto Flex with V2 colours and
   sizes; the app screens and photo cards keep the product's own look. Step 2 moves the phone right, step 3 stays light. */
/* The 620px hero phone shows 267px inside the hero, so 353px hang below it; as in Figma the heading starts 480px
   below the hero, and the subtitle sits 8px under it. */
.v2page .journey-intro { padding-top: 480px; padding-bottom: 19px; }
.v2page .journey-intro.v2 .lead { max-width: 478px; }
.v2page .v2 {
  --ink: #232323; --ink-muted: #6D6861; --paper: #F3EEE5; --paper-raised: #F3EEE5; --line: #DDD4CA;
  --accent-on-light: #A0522D; --sans: 'Roboto Flex', system-ui, sans-serif;
  --fs-h2: 42px; --lh-h2: 1.2; --fs-body: 18px; --lh-body: 1.4; --fs-small: 14px; --tracking-label: 1.5px;
  background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--sans);
}
.v2page .v2 :is(.phone, .float-card, .jstep-media) {
  --ink: #1F1D1A; --ink-muted: #5E5850; --paper: #F1EEE7; --paper-raised: #FAF8F4; --line: #D8D2C6;
  --sans: 'Manrope', system-ui, sans-serif; --fs-body: 17px; --lh-body: 1.55; --fs-small: 13px; --tracking-label: 0.08em;
}
.v2page .v2 .h2 { letter-spacing: 0; }
.v2page .v2 :is(.lead, .muted) { font-weight: 300; max-width: 520px; }
.v2page .v2 .label { font-weight: 500; }
.v2page .v2 .pill { padding: 19px 24px; font-weight: 700; }
.v2page .v2 .pill-ink { color: rgb(255 255 255 / 0.85); }
.v2page .v2 .wrap { max-width: 1440px; padding: 0 var(--m); }
.v2page .journey-intro.v2 .wrap { gap: 8px; }
@media (min-width: 761px) {
  .v2page .journey.v2 .journey-sticky { top: var(--header-h); height: calc(100vh - var(--header-h)); justify-content: flex-start; padding-top: 24px; }
  .v2page .journey.v2[data-chapter] { background: var(--paper); color: var(--ink); }
  .v2page .journey.v2[data-chapter="2"] :is(.journey-stage, .journey-copy) { transform: none; }
  .v2page .journey.v2[data-chapter="2"] .muted { color: var(--ink-muted); }
  .v2page .journey.v2[data-chapter="2"] .jstep-label { color: var(--accent-on-light); }
  .v2page .journey.v2[data-chapter="2"] .support { border-color: var(--ink); }
  .v2page .journey.v2[data-chapter="2"] :focus-visible { outline-color: var(--c-terra); }
  /* Positions from the Figma component "Prototype / How it works" (2021:3307), measured on its 1440px frame:
     the phone's left edge sits at 310 (step 1), 838 (step 2) and 298 (step 3); step 2's text starts at 168. */
  .v2page .journey.v2[data-step="1"] .journey-stage { transform: translateX(88px); }
  .v2page .journey.v2[data-step="3"] .journey-stage { transform: translateX(76px); }
  .v2page .journey.v2[data-step="2"] .journey-stage { transform: translateX(calc(100% - 16px)); }
  .v2page .journey.v2[data-step="2"] .journey-copy { transform: translateX(calc(-100% + 48px)); }
  /* The photo cards beside the phone, placed as in the design */
  .v2page .journey.v2 .float-setup { translate: -22px 9px; }
  .v2page .journey.v2 .float-qr { translate: -22px 9px; }
  .v2page .journey.v2 .float-upload { translate: -6px 6px; }
  /* Step 4 has the warm glow behind the phone but no orbit lines in the design. */
  .v2page .journey.v2 .orbit { display: none; }
  /* Step 4's photos sit a little closer to the phone than C's orbit places them (offsets in the unscaled stage). */
  .v2page .journey.v2 .memories .memory:nth-child(1) { translate: calc(-50% + 7px) calc(-50% + 13px); }
  .v2page .journey.v2 .memories .memory:nth-child(2) { translate: calc(-50% + 24px) calc(-50% + 8px); }
  .v2page .journey.v2 .memories .memory:nth-child(3) { translate: calc(-50% + 12px) calc(-50% + 15px); }
  .v2page .journey.v2 .memories .memory:nth-child(4) { translate: calc(-50% - 7px) calc(-50% + 8px); }
  .v2page .journey.v2 .memories .memory:nth-child(5) { translate: calc(-50% - 22px) calc(-50% + 15px); }
  .v2page .journey.v2 .memories .memory:nth-child(6) { translate: calc(-50% - 12px) calc(-50% + 8px); }
  /* The phone travels between steps 1, 2 and 3 too, so their screens and text wait for it as between chapters. */
  .v2page .journey.v2:is([data-step="1"], [data-step="2"], [data-step="3"]) { --swap-delay: 280ms !important; }
  /* Step 4: the shrunken phone's top meets the scene's top edge, 24px left of centre, with the text 16px left of centre
     below it, as in the design. */
  .v2page .journey.v2[data-chapter="3"] .journey-stage { transform: translateX(calc(50% + 8px)) translateY(-12vh) scale(0.78); }
  .v2page .journey.v2[data-chapter="3"] .journey-copy { transform: translateX(calc(-50% - 48px)) translateY(30vh); }
}
.v2page .v2 :is(.float-setup, .float-upload, .qr-photo, .jstep-media .scene) { border-radius: 0; }
/* The fuller host screens in the journey phone (see screenOptions in app-screens.mjs) */
.v2page .app-preview { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.v2page .app-preview .tile { width: 48px; aspect-ratio: 1; flex: none; border-radius: 6px; }
.v2page .app-preview .event-title { font-size: var(--fs-body); }
.v2page .app-share-row { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.v2page .app-share-row .app-round { width: 40px; height: 40px; background: var(--white); }
.v2page .app-share-row svg { width: 18px; height: 18px; }

/* ---------- 3. Every event ---------- */
.v2-events { padding: 128px 0; }
.v2-events-head { display: grid; grid-template-columns: minmax(0, 513px) minmax(0, 477px); column-gap: 68px; align-items: end; }
.v2-events-grid { display: grid; grid-template-columns: minmax(0, 737fr) minmax(0, 527fr); gap: 64px; margin-top: 72px; align-items: start; }
.v2-event-list li { border-top: 1px solid rgb(241 238 231 / 0.16); }
.v2-event-list li:last-child { border-bottom: 1px solid rgb(241 238 231 / 0.16); }
.v2-event-list button { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; min-height: 75px; padding: 0 20px;
  font: 500 24px/1.2 var(--rf); color: #fff; cursor: pointer; transition: background-color 180ms; }
.v2-event-list button:hover, .v2-event-list li:has(> [aria-expanded="true"]) { background: rgb(241 238 231 / 0.08); }
.v2-event-list button:focus-visible { outline: 2px solid var(--c-peach); outline-offset: -2px; }
.v2-sign::before { content: '+'; font-weight: 300; }
[aria-expanded="true"] > .v2-sign::before { content: '–'; }
/* The open row's panel sits under its name: text and link on wide screens (the photo and phone are in the preview
   column), and the photo and phone too on phones. */
.v2-event-panel { display: none; }
.v2-event-list [aria-expanded="true"] + .v2-event-panel { display: flex; flex-direction: column; gap: 16px; padding: 0 20px 28px; animation: v2-panel-in 260ms ease-out; }
.v2-event-panel .body-lg { max-width: 560px; }
@keyframes v2-panel-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .v2-event-list [aria-expanded="true"] + .v2-event-panel { animation: none; } }
@media (min-width: 761px) { .v2-event-panel .v2-event-stage { display: none; } }
.v2-event-stage { position: relative; display: grid; place-items: center; aspect-ratio: 527 / 700; overflow: hidden; }
.v2-event-photo { position: absolute; inset: 0; }
.v2-event-photo::after { content: ''; position: absolute; inset: 0; background: rgb(31 29 26 / 0.15); }
.v2-event-stage .phone { position: relative; z-index: 1; box-shadow: none; }
.v2-link-peach { align-self: flex-start; font: 500 16px/1.2 var(--rf); color: var(--c-peach); text-decoration: underline; text-underline-offset: 4px; }
.v2-link-peach:hover { text-decoration-thickness: 2px; }

/* ---------- 4. Six reasons ---------- */
.v2-why { background: var(--c-paper); padding: var(--sec-y) 0; }
.v2-why-heading { max-width: 563px; margin-bottom: 56px; }
.v2-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; row-gap: 97px; position: relative; }
/* The divider between the two rows sits halfway through the row gap. */
.v2-why-grid::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); border-top: 1px solid var(--c-border); }
.v2-why-grid li { display: flex; flex-direction: column; gap: 16px; padding-right: 0; }
.v2-why-grid li:not(:nth-child(3n)) { border-right: 1px solid var(--c-cream); }
.v2-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; background: var(--c-cream); }
.v2-why-grid .body-lg { padding-right: 24px; }
.v2-limits { display: block; margin-top: 25px; white-space: pre-line; }

/* ---------- 5. Privacy ---------- */
.v2-privacy { display: grid; grid-template-columns: 708fr 732fr; }
.v2-privacy-photo { min-height: 100%; background-position: 50% 50%; }
.v2-privacy-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: var(--sec-y) var(--m) var(--sec-y) 80px; max-width: 696px; }
.v2-privacy-text .h-xl { max-width: 481px; }
.v2-privacy-text .btn { margin-top: 8px; }
.v2-checks { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.v2-checks li { display: flex; gap: 8px; }
.v2-checks svg { flex: none; }
.v2-checks div { display: flex; flex-direction: column; gap: 4px; }

/* ---------- 6. Comparison ---------- */
.v2-compare { background: var(--c-paper); padding: var(--sec-y) 0; }
.v2-compare-intro { max-width: 610px; margin-top: 24px; }
.v2-table-wrap { width: 100%; max-width: 878px; margin: 48px 0; overflow-x: auto; }
.v2-table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-cream); text-align: left; font: 400 16px/1.4 var(--rf); }
.v2-table :is(th, td) { padding: 16px; border: 1px solid var(--c-cream); vertical-align: middle; }
.v2-table thead :is(th, td) { font: 500 16px/1.4 var(--rf); letter-spacing: 1.5px; text-transform: uppercase; }
.v2-table tbody th { width: 160px; font-weight: 600; }
.v2-table .is-us { background: var(--c-sage); text-align: center; }
.v2-table td.is-us svg { display: inline-block; vertical-align: -3px; margin-right: 10px; }

/* ---------- 7. Pricing ---------- */
.v2-pricing { background: var(--c-cream); padding: 128px 0; }
.v2-pricing-grid { display: grid; grid-template-columns: minmax(0, 527fr) minmax(0, 369fr) minmax(0, 369fr); gap: 32px; align-items: start; }
.v2-pricing-text { display: flex; flex-direction: column; gap: 20px; padding-right: 24px; }
.v2-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 36px 32px; background: var(--c-paper); }
.v2-price { font: 500 40px/1 var(--rf); }
.v2-plan ul { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; font: 400 16px/1.4 var(--rf); }

/* ---------- 8. FAQ ---------- */
.v2-faq { padding: 128px 0; }
.v2-faq-list { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 8px; margin-top: 47px; text-align: left; interpolate-size: allow-keywords; }
.v2-faq-list details { background: var(--c-paper); }
.v2-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 28px; cursor: pointer; list-style: none; font: 500 20px/1.4 var(--rf); }
.v2-faq-list summary::-webkit-details-marker { display: none; }
.v2-faq-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c-cream); font: 300 18px/1 var(--rf); transition: background-color 180ms, color 180ms; }
.v2-faq-icon::before { content: '+'; }
.v2-faq-list details[open] .v2-faq-icon { background: var(--c-ink); color: #fff; }
.v2-faq-list details[open] .v2-faq-icon::before { content: '–'; }
.v2-faq-list details p { padding: 0 88px 24px 28px; }
.v2-faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-move) var(--ease-move), content-visibility var(--dur-move) allow-discrete; }
.v2-faq-list details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .v2-faq-list details::details-content { transition: none; } }

/* ---------- 9. Founder ---------- */
.v2-founder { background: var(--c-sage); padding: 128px 0; }
.v2-founder-grid { display: grid; grid-template-columns: minmax(0, 419px) minmax(0, 780px); justify-content: space-between; align-items: center; gap: 72px; }
.v2-founder-photo { aspect-ratio: 419 / 503; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--c-paper); color: var(--c-ink); }
.v2-founder-initials { font: 400 144px/1 var(--garamond); letter-spacing: 0.04em; }
.v2-founder-initials::after { content: ''; display: block; width: 48px; height: 1px; margin: 28px auto 0; background: var(--c-terra); }
.v2-founder-quote { display: flex; flex-direction: column; gap: 28px; }
.v2-founder-quote q { quotes: '«' '»'; }
:lang(en) .v2-founder-quote q { quotes: '“' '”'; }

/* ---------- 10. Closing ---------- */
.v2-closing { position: relative; padding: var(--sec-y) 0; background: var(--c-ink) var(--photo-src) 50% 50% / cover no-repeat; }
.v2-closing::before { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 0.7); }
.v2-closing .v2-wrap { position: relative; gap: 24px; }
.v2-closing .h-xl { max-width: 765px; }
.v2-closing .body-xl { max-width: 560px; }
.v2-closing .btn { margin-top: 16px; }

/* ---------- Footer ---------- */
.v2-footer { padding: 80px 48px 40px; }
.v2-footer-top { display: flex; justify-content: space-between; gap: 64px; padding-bottom: 79px; border-bottom: 1px solid rgb(255 255 255 / 0.3); }
.v2-logo-footer img { height: 48px; }
.v2-footer-brand { display: flex; flex-direction: column; gap: 24px; }
.v2-tagline { font-weight: 400; white-space: pre-line; }
.v2-socials { display: flex; gap: 16px; margin-top: 16px; color: rgb(255 255 255 / 0.5); }
.v2-socials a { display: block; color: inherit; }
.v2-socials a:hover { color: #fff; }
.v2-footer-cols { display: flex; gap: 80px; margin-right: 21px; }
.v2-footer-cols ul { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.v2-col-head { font: 500 16px/1.2 var(--rf); }
.v2-footer a { color: rgb(255 255 255 / 0.7); text-decoration: none; font: 400 16px/1.2 var(--rf); }
.v2-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.v2-footer-bottom { display: flex; justify-content: space-between; gap: 48px; padding-top: 40px; font: 400 16px/1.2 var(--rf); }
.v2-legal { display: flex; flex-wrap: wrap; gap: 16px 24px; max-width: 886px; }
.v2-legal a { font-weight: 500; }

/* ---------- Placeholders and the review bar ---------- */
.v2page .ph-label { font: 400 14px/1.4 var(--rf); }

/* ---------- Medium screens ---------- */
@media (max-width: 1279px) {
  .v2page { --m: 40px; }
  .v2page .display { font-size: 64px; }
  .v2-why-grid { column-gap: 40px; }
  .v2-pricing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v2-pricing-text { grid-column: 1 / -1; padding-right: 0; }
  .v2-footer-top { flex-direction: column; }
}
@media (max-width: 1023px) {
  .v2-events-head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .v2-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 64px; }
  .v2-why-grid::before { display: none; }
  .v2-why-grid li, .v2-why-grid li:not(:nth-child(3n)) { border-right: 0; border-bottom: 1px solid var(--c-cream); padding-bottom: 40px; }
  .v2-privacy { grid-template-columns: minmax(0, 1fr); }
  .v2-privacy-photo { min-height: 420px; }
  .v2-privacy-text { max-width: none; padding: 96px var(--m); }
  .v2-founder-grid { grid-template-columns: minmax(0, 1fr); }
  .v2-founder-photo { width: min(419px, 70%); }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .v2page { --m: 16px; --sec-y: 80px; --header-h: 65px; }
  .v2-logo img { height: 32px; }
  .v2-header-cta { display: none; }
  .v2page .display { font-size: 36px; }
  .h-xl, html[lang="el"] .h-xl { font-size: 28px; }
  .h-lg { font-size: 24px; }
  .body-xl, .body-lg { font-size: 16px; }
  /* Version C's phone hero: a deeper veil behind the text, stacked buttons, a wider phone */
  .v2-hero { --phone-show: 300px; padding-top: 112px; }
  .v2-hero-photo::after { background: linear-gradient(180deg, rgb(35 35 35 / 0.68) 0%, rgb(35 35 35 / 0.68) 62%, rgb(35 35 35 / 0.15) 100%); }
  .v2-hero-actions { flex-direction: column; gap: 16px; }
  .v2-hero-phone-wrap .phone { width: 82%; max-width: 320px; }
  .v2-hero::after { bottom: -60px; height: 120px; }
  /* the phone (620/300 as tall as it is wide) hangs below the hero by its height less the part shown; 56px clear */
  .v2page .journey-intro { padding-top: calc(min(82vw, 320px) * 620 / 300 - var(--phone-show, 300px) + 56px); }
  .v2page .v2, html[lang="el"] .v2page .v2 { --fs-h2: 28px; --fs-body: 16px; }
  .v2page .v2 .wrap { padding: 0 16px; }
  .v2page .v2 .jstep[data-chapter="2"] { background: none; color: inherit; margin: 0; padding: 40px 0; }
  .v2page .v2 .jstep[data-chapter="2"] .muted { color: var(--ink-muted); }
  .v2page .v2 .jstep[data-chapter="2"] .jstep-label { color: var(--accent-on-light); }
  .v2page .v2 .jstep[data-chapter="2"] .support { border-color: var(--ink); }
  .v2-events { padding: 80px 0; }
  .v2-events-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .v2-event-preview { display: none; }
  .v2-event-list button { font-size: 20px; min-height: 64px; padding: 0 12px; }
  .v2-event-list [aria-expanded="true"] + .v2-event-panel { padding: 8px 12px 28px; }
  .v2-event-panel .v2-event-stage { aspect-ratio: 3 / 4; }
  .v2-event-panel .phone { zoom: 0.72; }
  .v2-why-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .v2-why-heading { margin-bottom: 40px; }
  .v2-icon { margin-bottom: 8px; }
  .v2-privacy-photo { min-height: 300px; }
  .v2-privacy-text { padding: 80px var(--m); }
  .v2-table-wrap { margin: 32px 0; }
  .v2-table { min-width: 560px; font-size: 14px; }
  .v2-pricing { padding: 80px 0; }
  .v2-pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v2-faq { padding: 80px 0; }
  .v2-faq-list { margin-top: 32px; }
  .v2-faq-list summary { font-size: 17px; padding: 18px 16px; }
  .v2-faq-list details p { padding: 0 16px 20px; }
  .v2-founder { padding: 80px 0; }
  .v2-founder-grid { gap: 32px; }
  .v2-founder-initials { font-size: 96px; }
  .v2-closing { padding: 96px 0; }
  .v2-footer { padding: 56px 16px 32px; }
  .v2-footer-top { gap: 40px; padding-bottom: 40px; }
  .v2-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-right: 0; }
  .v2-footer-bottom { flex-direction: column; gap: 24px; }
}