/* Only what is unique to the public website. */
.web main { display: block; }
.web section[id] { scroll-margin-top: 16px; }

/* ---- Header: sits on the sea-glass fold ---- */
#site-header { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-sticky); }
.site-head { display: flex; align-items: center; gap: var(--s-5); min-height: 80px; }
.site-head nav { display: flex; gap: 2px; margin-left: auto; }
.site-head nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-ctl); color: var(--ink); font-weight: 600; font-size: var(--t-15); text-decoration: none; }
.site-head nav a:hover { background: oklch(1 0 0 / 0.35); }
@media (max-width: 900px) { .site-head nav { display: none; } .site-head .btn { margin-left: auto; } }

/* ---- Fold ---- */
.fold { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--accent); color: var(--on-accent); }
.fold > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-7); align-items: center; padding-block: 112px calc(var(--pocbar-h) + var(--s-6)); }
.fold-col { position: relative; max-width: 620px; }
.fold h1 { margin: 0; font-size: var(--fs-display); max-width: 11ch; }
.fold .hand-line { margin: var(--s-3) 0 var(--s-5); font: 400 clamp(1.35rem, 0.95rem + 1.6vw, 2.3rem)/1.5 var(--font-hand); }
.fold .lead { max-width: 40ch; margin-bottom: var(--s-6); color: var(--ink); }
.roleband { display: grid; gap: var(--s-2); }
.role-main {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%;
  min-height: 66px; padding: var(--s-3) var(--s-5); border: 0; border-radius: var(--r-ctl);
  background: var(--ink); color: var(--on-primary); box-shadow: 0 3px 0 var(--primary-strong);
  font: 700 var(--t-18)/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.role-main small { display: block; margin-top: 2px; font-size: var(--t-14); font-weight: 400; color: var(--on-drench-muted); }
.role-main:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--primary-strong); }
.role-main:active { transform: translateY(2px); box-shadow: none; }
.team-label { margin: var(--s-3) 0 0; font-size: var(--t-14); font-weight: 700; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.key {
  display: grid; gap: 6px; align-content: center; justify-items: start; min-height: 66px; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); box-shadow: var(--press-soft);
  font: 700 var(--t-14)/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.key .ico { width: 18px; height: 18px; }
.key:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.key:active { transform: translateY(2px); box-shadow: none; }

.collage { position: relative; height: min(640px, 74vh); }
.collage .print { position: absolute; }
.collage .p1 { width: 52%; left: 2%; top: 4%; --tilt: -4deg; }
.collage .p2 { width: 40%; right: 2%; top: 14%; --tilt: 5deg; --ar: 4 / 5; }
.collage .p3 { width: 36%; left: 22%; bottom: 2%; --tilt: 2deg; }
.collage .stamp { position: absolute; left: 47%; top: 1%; transform: rotate(8deg); z-index: 3; }
.collage .postmark { position: absolute; left: 55%; top: 9%; z-index: 4; color: var(--ink); box-shadow: none; background: transparent; }
.collage .note { position: absolute; right: 4%; bottom: 7%; width: min(300px, 46%); z-index: 3; --tilt: -3deg; }
.fold-thumb { display: none; }

@media (max-width: 900px) {
  .fold > .wrap { grid-template-columns: 1fr; padding-top: 96px; }
  .collage { display: none; }
  .fold-thumb { display: block; position: absolute; right: 0; top: -6px; width: 112px; --tilt: 6deg; padding: 6px 6px 22px; }
  .fold-thumb figcaption { font-size: 11px; bottom: 3px; left: 8px; }
  .fold h1 { max-width: 8.5ch; }
}
@media (max-width: 600px) {
  .fold h1 { font-size: 2.6rem; }
  .fold .hand-line { margin: var(--s-2) 0 var(--s-3); }
  .fold .lead { font-size: var(--t-16); margin-bottom: var(--s-4); }
  .team { grid-template-columns: 1fr 1fr; }
  .key, .role-main { min-height: 56px; }
}

/* ---- Bands ---- */
.band { padding-block: var(--section); }
.band h2 { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); line-height: 1; max-width: 16ch; }
.band .lead { max-width: 52ch; }
.band-sea { background: var(--accent-soft); }
.band-ink { background: var(--drench); color: var(--on-drench); }
.band-ink h2, .band-ink h3 { color: var(--on-drench); }
.band-ink .lead { color: var(--on-drench-muted); }

/* Your people: the live slice */
.slice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.slice-side { display: grid; gap: var(--s-4); }
.slice .kith { max-width: 480px; }
.count { font-size: var(--t-16); color: var(--ink-2); max-width: 44ch; margin: 0; }
.count b { font-size: var(--t-22); color: var(--ink); }

