/* /app/: the app page on the nursery print. Loads after /v2/v2.css and reuses its tokens and components.
   Mobile first; wider layouts layer on at 600, 640, 860, 900, 960, and 1000px. */

:root {
  --bezel: oklch(0.21 0.032 165);     /* the phone's body: a deeper pine, so the screen reads as the light thing */
  --burlap: #cca779;                  /* root balls, in the reel's truck only */
  --warn-on-pine: oklch(0.77 0.1 45); /* a burnt orange that holds up on pine */
}

/* ---------- header: the page you are on ---------- */
.nav a[aria-current="page"], .menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .35em; }

/* ---------- hero: the app's one display moment, smaller than the home's ---------- */
.app-hero h1 { font-size: clamp(2.5rem, 11.4vw, 5.5rem); letter-spacing: -.05em; }
@media (min-width: 1000px) {
  .app-hero .hero-intro { align-items: start; } /* the copy runs longer than the headline; the headline holds the top */
  .app-hero h1 { font-size: clamp(4.25rem, 7vw, 5.5rem); }
}

/* The app, drawn flat and annotated like a planting plan. */
.app-art { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2.25rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.app-art::before {
  content: ""; position: absolute; z-index: -1; inset: -2.5rem calc(-1 * var(--gutter));
  background: url(/v2/art/plan-texture.svg) center / cover no-repeat; opacity: .5; pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}

/* ---------- the phone: one drawing for both screens ---------- */
.device { position: relative; flex: none; width: 296px; max-width: 100%; padding: 9px; border-radius: 46px; background: var(--bezel); }
.device::after { content: ""; position: absolute; z-index: 2; top: 19px; left: 50%; width: 86px; height: 25px; margin-left: -43px; border-radius: 13px; background: var(--bezel); }
.pine .device { outline: 1.5px solid var(--rule-pine); }
.dv-screen { overflow: hidden; border-radius: 37px; background: var(--paper); color: var(--pine); font-size: 13px; line-height: 1.3; }
.dv-screen svg { display: block; }
.dv-bar { background: var(--forest); color: var(--on-pine); }
.dv-status { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 12px 24px 0 30px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-status svg { width: 34px; height: 12px; }
.dv-title { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px 10px; }
.dv-disc { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: oklch(0.95 0.016 98 / .14); }
.dv-disc svg { width: 17px; height: 17px; }
.dv-title b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.dv-title span { display: block; font-size: 12px; color: var(--on-pine-2); }
.dv-list { padding: 4px 14px 0; }
.dv-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 10px; height: 46px; border-bottom: 1px solid var(--rule); }
.dv-line b { overflow: hidden; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.dv-line .amt { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.dv-line .sz, .dv-line .qty { font-size: 12px; color: var(--ink-2); }
.dv-line .qty { text-align: right; font-variant-numeric: tabular-nums; }
.dv-total { display: flex; justify-content: space-between; align-items: center; height: 54px; margin: 6px 14px 0; border-top: 2px solid var(--pine); }
.dv-total span { font-weight: 600; }
.dv-total b { font-size: 24px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.dv-send { display: grid; place-items: center; height: 44px; margin: 10px 14px 14px; border-radius: 4px; background: var(--forest); color: var(--on-pine); font-size: 15px; font-weight: 650; }
.dv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); height: 60px; padding: 9px 4px 0; background: var(--pine); color: var(--on-pine-2); font-size: 10.5px; font-weight: 600; text-align: center; }
.dv-tabs span { display: grid; justify-items: center; align-content: start; gap: 3px; }
.dv-tabs svg { width: 20px; height: 20px; }
.dv-tabs .on { color: var(--gold); }
/* the plant page */
.dv-photo { display: grid; place-items: center; height: 168px; background: var(--sage-2); }
.dv-photo img { width: auto; height: 150px; }
.dv-pd { display: grid; gap: 1px; padding: 12px 14px 4px; }
.dv-pd b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.dv-pd .bot { font-size: 14px; }
.dv-desc { margin-top: 5px; color: var(--ink-2); }
.dv-sizes { display: grid; gap: 6px; padding: 8px 14px 0; }
.dv-size { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 4px; font-variant-numeric: tabular-nums; }
.dv-size b { font-weight: 650; }
.dv-size.pick { border: 2px solid var(--pine); background: var(--sage-2); }

/* The four things the app does, as plan callouts. On phones they are a short list under the phone. */
.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; width: 100%; max-width: 34rem; }
.co { display: flex; flex-direction: column; gap: .6rem; padding-top: .75rem; border-top: 1px solid var(--rule); font-weight: 600; line-height: 1.3; }
.co-lead { display: none; }
.co-thumbs { display: flex; gap: .15rem; }
.co-thumbs img { width: auto; height: 46px; }
@media (min-width: 600px) and (max-width: 899px) { .callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
@media (min-width: 900px) {
  .app-art { display: flex; justify-content: center; }
  .callouts { position: absolute; inset: 0; display: block; max-width: none; pointer-events: none; }
  /* Each callout sits on a line at a fixed height on the 296px phone; the dot lands just inside its screen.
     Leads share one length, so the labels on each side line up. */
  .callouts { --lead: clamp(4rem, 14vw - 4.5rem, 8.5rem); }
  .co { position: absolute; top: var(--y); flex-direction: row; align-items: center; gap: 0; height: 0; padding: 0; border: 0; pointer-events: auto; }
  .co-r { left: calc(50% + 132px); }
  .co-l { right: calc(50% + 132px); }
  .co-prices { --y: 142px; }
  .co-photos { --y: 234px; }
  .co-order { --y: 487px; }
  .co-devices { --y: 330px; left: calc(50% + 143.5px); }
  .co-text { flex: none; padding: 0 .9rem; font-size: 1.0625rem; white-space: nowrap; }
  .co-lead { display: block; position: relative; flex: none; width: var(--lead); height: 1px; background: var(--pine); }
  .co-devices .co-lead { width: calc(var(--lead) - 11.5px); }
  .co-lead::before { content: ""; position: absolute; top: -5px; width: 11px; height: 11px; border: 2px solid var(--paper); border-radius: 50%; background: var(--pine); }
  .co-r .co-lead::before { left: -5px; }
  .co-l .co-lead::before { right: -5px; }
  .co-thumbs { position: absolute; left: .9rem; bottom: 1.15rem; }
}

/* What's coming, kept quieter than the ask. */
.hero-plugin { margin-top: 1.75rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.hero-plugin p { max-width: 36ch; font-size: var(--t-sm); line-height: 1.45; text-wrap: balance; }
.hero-plugin strong { font-weight: 650; }
.hero-plugin .text-link { font-size: var(--t-sm); }
@media (min-width: 700px) and (max-width: 999px) { .hero-plugin { grid-column: 1 / -1; margin-top: 0; } }

/* ---------- the reel: one clock seeks every layer. 1cqw = 1% of the stage width; the stage is 100 x 125 ---------- */
.reel-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: center; }
.reel-grid > * { min-width: 0; }
.reel-copy h2 { max-width: 12ch; }
@media (min-width: 960px) { .reel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 4.5rem; } }
.reel { width: 100%; max-width: 500px; justify-self: center; }
.reel-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--pine); color: var(--on-pine); container-type: size; isolation: isolate; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.reel-stage p { margin: 0; }
.r-layer, .r-scene { position: absolute; inset: 0; }
.r-scene > * { position: absolute; }
.reel:not(.is-ready) :is(.r-scene, .r-caps, .reel-controls) { display: none; }
.r-grid { position: absolute; inset: -12%; background-image: linear-gradient(oklch(0.95 0.016 98 / .06) 1px, transparent 1px), linear-gradient(90deg, oklch(0.95 0.016 98 / .06) 1px, transparent 1px); background-size: 8cqw 8cqw; }
.r-bigmark { position: absolute; left: 30cqw; top: 46cqw; width: 96cqw; height: 120cqw; color: oklch(0.95 0.016 98 / .07); }

