/* ==========================================================================
   SmaakApp marketing site
   Design tokens and components ported from the Claude Design canvas
   (see Design/ for the original .dc.html source).
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --bg: #FBF4E8;
  --bg-img: url('../img/bg-light.jpeg');
  --card: #FFFFFF;
  --card2: #F5EAD8;
  --ink: #314155;
  --muted: #5C6B80;
  --line: #E8DCC6;
  --accent: #E15241;
  --amber: #F2B14D;
  --teal: #75B4A2;
  --salmon: #F5917A;
  --panel: #314155;
  --panel-ink: #FEFDF9;
  --panel-muted: rgba(254, 253, 249, 0.7);
  --panel-line: rgba(254, 253, 249, 0.14);
  --panel-chip: rgba(254, 253, 249, 0.08);
  --shadow: 0 8px 24px -14px rgba(49, 65, 85, 0.35);
  --shadow-hover: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] {
  --bg: #151A24;
  --bg-img: url('../img/bg-dark.jpeg');
  --card: #1E2531;
  --card2: #27303F;
  --ink: #F2EFE7;
  --muted: #9AA3B5;
  --line: rgba(255, 255, 255, 0.09);
  --accent: #E15241;
  --panel: #1E2531;
  --panel-ink: #F2EFE7;
  --panel-muted: #9AA3B5;
  --panel-line: rgba(255, 255, 255, 0.09);
  --panel-chip: rgba(255, 255, 255, 0.05);
  --shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6);
}

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

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

html, body { margin: 0; padding: 0; background: var(--bg); }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Tiled paper texture behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-img);
  background-size: 480px;
  background-repeat: repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--accent); color: #FEFDF9; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.page { position: relative; z-index: 1; overflow: clip; }
.wrap { max-width: 1280px; margin: 0 auto; }
.script { font-family: 'Pacifico', cursive; font-weight: 400; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--accent); color: #FEFDF9; padding: 10px 18px;
  border-radius: 999px; font-weight: 800;
}
.skip-link:focus { left: 8px; color: #FEFDF9; }

/* --- Animations ----------------------------------------------------------- */

@keyframes smk-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes smk-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

