/* Sorrel landing — design direction 1a: green hero panel on cream */

:root {
  --cream: #FBFDF7;
  --ink: #191D17;
  --ink-soft: #45493F;
  --ink-muted: #75796C;
  --green: #2E5B34;
  --green-deep: #0C2912;
  --green-panel-alt: #26492B;
  --green-border: #6B9A6C;
  --leaf: #D3EAC8;
  --leaf-soft: #A6D6A0;
  --card: #F1F4EB;
  --honey: #FFE08C;
  --honey-ink: #4B3A00;
  --radius-panel: 28px;
  --radius-card: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.5 Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Young Serif', serif; font-weight: 400; margin: 0; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 28px;
  font: 500 17px/1 Roboto, sans-serif;
  white-space: nowrap;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn:hover { filter: brightness(0.96); }
.btn .ms { font-size: 22px; }

.btn-sm { height: 44px; padding: 0 22px; border-radius: 22px; font-size: 15px; gap: 8px; }
.btn-sm .ms { font-size: 18px; }

.btn-green { background: var(--green); color: #fff; }
.btn-cream { background: var(--cream); color: var(--green); }
.btn-outline { border: 1px solid var(--green-border); color: var(--cream); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.06); filter: none; }
.btn-outline-dark { border: 1.5px solid var(--honey-ink); color: var(--honey-ink); height: 48px; padding: 0 24px; border-radius: 24px; font-size: 15px; flex: none; }
.btn-outline-dark:hover { background: rgba(75, 58, 0, 0.08); filter: none; }

/* Layout shell — content column matches the 1280 design frame */
.site-header, main, .site-footer {
  max-width: 1280px;
  margin: 0 auto;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { border-radius: 12px; }
.wordmark { font-family: 'Young Serif', serif; font-size: 26px; color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav > a:not(.btn) { font: 500 15px/1 Roboto, sans-serif; color: var(--ink-soft); }
.site-nav > a:not(.btn):hover { color: var(--green); }

/* Hero */
.hero {
  margin: 8px 24px 0;
  background: var(--green);
  border-radius: var(--radius-panel);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 48px;
}
.hero-copy {
  padding: 72px 0 72px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}
.eyebrow {
  margin: 0;
  font: 500 13px/1 Roboto, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--honey);
}
.hero h1 {
  font-size: 60px;
  line-height: 68px;
  color: var(--cream);
  text-wrap: pretty;
}
.hero-sub {
  margin: 0;
  font-size: 19px;
  line-height: 30px;
  color: var(--leaf);
  max-width: 520px;
  text-wrap: pretty;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-note { margin: 0; font-size: 14px; line-height: 1; color: var(--leaf-soft); }
/* The store graphic is 1080x1920; the phone card inside it sits at x150-929, y340+.
   Crop to exactly that card (percentages are of .hero-shot's width) so it bleeds
   off the bottom of the panel. max-width:none defeats the global img clamp. */
.hero-shot {
  overflow: hidden;
  width: min(400px, 100%);
  aspect-ratio: 4 / 5;
  justify-self: center;
  align-self: end;
}
.hero-shot img { max-width: none; width: 138.46%; margin: -43.59% 0 0 -19.23%; }

/* Features */
.features {
  padding: 72px 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.features h2 { font-size: 36px; color: var(--ink); }
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.feature-card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--leaf);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon .ms { font-size: 26px; color: var(--green-deep); }
.feature-card h3 { font-size: 22px; color: var(--ink); }
.feature-card p { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-soft); text-wrap: pretty; }

/* Screenshot row */
.shots {
  padding: 32px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.shots img { width: 100%; border-radius: var(--radius-card); }

/* Comparison band */
.compare {
  margin: 24px 48px;
  background: var(--honey);
  border-radius: var(--radius-card);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.compare-copy { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.compare h2 { font-size: 24px; color: var(--honey-ink); }
.compare p { margin: 0; font-size: 16px; line-height: 25px; color: var(--honey-ink); text-wrap: pretty; }

/* Final CTA */
.cta {
  margin: 24px;
  background: var(--green);
  border-radius: var(--radius-panel);
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cta h2 { font-size: 40px; color: var(--cream); text-align: center; }

/* Legal pages (privacy) — a single prose column inside the 1280 shell */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 48px 32px;
}
.legal h1 { font-size: 48px; line-height: 56px; color: var(--ink); }
.legal-meta {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-muted);
}
.legal-summary {
  margin: 32px 0 8px;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 28px;
}
.legal-summary h2 { margin-top: 0; font-size: 22px; }
.legal-summary p { margin-bottom: 0; }
.legal h2 {
  margin: 44px 0 0;
  font-size: 26px;
  color: var(--ink);
}
.legal p, .legal li {
  font-size: 17px;
  line-height: 28px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.legal p { margin: 16px 0 0; }
.legal ul { margin: 16px 0 0; padding-left: 22px; }
.legal li { margin-top: 10px; }
.legal li::marker { color: var(--green-border); }
.legal strong { color: var(--ink); font-weight: 500; }
.legal a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal code {
  font-size: 15px;
  background: var(--card);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Footer */
.site-footer {
  padding: 24px 48px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { border-radius: 8px; }
.footer-brand span { font-size: 14px; line-height: 1; color: var(--ink-muted); }
.footer-nav { display: flex; gap: 24px; }
.footer-nav a { font-size: 14px; line-height: 1; color: var(--ink-muted); }
.footer-nav a:hover { color: var(--green); }

/* Responsive — the mock is desktop-1280; collapse gracefully below it */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 56px 40px 0; }
  .hero-shot { margin-top: 40px; }
  .hero h1 { font-size: 48px; line-height: 56px; }
}

@media (max-width: 820px) {
  .site-header { padding: 16px 24px; }
  .site-nav > a:not(.btn) { display: none; }
  .btn-sm { padding: 0 18px; }
  .hero { margin: 4px 16px 0; }
  .hero-copy { padding: 48px 28px 0; }
  .hero h1 { font-size: 38px; line-height: 46px; }
  .hero-sub { font-size: 17px; line-height: 27px; }
  .features { padding: 56px 24px 16px; }
  .features h2 { font-size: 30px; }
  .feature-grid { grid-template-columns: 1fr; }
  .shots { padding: 24px; grid-template-columns: 1fr; justify-items: center; }
  .shots img { max-width: 420px; }
  .compare { margin: 16px 24px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta { margin: 16px; padding: 48px 24px; }
  .cta h2 { font-size: 32px; }
  .legal { padding: 48px 24px 24px; }
  .legal h1 { font-size: 36px; line-height: 44px; }
  .legal h2 { font-size: 23px; }
  .site-footer { flex-direction: column; padding: 24px; }
}

@media (max-width: 440px) {
  .site-header { padding: 12px 16px; }
  .btn-sm { padding: 0 14px; font-size: 14px; }
  .hero { margin: 0 10px; }
  .hero-copy { padding: 40px 20px 0; }
  .hero h1 { font-size: 33px; line-height: 40px; }
  .hero-actions .btn { height: 52px; padding: 0 22px; font-size: 16px; }
}