/* Homepage-only styles. Every value comes from the tokens below — see DESIGN.md. */
:root {
  --paper:#f8f7f3;
  --surface:#fffefa;
  --surface-2:#eeede7;
  --surface-3:#e4e4dc;
  --ink:#252522;
  --muted:#666660;
  --line:#deded6;
  --line-strong:#d4d4c9;
  --accent:#ef633e;
  --accent-hover:#e0532e;
  --accent-text:#c64a29;
  --accent-strong:#a6381e;
  --tint-green:#e9eddf;
  --tint-green-ink:#525a47;
  --tint-green-line:#b7c2a5;
  --tint-green-deco:#c4cfb2;
  --tint-warm:#f1e6da;
  --tint-cool:#e5e8ef;
  --selection:#ffd6a8;

  --fs-eyebrow:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-h3:clamp(1.75rem,3.2vw,2.5rem);
  --fs-h2:clamp(2rem,4.2vw,3.25rem);
  --fs-display:clamp(3.25rem,13vw,7rem);

  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:3rem;
  --sp-8:4rem;
  --sp-9:6rem;

  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-device:28px;
  --r-pill:999px;

  --shadow-sm:0 8px 24px #2525220f;
  --shadow-lg:0 16px 40px #25252226;

  --dur:.2s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --tap:44px;

  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  interpolate-size:allow-keywords
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  overflow-wrap:break-word
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--sp-5)
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%;
  height:auto
}
img.is-broken {
  visibility:hidden
}
h1,h2,h3,p {
  margin:0
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
:focus-visible {
  outline:3px solid var(--accent-strong);
  outline-offset:4px
}
main:focus {
  outline:none
}
::selection {
  background:var(--selection)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}
.container {
  width:min(1240px,calc(100% - 2 * var(--sp-7)));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:var(--sp-2);
  left:var(--sp-2);
  transform:translateY(-150%);
  background:var(--ink);
  color:white;
  padding:var(--sp-4);
  border-radius:var(--r-sm);
  z-index:20
}
.skip-link:focus {
  transform:none
}

/* Header + menu */
.brand-bar {
  position:relative;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-4);
  min-height:6.5rem;
  border-bottom:1px solid var(--line)
}
.brand-bar>a {
  display:inline-flex;
  align-items:center;
  min-height:var(--tap)
}
.brand-bar>a img {
  width:clamp(140px,30vw,193px)
}
.brand-bar nav {
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  font-weight:500
}
.brand-bar nav a {
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding-inline:var(--sp-3);
  border-radius:var(--r-sm);
  transition:color var(--dur),background var(--dur)
}
.brand-bar nav a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.brand-bar nav a:active {
  color:var(--accent-strong)
}
.menu-toggle {
  display:none
}

