/* Build Your Krakow Trip: landing page.
   Values mirror the Figma file (color/*, space/*, radius/* variables and type/* text styles).
   The 390px mobile frame is the base layout; the 1440px desktop frame starts at 1024px. */

@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre-book.woff") format("woff");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre-extrabold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cygre";
  src: url("../fonts/cygre-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #fffcf6;
  --color-text: #2e1b00;
  --color-accent: #e15731;
  --color-accent-hover: #d34c27;
  --color-on-accent: #1f140b;
  --color-border: #dfd6ca;
  --color-muted: #746352;
  --color-cover: #e05526;

  --radius-image: 12px;
  --radius-button: 8px;

  --font: "Cygre", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Figma "Auto" line height of Cygre ExtraBold; other weights use the exact px values Figma reports */
  --lh-extrabold: 1.75;

  --gutter: 20px;
  --content: 640px;
  --section-pad: 64px;
  --stack: 32px;
  /* Cover unit: 1u equals 1px of the 416px desktop cover; the mobile cover is 286px wide */
  --u: min(0.6875px, (100vw - 40px) * 0.0019643);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  :root { --u: 0.85px; }
}

@media (min-width: 1024px) {
  :root {
    --gutter: clamp(40px, 8.3334vw, 120px);
    --content: 1200px;
    --section-pad: 120px;
    --stack: 48px;
    --u: clamp(0.75px, 0.06945vw, 1px);
  }
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: 350;
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-button);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--color-accent-hover); }

