@font-face { font-family: "Outfit"; src: url("fonts/Outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* TrinketFarm · pastel coastal theme over the scrollcraft engine. */
:root {
  --sc-canvas:     #eef6f7;
  --sc-surface:    #ffffff;
  --sc-ink:        #163e3d;
  --sc-ink-soft:   #4f6f6d;
  --sc-accent:     #ef8a5c;
  --sc-accent-ink: #1a2f2e;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, sans-serif;
  --sc-font-mono:    "DM Sans", system-ui, sans-serif;
  --sc-shadow-color: 185 30% 20%;
  --sc-leading-none: 0.98;
  --sc-track-tight: -0.028em;

  --sky:    #cfe6ee;
  --sea:    #cfebe3;
  --sand:   #f6e9d6;
  --coral:  #fadbcb;
  --butter: #fbefc4;
  --deep:   #163e3d;
  --green:  #146449;
  --coral-strong: #ef8a5c;
}
html { background: var(--sc-canvas); scroll-behavior: smooth; }
body { color: var(--sc-ink); font-weight: 400; }
::selection { background: var(--coral); color: var(--deep); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--sc-font-display); font-weight: 600; text-wrap: balance; margin: 0; }
p, figure { margin: 0; }
.sc-display { font-weight: 600; color: var(--sc-ink); }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.62; }
.sc-body.lede { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.45; }
.eyebrow { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.eyebrow--coral { color: #b04b26; }
.sc-stack > * + * { margin-top: 1.1rem; }

/* --- buttons and links --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  padding: .8rem 1.25rem; border-radius: var(--sc-r-pill); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; line-height: 1;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.btn--lg { padding: 1.05rem 1.6rem; font-size: var(--sc-t-base); }
.btn--ink { background: var(--deep); color: #fff; box-shadow: 0 6px 18px -8px hsl(185 30% 20% / .55); }
.btn--ink:hover { background: #1f5250; transform: translateY(-1px); }
.btn--coral { background: var(--coral-strong); color: var(--deep); box-shadow: 0 8px 22px -10px rgba(239,138,92,.7); }
.btn--coral:hover { background: #f79b71; transform: translateY(-1px); }
.btn--ghost { background: rgba(255,255,255,.7); color: var(--deep); border-color: rgba(22,62,61,.25); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: #fff; border-color: var(--deep); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--coral-strong); outline-offset: 3px; }
.link { color: var(--deep); font-weight: 600; font-family: var(--sc-font-display); text-decoration: none; text-underline-offset: .28em; text-decoration-thickness: 1.5px; }
.link:hover { text-decoration: underline; }
.link--arrow::after { content: " →"; }

/* --- top bar ------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: .7rem var(--sc-gutter);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-scrolled, .bar--solid { background: rgba(238,246,247,.86); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 rgba(22,62,61,.08); }
.bar__brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--deep); justify-self: start; }
.bar__brand img { width: 46px; height: 46px; }
.bar__word { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.bar__word b { font-weight: 700; color: #1a7a5a; }
.bar__nav { display: flex; gap: 1.6rem; }
.bar__nav a { color: var(--deep); text-decoration: none; font-weight: 500; font-size: var(--sc-t-sm); opacity: .85; }
.bar__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .35em; }
.bar__cta { display: flex; gap: 1.1rem; align-items: center; justify-self: end; }
.bar__cta .link { font-size: var(--sc-t-sm); }
@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr; }
  .bar__nav, .bar__cta .link, .bar__word { display: none; }
  .bar__brand img { width: 42px; height: 42px; }
}

/* --- product tiles (shared) ---------------------------------------------- */
.tile {
  background: #fff; border-radius: var(--sc-r-lg); padding: .9rem .9rem 1rem; text-decoration: none; color: var(--deep);
  display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--sc-e1), var(--sc-edge);
  transition: transform 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-3px); box-shadow: var(--sc-e3), var(--sc-edge); } }
.tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(22,62,61,.14)); }
.tile figcaption { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); text-align: center; }
.tile--sky { background: var(--sky); } .tile--sea { background: var(--sea); } .tile--sand { background: var(--sand); }
.tile--coral { background: var(--coral); } .tile--butter { background: var(--butter); }
.tile--more { background: var(--deep); color: #fff; align-items: center; justify-content: center; text-align: center; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); padding: 1.2rem; }
.tile__big { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; color: var(--coral-strong); line-height: 1; }

/* --- 1 · hero ------------------------------------------------------------ */
.hero__stage { overflow: hidden; background: var(--sc-canvas); }
.hero__film { position: absolute; inset: 0; z-index: 0; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__video { opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
.hero__video.is-playing { opacity: 1; }
.hero__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(238,246,247,.96) 0%, rgba(238,246,247,.9) 36%, rgba(238,246,247,.35) 66%, rgba(207,230,238,.18) 100%),
    linear-gradient(180deg, rgba(238,246,247,.5) 0%, rgba(238,246,247,0) 40%, rgba(223,241,236,.5) 100%);
}
.hero__copy {
  position: absolute; z-index: 2; left: var(--sc-gutter); right: var(--sc-gutter);
  top: 50%; translate: 0 -50%; max-width: 40rem;
}
.hero__kicker { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 1.1rem; }
.hero__title { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.4rem); line-height: .98; letter-spacing: -0.03em; color: var(--deep); font-weight: 700; }
.hero__lede { margin-top: 1.4rem; max-width: 34rem; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 9vw, 120px); z-index: 4; }
@media (max-width: 860px) {
  .hero__copy { top: auto; translate: 0 0; bottom: 12vh; max-width: none; }
  .hero__title { font-size: clamp(2.3rem, 1.2rem + 7.5vw, 3.2rem); }
  .hero__lede { font-size: var(--sc-t-base); max-width: 30rem; }
  .hero__wash { background: linear-gradient(180deg, rgba(238,246,247,.25) 0%, rgba(238,246,247,.6) 34%, rgba(238,246,247,.97) 50%, rgba(238,246,247,.98) 100%); }
}

/* --- 2 · story ----------------------------------------------------------- */
.story { padding-block: clamp(3rem, 8vw, 7rem) var(--sc-section); }
.story__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.story__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; border-radius: var(--sc-r-lg); box-shadow: 0 30px 60px -30px rgba(22,62,61,.45); }
.story__fig figcaption { margin-top: .8rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.story__sig { font-family: var(--sc-font-display); font-weight: 600; color: var(--green); }
.story__shop { margin-top: clamp(2.5rem, 5vw, 4rem); }
.story__shop img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; border-radius: var(--sc-r-lg); box-shadow: 0 30px 60px -30px rgba(22,62,61,.45); }
.story__shop p { margin-top: .8rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.shacks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; } .shacks { grid-template-columns: repeat(2, 1fr); } .shacks .tile:last-child { grid-column: span 2; } }