/* Buttons */
.btn {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-5);
  min-height:48px;
  padding:var(--sp-3) var(--sp-5);
  border:0;
  border-radius:var(--r-sm);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur),box-shadow var(--dur)
}
.btn:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm)
}
.btn:active {
  transform:translateY(0) scale(.98);
  box-shadow:none
}
.btn:disabled,.btn[aria-disabled="true"] {
  opacity:.45;
  pointer-events:none;
  transform:none;
  box-shadow:none
}
.btn-primary {
  background:var(--accent);
  color:var(--ink)
}
.btn-primary:hover {
  background:var(--accent-hover)
}
.btn-primary:active {
  background:var(--accent-text);
  color:white
}
.btn-dark {
  background:var(--ink);
  color:white
}
.btn-dark:hover {
  background:#000
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:var(--tap);
  font-size:var(--fs-sm);
  font-weight:600;
  transition:color var(--dur)
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.text-link:active {
  color:var(--accent-strong)
}

/* Hero */
.hero {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:var(--sp-6);
  min-height:40rem;
  padding-block:var(--sp-7) var(--sp-8)
}
.eyebrow {
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.15em;
  line-height:1.7;
  text-transform:uppercase
}
.status-dot {
  display:inline-block;
  width:.5rem;
  height:.5rem;
  background:var(--accent);
  border-radius:var(--r-pill);
  margin-right:var(--sp-2)
}
.hero h1 {
  font-size:var(--fs-display);
  letter-spacing:-.055em;
  line-height:1.02;
  font-weight:600;
  margin:var(--sp-5) 0
}
.serif {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic
}
.hero h1 .serif,h2 .serif {
  color:var(--accent-text)
}
.lead {
  max-width:30rem;
  font-size:var(--fs-lg);
  line-height:1.7;
  color:var(--muted)
}
.lead strong {
  color:var(--ink);
  font-weight:600
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4) var(--sp-5);
  margin-top:var(--sp-6)
}
.hero-art {
  position:relative;
  min-height:34rem;
  border-radius:45% 45% var(--r-md) var(--r-md);
  background:var(--surface-3);
  isolation:isolate;
  overflow:hidden
}
.orbit {
  position:absolute;
  inset:var(--sp-7) var(--sp-2);
  border:1px solid var(--line-strong);
  border-radius:50%;
  transform:rotate(-30deg)
}
.phone {
  position:absolute;
  width:37%;
  max-width:190px;
  border:6px solid var(--ink);
  border-radius:var(--r-device);
  background:var(--ink);
  overflow:hidden;
  box-shadow:var(--shadow-lg)
}
.phone img {
  width:100%
}
.phone-back {
  right:9%;
  top:5rem;
  transform:rotate(12deg)
}
.phone-front {
  left:10%;
  top:7rem;
  transform:rotate(-10deg);
  z-index:2
}
.memory-label {
  position:absolute;
  z-index:3;
  right:var(--sp-3);
  bottom:var(--sp-9);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  background:var(--surface);
  padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-sm);
  transform:rotate(5deg);
  font-size:var(--fs-xs);
  line-height:1.6;
  border-radius:var(--r-sm)
}
.memory-label>span {
  font-size:2rem;
  color:var(--accent-text)
}
.memory-label strong {
  font-weight:600
}

/* Principles strip */
.principles-strip {
  border-block:1px solid var(--line)
}
.principles-strip .container {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2) var(--sp-5);
  min-height:4.5rem;
  padding-block:var(--sp-3);
  font-size:var(--fs-xs);
  color:var(--muted)
}
.principles-strip span:first-child {
  font-weight:600;
  color:var(--ink)
}
.principles-strip a {
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  text-decoration:underline;
  text-underline-offset:4px
}
.principles-strip a:hover,.principles-strip a:active {
  color:var(--accent-strong)
}

/* Section headings */
h2 {
  font-size:var(--fs-h2);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-6);
  margin-bottom:var(--sp-6)
}
.section-heading .eyebrow {
  margin-bottom:var(--sp-4)
}
.section-heading>p {
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.8
}

/* Spotlight */
.featured-section {
  padding-block:var(--sp-9) var(--sp-8)
}
.spotlight {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--tint-green);
  border-radius:var(--r-md);
  overflow:hidden;
  min-height:32rem;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur)
}
.spotlight:hover,.spotlight:has(:focus-visible) {
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm)
}
.spotlight:hover .btn-dark,.spotlight:has(:focus-visible) .btn-dark {
  background:#000
}
.spotlight:active {
  transform:translateY(-1px)
}
.spotlight-copy {
  padding:var(--sp-7)
}
.app-identity {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  font-weight:600
}
.app-identity img {
  border-radius:var(--r-md);
  width:2.75rem;
  height:2.75rem
}
.pill {
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.1em;
  border:1px solid var(--tint-green-line);
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-pill)
}
.spotlight h3 {
  font-size:var(--fs-h3);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:var(--sp-5) 0 var(--sp-4)
}
.spotlight-copy>p {
  font-size:var(--fs-base);
  line-height:1.7;
  max-width:22rem;
  color:var(--tint-green-ink);
  margin-bottom:var(--sp-5)
}
.spotlight .stretched::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4
}
.spotlight .stretched:focus-visible {
  outline:none
}
.spotlight:has(.stretched:focus-visible) {
  outline:3px solid var(--accent-strong);
  outline-offset:4px
}
.spotlight small {
  display:block;
  font-size:var(--fs-xs);
  color:var(--tint-green-ink);
  margin-top:var(--sp-4)
}
.spotlight-art {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-height:24rem;
  overflow:hidden
}
.spotlight-art>img {
  width:220px;
  border:6px solid var(--ink);
  border-radius:var(--r-device);
  transform:rotate(9deg) translateY(65px);
  z-index:1;
  box-shadow:var(--shadow-lg)
}
.giant-word {
  position:absolute;
  top:var(--sp-5);
  left:0;
  font:italic clamp(7rem,40vw,11rem) Georgia,serif;
  color:var(--tint-green-deco);
  letter-spacing:-.07em
}
.spotlight-note {
  position:absolute;
  left:var(--sp-4);
  bottom:var(--sp-8);
  font:italic var(--fs-lg)/1.3 Georgia,serif;
  transform:rotate(-10deg);
  z-index:2
}