.btn--compact {
  min-width: 123px;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.btn--block { width: 100%; }

.btn--outlined { border: 1.5px solid var(--color-text); }

.btn--secondary {
  border: 1.5px solid var(--color-text);
  background: var(--color-bg);
}
.btn--secondary:hover { background: #f6eee2; }

/* Top bar ---------------------------------------------------------------- */

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.wordmark {
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  text-decoration: none;
}

/* Hero ------------------------------------------------------------------- */

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 64px;
}

.hero__promise {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__title {
  /* Keeps the Figma line break ("Plan your Krakow / day in 5 minutes.") on tablets */
  max-width: 8em;
  color: var(--color-accent);
  font-weight: 800;
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -0.04em;
}

.hero__lead {
  font-size: 17px;
  line-height: 26px;
}

.purchase {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price__value {
  font-weight: 800;
  font-size: 32px;
  line-height: var(--lh-extrabold);
}

.price__note {
  font-size: 14px;
  line-height: 20px;
}

.purchase__reassurance {
  font-size: 13px;
  line-height: 18px;
}

.trust {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.trust__text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
}

/* Guide cover, built from the Figma layers so the type stays sharp at any size */

.hero__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(651.636 * var(--u));
}

.cover {
  position: relative;
  flex: none;
  width: calc(416 * var(--u));
  height: calc(588.692 * var(--u));
  overflow: hidden;
  background: var(--color-cover);
  box-shadow: 0 14px 28px rgba(46, 27, 0, 0.15);
  color: #fff;
  transform: rotate(3deg);
  user-select: none;
}

.cover__strip {
  position: absolute;
  display: flex;
  align-items: center;
  height: calc(86.206 * var(--u));
  padding-left: calc(14.682 * var(--u));
  overflow: hidden;
  background: #fff;
  color: #000;
  font-weight: 900;
  font-size: calc(83.829 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.cover__strip--build { top: calc(35.29 * var(--u)); left: calc(-24.85 * var(--u)); width: calc(278.126 * var(--u)); }
.cover__strip--your { top: calc(118.26 * var(--u)); left: calc(37.63 * var(--u)); width: calc(265.121 * var(--u)); }
.cover__strip--krakow { top: calc(204.41 * var(--u)); left: calc(37.63 * var(--u)); width: calc(412.294 * var(--u)); }
.cover__strip--trip { top: calc(290.64 * var(--u)); left: calc(228.63 * var(--u)); width: calc(219.606 * var(--u)); }

.cover__promise,
.cover__endorsement {
  position: absolute;
  font-weight: 900;
  font-size: calc(21.443 * var(--u));
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.cover__promise {
  top: calc(390.83 * var(--u));
  left: calc(228.63 * var(--u));
  width: calc(181.782 * var(--u));
}

.cover__author {
  position: absolute;
  top: calc(468.44 * var(--u));
  left: calc(228.63 * var(--u));
  font-weight: 600;
  font-size: calc(8.739 * var(--u));
  line-height: 2;
  white-space: nowrap;
}

.cover__footer {
  position: absolute;
  top: calc(509.69 * var(--u));
  left: 0;
  width: 100%;
  height: calc(79.005 * var(--u));
  background: #000;
}

.cover__endorsement {
  top: calc(534.16 * var(--u));
  left: calc(214.99 * var(--u));
  width: calc(395.025 * var(--u));
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Sections --------------------------------------------------------------- */

.section {
  border-top: 1px solid var(--color-border);
  padding-top: calc(var(--section-pad) - 1px);
  padding-bottom: var(--section-pad);
}

.section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

.section-title {
  color: var(--color-accent);
  font-weight: 800;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.03em;
}

.section-title--text { color: var(--color-text); }

/* How it works ----------------------------------------------------------- */

.steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step {
  display: flex;
  align-items: center;
  gap: 16px;
}

.step__number {
  flex: none;
  color: var(--color-accent);
  font-weight: 800;
  font-size: 32px;
  line-height: var(--lh-extrabold);
}

.step__text {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}

.flow {
  font-size: 15px;
  line-height: 21px;
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.slot__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.slot__title {
  color: var(--color-accent);
  font-weight: 800;
  font-size: 28px;
  line-height: var(--lh-extrabold);
}

.slot__hint {
  /* Figma's text box is 132px wide (rounded up), which fixes where the label starts */
  min-width: 132px;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-image);
  /* Inset shadows instead of borders: Figma strokes do not take layout space */
  box-shadow: inset 0 0 0 1px var(--color-border);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.choice:hover { box-shadow: inset 0 0 0 1px #c7b8a4; }
.choice.is-checked,
.choice:has(.choice__input:checked) { box-shadow: inset 0 0 0 2px var(--color-accent); }
.choice:has(.choice__input:focus-visible) {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice__photo {
  width: 100%;
  aspect-ratio: 318 / 160;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.choice__photo img,
.plan__photo img,
.entry__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Auro Café photo uses the exact crop transform from Figma */
.choice__photo--auro,
.entry__photo--auro { position: relative; }
.choice__photo--auro img,
.entry__photo--auro img {
  position: absolute;
  top: -99.4%;
  left: 0;
  height: 232.18%;
  object-fit: fill;
}

.choice__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.checkbox {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}
.checkbox svg {
  position: absolute;
  inset: 0;
}
.checkbox__off { fill: var(--color-text); }
.checkbox__on { opacity: 0; }
.checkbox__on rect { fill: var(--color-accent); }
.checkbox__on path {
  fill: none;
  stroke: var(--color-on-accent);
  stroke-width: 2;
}
.choice.is-checked .checkbox__on,
.choice:has(.choice__input:checked) .checkbox__on { opacity: 1; }
.choice.is-checked .checkbox__off,
.choice:has(.choice__input:checked) .checkbox__off { opacity: 0; }

.choice__name {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
}

.choice__text {
  align-self: stretch;
  font-size: 17px;
  line-height: 26px;
}

.choice__map {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  white-space: nowrap;
}
.choice__map:hover { color: var(--color-accent); }

/* Day plans -------------------------------------------------------------- */

.plans {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.plans::-webkit-scrollbar { display: none; }

.plan {
  display: flex;
  flex: 0 0 286px;
  flex-direction: column;
  gap: 16px;
  min-height: 346px;
  scroll-snap-align: start;
}

.plan__photo {
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.plan__title {
  color: var(--color-accent);
  font-weight: 800;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.plan__text {
  font-size: 16px;
  line-height: 22px;
}

.plans__hint {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 20px;
}

/* Who it is for ---------------------------------------------------------- */

.audience {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.audience__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.audience__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
}

.audience__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.audience__item {
  position: relative;
  min-height: 30px;
  padding-left: 34px;
  font-size: 17px;
  line-height: 26px;
}
.audience__item--minus { padding-left: 27px; }

/* The plus and minus markers are drawn so they look the same on every system */
.audience__item::before,
.audience__item--plus::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
}
.audience__item--plus::before { top: 16.25px; left: 2px; width: 14px; height: 1.5px; }
.audience__item--plus::after { top: 10px; left: 8.25px; width: 1.5px; height: 14px; }
.audience__item--minus::before { top: 16.25px; left: 1px; width: 9px; height: 1.5px; }

/* What you pay for ------------------------------------------------------- */

.values {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.value {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  border-top: 2px solid var(--color-accent);
}

.value__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}

.value__text {
  font-size: 17px;
  line-height: 26px;
}

/* What's inside ---------------------------------------------------------- */

.inside {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.phone {
  width: 304px;
  max-width: 100%;
  padding: 8px;
  border-radius: 28px;
  background: var(--color-text);
}

.phone__bar {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 20px 20px 0 0;
  background: var(--color-bg);
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}
.phone__title { font-weight: 600; }

.phone__page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px;
  background: var(--color-bg);
}

.phone__heading {
  color: var(--color-accent);
  font-weight: 800;
  font-size: 36px;
  line-height: var(--lh-extrabold);
  letter-spacing: -0.03em;
}

.phone__columns {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.phone__column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.phone__column--wide-gap { gap: 24px; }

.entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entry__photo {
  height: 80px;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.entry__name {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.entry__text {
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
}

.phone__edition {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
}

.phone__footer {
  padding: 16px;
  border-radius: 0 0 20px 20px;
  background: var(--color-bg);
}

.phone__maps {
  font-weight: 600;
  font-size: 14px;
  line-height: 23px;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.preview__caption {
  align-self: stretch;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 18px;
}

.included {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 100px));
  gap: 24px;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fact__value {
  color: var(--color-accent);
  font-weight: 800;
  font-size: 44px;
  line-height: var(--lh-extrabold);
}

.fact__label {
  font-size: 16px;
  line-height: 22px;
}

.included__edition {
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
}

.included__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 17px;
  line-height: 26px;
}

.bonus {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 23px;
  border-top: 1px solid var(--color-border);
}

.bonus__title {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
}

.bonus__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bonus__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 26px;
}

.bonus__arrow {
  flex: none;
  color: var(--color-accent);
  font-size: 18px;
  line-height: 28px;
}

/* About ------------------------------------------------------------------ */

.story {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.story__portrait {
  flex: none;
  width: 240px;
  height: 240px;
  overflow: hidden;
  border-radius: 50%;
}
.story__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.story__text {
  font-size: 17px;
  line-height: 26px;
}

.instagram {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.instagram__shot {
  width: 100%;
  max-width: 391px;
  overflow: hidden;
  border-radius: var(--radius-image);
}
.instagram__shot img {
  width: 100%;
  height: auto;
}

.instagram__text {
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
}

.instagram__button { width: 100%; }

/* FAQ -------------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.qa { border-top: 1px solid var(--color-border); }

.qa__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 0 24px;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  list-style: none;
  cursor: pointer;
}
.qa__question::-webkit-details-marker { display: none; }
.qa__question:hover { color: var(--color-accent); }

.qa__icon {
  flex: none;
  /* Figma measures the "+" as 9px wide, which decides where long questions wrap */
  min-width: 9px;
  text-align: right;
  color: var(--color-accent);
  font-weight: 350;
  font-size: 24px;
  line-height: 37px;
}
.qa__icon::before { content: "+"; }
.qa[open] .qa__icon::before { content: "\2212"; }

.qa__answer {
  margin-top: -8px;
  padding-bottom: 24px;
  font-size: 17px;
  line-height: 26px;
}

/* Final call to action --------------------------------------------------- */

.final {
  border-top: 1px solid var(--color-border);
  background: var(--color-accent);
}

.final__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: calc(var(--section-pad) - 1px);
  padding-bottom: var(--section-pad);
}

.purchase--final { gap: 20px; }

/* Footer ----------------------------------------------------------------- */

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 48px;
  /* Leaves room for the sticky mobile bar so it never covers the footer */
  padding-bottom: calc(48px + 88px + env(safe-area-inset-bottom));
}

.footer__wordmark {
  font-size: 24px;
  line-height: 40px;
}

.footer__links {
  display: flex;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-size: 15px;
  line-height: 23px;
}
.footer__links a {
  display: inline-block;
  text-decoration: none;
}
/* Figma rounds each auto-width label up to a whole pixel; these keep the link positions identical */
.footer__links li:nth-child(1) a { min-width: 65px; }
.footer__links li:nth-child(2) a { min-width: 42px; }
.footer__links li:nth-child(3) a { min-width: 157px; }
.footer__links li:nth-child(4) a { min-width: 41px; }
.footer__links li:nth-child(5) a { min-width: 94px; }
.footer__links a:hover { text-decoration: underline; }

.footer__copyright {
  align-self: stretch;
  font-size: 13px;
  line-height: 18px;
}

/* Sticky mobile call to action ------------------------------------------ */

.sticky-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.25s ease, visibility 0.25s;
}
.sticky-cta.is-visible {
  visibility: visible;
  transform: none;
}

.sticky-cta__price {
  min-width: 68px;
  font-weight: 600;
  font-size: 20px;
  line-height: 33px;
  white-space: nowrap;
}

.sticky-cta__button {
  flex: 1 1 0;
  min-width: 0;
}

/* Tablet: the mobile layout with larger headings ------------------------- */

@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero__title {
    font-size: 60px;
    line-height: 64px;
  }
  .section-title {
    font-size: 40px;
    line-height: 46px;
  }
}

/* Desktop ---------------------------------------------------------------- */

@media (min-width: 1024px) {
  .topbar__inner { height: 96px; }
  .wordmark {
    font-size: 24px;
    line-height: 40px;
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(32px, 4.4445vw, 64px);
    padding-top: 72px;
    padding-bottom: 120px;
  }
  .hero__promise {
    flex: 0 1 688px;
    min-width: 0;
  }
  .hero__title {
    font-size: clamp(60px, 6.1112vw, 88px);
    line-height: 1.04545;
  }
  .hero__lead {
    font-size: 18px;
    line-height: 28px;
  }
  .purchase {
    width: 400px;
    max-width: 100%;
  }
  .price__value { font-size: 40px; }
  .hero__cover {
    flex: none;
    width: calc(448 * var(--u));
    height: calc(640 * var(--u));
  }

  .section-title {
    font-size: clamp(44px, 3.8889vw, 56px);
    line-height: 1.10715;
  }

  .steps {
    flex-direction: row;
    gap: 48px;
  }
  .step {
    flex: 1 1 0;
    min-width: 0;
  }
  .step__number { font-size: 40px; }
  .flow {
    font-size: 16px;
    line-height: 22px;
  }

  .slot__title { font-size: 40px; }
  .choices { flex-direction: row; }
  .choice {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
  }
  /* In Figma the selected card is 2px wider than the others (385.33 vs 383.33):
     40px of padding plus 2px, since the basis is measured on the border box */
  .choice.is-checked,
  .choice:has(.choice__input:checked) { flex-basis: 42px; }
  .choice__photo {
    height: 190px;
    aspect-ratio: auto;
  }
  .choice__text {
    font-size: 18px;
    line-height: 28px;
  }

  .plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }
  .plan { min-height: 360px; }
  .plans__hint { display: none; }

  .audience {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(48px, 8.3334vw, 120px);
  }
  .audience__list {
    flex: 1 1 0;
    min-width: 0;
  }
  .audience__item {
    font-size: 18px;
    line-height: 28px;
  }

  .values {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .value {
    flex: 1 1 0;
    min-width: 0;
  }
  .value__text {
    font-size: 18px;
    line-height: 28px;
  }

  .inside {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6.9445vw, 100px);
  }
  .preview { flex: 0 0 420px; }
  .phone { width: 360px; }
  .included {
    flex: 1 1 0;
    min-width: 0;
  }
  .facts { grid-template-columns: repeat(3, minmax(0, 180px)); }
  .fact__value { font-size: 64px; }
  .included__edition,
  .included__details,
  .bonus__item {
    font-size: 18px;
    line-height: 28px;
  }

  .story {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6.9445vw, 100px);
  }
  .story__portrait {
    width: clamp(280px, 26.389vw, 380px);
    height: auto;
    aspect-ratio: 1;
  }
  .story__body {
    flex: 1 1 0;
    min-width: 0;
  }
  .story__text,
  .instagram__text {
    font-size: 18px;
    line-height: 28px;
  }
  .instagram__shot { height: 497px; }
  .instagram__shot img {
    height: 100%;
    object-fit: contain;
  }
  .instagram__button { width: 260px; }

  .faq {
    display: grid;
    grid-template-columns: minmax(0, 420fr) minmax(0, 680fr);
    align-items: start;
    gap: clamp(48px, 6.9445vw, 100px);
  }
  .qa__question {
    font-size: 20px;
    line-height: 26px;
  }
  .qa__answer {
    font-size: 18px;
    line-height: 28px;
  }

  .final__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6.9445vw, 100px);
  }
  .final__title {
    flex: 1 1 0;
    min-width: 0;
  }
  .purchase--final { flex: 0 0 400px; }

  .footer__inner { padding-bottom: 48px; }

  .sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-cta,
  .choice,
  .btn { transition: none; }
}