.r-caps { position: absolute; left: 7cqw; right: 7cqw; top: 8cqw; height: 18cqw; z-index: 8; pointer-events: none; }
.r-cap { position: absolute; inset: 0 0 auto; font: 750 6.6cqw/1.08 var(--font); letter-spacing: -.035em; color: var(--on-pine); }
.r-cap em { font-style: normal; color: var(--sage); }
.r-l { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.r-l > span { display: block; translate: 0 110%; }
.r-flip { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.r-flip > span { grid-area: 1 / 1; }
.r-flip > .b { translate: 0 115%; }

/* before: paper on the desk, keylined instead of shadowed */
.r-paper { display: grid; align-content: start; gap: 1.6cqw; width: 38cqw; height: 30cqw; padding: 2.6cqw; border: .3cqw solid var(--pine); border-radius: .4cqw; background: var(--paper); z-index: 1; }
.r-paper b { font: 800 2cqw/1 var(--font); letter-spacing: .12em; color: var(--forest-2); }
.r-paper i { display: block; height: .9cqw; background: var(--rule); }
.r-paper i:nth-of-type(3n) { width: 62%; }
.r-paper i:nth-of-type(3n+1) { width: 92%; }
.r-paper i:nth-of-type(3n+2) { width: 78%; }
.r-paper u { justify-self: end; text-decoration: none; font: 900 3.8cqw/1 var(--font); color: var(--negative); }
.p1 { left: 5cqw; top: 31cqw; rotate: -8deg; }
.p2 { left: 56cqw; top: 29cqw; rotate: 6deg; }
.p3 { left: 7cqw; top: 74cqw; rotate: 5deg; }
.p4 { left: 54cqw; top: 77cqw; rotate: -4deg; }
.r-sticky { padding: 2.4cqw 2.8cqw; border: .3cqw solid var(--pine); background: var(--sage-2); color: var(--pine); font: 800 4cqw/1.05 var(--font); white-space: nowrap; z-index: 1; }
.s1 { left: 57cqw; top: 63cqw; rotate: 9deg; }
.s2 { left: 27cqw; top: 60cqw; rotate: -11deg; }
.r-call { left: 6cqw; top: 108cqw; display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3.6cqw; border: .3cqw solid oklch(0.95 0.016 98 / .3); border-radius: .4cqw; color: var(--on-pine); font: 700 3.5cqw/1.2 var(--font); white-space: nowrap; z-index: 1; }
.r-call svg { flex: none; width: 4.2cqw; height: 4.2cqw; color: var(--sage); }
.r-call .b { color: var(--warn-on-pine); }
.r-clock { left: 78cqw; top: 104cqw; width: 14cqw; height: 14cqw; border: .9cqw solid var(--on-pine); border-radius: 50%; z-index: 1; }
.r-clock span { position: absolute; left: 50%; bottom: 50%; width: .9cqw; margin-left: -.45cqw; background: var(--on-pine); transform-origin: 50% 100%; }
.r-clock .h { height: 3.4cqw; rotate: 225deg; }
.r-clock .m { height: 5.2cqw; background: var(--sage); rotate: 180deg; }
.r-time { left: 54cqw; top: 108.2cqw; width: 21cqw; text-align: right; font: 800 3.9cqw/1 var(--font); letter-spacing: -.02em; color: var(--on-pine); font-variant-numeric: tabular-nums; z-index: 1; }
.r-flash { left: 5cqw; top: 29cqw; width: 90cqw; height: 90cqw; border: .8cqw solid var(--sage); border-radius: 50%; opacity: 0; z-index: 1; }

/* build and change: the app, drawn like the phone above */
.r-cam { position: absolute; inset: 0; transform-origin: 50cqw 45.6cqw; z-index: 2; }
.r-phone { position: absolute; left: 20cqw; top: 30cqw; width: 60cqw; padding: 1.3cqw; border: .3cqw solid var(--rule-pine); border-radius: 7.4cqw; background: var(--bezel); }
.r-screen { position: relative; overflow: hidden; border-radius: 6.1cqw; background: var(--paper); color: var(--pine); font: 400 2.5cqw/1.28 var(--font); }
.r-bar { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 2.8cqw 2.6cqw 1.6cqw; background: var(--forest); color: var(--on-pine); }
.r-bar b { font-size: 3.2cqw; font-weight: 650; }
.r-chip { display: inline-grid; overflow: hidden; border-radius: .5cqw; font-size: 2.1cqw; font-weight: 650; }
.r-chip > span { grid-area: 1 / 1; padding: .5cqw 1.8cqw; text-align: center; background: oklch(0.95 0.016 98 / .16); }
.r-chip > .b { translate: 0 115%; background: var(--sage-2); color: var(--pine); }
.r-list { display: grid; padding: .6cqw 2.4cqw 0; }
.r-row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1cqw 1.6cqw; padding: 1.1cqw 0; border-bottom: .25cqw solid var(--rule); }
.r-name { overflow: hidden; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.r-amt { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.r-meta { position: relative; grid-column: 1 / -1; color: var(--ink-2); font-size: 2.1cqw; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-meta .b { color: var(--pine); font-weight: 700; }
.r-glow { position: absolute; inset: 0 -1.2cqw; z-index: -1; border-radius: .5cqw; background: var(--sage-2); opacity: 0; pointer-events: none; }
.r-tap { position: absolute; left: 4.5cqw; top: 50%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border: .5cqw solid var(--sage-deep); border-radius: 50%; background: oklch(0.56 0.05 148 / .2); opacity: 0; }
.r-delta { position: absolute; right: 0; bottom: .9cqw; padding: .5cqw 1.3cqw; border-radius: .4cqw; background: var(--pine); color: var(--on-pine); font: 800 2.1cqw/1 var(--font); opacity: 0; }
.r-total { position: relative; display: flex; justify-content: space-between; align-items: baseline; margin: .6cqw 2.4cqw 0; padding: 1.6cqw 0 1.8cqw; border-top: .45cqw solid var(--pine); }
.r-total span { font-weight: 650; }
.r-total b { font-size: 4.8cqw; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.r-sweep { position: absolute; left: 0; right: 0; bottom: .5cqw; height: .5cqw; background: var(--sage-deep); transform-origin: left; scale: 0 1; }
.r-send { position: relative; display: grid; min-height: 7cqw; margin: 1.6cqw 2.4cqw 2.4cqw; overflow: hidden; border-radius: .8cqw; background: var(--forest); color: var(--on-pine); font-size: 2.8cqw; font-weight: 650; }
.r-send > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 1cqw; }
.r-send svg { width: 3.2cqw; height: 3.2cqw; }
.r-send > .b { opacity: 0; }
.r-ripple { position: absolute; left: 50%; top: 50%; width: 30cqw; height: 30cqw; margin: -15cqw 0 0 -15cqw; border-radius: 50%; background: oklch(0.95 0.016 98 / .3); opacity: 0; pointer-events: none; }
/* the plant card that slides up to start the list */
.r-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.4cqw 2.4cqw 2.6cqw; border-top: .3cqw solid var(--pine); border-radius: 2.4cqw 2.4cqw 0 0; background: var(--paper); translate: 0 105%; }
.r-grab { display: block; width: 7cqw; height: .7cqw; margin: 0 auto 1.8cqw; border-radius: 1cqw; background: var(--rule); }
.r-pd { display: flex; align-items: center; gap: 2cqw; }
.r-pd-img { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; overflow: hidden; border-radius: .6cqw; background: var(--sage-2); }
.r-pd-img img { width: auto; height: 85%; }
.r-pd b { display: block; font-size: 3.1cqw; font-weight: 700; }
.r-pd em { display: block; font-family: var(--font-bot); font-size: 2.3cqw; color: var(--ink-2); }
.r-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; margin-top: 2.2cqw; }
.r-sizes > span { position: relative; display: grid; gap: .3cqw; padding: 1.2cqw 1.4cqw; border: .3cqw solid var(--rule); border-radius: .6cqw; color: var(--ink-2); font-size: 2.1cqw; white-space: nowrap; }
.r-sizes b { font-size: 2.8cqw; font-weight: 700; color: var(--pine); }
.r-pick { position: absolute; inset: -.3cqw; border: .5cqw solid var(--pine); border-radius: .6cqw; opacity: 0; }
.r-dot { position: absolute; left: 50%; top: 50%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border: .5cqw solid var(--sage-deep); border-radius: 50%; background: oklch(0.56 0.05 148 / .2); opacity: 0; }
.r-add { position: relative; display: grid; place-items: center; min-height: 7cqw; margin-top: 2.2cqw; overflow: hidden; border-radius: .8cqw; background: var(--forest); color: var(--on-pine); font-size: 2.8cqw; font-weight: 650; }
.r-client { left: 5cqw; top: 66cqw; display: flex; align-items: flex-end; gap: 1.8cqw; opacity: 0; z-index: 3; }
.r-av { flex: none; display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: var(--sage-2); color: var(--pine); font: 800 2.7cqw/1 var(--font); }
.r-say { padding: 2.2cqw 3cqw; border: .3cqw solid var(--pine); border-radius: 1.6cqw 1.6cqw 1.6cqw .3cqw; background: var(--paper); color: var(--pine); font: 700 3.6cqw/1.2 var(--font); white-space: nowrap; }

/* send: the truck from the home page's palette, and the same price in the confirmation */
.r-road { left: 6cqw; right: 6cqw; top: 116.6cqw; height: .5cqw; background: repeating-linear-gradient(90deg, var(--sage) 0 3cqw, transparent 3cqw 5cqw); transform-origin: left; scale: 0 1; z-index: 1; }
.r-truck { left: 52cqw; top: 99.5cqw; width: 40cqw; translate: -95cqw 0; z-index: 1; }
.r-truck svg { display: block; width: 100%; height: auto; overflow: visible; }
.r-wheel { transform-box: fill-box; transform-origin: center; }
.r-speed { opacity: 0; transform-box: fill-box; transform-origin: right center; }
.r-speed path { fill: none; stroke: var(--sage); stroke-width: 2.4; stroke-linecap: round; }
.tk-ball { fill: var(--burlap); }
.tk-tree { fill: var(--sage); }
.tk-tree-2 { fill: var(--sage-deep); }
.tk-bed { fill: var(--paper-2); }
.tk-cab { fill: var(--on-pine); }
.tk-win { fill: var(--pine); }
.tk-logo { fill: none; stroke: var(--sage-deep); stroke-width: 1.2; stroke-linejoin: round; }
.tk-chassis { fill: oklch(0.19 0.025 165); }
.tk-tire { fill: oklch(0.17 0.02 165); }
.tk-hub { fill: var(--on-pine); }
.tk-spoke { stroke: var(--on-pine); stroke-width: 1.6; }
.r-order { left: 58cqw; top: 70cqw; width: 37cqw; opacity: 0; z-index: 3; }
.r-order-from { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: 1.2cqw; font: 700 2.6cqw/1 var(--font); color: var(--on-pine-2); }
.r-order-from svg { width: 4.4cqw; height: 4.4cqw; padding: .8cqw; border-radius: 50%; background: var(--paper); color: var(--sage-deep); }
.r-order p { position: relative; z-index: 0; padding: 2.2cqw 2.8cqw; border-radius: .3cqw 1.6cqw 1.6cqw 1.6cqw; background: var(--paper); color: var(--pine); font: 600 3.3cqw/1.25 var(--font); }
.r-order b { font-weight: 800; }
.r-price { position: relative; white-space: nowrap; }
.r-hl { position: absolute; inset: -.12em -.22em; z-index: -1; border-radius: .15em; background: var(--sage); transform-origin: left; scale: 0 1; }
/* the price itself, carried from the app's total into the confirmation */
.r-carry { z-index: 5; padding: 1cqw 2.2cqw; border: .3cqw solid var(--pine); border-radius: .4cqw; background: var(--sage); color: var(--pine); font: 800 4cqw/1 var(--font); letter-spacing: -.01em; white-space: nowrap; opacity: 0; translate: -50% -50%; }

/* the end card: a triangle wipe into the mark */
.r-wipe { left: -100cqw; top: -105.1cqw; width: 300cqw; height: 251.4cqw; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 66.667%; scale: 0; z-index: 6; }
.w1 { background: var(--sage); }
.w2 { background: var(--pine); }
.r-end { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: 3.6cqw; padding: 0 9cqw; text-align: center; }
.r-endmark { width: 18cqw; height: 22.5cqw; fill: none; stroke: var(--sage); stroke-width: 1.5; stroke-linejoin: round; overflow: visible; }
.r-word { width: 50cqw; color: var(--on-pine); }
.r-word svg { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 168; }
.r-tag { font: 750 5.9cqw/1.08 var(--font); letter-spacing: -.035em; color: var(--sage); white-space: nowrap; }

.reel-controls { display: flex; align-items: center; gap: .85rem; margin-top: .75rem; }
.reel-toggle { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 2px; background: var(--pine); color: var(--on-pine); cursor: pointer; transition: background-color .2s var(--ease); }
.reel-toggle:hover { background: var(--forest); }
.reel-toggle svg { width: 18px; height: 18px; }
.reel-toggle .i-pause, .reel.is-playing .reel-toggle .i-play { display: none; }
.reel.is-playing .reel-toggle .i-pause { display: block; }
.reel-chapters { flex: 1; min-width: 0; display: flex; gap: 6px; }
.reel-ch { display: grid; align-content: center; gap: 7px; min-width: 48px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 600 .8125rem/1.2 var(--font); text-align: left; cursor: pointer; }
.reel-ch:hover, .reel-ch.is-on { color: var(--pine); }
@media (max-width: 420px) { .reel-ch { font-size: .75rem; letter-spacing: -.01em; } }
.ch-bar { display: block; height: 3px; overflow: hidden; background: var(--rule); }
.ch-bar i { display: block; height: 100%; background: var(--pine); transform-origin: left; scale: 0 1; }

/* ---------- three steps, on the light band ---------- */
.plan-steps .steps { margin-top: clamp(1.75rem, 4vw, 2.75rem); counter-reset: step; }
.plan-steps .steps li { align-content: start; border-top: 2px solid var(--pine); counter-increment: step; }
.plan-steps .steps h3::before { content: counter(step); display: block; margin-bottom: .55rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; color: var(--forest-2); }
@media (min-width: 860px) { .plan-steps .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; } }
.steps-more { max-width: 60ch; margin-top: 1.25rem; color: var(--ink-2); }
.steps-more a, .faq details a { font-weight: 600; color: var(--pine); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* ---------- selling with the plants in front of them ---------- */
.sell-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.sell-grid > * { min-width: 0; }
.sell-list { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.sell-list li { display: grid; gap: .45rem; padding: 1.15rem 0; border-top: 1px solid var(--rule-pine); }
.sell-list li:first-child { border-top: 2px solid var(--on-pine); }
.sell-list p { max-width: 44ch; line-height: 1.6; color: var(--on-pine-2); }
.sell-art { display: flex; justify-content: center; }
@media (min-width: 900px) { .sell-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .sell-art { order: -1; } }

/* ---------- the price sheet versus the app: one real table ---------- */
.vs { width: 100%; margin-top: clamp(1.75rem, 4vw, 2.75rem); border-collapse: collapse; font-size: 1.0625rem; }
.vs th, .vs td { padding: 1.05rem 1.5rem 1.05rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.vs thead th { padding-block: 0 .6rem; border-bottom: 2px solid var(--pine); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-2); }
.vs tbody th { width: 26%; font-weight: 650; }
.vs td { width: 37%; color: var(--ink-2); }
.vs td:last-child { padding-right: 0; color: var(--pine); font-weight: 600; }
@media (max-width: 639px) {
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs, .vs tbody, .vs tr, .vs th, .vs td, .vs tbody th { display: block; width: auto; }
  .vs { border-top: 2px solid var(--pine); }
  .vs tr { padding: 1rem 0 .85rem; border-bottom: 1px solid var(--rule); }
  .vs th, .vs td { padding: 0; border: 0; }
  .vs tbody th { margin-bottom: .45rem; font-size: 1.125rem; }
  .vs td { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .75rem; padding: .2rem 0; }
  .vs td::before { content: attr(data-col); padding-top: .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-2); }
}

/* ---------- the close: the app on the light side, the list on the pine side ---------- */
.get-app p { max-width: 34ch; margin-top: 1.5rem; font-size: 1.125rem; }
.stores { display: grid; gap: .75rem; max-width: 26rem; margin-top: 2rem; }
.stores .btn { justify-content: space-between; }

/* ---------- motion: the phone arrives once and its callouts draw out; reduced motion shows them finished ---------- */
@keyframes device-rise { from { opacity: 0; transform: translateY(2.5rem); } }
@keyframes lead-draw { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-plugin { animation: rise .8s var(--ease) .24s both; }
  .app-art .device { animation: device-rise 1.2s var(--ease-expo) .2s both; }
  .co-text, .co-thumbs { animation: fade .6s var(--ease) both; animation-delay: calc(1s + var(--i, 0) * 90ms); }
  .co-lead { animation: lead-draw .6s var(--ease) both; animation-delay: calc(.8s + var(--i, 0) * 90ms); }
  .co-r .co-lead { transform-origin: left center; }
  .co-l .co-lead { transform-origin: right center; }
}

/* This page's one ask is the download, so the send options in the close stay outlined. */
.close .ways .btn-gold, .close .ways .way-email { background: transparent; border-color: currentColor; color: inherit; }
.close .ways .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--pine); }