.timeline-system {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:stretch;
  gap:var(--sp-4);
  margin-top:var(--sp-4)
}
.timeline-intro {
  align-self:center;
  font-size:var(--fs-sm);
  line-height:1.7;
  color:var(--muted)
}
.timeline-intro strong {
  color:var(--ink);
  font-weight:600
}
.timeline-link {
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--muted);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur)
}
.timeline-link img {
  width:2.5rem;
  height:2.5rem;
  flex-shrink:0;
  border-radius:var(--r-sm);
  object-fit:cover
}
.timeline-link strong {
  display:block;
  color:var(--ink);
  font-weight:600;
  font-size:var(--fs-base)
}
.timeline-arrow {
  margin-left:auto;
  color:var(--ink);
  transition:color var(--dur)
}
.timeline-link:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm)
}
.timeline-link:hover .timeline-arrow {
  color:var(--accent-strong)
}
.timeline-link:active {
  transform:translateY(-1px);
  box-shadow:none
}

/* Product grid */
.section {
  padding-block:var(--sp-4) var(--sp-7)
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-5)
}
.product-card {
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur)
}
.product-card:hover,.product-card:has(.card-link:focus-visible) {
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm)
}
.product-card:has(.card-link:focus-visible) {
  outline:3px solid var(--accent-strong);
  outline-offset:4px
}
.product-card:active {
  transform:translateY(-1px);
  box-shadow:none
}
.card-link::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1
}
.card-link:focus-visible {
  outline:none
}
.product-card:hover .product-link-label,.product-card:has(.card-link:focus-visible) .product-link-label {
  color:var(--accent-strong)
}
.product-card-primary {
  order:1
}
.product-card-secondary {
  order:3
}
.product-grid-break {
  grid-column:1/-1;
  order:2;
  padding:var(--sp-7) 0 var(--sp-2)
}
.product-card-main {
  display:flex;
  flex-direction:column;
  flex:1
}
.h2-style {
  font-size:var(--fs-h2);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em
}
.product-grid-break h3 {
  margin-top:var(--sp-3)
}
.product-media {
  height:16.5rem;
  background:var(--surface-2);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:var(--sp-5) var(--sp-5) 0;
  overflow:hidden
}
.product-media img {
  width:auto;
  height:330px;
  max-width:100%;
  object-fit:contain;
  object-position:top;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transform:rotate(-5deg);
  transition:transform .3s var(--ease)
}
.product-card:hover .product-media img {
  transform:rotate(0) translateY(-4px)
}
.product-card:nth-child(3n+2) .product-media {
  background:var(--tint-warm)
}
.product-card:nth-child(3n) .product-media {
  background:var(--tint-cool)
}
.product-card:nth-child(3n+2) .product-media img {
  transform:rotate(5deg)
}
.product-card[data-app="cornerwink"] .product-media img {
  height:auto;
  align-self:center;
  transform:none
}
.product-content {
  padding:var(--sp-5);
  display:flex;
  flex-direction:column;
  flex:1
}
.product-header {
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3)
}
.product-icon-sm {
  width:2rem;
  height:2rem;
  flex-shrink:0;
  border-radius:var(--r-sm);
  object-fit:cover;
  background:var(--surface-2)
}
.product-name {
  font-size:var(--fs-lg);
  font-weight:600;
  letter-spacing:-.02em
}
.product-copy {
  font-size:var(--fs-sm);
  line-height:1.7;
  color:var(--muted);
  margin-bottom:var(--sp-3)
}
.product-tag {
  font-size:var(--fs-xs);
  line-height:1.7;
  color:var(--muted);
  margin-bottom:var(--sp-5)
}
.badge {
  display:inline-block;
  margin-left:var(--sp-1);
  padding:0 var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--tint-warm);
  color:var(--ink);
  font-weight:600
}
.product-link-label {
  margin-top:auto;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);
  font-weight:600;
  display:flex;
  justify-content:space-between;
  transition:color var(--dur)
}
.product-link-label:after {
  content:'↗'
}
.product-card-actions {
  position:relative;
  z-index:2;
  padding:0 var(--sp-5) var(--sp-4);
  display:flex;
  flex-wrap:wrap;
  gap:0 var(--sp-5);
  font-size:var(--fs-sm)
}
.product-card-actions a {
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  text-decoration:underline;
  text-underline-offset:4px
}
.product-card-actions a:hover,.product-card-actions a:active {
  color:var(--accent-strong)
}

