/* MyDS marketing feature-area pages (S02a, M2 T13b): /features/{diary,money,students,growth}. One template, four lanes.
   Ported from the frozen prototype F01-feature-area; loaded after www.css (tokens, nav, footer, buttons, .ov .h2 .lead .sec-h live there). */
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ===== S02a Feature area: one template, four lanes. Job sheet flips from "by hand" to "with MyDS"; one try-it console per lane (D-077) ===== */
.h1{font:800 clamp(40px,5.6vw,88px)/var(--lh-display) var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);text-wrap:balance;outline:0}
.h1 em{font-style:normal;color:var(--gold)}
.ar-hero{position:relative;overflow:clip;padding:clamp(88px,12vh,120px) 0 clamp(56px,8vw,112px);background:radial-gradient(60% 50% at 88% 0%,rgb(201 162 74/.16),transparent),radial-gradient(45% 40% at 0% 100%,rgb(201 162 74/.07),transparent),var(--bg)}
.lanesw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:clamp(32px,5vw,64px)}
.lanesw a{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-2);text-decoration:none;font:600 clamp(15px,1.4vw,18px)/1.2 var(--font-ui);transition:border-color var(--dur-base),color var(--dur-base),background-color var(--dur-base),transform var(--dur-slow) var(--ease-drive)}
.lanesw a:hover{color:var(--text);border-color:var(--border-strong);transform:translateY(-2px)}
.lanesw a b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-strong);font:700 13px/1 var(--font-ui);color:var(--text-2)}
.lanesw a[aria-current="page"]{color:var(--text);border-color:var(--gold);background:rgb(201 162 74/.1)}
.lanesw a[aria-current="page"] b{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
.htx{display:grid;gap:var(--space-5);justify-items:start;min-width:0}
.htx>*{max-width:100%}
.h1{overflow-wrap:anywhere}
.htx .lead{max-width:46ch}
/* job sheet: a printed work order that flips from by hand to with MyDS */
.sheet{position:relative;max-width:560px;margin-inline:auto;width:100%;background:#F8F3E4;color:#1A1814;border-radius:8px;padding:clamp(18px,2.6vw,34px);box-shadow:0 36px 70px -24px rgb(0 0 0/.7),0 0 0 1px rgb(255 255 255/.05);transform:rotate(1.2deg)}
[dir="rtl"] .sheet{transform:rotate(-1.2deg)}
.sheet::before{content:"";position:absolute;inset-inline:18px;top:-9px;height:18px;border-radius:9px 9px 0 0;background:repeating-linear-gradient(90deg,#D9CFB2 0 10px,#F8F3E4 10px 18px)}
.sh-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px solid #1A1814}
.sh-h h2{font:800 clamp(18px,1.8vw,22px)/1.1 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display)}
.sh-h small{display:block;margin-top:4px;font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#6B6455}
[dir="rtl"] .sh-h small{letter-spacing:0;text-transform:none;font-size:13px}
.sw{display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--radius-full);background:#E9E1C8;border:1px solid #CFC6AB}
.sw button{min-height:40px;padding:0 14px;border-radius:var(--radius-full);border:0;background:transparent;color:#4A4437;font:600 14px/1 var(--font-ui);cursor:pointer;transition:background-color var(--dur-base),color var(--dur-base)}
.sw button[aria-pressed="true"]{background:#1A1814;color:#F8F3E4}
.sw button:focus-visible{outline:2px solid #83641B;outline-offset:2px}
.jr{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center;padding:clamp(14px,1.8vw,20px) 0;border-bottom:1px dashed #C9BE9D}
.jr .mk{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.jr .mk svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--dur-base),transform var(--dur-slow) var(--ease-snap)}
.jr .mk .bad{stroke:#B3261E}.jr .mk .ok{stroke:#141414;opacity:0;transform:scale(.3)}
.jr .mk::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed #B3261E;transition:background-color var(--dur-base),border-color var(--dur-base)}
.jr .t{display:grid}.jr .t span{grid-area:1/1;font:600 clamp(17px,1.7vw,21px)/1.3 var(--font-ui);transition:opacity var(--dur-slow),transform var(--dur-slow) var(--ease-drive)}
.jr .bh{color:#5A5446;font-style:italic}.jr .md{opacity:0;transform:translateY(8px);color:#1A1814}
.sheet[data-m="ds"] .jr .bh{opacity:0;transform:translateY(-8px)}
.sheet[data-m="ds"] .jr .md{opacity:1;transform:none}
.sheet[data-m="ds"] .jr .mk::before{border-style:solid;border-color:var(--gold);background:var(--gold)}
.sheet[data-m="ds"] .jr .mk .bad{opacity:0;transform:scale(.3)}.sheet[data-m="ds"] .jr .mk .ok{opacity:1;transform:none}
.sheet[data-m="ds"] .jr:nth-of-type(2) :is(.md,.mk .ok,.mk::before,.bh){transition-delay:120ms}.sheet[data-m="ds"] .jr:nth-of-type(3) :is(.md,.mk .ok,.mk::before,.bh){transition-delay:240ms}
.stamp{position:absolute;inset-inline-end:clamp(12px,3vw,32px);bottom:clamp(12px,2vw,24px);padding:6px 12px;border:3px solid #83641B;border-radius:6px;color:#83641B;font:800 clamp(14px,1.4vw,18px)/1 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-8deg) scale(1.8);opacity:0;pointer-events:none;transition:opacity 120ms,transform 380ms var(--ease-snap)}
[dir="rtl"] .stamp{transform:rotate(8deg) scale(1.8);letter-spacing:0;text-transform:none}
.sheet[data-m="ds"] .stamp{opacity:.92;transform:rotate(-8deg);transition-delay:360ms}[dir="rtl"] .sheet[data-m="ds"] .stamp{transform:rotate(8deg)}
.sheet-f{padding-top:clamp(40px,5vw,56px)}
/* try-it console */
.try{padding:var(--section) 0}
.cons{border-radius:20px;padding:clamp(18px,3vw,44px);border:1px solid var(--night-line);background:radial-gradient(60% 80% at 100% 0%,rgb(201 162 74/.1),transparent),linear-gradient(180deg,#18181c,#0F0F12);box-shadow:var(--e3);color:var(--text)}
.cons .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:var(--space-6);font:600 12px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
[dir="rtl"] .cons .top{letter-spacing:0;text-transform:none;font-size:14px}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:center}
.ctl{display:grid;gap:var(--space-5);justify-items:start}
.ctl p{color:var(--text-2);max-width:40ch}
.dbtns{display:flex;flex-wrap:wrap;gap:12px}
.stat{min-height:3.2em;font:700 clamp(18px,2vw,26px)/1.3 var(--font-ui);color:var(--text);text-wrap:balance}
.stat[data-k="warn"]{color:#F5B95B}.stat[data-k="ok"]{color:var(--success)}
.vis{min-width:0}
.vis svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* diary timeline */
.tl{position:relative;direction:ltr;height:clamp(150px,18vw,210px);border-radius:14px;background:var(--night-2);border:1px solid var(--night-line);overflow:hidden}
.tl .hr{position:absolute;top:0;bottom:0;width:1px;background:var(--night-line)}
.tl .hr span{position:absolute;top:8px;left:6px;font:600 12px/1 var(--font-ui);color:var(--text-muted)}
.blk{position:absolute;top:50%;height:clamp(54px,7vw,76px);margin-top:calc(clamp(54px,7vw,76px)/-2);padding:8px 12px;border-radius:10px;display:grid;align-content:center;gap:2px;font:600 clamp(12px,1.2vw,15px)/1.2 var(--font-ui);overflow:hidden;transition:left 520ms var(--ease-drive),opacity var(--dur-slow),background-color var(--dur-base),border-color var(--dur-base)}
.blk small{font:500 clamp(11px,1vw,13px)/1.2 var(--font-ui);opacity:.8}
.blk.a{left:0;width:25%;background:var(--gold);color:var(--on-gold)}
.blk.b{left:31.25%;width:25%;background:rgb(244 242 236/.1);border:2px dashed #F47C74;color:var(--text);opacity:0}
.tl[data-s="1"] .blk.b,.tl[data-s="2"] .blk.b{opacity:1}
.tl[data-s="2"] .blk.b{left:37.5%;background:rgb(82 196 141/.18);border:2px solid var(--success)}
.drv{position:absolute;top:calc(50% + clamp(34px,4vw,46px));left:25%;width:10.42%;height:0;opacity:0;transition:opacity var(--dur-slow)}
.tl:not([data-s="0"]) .drv{opacity:1}
.tl[data-s="2"] .drv i{border-color:var(--success)}.tl[data-s="2"] .drv span{color:var(--success)}
.drv i{position:absolute;left:0;top:0;width:100%;border-top:2px dashed #F47C74}
.drv span{position:absolute;left:0;top:6px;white-space:nowrap;font:600 12px/1 var(--font-ui);color:#F47C74}
/* money */
.bal{display:grid;gap:6px}
.bal small{font:600 13px/1 var(--font-ui);color:var(--text-muted)}
.bal b{font:800 clamp(56px,9vw,128px)/.95 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start;transition:color var(--dur-slow)}
.bal[data-paid="1"] b{color:var(--success)}
.cl{display:grid;gap:10px;margin-top:var(--space-5)}
.cl li{display:flex;align-items:center;gap:12px;font:500 clamp(16px,1.5vw,19px)/1.35 var(--font-ui);color:var(--text-muted);transition:color var(--dur-slow),transform var(--dur-slow) var(--ease-drive)}
.cl li i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed var(--border-strong);color:transparent;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.cl li i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cl li.on{color:var(--text)}.cl li.on i{background:var(--gold);border:1.5px solid var(--gold);color:var(--on-gold)}
.cl li:nth-child(2){transition-delay:90ms}.cl li:nth-child(3){transition-delay:180ms}.cl li:nth-child(4){transition-delay:270ms}
/* students */
.tps{display:grid;gap:10px}
.tp{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;align-items:center;gap:14px;padding:8px;padding-inline:16px 8px;border-radius:12px;background:var(--night-2);border:1px solid var(--night-line)}
.tp b{font:600 clamp(16px,1.5vw,19px)/1.2 var(--font-ui)}
.pips{display:flex;gap:6px;direction:ltr}.pips i{width:clamp(18px,2.6vw,30px);height:12px;border-radius:3px;background:var(--night-line);transition:background-color var(--dur-base),transform var(--dur-slow) var(--ease-snap)}
.pips i.on{background:var(--gold)}.pips i.pop{transform:scaleY(1.7)}
.tp button{width:48px;height:48px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:background-color var(--dur-base),border-color var(--dur-base)}
.tp button:hover:not(:disabled){border-color:var(--gold);background:rgb(201 162 74/.12)}.tp button:disabled{opacity:.4;cursor:not-allowed}
.tp button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rdy{display:flex;align-items:baseline;gap:14px;margin-top:var(--space-5);flex-wrap:wrap}
.rdy b{font:800 clamp(48px,7vw,96px)/.95 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;color:var(--gold)}
.rdy span{font:600 clamp(16px,1.6vw,20px)/1.3 var(--font-ui);color:var(--text-2)}
.rep{margin-top:var(--space-4);padding:14px 16px;border-radius:12px;border:1px dashed var(--border-strong);font-size:15.5px;color:var(--text-2)}
.rep b{color:var(--text)}
/* growth */
.stps{display:grid;gap:12px}
.stp{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--night-2);border:1px solid var(--night-line);opacity:0;transform:translateY(14px);height:0;padding-block:0;overflow:hidden;border-width:0;transition:opacity var(--dur-slow),transform var(--dur-slow) var(--ease-drive)}
.stp.on{opacity:1;transform:none;height:auto;padding-block:14px;border-width:1px}
.stp .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgb(201 162 74/.14);color:var(--gold);border:1px solid rgb(201 162 74/.3)}
.stp .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stp h3{font:700 clamp(16px,1.5vw,19px)/1.25 var(--font-ui)}.stp p{font-size:15px;color:var(--text-2);margin-top:2px}
.stp q{display:block;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--night);border:1px solid var(--night-line);color:var(--text);font-size:15px;quotes:none}
.tag2{display:inline-flex;margin-top:8px;font:600 12px/1.2 var(--font-ui);padding:6px 11px;border-radius:var(--radius-full)}
.tag2.w{background:rgb(245 185 91/.14);color:#F5B95B;border:1px solid rgb(245 185 91/.4)}.tag2.d{background:rgb(82 196 141/.14);color:var(--success);border:1px solid rgb(82 196 141/.4)}
/* also in this lane */
.also{padding:0 0 var(--section)}
.alr{display:grid;gap:0}
.alr li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:center;padding:clamp(18px,2.4vw,30px) 0;border-top:1px solid var(--border)}
.alr li:last-child{border-bottom:1px solid var(--border)}
.alr .ib{width:clamp(52px,4.4vw,64px);aspect-ratio:1;border-radius:16px;display:grid;place-items:center;background:rgb(201 162 74/.12);color:var(--gold-text);border:1px solid rgb(201 162 74/.28);transition:transform var(--dur-slow) var(--ease-drive),background-color var(--dur-base)}
.alr li:hover .ib{transform:rotate(-6deg) scale(1.06);background:rgb(201 162 74/.2)}
.alr .ib svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.alr b{display:block;font:700 clamp(21px,2.4vw,30px)/1.2 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-display)}
[dir="rtl"] .alr b{font-stretch:normal}
.alr span{display:block;margin-top:6px;font-size:clamp(16px,1.5vw,19px);color:var(--text-2);max-width:60ch}
/* finale */
.fin2{position:relative;overflow:hidden;padding:clamp(72px,10vw,140px) 0 clamp(96px,12vw,170px);text-align:center}
.nxl{display:inline-grid;gap:10px;justify-items:center;text-decoration:none;color:var(--text)}
.nxl small{font:600 13px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
[dir="rtl"] .nxl small{letter-spacing:0;text-transform:none;font-size:15px}
.nxl .big2{display:flex;align-items:center;gap:.25em;font:800 clamp(48px,11vw,176px)/.95 var(--font-display);font-stretch:var(--display-stretch);letter-spacing:var(--track-mega);transition:color var(--dur-base)}
[dir="rtl"] .nxl .big2{font-stretch:normal;letter-spacing:0;line-height:1.15}
.nxl .big2 svg{width:.7em;height:.7em;flex:none;transition:transform var(--dur-slow) var(--ease-drive)}
[dir="rtl"] .nxl .big2 svg{transform:scaleX(-1)}
.nxl:hover .big2{color:var(--gold)}.nxl:hover .big2 svg{transform:translateX(.12em)}[dir="rtl"] .nxl:hover .big2 svg{transform:scaleX(-1) translateX(.12em)}
.fin2 .lead{margin:var(--space-5) auto 0;color:var(--text-2)}
.fin2 .row{justify-content:center;margin-top:var(--space-6)}
.rd{position:absolute;inset-inline:0;bottom:0;height:10px;opacity:.9;background:repeating-linear-gradient(90deg,var(--gold) 0 34px,transparent 34px 68px);background-size:68px 3px;background-repeat:repeat-x;background-position:0 50%;animation:rdr 1.4s linear infinite}
@keyframes rdr{to{background-position:68px 50%}}
@media (max-width:900px){.hgrid,.cgrid{grid-template-columns:minmax(0,1fr)}.sheet{max-width:none;transform:none}[dir="rtl"] .sheet{transform:none}.lanesw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tp{grid-template-columns:minmax(0,1fr) 48px;row-gap:8px}.tp .pips{grid-column:1;grid-row:2}.tp button{grid-column:2;grid-row:1/3}.alr li{grid-template-columns:1fr}}

/* values the prototype set inline */
.tl .hr.q0{left:0}.tl .hr.q1{left:25%}.tl .hr.q2{left:50%}.tl .hr.q3{left:75%}
/* the demo buttons that cannot be pressed in the current state */
.cons .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.cons .btn[hidden]{display:none}

/* ===== Reduced motion: no flip, stamp or road animation (the page already shows the finished states) ===== */
@media (prefers-reduced-motion:reduce){
  .rd{animation:none!important}
  .sheet *,.sheet *::before,.sheet *::after,.stamp,.blk,.drv,.bal b,.cl li,.cl li i,.pips i,.tp button,.stp,.alr .ib,.lanesw a,.nxl .big2,.nxl .big2 svg{transition:none!important}
}