/* Known */
.known { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; }
.known-art { position: relative; }
.known-art .print { --tilt: -2deg; }
.known-art .postmark { position: absolute; right: -14px; bottom: -18px; background: var(--bg); }

/* Kept */
.kept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.kept-art { display: grid; gap: var(--s-6); }
.kept-art .note { font-size: var(--t-18); }
.sealed { display: flex; align-items: center; gap: var(--s-4); }
.sealed p { margin: 0; color: var(--ink-2); }
.sealed b { display: block; color: var(--ink); }
.versions { list-style: none; margin: 0; padding: 0; }
.versions li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; min-height: 60px; padding: var(--s-2) 0; border-bottom: var(--rule); }
.versions b { font-weight: 700; }
.versions .why { font-size: var(--t-14); color: var(--muted); }

/* Private */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.promises li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--drench-line); }
.promises .ico { color: var(--accent); margin-top: 3px; }
.promises b { display: block; font-size: var(--t-18); color: var(--on-drench); }
.promises span { color: var(--on-drench-muted); }

/* Safety */
.safe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.safe-photo { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.safe-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.safe-photo figcaption { padding-top: var(--s-2); font-size: var(--t-14); color: var(--muted); }
.wellbeing { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.wellbeing li { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--rule); }

/* Who it's for */
.for { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.for-main .print { --tilt: -1.5deg; --ar: 5 / 4; }
.for-side { display: grid; gap: var(--s-6); }
.story { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.story .print { padding: 6px 6px 8px; --tilt: 2deg; }
.story h3, .for-main h3 { font-size: var(--t-22); margin: 0 0 var(--s-2); letter-spacing: -0.02em; }
.story p, .for-main p { margin: 0; color: var(--ink-2); }
.for-main .txt { margin-top: var(--s-5); max-width: 52ch; }

/* Pricing */
.price-table { width: 100%; max-width: 880px; font-size: var(--t-16); }
.price-table th, .price-table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: var(--rule); }
.price-table thead th { vertical-align: bottom; padding-bottom: var(--s-4); }
.price-table thead b { display: block; font-size: var(--t-22); letter-spacing: -0.02em; }
.price-table .amt { font: 800 var(--t-28)/1.1 var(--font-display); letter-spacing: -0.03em; }
.price-table .per { font-size: var(--t-14); color: var(--muted); font-weight: 400; }
.price-table td:not(:first-child), .price-table th:not(:first-child) { text-align: center; }
.price-table .ico { margin-inline: auto; }
.price-table .plus { background: var(--sun-soft); }
.price-wrap { overflow-x: auto; }

/* FAQ */
.faq > * { max-width: 820px; }

/* ---- Footer ---- */
#site-footer { background: var(--surface-2); padding-block: var(--s-8) calc(var(--pocbar-h) + var(--s-6)); }
.site-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); }
.site-foot h2 { font-size: var(--t-15); letter-spacing: 0; margin: 0 0 var(--s-3); }
.site-foot a, .site-foot .foot-link { display: block; padding: 6px 0; border: 0; background: none; color: var(--ink-2); font: 400 var(--t-15) var(--font-body); text-decoration: none; text-align: left; cursor: pointer; }
.site-foot a:hover, .site-foot .foot-link:hover { color: var(--ink); text-decoration: underline; }
.site-foot p { margin: 0 0 var(--s-2); font-size: var(--t-15); color: var(--ink-2); }
.site-foot .brandmark { display: inline-flex; padding: 0; font: 800 var(--t-22)/1 var(--font-display); color: var(--ink); }
.site-foot .brandmark:hover { text-decoration: none; }
.foot-brand .hand { margin-top: var(--s-3); font-size: var(--t-18); color: var(--ink); }
.foot-legal { grid-column: 1 / -1; padding-top: var(--s-5); border-top: var(--rule); font-size: var(--t-14) !important; }

@media (max-width: 960px) {
  .slice, .known, .kept, .safe, .for { grid-template-columns: 1fr; gap: var(--s-6); }
  .site-foot { grid-template-columns: 1fr 1fr; }
  .promises { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-foot { grid-template-columns: 1fr; }
  .story { grid-template-columns: 110px minmax(0, 1fr); }
  .known-art .postmark { right: 6px; }
  .price-table th, .price-table td { padding: 10px 6px; font-size: var(--t-14); }
  .price-table thead b { font-size: var(--t-16); }
  .price-table .amt { font-size: var(--t-18); }
  .price-table .per { display: block; }
  .price-table .btn-sm { padding: 0 var(--s-2); font-size: var(--t-13); }
  .versions li { grid-template-columns: 1fr auto; }
  .versions li .why { grid-column: 1 / -1; }
}