/* Kraft paper + bamboo. One bold element: the hero print. */
:root {
  --kraft: #C8A677;
  --kraft-deep: #B48F5C;
  --ink: #2A1F14;
  --ink-soft: #42311F;
  --bamboo: #3F6B35;
  --bamboo-dark: #2F5227;
  --shoot: #9DB65E;
  --paper: #FBF6EA;
  --glow: #F3DDB5;
  --serif: "Literata", Georgia, serif;
  --sans: "Be Vietnam Pro", system-ui, sans-serif;
  --measure: 34rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  background-color: var(--kraft);
  /* paper fibre: fine turbulence, multiplied onto the kraft colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bamboo-dark); text-underline-offset: .18em; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--bamboo-dark); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
p { margin: 0; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 7vw, 5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
  max-width: 76rem;
  margin: 0 auto;
  align-items: center;
}
.model { font-size: 1rem; color: var(--ink-soft); margin-bottom: .75rem; }
.hero h1 {
  font-size: clamp(2.4rem, 8.5vw, 4.6rem);
  letter-spacing: -.015em;
  line-height: 1.05;
  max-width: 13ch;
  text-wrap: balance;
}
.lede { margin-top: 1.25rem; max-width: var(--measure); font-size: 1.125rem; }
.btn {
  display: inline-block;
  margin-top: 1.75rem;
  padding: .9rem 1.6rem;
  min-height: 48px;
  background: var(--bamboo);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--bamboo-dark);
}
.btn:hover { background: var(--bamboo-dark); }
.colors { margin-top: 1.25rem; color: var(--ink-soft); font-size: .95rem; }
.swatch {
  display: inline-block; width: .9em; height: .9em; border-radius: 50%;
  vertical-align: -.1em; margin: 0 .3em 0 .15em; border: 1px solid var(--ink-soft);
}
.swatch-white { background: #F4F4F2; }
.swatch-black { background: #333; }

/* a product photo printed on paper and laid on the kraft */
.print {
  margin: 0;
  background: var(--paper);
  padding: clamp(.5rem, 1.6vw, 1rem);
  box-shadow: 0 1px 0 rgba(60, 40, 15, .25), 0 14px 30px -18px rgba(60, 40, 15, .7);
}
.hero-print { transform: rotate(-1.4deg); }
.print img { width: 100%; mix-blend-mode: multiply; }

@media (min-width: 860px) {
  .hero { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; }
}

/* ---------- three reasons ---------- */
.reasons {
  display: grid;
  gap: 0;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.reason { position: relative; padding: 1.75rem 0 1.5rem; }
/* a bamboo stalk instead of a plain rule: green culm with darker joints */
.reason::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(33.3% - 4px), var(--bamboo-dark) calc(33.3% - 4px) 33.3%),
    linear-gradient(180deg, var(--shoot), var(--bamboo) 70%);
}
.reason h2 { font-size: 1.4rem; color: var(--ink); }
.reason p { margin-top: .5rem; max-width: var(--measure); color: var(--ink-soft); }
@media (min-width: 860px) {
  .reasons { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* ---------- shared section bits ---------- */
main > section { max-width: 76rem; margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) 0; }
main > section.reasons { padding-top: 0; }
.section-title { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.section-lede { margin-top: .6rem; max-width: var(--measure); color: var(--ink-soft); font-size: 1.1rem; }

/* ---------- features ---------- */
.feature-list { display: grid; gap: 2.25rem; margin-top: 2rem; }
.feature { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.1rem; align-items: start; }
.feature h3 { font-size: 1.2rem; }
.feature p { margin-top: .35rem; color: var(--ink-soft); }
.panel {
  width: 100%;
  background: #EDEDE8;
  border: .45rem solid #2D2A26;
  border-bottom-width: 1.1rem;
  border-radius: .6rem;
}
.feature.no-shot { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .feature-list { grid-template-columns: 1fr 1fr; gap: 2.75rem 3rem; }
  .feature { grid-template-columns: 9rem 1fr; }
}

/* ---------- specs ---------- */
.specs .print { margin-top: 2rem; }
.specs table { width: 100%; max-width: 44rem; margin-top: 2rem; border-collapse: collapse; }
.specs th, .specs td { text-align: left; vertical-align: top; padding: .7rem 0; border-bottom: 1px solid rgba(42, 31, 20, .35); }
.specs th { width: 38%; font-weight: 500; color: var(--ink-soft); padding-right: 1rem; }

/* ---------- pro teaser: the only warm-lit corner ---------- */
.pro {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  margin-top: clamp(3rem, 8vw, 5.5rem) !important;
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) !important;
  background: linear-gradient(160deg, #4A3622, #2E2216);
  color: var(--glow);
  border-radius: 1.25rem;
}
.pro-device { width: 7.5rem; color: var(--glow); filter: drop-shadow(0 0 22px rgba(255, 210, 140, .45)); }
.pro h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); color: #FFF3DC; margin-top: .5rem; }
.badge {
  display: inline-block; padding: .2rem .7rem; border-radius: 999px;
  background: var(--glow); color: #3A2A17; font-weight: 600; font-size: .9rem;
}
.pro ul { margin: 1rem 0; padding-left: 1.1rem; }
.pro li { margin: .3rem 0; }
.pro a { color: #FFE2A8; }
.pro a:focus-visible { outline-color: var(--glow); }
@media (min-width: 700px) { .pro { grid-template-columns: auto 1fr; gap: 3rem; } .pro-device { width: 9rem; } }

/* ---------- warranty seal ---------- */
.warranty { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.warranty p { margin-top: .5rem; max-width: var(--measure); }
.seal {
  flex: none;
  width: 7rem; height: 7rem; border-radius: 50%;
  border: 3px solid var(--bamboo); outline: 1px solid var(--bamboo); outline-offset: -9px;
  display: grid; place-content: center; text-align: center; color: var(--bamboo);
  transform: rotate(-8deg);
}
.seal-num { font: 600 2.6rem/1 var(--serif); }
.seal-unit { font-weight: 600; }

/* ---------- sellers: paper shipping tags ---------- */
.seller-list { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 760px) { .seller-list { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); } }
.seller-card {
  position: relative;
  background: var(--paper);
  padding: 1.5rem 1.4rem 1.4rem 3.4rem;
  clip-path: polygon(1.6rem 0, 100% 0, 100% 100%, 1.6rem 100%, 0 calc(100% - 1.6rem), 0 1.6rem);
  filter: drop-shadow(0 8px 14px rgba(60, 40, 15, .3));
}
.tag-hole {
  position: absolute; left: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem;
  border-radius: 50%; background: var(--kraft-deep); box-shadow: inset 0 0 0 3px #E6DAC0;
}
.seller-card h3 { font-size: 1.45rem; }
.seller-area { color: var(--ink-soft); margin-top: .2rem; }
.seller-address { margin-top: .6rem; overflow-wrap: anywhere; }
.tag-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.tag-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem;
  border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .98rem;
}
.tag-btn-main { background: var(--bamboo); color: var(--paper); }
.tag-btn-main:hover { background: var(--bamboo-dark); }
.tag-btn-plain { border: 1.5px solid var(--bamboo); color: var(--bamboo-dark); }
@media (max-width: 480px) { .tag-btn-main { flex: 1 1 100%; justify-content: center; } }

.partner p { margin-top: .6rem; }

/* ---------- footer ---------- */
.foot { max-width: 76rem; margin: 0 auto; padding: 4rem var(--gutter) 2.5rem; color: var(--ink-soft); font-size: .95rem; }

/* the render has wide empty margins: frame the devices tighter */
.hero-print img { aspect-ratio: 1.4; object-fit: cover; object-position: 50% 46%; }