/* =====================================================================
   NATI · Gracefully Growing — homepage
   Every rule is scoped under #nati so the theme around it is untouched
   and theme styles cannot leak in.
   ===================================================================== */

@font-face { font-family: "NATI Marcellus"; src: url("fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NATI Parisienne"; src: url("fonts/parisienne-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NATI Hanken"; src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NATI Hanken"; src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "NATI Hanken"; src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "NATI Mono"; src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

#nati {
  --canvas: #f7f5ee; --cream: #efebdf; --panel: #fbfaf5;
  --forest: #243d2b; --forest-2: #344b32; --sage: #929878; --sage-ink: #676d50; --olive: #a5a477;
  --gold: #c3ae70; --gold-deep: #74622a; --ink: #33342f; --ink-2: #5b5e50; --line: #d9d4c3; --line-strong: #8e8b78;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --display: "NATI Marcellus", "Times New Roman", serif;
  --script: "NATI Parisienne", cursive;
  --sans: "NATI Hanken", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "NATI Mono", ui-monospace, monospace;
  --glow: 0 0 1px rgba(247,245,238,.9), 0 2px 16px rgba(247,245,238,.9), 0 0 48px rgba(247,245,238,.75);
  --book-shadow: 0 1px 1px rgba(36,61,43,.08), 0 12px 24px -12px rgba(36,61,43,.35), 0 30px 60px -30px rgba(36,61,43,.45);
  --top: var(--wp-admin--admin-bar--height, 0px);

  /* full-bleed: break out of any narrow theme content column */
  position: relative; display: block; isolation: isolate;
  width: 100vw; max-width: none !important;
  margin: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; font-weight: 400;
  letter-spacing: normal; text-align: left; text-transform: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
#nati.nati-inline { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- local reset (defends against theme typography) ---------- */
#nati *, #nati *::before, #nati *::after { box-sizing: border-box; }
#nati :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, dt, fieldset, legend) { margin: 0; padding: 0; border: 0; }
#nati :where(h1, h2, h3, h4) { font-family: var(--display); font-weight: 400; color: inherit; line-height: 1.1; letter-spacing: 0.005em; text-transform: none; }
#nati :where(ul, ol) { list-style: none; }
#nati :where(a) { color: inherit; text-decoration: none; box-shadow: none; border: 0; }
#nati :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
#nati :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; line-height: inherit; box-shadow: none; border-radius: 0; min-height: 0; width: auto; }
#nati :where(input) { font: inherit; color: inherit; margin: 0; }
#nati :where(details > summary) { list-style: none; cursor: pointer; }
#nati details > summary::-webkit-details-marker { display: none; }
#nati ::selection { background: rgba(195,174,112,.45); color: var(--forest); }
#nati :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
#nati .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type helpers ---------- */
#nati .display { font-family: var(--display); font-weight: 400; }
#nati .script { font-family: var(--script); font-weight: 400; color: var(--sage-ink); }
#nati .label { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
#nati .kicker { color: var(--gold-deep); }
#nati .h-xl { font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.05; color: var(--forest); }
#nati .lede { color: var(--ink-2); }
#nati .wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { #nati .wrap { padding: 0 40px; } }

/* ---------- buttons ---------- */
#nati .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: 0 1.6rem; border-radius: 999px; font-family: var(--sans);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  overflow: hidden; isolation: isolate; text-decoration: none;
}
#nati .btn:active { transform: scale(.97); }
#nati .btn-primary { background: var(--forest); color: var(--canvas); }
#nati .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(195,174,112,.55), transparent 70%); }
#nati .btn-primary:hover::after { opacity: 1; }
#nati .btn-primary:hover { box-shadow: 0 10px 30px -12px rgba(36,61,43,.65); transform: translateY(-1px); color: var(--canvas); }
#nati .btn-ghost { border: 1px solid var(--line-strong); color: var(--forest); background: transparent; }
#nati .btn-ghost:hover { border-color: var(--forest); background: rgba(36,61,43,.05); }
#nati .btn-light { background: var(--canvas); color: var(--forest); }
#nati .btn-light:hover { background: #fff8e6; transform: translateY(-1px); }
#nati .btn .arrow { transition: transform .45s var(--ease); }
#nati .btn:hover .arrow { transform: translateX(4px); }
#nati .btn-sm { min-height: 40px; padding: 0 1rem; font-size: .85rem; }
#nati .link-u { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--ease); }
#nati .link-u:hover { background-size: 100% 1px; }

/* ---------- reveal choreography ---------- */
#nati [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
#nati [data-reveal].in { opacity: 1; transform: none; }
#nati [data-reveal="scale"] { transform: scale(.96); }
#nati [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
#nati [data-stagger].in > * { opacity: 1; transform: none; }
#nati [data-stagger].in > *:nth-child(2) { transition-delay: .09s; }
#nati [data-stagger].in > *:nth-child(3) { transition-delay: .18s; }
#nati [data-stagger].in > *:nth-child(4) { transition-delay: .27s; }
#nati [data-stagger].in > *:nth-child(5) { transition-delay: .36s; }
#nati [data-stagger].in > *:nth-child(6) { transition-delay: .45s; }
#nati [data-stagger].in > *:nth-child(7) { transition-delay: .54s; }
#nati [data-stagger].in > *:nth-child(8) { transition-delay: .63s; }
#nati [data-stagger].settled > *, #nati [data-stagger].settled > *:nth-child(n) { transition-delay: 0s !important; }
#nati .mask { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
#nati .mask > span { display: inline-block; transform: translateY(105%); transition: transform 1.15s var(--ease); }
#nati .in .mask > span { transform: none; }
#nati .in .mask:nth-child(2) > span { transition-delay: .1s; }
#nati .in .mask:nth-child(3) > span { transition-delay: .2s; }

/* ---------- the page as one sunlit room ---------- */
#nati .room { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(900px 600px at 12% 3%, rgba(195,174,112,.12), transparent 60%), radial-gradient(800px 700px at 92% 30%, rgba(146,152,120,.10), transparent 60%), var(--canvas); }
#nati .room::after { content: ""; position: absolute; inset: -5%; opacity: .06; filter: blur(6px);
  background: url("media/leaf-shadow.svg") repeat; background-size: 1100px auto; animation: nati-drift 90s linear infinite; animation-delay: -30s; }
@keyframes nati-drift { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-40px,30px,0) rotate(1.2deg); } }