/* --- 3 · keepsakes -------------------------------------------------------- */
.keep { padding-block: var(--sc-section); background: #e4f2ee; }
.minis { background: var(--sc-canvas); }
.keep__head { max-width: 46rem; margin-bottom: 2.4rem; }
.keep__head h2 { margin-bottom: 1rem; }
.keep__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.keep__note { margin-top: 1.8rem; color: var(--sc-ink-soft); }
@media (max-width: 1100px) { .keep__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .keep__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- 4 · minis ----------------------------------------------------------- */
.minis { padding-block: var(--sc-section); }
.minis__head { max-width: 46rem; margin-bottom: 2.4rem; }
.minis__head h2 { margin-block: .6rem 1rem; }
.minis__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .9rem; }
.minis__grid .tile { padding: .6rem .6rem .75rem; }
.minis__grid .tile figcaption { font-size: var(--sc-t-xs); }
@media (max-width: 1100px) { .minis__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 860px) { .minis__grid { grid-template-columns: repeat(4, 1fr); gap: .6rem; } .minis__grid .tile { padding: .45rem .45rem .6rem; border-radius: var(--sc-r-md); } }
@media (max-width: 480px) { .minis__grid { grid-template-columns: repeat(3, 1fr); } }

/* --- 5 · not a variety pack ---------------------------------------------- */
.pick { padding-block: var(--sc-section); background: var(--sand); }
.pick__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.pick__card { background: #fff; border-radius: var(--sc-r-lg); padding: 2rem; box-shadow: 0 30px 60px -30px rgba(22,62,61,.45); }
.pick__card img { width: 100%; height: auto; filter: drop-shadow(0 16px 16px rgba(22,62,61,.18)); }
.pick__fig figcaption { margin-top: .8rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.checks { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.checks li { padding-left: 1.9rem; position: relative; color: var(--sc-ink); font-weight: 500; }
.checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--green); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.checks li::before { background: var(--green); }
.pick .btn { margin-top: .6rem; }
@media (max-width: 860px) { .pick__grid { grid-template-columns: 1fr; } }

/* --- 6 · the guarantee (pinned) ------------------------------------------- */
.promise { background: #fde4d7; }
.promise__stage { overflow: hidden; background: #fde4d7; }
.promise__copy { position: absolute; z-index: 3; left: var(--sc-gutter); right: var(--sc-gutter); top: clamp(5rem, 14vh, 9rem); max-width: 44rem; }
.promise__copy .eyebrow { margin-bottom: 1rem; }
.promise__line { position: absolute; left: 0; right: 0; top: 2.6rem; color: var(--deep); font-weight: 700; line-height: 1.02; }
.promise__line--1 { font-size: clamp(3rem, 2rem + 6vw, 6.8rem); }
.promise__line--2 { font-size: clamp(2.2rem, 1.4rem + 4.2vw, 5rem); }
.promise__line--3 { font-size: clamp(3rem, 2rem + 6vw, 6.8rem); }
.promise__line--3 em { font-style: normal; color: #b04b26; }
.promise__line--4 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem); font-weight: 600; max-width: 30rem; line-height: 1.18; }
.promise__fine { display: block; margin-top: 1rem; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 400; color: var(--sc-ink-soft); line-height: 1.5; }
.breakaway {
  position: absolute; z-index: 2; right: clamp(2rem, 10vw, 12rem); bottom: 6vh;
  width: clamp(240px, 32vw, 520px); aspect-ratio: 666 / 689; --k: 0;
}
.breakaway__shadow { position: absolute; left: 12%; right: 12%; bottom: -6%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(22,62,61,.28), transparent 70%); opacity: calc(1 - var(--k) * .8); }
.breakaway__piece {
  position: absolute; inset: 0;
  background: url("assets/c-shark45.webp") center / 100% 100% no-repeat;
  clip-path: inset(0 calc((5 - var(--n)) * 16.667% - 0.4%) 0 calc(var(--n) * 16.667% - 0.4%));
  transform: translate(calc(var(--dx) * 1px * var(--k)), calc(var(--dy) * 1px * var(--k))) rotate(calc(var(--dr) * 1deg * var(--k)));
  transform-origin: calc(var(--n) * 16.667% + 8.3%) 50%;
  will-change: transform;
  filter: drop-shadow(0 calc(10px + 30px * var(--k)) calc(12px + 20px * var(--k)) rgba(22,62,61,calc(.2 + .1 * var(--k))));
}
.seal { position: absolute; z-index: 4; right: clamp(1rem, 6vw, 8rem); top: clamp(5rem, 14vh, 9rem); animation: spin 26s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 860px) {
  .promise__copy { top: 6rem; }
  .promise__line--1, .promise__line--3 { font-size: clamp(2.4rem, 1.4rem + 8vw, 4rem); }
  .promise__line--2 { font-size: clamp(1.9rem, 1.2rem + 6vw, 3rem); }
  .promise__line--4 { font-size: clamp(1.25rem, 1rem + 3vw, 1.8rem); }
  .breakaway { right: 50%; translate: 50% 0; bottom: 4vh; width: min(62vw, 340px); }
  .seal { right: 1rem; top: auto; bottom: 46vh; width: 96px; height: 96px; }
  .seal svg { width: 96px; height: 96px; }
}

/* --- 7 · tiny tales -------------------------------------------------------- */
.tales { padding-block: var(--sc-section); background: var(--sky); }
.tales__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.tales__cast { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tales__cast img { width: 100%; height: auto; background: #fff; border-radius: var(--sc-r-lg); padding: 10%; box-shadow: var(--sc-e2); }
.tales__cast img:nth-child(2), .tales__cast img:nth-child(3) { translate: 0 1.5rem; }
@media (max-width: 860px) { .tales__grid { grid-template-columns: 1fr; } }

/* --- 8 · custom prints --------------------------------------------------- */
.prints { padding-block: var(--sc-section); background: var(--sand); }
.prints__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .4rem; }
.price__card { background: #fff; border-radius: var(--sc-r-lg); padding: 1.3rem 1.3rem 1.4rem; box-shadow: var(--sc-e1), var(--sc-edge); display: grid; gap: .35rem; align-content: start; }
.price__card--accent { background: var(--deep); color: #fff; }
.price__card--accent h3 { color: #fff; }
.price__card.price__card--accent p { color: #d6e6e3; }
.price__num { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1; color: var(--green); }
.price__card--accent .price__num { color: var(--coral-strong); }
.price__card h3 { font-size: var(--sc-t-lg); }
.price__card p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
@media (max-width: 480px) { .price { grid-template-columns: 1fr; } }
.prints__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.prints__note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.prints__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.prints__steps li { background: #fff; border-radius: var(--sc-r-lg); padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--sc-e1), var(--sc-edge); display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start; }
.prints__steps .how__num { grid-row: span 2; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl); color: var(--green); line-height: 1; }
.prints__steps h3 { font-size: var(--sc-t-lg); }
.prints__steps p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
@media (max-width: 860px) { .prints__grid { grid-template-columns: 1fr; } }

/* --- stl form ----------------------------------------------------------- */
.stlform { background: #fff; border-radius: var(--sc-r-lg); padding: clamp(1.2rem, 2.5vw, 1.8rem); box-shadow: var(--sc-e2), var(--sc-edge); display: grid; gap: .8rem; margin-top: .6rem; }
.stlform h3 { font-size: var(--sc-t-xl); }
.stlform label { display: grid; gap: .3rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--deep); }
.stlform input, .stlform textarea { font: inherit; font-size: var(--sc-t-base); padding: .65rem .8rem; border: 1.5px solid rgba(22,62,61,.22); border-radius: var(--sc-r-md); background: #fff; color: var(--deep); width: 100%; }
.stlform input[type=file] { padding: .45rem; font-size: var(--sc-t-sm); }
.stlform textarea { min-height: 4.5rem; resize: vertical; }
.stlform .row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.stlform .fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.stlform.is-done > :not(.form__ok) { display: none; } .stlform .form__ok { display: none; } .stlform.is-done .form__ok { display: block; }
.prints__grid { align-items: start; }
@media (max-width: 480px) { .stlform .row { grid-template-columns: 1fr; } }

/* --- faq ------------------------------------------------------------------ */
.faq { padding-block: var(--sc-section); background: #e4f2ee; }
.faq__head { margin-bottom: 2rem; }
.faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.faq__group { font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: .6rem; }
.faq details { border-top: 1px solid rgba(22,62,61,.14); padding: .9rem 0; }
.faq details:last-child { border-bottom: 1px solid rgba(22,62,61,.14); }
.faq summary { cursor: pointer; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 700; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .55rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; max-width: 60ch; }
@media (max-width: 860px) { .faq__cols { grid-template-columns: 1fr; } }

/* --- legal pages ----------------------------------------------------------- */
.legal { padding: clamp(6rem, 14vh, 9rem) 0 var(--sc-section); }
.legal .sc-wrap { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: .6rem; }
.legal h2 { font-size: var(--sc-t-xl); margin-top: 2.2rem; margin-bottom: .6rem; }
.legal p, .legal li { color: var(--sc-ink-soft); line-height: 1.65; }
.legal p + p { margin-top: .8rem; }
.legal ul { padding-left: 1.2rem; margin: .5rem 0; display: grid; gap: .35rem; }
.legal .updated { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-bottom: 1.6rem; }

/* --- 9 · close + footer ---------------------------------------------------- */
.close { --sc-ink: #f2f8f7; --sc-ink-soft: #a9c4c1; color: var(--sc-ink); background: var(--deep); overflow: hidden; }
.close__inner { text-align: center; padding: clamp(4rem, 10vw, 7rem) var(--sc-gutter) 0; max-width: 52rem; margin-inline: auto; display: grid; gap: 1.2rem; justify-items: center; }
.close__inner h2 { color: #fff; font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); }
.close__lede { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); max-width: 36rem; }
.close__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.shelf { position: relative; height: clamp(90px, 15vh, 150px); margin-top: 3rem; display: flex; align-items: flex-end; justify-content: center; gap: clamp(.2rem, 1.5vw, 1.4rem); padding-inline: var(--sc-gutter); }
.shelf img { width: clamp(52px, 7vw, 120px); height: auto; filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); margin-bottom: 6px; }
.shelf__board { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(180deg, #2d6a66, #123332); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.foot { padding: 1.2rem var(--sc-gutter) 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: .6rem 2rem; align-items: center; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot__brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-self: end; }
.foot__links a { color: #fff; text-decoration: none; opacity: .85; }
.foot__links a:hover { opacity: 1; text-decoration: underline; }
.foot__fine { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .shelf img:nth-child(7), .shelf img:nth-child(9), .shelf img:nth-child(10) { display: none; }
  .foot { grid-template-columns: 1fr; }
  .foot__links { justify-self: start; }
}

/* --- landing page (start.html) ------------------------------------------- */
.land { padding: clamp(6rem, 14vh, 9rem) 0 var(--sc-section); }
.land__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.land__title { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; font-weight: 700; color: var(--deep); }
.land__badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--coral); color: #7a3417; border-radius: var(--sc-r-pill); padding: .45rem .9rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase; }
.pack { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-top: 1.6rem; }
.pack .tile { padding: .5rem .5rem .6rem; }
.pack .tile figcaption { font-size: var(--sc-t-xs); }
.land__proof { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.land__proof img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2); }
.form {
  background: #fff; border-radius: var(--sc-r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 30px 60px -30px rgba(22,62,61,.4), var(--sc-edge);
  display: grid; gap: 1rem; position: sticky; top: 5.5rem;
}
.form h2 { font-size: var(--sc-t-xl); }
.form label { display: grid; gap: .35rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--deep); }
.form input, .form textarea, .form select { font: inherit; font-size: var(--sc-t-base); padding: .75rem .9rem; border: 1.5px solid rgba(22,62,61,.22); border-radius: var(--sc-r-md); background: #fff; color: var(--deep); width: 100%; }
.form textarea { min-height: 5.5rem; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form .fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.form .btn { width: 100%; }
.form__ok { display: none; text-align: center; padding: 1rem 0; }
.form.is-done form { display: none; } .form.is-done .form__ok { display: block; }
.form__ok img { width: 120px; margin: 0 auto 1rem; }
.hp { position: absolute; left: -9999px; }
.why { padding-block: var(--sc-section); background: #e4f2ee; }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.why__item { background: #fff; border-radius: var(--sc-r-lg); padding: 1.5rem 1.4rem 1.6rem; box-shadow: var(--sc-e1), var(--sc-edge); display: grid; gap: .5rem; align-content: start; }
.why__item:nth-child(2) { background: var(--butter); } .why__item:nth-child(3) { background: var(--coral); }
.why__item h3 { font-size: var(--sc-t-lg); }
.why__item p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.faq { padding-block: var(--sc-section); }
.faq details { border-top: 1px solid rgba(22,62,61,.14); padding: 1rem 0; }
.faq details:last-child { border-bottom: 1px solid rgba(22,62,61,.14); }
.faq summary { cursor: pointer; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .6rem; color: var(--sc-ink-soft); max-width: 60ch; }
@media (max-width: 860px) {
  .land__grid { grid-template-columns: 1fr; }
  .form { position: static; }
  .why__grid { grid-template-columns: 1fr; }
  .pack { grid-template-columns: repeat(5, 1fr); gap: .4rem; }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seal { animation: none; }
  .breakaway { --k: 0 !important; }
  .hero__video { display: none; }
}