/* Tools */
.tools-showcase {
  margin-top:var(--sp-9);
  padding:var(--sp-7);
  background:var(--surface-2);
  border-radius:var(--r-md)
}
.tools-header {
  margin-bottom:var(--sp-6)
}
.tools-header h2 {
  margin-top:var(--sp-4)
}
.tools-intro {
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-top:var(--sp-4)
}
.tools-showcase .product-grid {
  grid-template-columns:1fr 1fr
}
.tools-showcase .product-media {
  height:15rem;
  align-items:center;
  padding:var(--sp-5);
  background:var(--surface-3)
}
.tools-showcase .product-media img {
  height:100%;
  transform:none;
  object-fit:contain;
  border-radius:var(--r-sm);
  box-shadow:none
}

/* Philosophy */
.philosophy-section {
  margin-block:var(--sp-8) var(--sp-8);
  padding:var(--sp-8) var(--sp-7);
  background:var(--surface-2);
  border-radius:var(--r-md);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-8)
}
.philosophy-section h2 {
  margin-top:var(--sp-5)
}
.philosophy-copy>p {
  font-size:var(--fs-base);
  line-height:1.8;
  color:var(--muted);
  margin-bottom:var(--sp-4)
}
.privacy-promise {
  list-style:none;
  margin:var(--sp-5) 0 0;
  padding:0;
  font-size:var(--fs-h3);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.02em
}
.philosophy-copy .privacy-promise-note {
  margin:var(--sp-3) 0 var(--sp-4);
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:var(--fs-lg);
  color:var(--accent-strong)
}
.maker-note {
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-top:var(--sp-6)
}
.maker-mark {
  flex-shrink:0;
  width:2.75em;
  height:2.75em;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface-3);
  font-size:var(--fs-xs);
  font-weight:600
}
.maker-note p {
  font-size:var(--fs-xs);
  line-height:1.7;
  color:var(--muted)
}