/* ---------- scroll-scrubbed hero ---------- */
#nati .hero { position: relative; height: 700vh; background: #ece6d6; }
#nati .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#nati .stage.pin-fixed { position: fixed; left: 0; right: 0; }
#nati .stage.pin-end { position: absolute; top: auto; bottom: 0; left: 0; right: 0; }
#nati .poster, #nati .hv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
#nati .poster { background-size: cover; background-position: center; }
#nati .hv { opacity: 0; transition: opacity .8s var(--ease); will-change: transform; transform: translateZ(0); }
#nati .stage.ready .hv { opacity: 1; }
#nati .hscrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(247,245,238,0) 45%, rgba(247,245,238,.35) 100%), linear-gradient(180deg, rgba(247,245,238,.7) 0%, rgba(247,245,238,0) 20%); }
#nati .ring { position: absolute; left: 50%; bottom: 34px; width: 44px; height: 44px; margin-left: -22px; color: var(--forest); transition: opacity .6s var(--ease); }
#nati .stage.ready .ring { opacity: 0; }
#nati .cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: var(--forest); opacity: 0; transition: opacity .6s var(--ease); }
#nati .stage.ready .cue, #nati .stage.failed .cue { opacity: 1; }
#nati .cue i { width: 1px; height: 38px; background: linear-gradient(rgba(36,61,43,0), rgba(36,61,43,.8)); animation: nati-cue 2.6s var(--ease-soft) infinite; animation-delay: -.8s; transform-origin: top; }
@keyframes nati-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-height: 560px) { #nati .cue { display: none; } }

#nati .band { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; color: var(--forest); text-shadow: var(--glow); }
#nati .band::before { content: ""; position: absolute; inset: -4%; pointer-events: none; opacity: calc(.25 + .75 * var(--k, 1)); background: var(--scrim); }
#nati .band .in-l, #nati .band .in-r { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto; }
#nati .band .in-l { left: 4.5vw; width: min(28vw, 460px); }
#nati .band .in-r { right: 4vw; width: min(28vw, 440px); text-align: right; }
#nati .band .btn { text-shadow: none; }
#nati .band .w { display: inline-block; white-space: nowrap; }
#nati .band .t1 { font-family: var(--display); font-size: clamp(2.2rem, 3.3vw, 3.7rem); line-height: 1.06; }
#nati .band .t2 { font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3.4rem); line-height: 1.08; }
#nati .band .t3 { font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.4rem); line-height: 1.12; color: var(--forest-2); margin-top: 16px; }
#nati .band .t4 { font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: 1.1; }
#nati .band .s2 { color: var(--forest-2); }
#nati .b-focus h1 { position: relative; font-family: var(--display); font-size: clamp(2.2rem, 3.3vw, 3.7rem); line-height: 1.06; color: var(--forest); }
#nati .b-focus .soft, #nati .b-focus .sharp { display: block; }
#nati .b-focus .soft { position: absolute; inset: 0; filter: blur(10px); opacity: calc(1 - var(--k, 0)); }
#nati .b-focus .sharp { opacity: var(--k, 0); transform: scale(calc(.97 + .03 * var(--k, 0))); }
#nati .b-focus .script { font-size: 1.12em; color: var(--forest-2); }
#nati .b-turn p { perspective: 900px; }
#nati .b-turn .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1); opacity: var(--kc); transform-origin: 0% 50%; transform: rotateY(calc((1 - var(--kc)) * -78deg)); }
#nati .b-drift .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -26px)); }
#nati .b-settle .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 34px)); }
#nati .b-settle .sub { --ks: clamp(0, (var(--k, 0) - .62) * 4, 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 14px)); font-size: 1.08rem; font-weight: 500; line-height: 1.65; color: var(--ink); }
#nati .b-settle .ctas { --kb: clamp(0, (var(--k, 0) - .78) * 5, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 12px)); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
#nati .b-settle .ctas .btn-ghost { background: rgba(247,245,238,.7); }

/* phones and portrait tablets: the film cropped to the book, framed by a slow camera
   (the same three queries as MOBILE_GATES in nati.js) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
  #nati .hero { height: 560vh; height: 560svh; background: #ebdfcd; }
  #nati .stage { background: linear-gradient(180deg, #e9d9c4 0%, #e1cfb7 38%, #dac6ad 60%, #efe7da 100%); }
  #nati .poster, #nati .hv { inset: auto; left: 0; top: 0; width: 100vw; height: 72vw; object-fit: fill; transform-origin: 0 0; background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect; }
  #nati .hscrim { background: linear-gradient(180deg, rgba(247,245,238,.5) 0%, rgba(247,245,238,0) 15%), linear-gradient(0deg, rgba(247,245,238,.97) 0%, rgba(247,245,238,.9) 22%, rgba(247,245,238,0) 46%); }
  #nati .band { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 22px calc(30px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  #nati .band::before { display: none; }
  #nati .band .in-l, #nati .band .in-r { position: static; transform: none; width: auto !important; max-width: 30rem; margin: 0 auto; text-align: center !important; }
  #nati .band .t1, #nati .b-focus h1 { font-size: clamp(1.9rem, 7.6vw, 2.6rem); }
  #nati .band .t2 { font-size: clamp(1.8rem, 7.4vw, 2.5rem); }
  #nati .band .t3 { font-size: clamp(1.2rem, 5vw, 1.6rem); margin-top: 10px; }
  #nati .band .t4 { font-size: clamp(1.55rem, 6.4vw, 2.2rem); }
  #nati .b-focus .label { margin-bottom: 12px !important; }
  #nati .b-settle .sub { font-size: .98rem; line-height: 1.55; margin-top: 12px; }
  #nati .b-settle .ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 18px; gap: 10px; }
  #nati .b-settle .ctas .btn { min-height: 46px; padding: 0 1.2rem; }
  #nati .ring { bottom: auto; top: 44%; }
  #nati .cue { display: none; }
}

/* still hero: reduced motion and short landscape phones (the same two queries as STATIC_GATES in nati.js) */
#nati .hstatic { display: none; }
#nati.static .hero { height: auto; }
#nati.static .stage { display: none; }
#nati.static .hstatic { display: block; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  #nati .hero { height: auto; }
  #nati .stage { display: none; }
  #nati .hstatic { display: block; }
}
#nati .hstatic .img { position: relative; height: 62svh; min-height: 400px; overflow: hidden; }
#nati .hstatic .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
#nati .hstatic .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,245,238,.55) 0%, rgba(247,245,238,0) 30%, rgba(247,245,238,0) 55%, var(--canvas) 100%); }
#nati .hstatic .txt { position: relative; margin-top: -40px; padding: 0 20px 56px; text-align: center; }
#nati .hstatic h1 { font-size: 2.6rem; line-height: 1.05; color: var(--forest); }
#nati .hstatic p.sub { max-width: 34ch; margin: 20px auto 0; font-size: 1.05rem; }
#nati .hstatic .ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
#nati .hstatic .ctas .btn { width: 100%; max-width: 320px; }

