/*
 * botany.tech — home v8, What's next (docs/variants/screens/whats-next, A).
 * Two rows on one dashed line: 01 Stocks, 02 AI agent. "Next" is said by
 * the state of the node and the line, never by a word: 01 a filled node,
 * 02 an empty one (a dashed ring turning slowly), the line past it thinner
 * and paler, running out of the block. No season, no dates (owner,
 * 29.10.2026). Everything under .wna / .wn-.
 *
 *   section.wna > .container
 *     h2.h2.wn-h
 *     ol.wn-list > li.wn-item(--now | --next --flip)[data-wn]
 *       .wn-node.num  .wn-txt (h3.h3.wn-name, p.wn-line)  .wn-pic(--moss | --fern)
 *
 * The pictures are our grounds blurred, as How it works and "you can"
 * (v8-new.css .yc-pic), one frosted piece of the product on each: the
 * strategy card exactly as Our best strategies draws it (site.css .mk, the
 * app's filled card) running on stocks; a short dialog, yours on
 * the right in a fill, the answer on the left on glass with its face
 * outside, each with its corner cut on its own side (12, the tail 4).
 * The plates take the landing's plate corner (--r-plate, 24, the app's).
 * Behaviour: whats-next.js.
 */

.wna{overflow:clip;padding-bottom:calc(var(--block) + 32px)}
.wn-h{text-align:left}

.wn-list{--node:32px;--gap:56px;--dash:repeating-linear-gradient(to bottom,var(--l500) 0 6px,transparent 6px 12px);
  list-style:none;margin:32px 0 0;padding:0;display:grid;gap:var(--gap)}

/* phone: the line on the left, the words, then the picture under them */
.wn-item{position:relative;display:flex;flex-direction:column;gap:24px;min-width:0;padding-left:calc(var(--node) + 16px)}
.wn-node{position:absolute;left:0;top:-2px;z-index:1;display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;font-size:12px;line-height:1;font-weight:500}
.wn-item::after{content:'';position:absolute;left:calc(var(--node) / 2 - 1px);top:calc(var(--node) + 6px);bottom:calc(8px - var(--gap));width:2px;background:var(--dash)}

/* 01: the node is filled */
.wn-item--now .wn-node{background:var(--solid-bg);color:var(--solid-fg)}
/* 02: the node is empty, its ring dashed; the line past it is thin and pale */
.wn-item--next .wn-node{background:var(--s0);color:var(--ink500)}
.wn-item--next .wn-node::before{content:'';position:absolute;inset:0;border:1.5px dashed var(--ink300);border-radius:50%;animation:wn-turn 30s linear infinite}
.wn-item--next::after{width:1px;left:calc(var(--node) / 2 - .5px);bottom:-260px;background:repeating-linear-gradient(to bottom,var(--l300) 0 4px,transparent 4px 10px)}
@keyframes wn-turn{to{transform:rotate(360deg)}}

/* the quarter over the name (owner, 29.10.2026) */
.wn-when{margin:0 0 8px;color:var(--ink500)}
.wn-name{margin:0}
.wn-line{margin-top:8px;font-size:17px;line-height:26px;color:var(--ink500);max-width:19em;text-wrap:pretty}

/* the plates */
.wn-pic{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  aspect-ratio:6 / 5;padding:24px;border-radius:var(--r-plate);overflow:hidden;background:var(--ol800);min-width:0}
.wn-pic::before{content:'';position:absolute;inset:-40px;z-index:-1;background-repeat:no-repeat}
/* 01's ground: a plain fill, the paper grey (owner, 29.10.2026: no
   picture); the card's own --s2 sits on it as on the shelf */
.wn-pic--fill{background:var(--s3)}
/* the card as a picture: one share of the plate at every width */
.wn-pic--fill .wn-card{display:block;width:82%;height:auto}
.wn-pic.wn-pic--fill{aspect-ratio:6 / 5;padding:0}
@media (min-width:900px){.wn-pic--fill > .wn-card{zoom:1}}
.wn-pic--fill::before{content:none}
/* 02's ground: a quiet warm stone, no hue of the others (owner: not green,
   blue or yellow), dark enough that the white answer and the black
   question both stand out */