/* Reveal only runs when JS is present; without it everything is simply visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(.2, .7, .2, 1), transform 0.5s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Once revealed, drop the transition so it can never fight a hover state */
[data-reveal].is-settled { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .hero__chip { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

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

.btn {
  display: inline-block;
  border-radius: 999px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.btn--accent { background: var(--accent); color: #FEFDF9; }
.btn--accent:hover { filter: brightness(1.1); color: #FEFDF9; }

.btn--nav { padding: 11px 22px; font-size: 15px; font-weight: 800; }
.btn--hero {
  padding: 16px 34px;
  font-size: 17px;
  box-shadow: 0 12px 28px -10px rgba(225, 82, 65, 0.55);
}
.btn--foot { padding: 17px 40px; font-size: 17px; }

.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Nav ------------------------------------------------------------------ */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 4vw;
}

.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__logo { height: 42px; width: auto; }
.nav__wordmark { font-size: 24px; color: var(--accent); }
.nav__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.nav__links { display: none; align-items: center; gap: 22px; font-size: 15px; font-weight: 800; }
.nav__links a { opacity: 0.85; }
.nav__links a:hover { opacity: 1; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
}

/* Language switcher */
.langs {
  display: flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
}

.lang {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0.55;
}
.lang:hover { opacity: 0.85; }
.lang[aria-pressed="true"] {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  opacity: 1;
}
.lang svg {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: block;
}

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

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 6vh 4vw;
  align-items: center;
  padding: 7vh 4vw 9vh;
}

.hero__title {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.25;
  margin: 0;
  color: var(--accent);
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
  max-width: 48ch;
  margin: 26px 0 34px;
  color: var(--muted);
  font-weight: 600;
}

.hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero__note { font-size: 14px; color: var(--muted); font-weight: 700; }

.hero__device-area { position: relative; justify-self: center; margin: 0 60px; }

.device {
  width: clamp(240px, 20vw, 300px);
  aspect-ratio: 9 / 18.5;
  border-radius: 42px;
  background: #0E121A;
  padding: 11px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
  transform: rotate(3deg);
}

.device__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--card2);
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__chip {
  position: absolute;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--shadow);
  animation: smk-float 5s ease-in-out infinite;
  white-space: nowrap;
}
.hero__chip--a { --r: -6deg; top: 8%; left: -14%; background: var(--teal); color: #FEFDF9; }
.hero__chip--b { --r: 4deg; top: 38%; right: -14%; background: var(--accent); color: #FEFDF9; animation-duration: 6s; animation-delay: 0.8s; }
.hero__chip--c { --r: -3deg; bottom: 12%; left: -12%; background: var(--amber); color: #314155; animation-duration: 5.5s; animation-delay: 0.4s; }

/* --- Marquee -------------------------------------------------------------- */

.marquee {
  background: var(--accent);
  color: #FEFDF9;
  overflow: hidden;
  padding: 14px 0;
  transform: rotate(-1.2deg);
  margin: 0 -2vw;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: smk-marquee 28s linear infinite;
  font-weight: 900;
  font-size: 19px;
  white-space: nowrap;
}
.marquee__track span { padding-right: 20px; }

/* --- Section furniture ---------------------------------------------------- */

.section { padding: 8vh 4vw; }
.section--how { padding: 13vh 4vw 6vh; }
.section--pricing { padding: 9vh 4vw; }

.section__head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 48px;
}

.section__head { text-align: center; margin-bottom: 48px; }
.section__head--pricing { margin-bottom: 56px; }

.eyebrow {
  font-size: clamp(24px, 2.4vw, 34px);
  color: var(--accent);
  margin-bottom: 10px;
}

.h2 {
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
}
.h2--how { letter-spacing: -0.01em; line-height: 1.18; }
.h2--how .accent { color: var(--accent); }

.section__intro {
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}
.section__sub { font-size: 16px; color: var(--muted); font-weight: 600; margin: 16px 0 0; }

.grid { display: grid; }
.grid--methods { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.grid--recipes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.grid--ai { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.grid--plans {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  max-width: 1150px;
  margin: 0 auto;
  align-items: stretch;
}

/* --- Method cards --------------------------------------------------------- */

.method {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 26px 32px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow);
}
.method:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }

.method__glyph {
  width: 50px; height: 50px;
  border-radius: 16px;
  color: #FEFDF9;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 800;
}

.method__title { font-size: 21px; font-weight: 900; margin: 6px 0 0; line-height: 1.2; }
.method__body { font-size: 15px; line-height: 1.6; color: var(--muted); font-weight: 600; margin: 0; }

/* --- Recipe cards --------------------------------------------------------- */

.recipe {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.recipe:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); color: var(--ink); }

.recipe__media { position: relative; width: 100%; aspect-ratio: 16 / 8; background: var(--card2); }
.recipe__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.recipe__cat {
  position: absolute; top: 14px; left: 14px;
  background: rgba(20, 25, 35, 0.75);
  color: #FEFDF9;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 800;
  pointer-events: none;
}

.recipe__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.recipe__title { font-size: 19px; font-weight: 900; margin: 0; line-height: 1.3; }
.recipe__meta {
  display: flex; gap: 16px;
  font-size: 13px; font-weight: 800;
  color: var(--muted);
  margin-top: auto;
  flex-wrap: wrap;
}
.recipe__cta { margin-left: auto; color: var(--accent); }

/* --- AI panel ------------------------------------------------------------- */

.section--ai { margin: 6vh auto; padding: 0 4vw; }

.panel {
  background: var(--panel);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: 36px;
  padding: clamp(40px, 5vw, 80px);
}

.panel__head { max-width: 820px; }
.panel__eyebrow { font-size: clamp(22px, 2vw, 28px); color: var(--amber); margin-bottom: 14px; }
.panel__title { font-size: clamp(30px, 3.4vw, 50px); font-weight: 900; line-height: 1.12; margin: 0 0 44px; }

.pcard {
  background: var(--panel-chip);
  border: 1px solid var(--panel-line);
  border-radius: 24px;
  padding: 28px;
}
.pcard h3 { font-size: 20px; font-weight: 900; margin: 0 0 8px; }
.pcard p { font-size: 15px; line-height: 1.6; color: var(--panel-muted); font-weight: 600; margin: 0 0 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800; }
.chip--allergen { background: rgba(245, 145, 122, 0.16); color: var(--salmon); }
.chip--on { background: var(--teal); color: #FEFDF9; }
.chip--off { border: 1px solid var(--panel-line); color: var(--panel-muted); }

.langlines { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 700; }
.langlines div { display: flex; gap: 12px; align-items: baseline; }
.langlines b { color: var(--amber); font-size: 12px; font-weight: 900; width: 24px; flex: none; }

/* --- Pricing -------------------------------------------------------------- */

.plan {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 38px 32px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow);
}

.plan--featured {
  background: var(--panel);
  color: var(--panel-ink);
  border: 2px solid var(--accent);
}

.plan__badge {
  position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #314155;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 13px; font-weight: 900;
  white-space: nowrap;
}

.plan__name { font-size: 17px; font-weight: 900; opacity: 0.75; }
.plan__price-row { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px; }
.plan__price { font-size: 50px; font-weight: 900; letter-spacing: -0.02em; }
.plan__per { font-size: 15px; font-weight: 700; opacity: 0.6; }
.plan__tagline { font-size: 15px; font-weight: 700; opacity: 0.75; margin-bottom: 26px; }

.plan__features {
  display: flex; flex-direction: column; gap: 13px;
  font-size: 15px; font-weight: 600; line-height: 1.45;
  flex: 1;
}
.plan__features div { display: flex; gap: 10px; align-items: baseline; }
.plan__features b { color: var(--teal); font-weight: 900; flex: none; }

.plan__cta {
  margin-top: 30px;
  display: block;
  text-align: center;
  background: var(--card2);
  color: var(--ink);
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 900;
  font-size: 16px;
}
.plan--featured .plan__cta { background: var(--accent); color: #FEFDF9; }
.plan__cta:hover { background: var(--accent); color: #FEFDF9; }

/* --- Recipe lightbox ------------------------------------------------------ */

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(14, 18, 26, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw;
}
.lightbox[hidden] { display: none; }

.lightbox__dialog {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  width: min(960px, 100%);
  height: min(86vh, 900px);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
}

.lightbox__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.lightbox__bar img { height: 30px; width: auto; }

.lightbox__title {
  font-weight: 900; font-size: 15px; line-height: 1.25;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lightbox__open { color: var(--accent); font-weight: 800; font-size: 13px; white-space: nowrap; }

.lightbox__close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--ink);
  font-size: 17px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

.lightbox__frame { border: none; width: 100%; flex: 1; background: #151A24; }

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

.foot {
  background: var(--panel);
  color: var(--panel-ink);
  margin-top: 6vh;
  padding: 11vh 4vw 36px;
  border-radius: 36px 36px 0 0;
}

.foot__cta-block { text-align: center; margin-bottom: 9vh; }
.foot__logo { height: 80px; width: auto; margin-bottom: 22px; }
.foot__title {
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.3;
  margin: 0 0 32px;
  color: var(--panel-ink);
}

.foot__bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--panel-line);
  padding-top: 26px;
  font-size: 14px; color: var(--panel-muted); font-weight: 700;
}
.foot__identity { display: flex; flex-direction: column; gap: 2px; }
.foot__wordmark { font-size: 19px; color: var(--panel-ink); }
.foot__byline { font-size: 13px; font-weight: 700; color: var(--panel-muted); }
.foot__links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot__links a { color: var(--panel-muted); }
.foot__links a:hover { color: var(--accent); }

/* --- Legal pages (privacy.html, terms.html) ------------------------------- */

.legal { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 5vw 10vh; }

.legal .nav { padding: 18px 0; }
.legal .nav__logo { height: 38px; }
.legal .nav__wordmark { font-size: 21px; }
.legal .icon-btn { width: 40px; height: 40px; font-size: 17px; }
.legal__back { font-weight: 800; font-size: 14px; opacity: 0.7; margin-left: 6px; }

.legal__header { padding: 7vh 0 5vh; text-align: center; }
.legal__title {
  font-size: clamp(34px, 5vw, 56px);
  color: var(--accent);
  margin: 0 0 14px;
}
.legal__updated { font-size: 15px; color: var(--muted); font-weight: 700; margin: 0; }

.legal__jump { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.legal__jump a {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 800; font-size: 14px;
}
.legal__jump a:hover { border-color: var(--accent); color: var(--accent); }

/* Table of contents */
.legal__toc {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 34px);
  margin-bottom: 28px;
}
.legal__toc-title {
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 16px;
}
.legal__toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0; padding: 0;
  columns: 2;
  column-gap: 32px;
  font-size: 15px;
  font-weight: 700;
}
.legal__toc-list li {
  counter-increment: toc;
  break-inside: avoid;
  margin-bottom: 9px;
}
.legal__toc-list li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--teal);
  font-weight: 900;
  margin-right: 10px;
}
@media (max-width: 640px) {
  .legal__toc-list { columns: 1; }
}

/* The document itself */
.legal__article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 52px);
}

.legal__section { scroll-margin-top: 20px; }
.legal__section + .legal__section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.legal__num { font-size: 22px; color: var(--teal); margin-bottom: 6px; }
.legal__h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; margin: 0 0 16px; line-height: 1.25; }

.legal__section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
}
.legal__section p:last-child { margin-bottom: 0; }

.legal__list {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 600;
}
.legal__list li { margin-bottom: 8px; }
.legal__list li::marker { color: var(--accent); }

/* Processor table */
.legal__table-wrap { overflow-x: auto; margin: 4px 0 14px; }
.legal__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.legal__table th {
  font-weight: 900;
  color: var(--ink);
  padding: 10px 14px 10px 0;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.legal__table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  line-height: 1.5;
  vertical-align: top;
}
.legal__table tr:last-child td { border-bottom: none; }

.legal__disclaimer { text-align: center; font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 40px; }