/* FAQ */
.faq-section {
  max-width:53rem;
  padding-bottom:var(--sp-8)
}
.faq-section h2 {
  margin:var(--sp-4) 0 var(--sp-6)
}
.faq-section details {
  border-top:1px solid var(--line)
}
.faq-section details:last-child {
  border-bottom:1px solid var(--line)
}
.faq-section details::details-content {
  block-size:0;
  overflow:hidden;
  transition:block-size .25s var(--ease),content-visibility .25s allow-discrete
}
.faq-section details[open]::details-content {
  block-size:auto
}
summary {
  cursor:pointer;
  min-height:var(--tap);
  padding:var(--sp-5) 0;
  font-size:var(--fs-base);
  font-weight:500;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-5);
  transition:color var(--dur)
}
summary:hover {
  color:var(--accent-strong)
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  font-size:var(--fs-lg);
  transition:transform var(--dur) var(--ease)
}
details[open] summary:after {
  transform:rotate(45deg)
}
details p {
  font-size:var(--fs-sm);
  line-height:1.8;
  color:var(--muted);
  padding-bottom:var(--sp-5);
  max-width:44rem
}
details p a {
  text-decoration:underline;
  text-underline-offset:4px
}
details p a:hover {
  color:var(--accent-strong)
}

/* Footer */
.site-footer {
  background:var(--surface-2);
  padding:var(--sp-8) 0 var(--sp-5)
}
.newsletter-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-8);
  padding-bottom:var(--sp-7);
  border-bottom:1px solid var(--line-strong)
}
.newsletter-copy .eyebrow {
  margin-bottom:var(--sp-4)
}
.newsletter-copy>p:last-child {
  max-width:22rem;
  font-size:var(--fs-sm);
  line-height:1.7;
  color:var(--muted);
  margin-top:var(--sp-4)
}
.newsletter-form {
  min-width:0;
  align-self:center
}
.newsletter-form * {
  max-width:100%
}
.newsletter-status {
  font-size:var(--fs-sm);
  line-height:1.7;
  color:var(--muted)
}
.newsletter-status a {
  text-decoration:underline;
  text-underline-offset:4px
}
.newsletter-status[data-state="error"] {
  color:var(--accent-strong)
}
.newsletter-form.is-ready .newsletter-status {
  display:none
}
.newsletter-privacy {
  margin-top:var(--sp-3);
  font-size:var(--fs-xs);
  color:var(--muted)
}
.footer-brand {
  float:left;
  width:42%;
  padding-top:var(--sp-7)
}
.footer-brand p {
  font-size:var(--fs-sm);
  color:var(--muted);
  margin:var(--sp-4) 0 var(--sp-2)
}
.footer-brand>a {
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  font-size:var(--fs-sm);
  font-weight:600
}
.footer-brand>a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.2fr 1.2fr 1fr;
  gap:var(--sp-6);
  padding-top:var(--sp-7)
}
.footer-col h3 {
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0 0 var(--sp-3)
}
.footer-col ul {
  list-style:none;
  margin:0;
  padding:0
}
.footer-col li {
  font-size:var(--fs-sm);
  color:var(--muted)
}
.footer-col a {
  display:inline-flex;
  align-items:center;
  min-height:var(--tap)
}
.footer-col a:hover {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px
}
.footer-bottom {
  clear:both;
  border-top:1px solid var(--line-strong);
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  font-size:var(--fs-xs);
  color:var(--muted)
}