.wn-pic--sand{background:radial-gradient(70% 60% at 50% 45%,#D9D1C1 0%,#CBC2AF 100%)}
.wn-pic--sand::before{content:none}
.wn-pic--sand .wn-sys{background:var(--s0)!important;-webkit-backdrop-filter:none;backdrop-filter:none}

/* 01: the strategy card as Our best strategies draws it (site.css .mk),
   without the save mark: the tickers overlap as the coins do, PnL where the
   card has its return (owner, 29.10.2026) */
.wn-mk{width:min(340px,100%)}
.wn-mk .mk-t,.wn-mk .mk-t + .mk-meta{padding-right:0}
.wn-mk .mk-b{margin-bottom:0}
.wn-mk .mk-figs{margin-bottom:0}
/* the shelf's own narrow-screen figures (site.css .best .mk-figs) */
.wn-mk .mk-figs .t{white-space:nowrap}
@media (max-width:420px){.wn-mk .mk-figs{gap:6px}.wn-mk .mk-figs .t{font-size:13px}.wn-mk .mk-figs .v{font-size:16px}}
/* phones: the plate grows with the card rather than cropping it */
@media (max-width:899px){.wn-pic{aspect-ratio:auto;min-height:280px}}
/* the home's sparkline draw (v8-new.css .mo .mk) waits for a class this
   card never gets; this one draws by its own clip below */
.mo .wn-mk .spark-l{stroke-dasharray:none;stroke-dashoffset:0}
.mo .wn-mk .spark-a{opacity:1}

/* 02: a dialog. Yours on the right, filled in the buttons' black; the answer on
   the left, on glass, the face outside it at the foot, as a chat draws the
   other side */
.wn-chat{width:min(330px,100%);display:flex;flex-direction:column;gap:12px}
.wn-me,.wn-sys{margin:0;padding:10px 14px;font-size:14px;line-height:19px}
.wn-me{align-self:flex-end;max-width:80%;border-radius:var(--r-card) var(--r-card) var(--r-tap) var(--r-card);background:var(--solid-bg);color:var(--solid-fg);font-weight:500}
.wn-re{display:flex;align-items:flex-end;gap:8px;max-width:90%}
.wn-av{flex:none}
/* the face is our mark, as the header logo (#mark) */
/* the face and your message in the black of Try on demo (.btn-primary),
   as everywhere on the page */
.wn-av{background:var(--solid-bg)}
.wn-av svg{width:14px;height:17px;margin:0;color:var(--solid-fg)}
.wn-rb{display:grid;justify-items:start;min-width:0}
.wn-rb > *{grid-area:1/1}
.wn-sys{border-radius:var(--r-card) var(--r-card) var(--r-card) var(--r-tap);color:var(--ink900)}
.wn-who{display:block;font-size:13px;line-height:18px;font-weight:600}
/* the chat stands still, the answer already in (owner, 29.10.2026: no
   typing play) */

/* desktop: picture and words side by side, mirrored in 02, the line down the middle */
@media (min-width:900px){
  .wna{padding-bottom:calc(var(--block) + 48px)}
  .wn-h{text-align:center}
  .wn-list{--node:40px;--gap:88px;margin-top:56px}
  .wn-item{display:grid;grid-template-columns:minmax(0,1fr) var(--node) minmax(0,1fr);grid-template-areas:"pic node txt";column-gap:56px;align-items:center;padding-left:0}
  .wn-item--flip{grid-template-areas:"txt node pic"}
  .wn-pic{grid-area:pic;padding:40px}
  .wn-pic > *{zoom:1.2}
  .wn-txt{grid-area:txt}
  .wn-node{position:relative;left:auto;top:auto;grid-area:node;font-size:13px}
  /* the line runs behind each node, stopping short of it */
  .wn-item::before{content:'';position:absolute;left:calc(50% - 1px);top:0;height:calc(50% - var(--node) / 2 - 8px);width:2px;background:var(--dash)}
  .wn-item::after{left:calc(50% - 1px);top:calc(50% + var(--node) / 2 + 8px);bottom:calc(0px - var(--gap))}
  .wn-item--next::after{left:calc(50% - .5px)}
  .wn-item--flip .wn-txt{text-align:right;justify-self:end}
  .wn-item--flip .wn-line{margin-left:auto}
  .wn-name{font-size:32px;line-height:38px}
}

/* motion: transform and opacity only; with reduced motion everything
   stands in its end state */
@media (prefers-reduced-motion:no-preference){
  /* the road comes first: the line draws down to the node, the node
     lights, the line goes on down; then words and picture come in together,
     one short rise (owner, 29.10.2026: not in separate pieces) */
  .js .wn-item::before,.js .wn-item::after{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.5,0,.3,1)}
  .js .wn-item::after{transition-duration:1.1s;transition-delay:.55s}
  .js .wn-item.is-in::before,.js .wn-item.is-in::after{clip-path:inset(0)}
  .js .wn-item .wn-node{opacity:0;transform:scale(.6);transition:opacity .4s ease .4s,transform .6s cubic-bezier(.3,1.5,.5,1) .4s}
  .js .wn-item.is-in .wn-node{opacity:1;transform:none}
  .js .wn-item .wn-txt,.js .wn-item .wn-pic{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-in-view) .6s,transform 1s var(--ease-in-view) .6s}
  .js .wn-item.is-in .wn-txt,.js .wn-item.is-in .wn-pic{opacity:1;transform:none}
  /* the chart draws left to right once */
  .js .wn-sc-line{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-in-view) .5s}
  .js .is-in .wn-sc-line{clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){.wn-item--next .wn-node::before{animation:none}}