/* ---------- signature: the growing vine ---------- */
#nati .vine { position: absolute; top: 0; left: max(-14px, calc(50% - 760px)); width: 70px; height: 100%; pointer-events: none; z-index: 1; }
#nati .vine .stem { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; }
#nati .vine .leaf { fill: var(--olive); opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; transform: scale(.2) rotate(-20deg); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
#nati .vine .leaf.gold { fill: var(--gold); }
#nati .vine .leaf.on { opacity: .9; transform: none; }
@media (max-width: 1100px) { #nati .vine { display: none; } }

/* ---------- sections ---------- */
#nati .sec { position: relative; padding: 96px 0; }
@media (min-width: 768px) { #nati .sec { padding: 128px 0; } }
#nati .sec-panel { background: rgba(251,250,245,.6); }
#nati .sec-cream { background: var(--cream); }
#nati .sec-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
@media (min-width: 768px) { #nati .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
#nati .sec-head.rev { }
@media (min-width: 768px) { #nati .sec-head.rev { flex-direction: row-reverse; } #nati .sec-head.rev > div:first-child { text-align: right; } }
#nati .sec-head .lede { max-width: 38ch; }
#nati .center-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
#nati .center-head p.lede { margin-top: 16px; }
#nati h2.h-xl { margin-top: 12px; }

/* collections mosaic */
#nati .mosaic { display: grid; gap: 16px; }
@media (min-width: 768px) { #nati .mosaic { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(250px, auto); } }
#nati .tile { position: relative; display: block; overflow: hidden; border-radius: 6px; isolation: isolate; background: var(--cream); aspect-ratio: 4 / 5; color: var(--canvas); }
#nati .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform 1.6s var(--ease); }
#nati .tile:hover img { transform: scale(1.06); }
#nati .tile .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,22,.06) 0%, rgba(20,32,22,.34) 38%, rgba(20,32,22,.84) 100%); }
#nati .tile h3, #nati .tile .tag { text-shadow: 0 1px 14px rgba(20,32,22,.55), 0 1px 2px rgba(20,32,22,.35); }
#nati .tile .tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
@media (min-width: 768px) { #nati .tile .tx { padding: 32px; } }
#nati .tile .num { display: inline-block; border-radius: 999px; padding: 4px 12px; }
#nati .tile h3 { font-size: 1.9rem; line-height: 1.1; margin-top: 12px; color: var(--canvas); }
#nati .tile .tag { color: rgba(247,245,238,.92); margin-top: 4px; }
#nati .tile .more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease), opacity .7s var(--ease); }
#nati .tile:hover .more, #nati .tile:focus-visible .more { grid-template-rows: 1fr; opacity: 1; }
#nati .tile .more > * { overflow: hidden; min-height: 0; }
#nati .tile .more p { margin-top: 12px; max-width: 40ch; font-size: .92rem; color: rgba(247,245,238,.85); }
#nati .tile .more span { display: inline-flex; gap: 8px; margin-top: 12px; font-size: .875rem; font-weight: 600; }
@media (min-width: 768px) {
  #nati .tile { aspect-ratio: auto; }
  #nati .tile:nth-child(1) { grid-column: span 7; grid-row: span 2; }
  #nati .tile:nth-child(1) h3 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
  #nati .tile:nth-child(2), #nati .tile:nth-child(3) { grid-column: span 5; }
  #nati .tile:nth-child(n+4) { grid-column: span 4; aspect-ratio: 4 / 5; }
}
#nati .tone-forest { background: var(--forest); color: var(--canvas); }
#nati .tone-sage { background: #c9ccb6; color: var(--forest); }
#nati .tone-gold { background: var(--gold); color: var(--forest); }
#nati .tone-cream { background: var(--canvas); color: var(--forest); }
#nati .tone-olive { background: var(--olive); color: var(--forest); }
#nati .tone-botanical { background: var(--forest-2); color: var(--canvas); }

/* product grid + cards */
#nati .grid { display: grid; gap: 56px 24px; }
@media (min-width: 640px) { #nati .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #nati .grid { grid-template-columns: repeat(4, 1fr); } }
#nati .card { position: relative; display: flex; flex-direction: column; }
#nati .card .frame { position: relative; border-radius: 6px; background: rgba(239,235,223,.7); padding: 40px 24px 32px; transition: background-color .7s var(--ease); }
#nati .card:hover .frame { background: var(--cream); }
#nati .card .chips { position: absolute; left: 16px; top: 16px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
#nati .chip { display: inline-block; border-radius: 999px; padding: 4px 10px; background: rgba(251,250,245,.92); color: var(--forest); }
#nati .chip.gold { background: var(--gold); }
#nati .chip.dark { background: var(--ink); color: var(--canvas); }
#nati .card .acts { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
#nati .card:hover .acts, #nati .card:focus-within .acts { opacity: 1; transform: none; }
@media (max-width: 767px), (hover: none) { #nati .card .acts { position: static; opacity: 1; transform: none; margin-top: 20px; } }
#nati .card .acts .btn { flex: 1; min-height: 40px; padding: 0 12px; font-size: .85rem; }
#nati .card .acts .btn-light { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
#nati .card .meta { margin-top: 16px; padding: 0 4px; display: flex; flex-direction: column; flex: 1; }
#nati .card .meta .label { color: var(--ink-2); }
#nati .card h3 { font-size: 1.35rem; line-height: 1.3; color: var(--forest); margin-top: 6px; }
#nati .card .desc { margin-top: 4px; font-size: .92rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#nati .card .price { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#nati .card .price strong { font-weight: 600; color: var(--ink); }
#nati .card .price s { color: var(--ink-2); font-size: .875rem; margin-left: 8px; }
#nati .card .price .from { font-size: .875rem; color: var(--ink-2); }

/* product presentations */
#nati .book-scene { perspective: 1600px; width: 78%; margin: 0 auto; }
#nati .book { --depth: 26px; position: relative; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-22deg) rotateX(2deg); transition: transform 1.1s var(--ease); }
#nati .card:hover .book, #nati .book-scene:hover .book, #nati .qv .book { transform: rotateY(-8deg) translateZ(10px); }
#nati .book > .f { position: absolute; inset: 0; border-radius: 2px 4px 4px 2px; overflow: hidden; backface-visibility: hidden; }
#nati .book > .front { transform: translateZ(calc(var(--depth) / 2)); box-shadow: var(--book-shadow); }
#nati .book > .front img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
#nati .book > .front::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(255,255,255,.18) 1.4%, rgba(0,0,0,.06) 3%, transparent 6%), linear-gradient(115deg, rgba(255,255,255,.18), transparent 38%); }
#nati .book > .spine { width: var(--depth); left: calc(var(--depth) / 2); background: var(--spine, var(--forest)); transform: rotateY(-90deg) translateX(calc(var(--depth) / -2)); transform-origin: left center; }
#nati .book > .pages { width: calc(var(--depth) - 4px); left: auto; right: 0; top: 3px; bottom: 3px; background: repeating-linear-gradient(90deg, #fbf8ee 0 2px, #e9e3d1 2px 3px); transform: rotateY(90deg) translateZ(calc(100% - var(--depth) / 2 + 2px)); transform-origin: right center; }
#nati .book > .back { background: var(--spine, var(--forest)); transform: translateZ(calc(var(--depth) / -2)) rotateY(180deg); }
#nati .device { width: 86%; margin: 0 auto; border-radius: 22px; padding: 4.5%; background: linear-gradient(145deg, #2d3a30, #1c2620); box-shadow: var(--book-shadow), inset 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-4deg); transition: transform 1s var(--ease); }
#nati .card:hover .device { transform: rotate(-1deg) translateY(-6px); }
#nati .device .screen { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; background: #fff; }
#nati .device .screen img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
#nati .sheets { position: relative; width: 82%; margin: 0 auto; aspect-ratio: 3 / 4; }
#nati .sheets > i { position: absolute; inset: 0; background: #fbf8ee; border-radius: 3px; box-shadow: 0 10px 30px -18px rgba(36,61,43,.5); }
#nati .sheets > i:nth-child(1) { transform: rotate(6deg) translate(8%, 2%); }
#nati .sheets > i:nth-child(2) { transform: rotate(-3deg) translate(-4%, 1%); }
#nati .sheets > .top { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; box-shadow: 0 10px 30px -18px rgba(36,61,43,.5); transition: transform 1s var(--ease); }
#nati .sheets > .top img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
#nati .card:hover .sheets > .top { transform: rotate(-1.5deg) translateY(-6px); }
#nati .more-link { margin-top: 64px; text-align: center; }

/* story */
#nati .story { display: grid; gap: 48px; }
@media (min-width: 768px) { #nati .story { grid-template-columns: 1.05fr 1fr; gap: 80px; } #nati .story .pic { position: sticky; top: 112px; align-self: start; } }
#nati .px { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 5; }
#nati .px img { position: absolute; left: 0; width: 100%; height: 114%; top: -7%; object-fit: cover; max-width: none; will-change: transform; }
#nati .story h2 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 1.04; color: var(--forest); margin-top: 16px; }
#nati .story h2 .script { font-size: 1.1em; }
#nati .story .body { margin-top: 32px; max-width: 54ch; font-size: 1.08rem; }
#nati .story .body p + p { margin-top: 20px; }
#nati .facts { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#nati .facts dt { font-family: var(--display); font-size: 1.9rem; color: var(--forest); }
#nati .facts dd { margin-top: 4px; font-size: .875rem; color: var(--ink-2); }
#nati .story .cta { margin-top: 48px; }
@media (min-width: 768px) { #nati .story .txt { display: flex; flex-direction: column; justify-content: center; padding: 64px 0; } }

/* hold to grow */
#nati .ritual { max-width: 1180px; margin: 0 auto; padding: 0 20px 96px; }
@media (min-width: 768px) { #nati .ritual { padding: 0 40px 128px; } }
#nati .ritual .box { border-radius: 28px; border: 1px solid var(--line); background: var(--panel); padding: 56px 24px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 768px) { #nati .ritual .box { grid-template-columns: 1fr 1fr; padding: 56px 64px; } }
#nati .plant { width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1; }
#nati .ritual .tx { text-align: center; }
@media (min-width: 768px) { #nati .ritual .tx { text-align: left; } }
#nati .ritual h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.1; color: var(--forest); margin-top: 12px; }
#nati .ritual p.lede { margin: 16px auto 0; max-width: 42ch; font-size: 1.05rem; }
@media (min-width: 768px) { #nati .ritual p.lede { margin-left: 0; } }
#nati .grow { --p: 0; height: 64px; padding: 0 28px 0 12px; gap: 16px; margin-top: 32px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#nati .grow svg { transform: rotate(-90deg); }
#nati .grow .gr { stroke-dasharray: 289; stroke-dashoffset: calc(289 * (1 - var(--p))); }
#nati .reward { display: inline-block; text-align: left; margin-top: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); padding: 24px 28px; }
#nati .reward .script { font-size: 1.9rem; }
#nati .reward .code { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
#nati .reward .code b { font-family: var(--mono); font-weight: 400; font-size: 1.25rem; letter-spacing: .2em; color: var(--forest); border: 1px dashed var(--forest); border-radius: 8px; padding: 8px 16px; }

/* shelf */
#nati .shelf { display: flex; gap: 32px; overflow-x: auto; padding: 0 20px 24px; scroll-snap-type: x mandatory; scrollbar-width: none; }
#nati .shelf::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { #nati .shelf { padding: 0 max(40px, calc((100vw - 1440px) / 2 + 40px)) 24px; } }
#nati .shelf > a { flex: 0 0 250px; scroll-snap-align: start; }
@media (min-width: 768px) { #nati .shelf > a { flex-basis: 300px; } }
#nati .shelf .n { position: absolute; left: 6px; top: 4px; z-index: 2; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; line-height: 1; padding: 6px 12px; border-radius: 999px; background: var(--forest); color: var(--canvas); box-shadow: 0 6px 16px -8px rgba(20,32,22,.6); }
#nati .shelf .vis { position: relative; padding: 16px 0 24px; }
#nati .shelf .vis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(36,61,43,.18), transparent); }
#nati .shelf h3 { font-size: 1.25rem; color: var(--forest); margin-top: 12px; }
#nati .shelf p { font-size: .875rem; color: var(--ink-2); }
#nati .shelf-nav { display: flex; gap: 8px; }
#nati .shelf-nav button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--forest); transition: background-color .3s; }
#nati .shelf-nav button:hover { background: rgba(36,61,43,.06); }

/* digital spotlight */
#nati .digital { background: var(--forest); color: var(--canvas); overflow: hidden; }
#nati .digital .dg-in { display: grid; gap: 56px; align-items: center; }
@media (min-width: 768px) { #nati .digital .dg-in { grid-template-columns: 1fr 1fr; } }
#nati .digital .kicker { color: var(--gold); }
#nati .digital h2 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 1.04; margin-top: 16px; color: var(--canvas); }
#nati .digital p.big { margin-top: 24px; max-width: 48ch; font-size: 1.08rem; color: rgba(247,245,238,.85); }
#nati .benefits { margin-top: 40px; display: grid; gap: 28px 32px; }
@media (min-width: 640px) { #nati .benefits { grid-template-columns: 1fr 1fr; } }
#nati .benefits li { border-top: 1px solid rgba(247,245,238,.2); padding-top: 16px; }
#nati .benefits b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--gold); }
#nati .benefits span { display: block; margin-top: 4px; font-size: .95rem; color: rgba(247,245,238,.8); }
#nati .digital .cta { margin-top: 48px; }

/* faq */
#nati .faq { display: grid; gap: 40px; }
@media (min-width: 768px) { #nati .faq { grid-template-columns: .8fr 1.2fr; } #nati .faq .hd { position: sticky; top: 128px; align-self: start; } }
#nati .faq .hd p { margin-top: 16px; max-width: 34ch; color: var(--ink-2); }
#nati .faq .hd a { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
#nati .qa { border-top: 1px solid var(--line); }
#nati .qa details { border-bottom: 1px solid var(--line); padding: 4px 0; }
#nati .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; }
#nati .qa summary span:first-child { font-family: var(--display); font-size: 1.3rem; line-height: 1.35; color: var(--forest); }
#nati .qa .pm { position: relative; flex: 0 0 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-strong); transition: transform .5s var(--ease); }
#nati .qa .pm::before, #nati .qa .pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--forest); transform: translate(-50%, -50%); }
#nati .qa .pm::before { width: 14px; height: 1px; } #nati .qa .pm::after { width: 1px; height: 14px; }
#nati .qa details[open] .pm { transform: rotate(45deg); }
#nati .qa details p { max-width: 62ch; padding: 0 48px 24px 0; color: var(--ink-2); }

/* testimonials */
#nati .quotes { display: grid; gap: 24px; }
@media (min-width: 768px) { #nati .quotes { grid-template-columns: repeat(3, 1fr); } }
#nati .quotes figure { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); padding: 32px; }
@media (min-width: 768px) { #nati .quotes figure { padding: 40px; } }
#nati .quotes figure::before { content: "\201C"; position: absolute; right: 28px; top: 8px; font-family: var(--display); font-size: 4.5rem; line-height: 1; color: rgba(195,174,112,.5); }
#nati .quotes blockquote { font-family: var(--display); font-size: 1.45rem; line-height: 1.35; color: var(--forest); }
#nati .quotes figcaption { margin-top: auto; padding-top: 32px; font-size: .875rem; color: var(--ink-2); }
#nati .quotes .sample { margin-left: 8px; border-radius: 999px; background: var(--cream); padding: 2px 8px; font-size: .62rem; }
#nati .quotes-note { margin-top: 24px; text-align: center; font-size: .75rem; color: var(--ink-2); }

/* newsletter */
#nati .nl { position: relative; isolation: isolate; overflow: hidden; }
#nati .nl > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; z-index: -2; }
#nati .nl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(36,61,43,.2); }
#nati .nl .nl-in { display: flex; justify-content: center; padding: 112px 20px; }
@media (min-width: 768px) { #nati .nl .nl-in { padding: 160px 20px; } }
#nati .nl .card-nl { width: 100%; max-width: 640px; border-radius: 24px; background: rgba(247,245,238,.95); padding: 48px 28px; text-align: center; box-shadow: 0 40px 80px -40px rgba(36,61,43,.6); }
@media (min-width: 768px) { #nati .nl .card-nl { padding: 48px 56px; } }
#nati .nl .script { font-size: 2.25rem; }
#nati .nl h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; color: var(--forest); margin-top: 8px; }
#nati .nl p.lede { margin: 16px auto 0; max-width: 44ch; }
#nati .nlf { margin: 32px auto 0; max-width: 460px; }
#nati .nlf .pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); padding: 6px; }
#nati .nlf input[type=email] { flex: 1; min-width: 0; min-height: 44px; border: 0 !important; outline: 0; background: transparent !important; padding: 0 16px !important; box-shadow: none !important; font-size: 1rem; color: var(--ink); width: auto; }
#nati .nlf input::placeholder { color: var(--ink-2); }
#nati .nlf .btn { min-height: 44px; padding: 0 18px; flex-shrink: 0; }
#nati .nlf .msg { margin-top: 10px; font-size: .875rem; color: #8f2f22; }
#nati .nlf .ok { font-family: var(--display); font-size: 1.25rem; color: var(--forest); }


/* toast + quick view */
#nati .qv { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px; }
#nati .qv[hidden] { display: none; }
#nati .qv .bg { position: absolute; inset: 0; background: rgba(36,61,43,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: nati-fade .5s var(--ease); }
#nati .qv .dlg { position: relative; display: grid; width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto; border-radius: 18px; background: var(--canvas); animation: nati-rise .6s var(--ease); outline: 0; }
@media (min-width: 768px) { #nati .qv .dlg { grid-template-columns: .9fr 1.1fr; } }
#nati .qv .vis { background: var(--cream); padding: 56px 40px; }
#nati .qv .tx { padding: 28px; }
@media (min-width: 768px) { #nati .qv .tx { padding: 40px; } }
#nati .qv h2 { font-size: 2.4rem; line-height: 1.1; color: var(--forest); margin-top: 8px; }
#nati .qv .sub { font-size: 1.1rem; color: var(--ink-2); margin-top: 4px; }
#nati .qv .by { font-size: .875rem; color: var(--ink-2); margin-top: 4px; }
#nati .qv .d { margin-top: 20px; font-size: 1.02rem; }
#nati .qv .fmts { margin-top: 24px; display: grid; gap: 8px; }
#nati .qv .fmts li { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px; }
#nati .qv .fmts li span:first-child { font-weight: 500; color: var(--forest); }
#nati .qv .row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
#nati .qv .x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 999px; background: rgba(251,250,245,.9); display: grid; place-items: center; }
@keyframes nati-fade { from { opacity: 0; } }
@keyframes nati-rise { from { opacity: 0; transform: translateY(30px) scale(.98); } }

/* pause loops on hidden tabs */
#nati.paused *, #nati.paused *::before, #nati.paused *::after { animation-play-state: paused !important; }

/* reduced motion: final states, no loops */
@media (prefers-reduced-motion: reduce) {
  #nati *, #nati *::before, #nati *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
  #nati [data-reveal], #nati [data-stagger] > *, #nati .mask > span { opacity: 1 !important; transform: none !important; }
  #nati .vine .leaf { opacity: .9; transform: none; }
  #nati .book { transform: rotateY(-14deg); }
}