@media(max-width:1050px) {
  .container {
    width:calc(100% - 2 * var(--sp-6))
  }
  .hero {
    min-height:0
  }
  .hero-art {
    min-height:29rem
  }
  .phone {
    max-width:155px
  }
  .spotlight-copy {
    padding:var(--sp-6)
  }
  .product-grid {
    gap:var(--sp-4)
  }
  .product-content {
    padding:var(--sp-4)
  }
  .product-card-actions {
    padding-inline:var(--sp-4)
  }
  .footer-brand {
    width:33%
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 2 * var(--sp-4))
  }
  .brand-bar {
    min-height:4.5rem
  }
  .js .menu-toggle {
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    min-height:var(--tap);
    min-width:var(--tap);
    padding:0 var(--sp-3);
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:var(--fs-sm);
    font-weight:600;
    cursor:pointer;
    transition:background var(--dur)
  }
  .js .menu-toggle:hover {
    background:var(--surface-2)
  }
  .js .menu-toggle:active {
    background:var(--surface-3)
  }
  .menu-icon,.menu-icon::before,.menu-icon::after {
    display:block;
    width:16px;
    height:2px;
    background:currentColor;
    border-radius:2px;
    transition:transform var(--dur) var(--ease),background var(--dur)
  }
  .menu-icon {
    position:relative
  }
  .menu-icon::before,.menu-icon::after {
    content:"";
    position:absolute;
    left:0
  }
  .menu-icon::before {
    top:-5px
  }
  .menu-icon::after {
    top:5px
  }
  [aria-expanded="true"] .menu-icon {
    background:transparent
  }
  [aria-expanded="true"] .menu-icon::before {
    transform:translateY(5px) rotate(45deg)
  }
  [aria-expanded="true"] .menu-icon::after {
    transform:translateY(-5px) rotate(-45deg)
  }
  .js .brand-bar nav {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--sp-2);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-sm);
    font-size:var(--fs-base);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity var(--dur),transform var(--dur) var(--ease),visibility 0s var(--dur)
  }
  .js .brand-bar.is-open nav {
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity var(--dur),transform var(--dur) var(--ease)
  }
  .js .brand-bar nav a {
    min-height:48px;
    padding-inline:var(--sp-4)
  }
  .js .brand-bar nav a:hover {
    background:var(--surface-2);
    text-decoration:none
  }
  .brand-bar nav {
    flex-wrap:wrap
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:var(--sp-6) var(--sp-7);
    gap:var(--sp-6)
  }
  .lead {
    font-size:var(--fs-base)
  }
  .hero-art {
    width:100%;
    max-width:30rem;
    min-height:27rem;
    margin-inline:auto
  }
  .phone {
    width:40%;
    max-width:170px;
    border-width:5px;
    border-radius:22px
  }
  .phone-front {
    left:11%;
    top:5.5rem
  }
  .phone-back {
    right:10%;
    top:4rem
  }
  .memory-label {
    bottom:var(--sp-8)
  }
  .spotlight-note {
    display:none
  }
  .principles-strip .container {
    display:grid;
    grid-template-columns:1fr 1fr;
    padding-block:var(--sp-4)
  }
  .featured-section {
    padding-block:var(--sp-8)
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    margin-top:var(--sp-4)
  }
  .section-heading>p br {
    display:none
  }
  .spotlight,.timeline-system {
    grid-template-columns:1fr
  }
  .spotlight-copy {
    padding:var(--sp-5)
  }
  .spotlight-art>img {
    width:190px;
    transform:rotate(9deg) translateY(70px)
  }
  .product-grid {
    grid-template-columns:1fr 1fr
  }
  .product-media {
    height:13rem;
    padding:var(--sp-5) var(--sp-4) 0
  }
  .product-media img {
    height:265px
  }
  .tools-showcase {
    padding:var(--sp-5);
    margin-top:var(--sp-8)
  }
  .tools-showcase .product-grid {
    grid-template-columns:1fr
  }
  .philosophy-section {
    grid-template-columns:1fr;
    gap:var(--sp-5);
    margin-block:var(--sp-6) var(--sp-7);
    padding:var(--sp-7) var(--sp-5)
  }
  .faq-section {
    padding-bottom:var(--sp-7)
  }
  .newsletter-section {
    grid-template-columns:1fr;
    gap:var(--sp-5)
  }
  .footer-brand {
    float:none;
    width:100%;
    padding-top:var(--sp-6)
  }
  .footer-grid {
    padding-top:var(--sp-5);
    gap:var(--sp-4)
  }
  .site-footer {
    padding-top:var(--sp-7)
  }
}

@media(max-width:480px) {
  .hero-art {
    min-height:25rem
  }
  .product-grid {
    grid-template-columns:1fr
  }
  .product-media {
    height:17rem
  }
  .product-media img {
    height:350px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .footer-col:last-child {
    grid-column:1/-1
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .btn:hover,.btn:active,.product-card:hover,.product-card:active,.product-card:has(.card-link:focus-visible),
  .spotlight:hover,.spotlight:active,.spotlight:has(:focus-visible),.timeline-link:hover,.timeline-link:active,.product-card:hover .product-media img {
    transform:none
  }
}