/* ==========================================================================
   #systems: the seven product rows, each a demo on one side and plain copy on
   the other. Ported from the old homepage's product-demo section.

   Everything here is namespaced sd- on purpose. site.css already owns .sys,
   .bub, .thread, .flow, .inbox, .cal, .ask, .note, .src, .phone, .screen and
   .stars, so reusing the old class names would have restyled both sides.

   Colours and fonts come ONLY from var(--c-*) and var(--f-*). No raw colours.
   House rules: nothing under 17px (mockups included), flat fills and thin 1px
   rules only, square-ish corners (a real phone keeps its round shape), slow
   calm motion, no hover lift or scale. One border per object (Armen
   2026-10-01: a box inside a bordered box, a chip inside a card, a ring
   around the phone all read as AI-made), so inner parts are plain text or a
   flat tint, and there are no pills and no decorative dots.

   MOTION CONTRACT (same as the old site, read before editing)
   - Motion is gated on html.js-motion, which the head script sets when the
     visitor does not prefer reduced motion. Without it every demo shows its
     FINISHED frame and demos.js does nothing.
   - Every step keeps its space from the first frame (opacity reveal only), so
     a row never changes height while its demo plays.
   - A class that has to survive a loop cannot start with is-. demos.js strips
     is-* from the demo root at the start of every cycle.
   - Specificity of the incoming-call overlay climbs on purpose, see .sd-call.
   ========================================================================== */

/* ---------------------------------------------------------------- heading
   The wrapper is also .sh, the site's section-header block. */
.sd-head{max-width:760px;margin-bottom:40px}
.sd-head h2{margin-bottom:12px}
.sd-head p{font-size:23px;line-height:1.5;margin:0}

/* ---------------------------------------------------------------- rows */
.sd-row{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px 64px;align-items:center;padding:64px 0;border-top:1px solid var(--c-line)}
.sd-row:first-of-type{border-top:0;padding-top:8px}
.sd-row.flip .sd-art{order:2}
.sd-art{min-width:0;display:flex;justify-content:center}
.sd-copy{min-width:0}
.sd-copy h3{font-size:clamp(26px,2.8vw,32px);line-height:1.15;margin:0 0 14px}
.sd-lede{font-size:22px;line-height:1.55;margin:0 0 24px;max-width:34em;text-wrap:pretty}
.sd-list{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.sd-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.sd-list svg{width:24px;height:24px;margin-top:4px;color:var(--c-accent)}
.sd-list span{font-size:21px;line-height:1.6}
.sd-list b{font-weight:700}
.sd-more{display:inline-flex;align-items:center;min-height:48px;margin-top:20px;font-size:21px;font-weight:700}
.sd-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- demo shell */
.sd-demo{position:relative;width:100%;font-family:var(--f-ui);font-size:17px;line-height:1.4;color:var(--c-text)}
.js-motion .sd-demo{cursor:pointer}

/* the step reveal. Opacity only, slow. A step keeps its box from frame one. */
.js-motion .sd-demo [data-s]{opacity:0;transition:opacity .8s ease}
.js-motion .sd-demo [data-s].on{opacity:1}
.js-motion .sd-demo [data-s].gone{display:none}

/* the pointer used by the form and booking demos */
.sd-cur{position:absolute;left:0;top:0;z-index:7;width:28px;height:28px;pointer-events:none;opacity:0;transform:translate(70px,40px);transition:opacity .4s ease,transform .9s cubic-bezier(.4,0,.2,1)}
.sd-cur path{fill:var(--c-text);stroke:var(--c-screen);stroke-width:1.3;stroke-linejoin:round}
.sd-demo.is-cursor .sd-cur{opacity:1}
/* zero-height anchors the player uses to know when to move the pointer */
.sd-mark{display:block;height:0;overflow:hidden}

/* ---------------------------------------------------------------- phone */
.sd-phone{width:100%;max-width:380px;margin:0 auto;padding:11px;border-radius:40px;background:var(--c-device)}
.sd-screen{position:relative;overflow:hidden;border-radius:30px;background:var(--c-screen);color:var(--c-text)}
.sd-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 16px 12px;border-bottom:1px solid var(--c-line);background:var(--c-card)}
.sd-av{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--c-bg-alt);color:var(--c-text);font-size:17px;font-weight:700;line-height:1}
.sd-top b{font-size:17px;font-weight:600;line-height:1.2}
.sd-thread{display:flex;flex-direction:column;gap:9px;padding:14px 12px 20px}
.sd-ts{align-self:center;text-align:center;font-size:17px;line-height:1.4;color:var(--c-muted);margin:2px 0 2px}
.sd-ts b{font-weight:600;color:var(--c-text)}
.sd-ts.missed b{color:var(--c-alert)}
.sd-bub{max-width:86%;margin:0;padding:9px 13px;border-radius:17px;font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.sd-bub.in{align-self:flex-start;background:var(--c-bubble-in);color:var(--c-text);border-bottom-left-radius:5px}
.sd-bub.out{align-self:flex-end;background:var(--c-accent);color:var(--c-bubble-out-text);border-bottom-right-radius:5px}
.sd-lnk{text-decoration:underline;text-underline-offset:2px}
.sd-sent{align-self:flex-end;margin:-4px 2px 0 0;font-size:17px;color:var(--c-muted)}

/* the customer's reply and the typing dots share ONE cell, so when the dots go
   the reply fades in where they were and nothing below it moves */
.sd-pair{display:grid;justify-items:start;align-items:start}
.sd-pair>*{grid-area:1/1}
.sd-typing{display:flex;gap:6px;padding:14px 16px;border-radius:17px;border-bottom-left-radius:5px;background:var(--c-bubble-in)}
.sd-typing i{display:block;width:9px;height:9px;border-radius:50%;background:var(--c-muted)}
.js-motion .sd-typing i{opacity:.35;animation:sd-dot 1.8s ease-in-out infinite}
.js-motion .sd-typing i:nth-child(2){animation-delay:.25s}
.js-motion .sd-typing i:nth-child(3){animation-delay:.5s}
@keyframes sd-dot{0%,60%,100%{opacity:.35}30%{opacity:1}}
html:not(.js-motion) .sd-typing{display:none}

/* the stopwatch on the missed-call scene. It sits still, the numbers change. */
.sd-clock{align-self:center;display:flex;align-items:center;margin:2px 0;text-align:center;color:var(--c-text);font-size:17px;font-weight:700;transition:color .6s ease}
.sd-clock i{display:none}
.sd-clock.done{color:var(--c-accent)}

/* the incoming call that nobody picks up.
   Specificity climbs on purpose, one class at a time, so no two rules ever tie:
   base (0,4,0)  <  .on (0,5,0)  <  .on.gone (0,6,0).
   The generic .gone{display:none} above is (0,4,0) and loses to the base rule's
   display:flex because the base comes later, so the overlay is hidden with
   visibility and a fade, never display:none. A tie here once left the call
   screen sitting over the whole thread. */
.sd-call{position:absolute;inset:0;z-index:5;display:none;border-radius:inherit;flex-direction:column;align-items:center;padding:64px 0 34px;background:var(--c-device);color:var(--c-on-dark)}
.js-motion .sd-demo .sd-call[data-s]{display:flex;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease}
.js-motion .sd-demo .sd-call[data-s].on{opacity:1;visibility:visible}
.js-motion .sd-demo .sd-call[data-s].on.gone{opacity:0;visibility:hidden}
.sd-cav{display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin-bottom:18px;border-radius:50%;background:var(--c-bubble-in);color:var(--c-text);font-size:30px;font-weight:600}
.sd-cnum{font-size:25px;font-weight:500}
.sd-csub{margin-top:6px;font-size:17px}
.sd-cbtns{display:flex;gap:56px;margin-top:auto}
.sd-cb{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:17px}
.sd-cc{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:var(--c-accent);color:var(--c-on-dark)}
.sd-cc.red{background:var(--c-alert)}
.sd-cc.red svg{transform:rotate(135deg)}
.sd-cc svg{width:26px;height:26px}

/* ---------------------------------------------------------------- website form */
.sd-win{width:100%;max-width:520px;margin:0 auto;overflow:hidden;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen)}
.sd-wbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--c-line);background:var(--c-bg-alt)}
.sd-wbar i{display:none}
.sd-wbar span{min-width:0;font-size:17px;color:var(--c-muted);overflow-wrap:anywhere}
.sd-wbody{background:var(--c-card)}
.sd-whead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--c-line);background:var(--c-screen)}
.sd-wlogo{flex:none;width:28px;height:28px;border-radius:var(--radius);background:var(--c-accent)}
.sd-wname{min-width:0;font-family:var(--f-display);font-size:19px;font-weight:700;line-height:1.15}
.sd-wcall{flex:none;margin-left:auto;padding:7px 12px;border-radius:var(--radius);background:var(--c-cta);color:var(--c-cta-text);font-size:17px;font-weight:700}
.sd-whero{padding:14px 16px 16px;background:var(--c-dark);color:var(--c-on-dark)}
.sd-whero b{display:block;font-family:var(--f-display);font-size:24px;line-height:1.15}
.sd-wpage{padding:14px}
.sd-wform{padding:2px 0 0}
.sd-fld{margin-bottom:12px}
.sd-lab{display:block;margin-bottom:4px;font-size:17px;font-weight:600;line-height:1.4}
/* An empty box has no line box, so without min-height each field collapses to
   about 20px until its first letter arrives and the Send button bounces. */
.sd-box{display:flex;align-items:center;min-height:48px;padding:6px 12px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-card);font-size:17px;line-height:1.4;transition:border-color .3s ease,background-color .3s ease}
.sd-box b{font-weight:500;overflow-wrap:anywhere}
.sd-fld.filled .sd-box,html:not(.js-motion) .sd-box{border-color:var(--c-muted);background:var(--c-screen)}
.js-motion .sd-fld.act .sd-box{border-color:var(--c-accent);background:var(--c-screen)}
.sd-box b.caret::after,.sd-q b.caret::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;background:var(--c-text);vertical-align:text-bottom}
.sd-send{padding:12px 0;border-radius:var(--radius);background:var(--c-cta);color:var(--c-cta-text);font-size:19px;font-weight:700;text-align:center;transition:background-color .3s ease}
.sd-demo.is-press .sd-send,.sd-demo.is-sent .sd-send{background:var(--c-cta-hover)}
/* the lead arriving on the owner's phone, drawn as the notification it is */
.sd-notifwrap{margin-top:18px}
.sd-notif{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-screen);font-size:17px;line-height:1.4}
.sd-nic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--c-dark);color:var(--c-on-dark)}
.sd-nic svg{width:24px;height:24px}
.sd-ntx{min-width:0;overflow-wrap:anywhere}
.sd-ntx b{display:block;font-weight:700}
.sd-notif time{color:var(--c-muted)}
.sd-cap{margin:12px 0 0;text-align:center;text-wrap:balance;font-size:17px;line-height:1.45;color:var(--c-muted)}

/* ---------------------------------------------------------------- google */
.sd-seo{width:100%;max-width:520px;margin:0 auto;padding:22px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen)}
.sd-sbar{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 20px;border:1px solid var(--c-muted);border-radius:var(--radius);background:var(--c-card)}
.sd-sbar svg{flex:none;width:22px;height:22px;color:var(--c-muted)}
.sd-q{min-height:28px;font-size:19px;line-height:28px}
.sd-q b{font-weight:400}
.sd-result{margin-top:18px;padding:18px 0 0;border-top:1px solid var(--c-line)}
.sd-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.sd-photos i{display:block;aspect-ratio:4/3;border-radius:var(--radius);background:var(--c-bg-alt)}
.sd-rname{display:block;font-size:21px;font-weight:700;line-height:1.3}
.sd-rline{display:block;font-size:17px;line-height:1.5}
.sd-rline.open{font-weight:600;color:var(--c-accent)}
.sd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sd-chips span{padding:7px 14px;border:1px solid var(--c-accent);border-radius:var(--radius);background:var(--c-screen);color:var(--c-accent);font-size:17px;font-weight:600}

/* ---------------------------------------------------------------- follow-up */
.sd-fl{width:100%;max-width:520px;margin:0 auto}
.sd-node{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.sd-fic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);background:var(--c-bg-alt);color:var(--c-text)}
.sd-fic svg{width:24px;height:24px}
.sd-fbody{min-width:0;padding:10px 14px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen)}
.sd-fttl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:2px}
.sd-fttl b{font-size:17px;font-weight:700}
.sd-tag{margin-left:auto;font-style:normal;color:var(--c-muted);font-size:17px;line-height:1.2;white-space:nowrap}
.sd-tag.ok{color:var(--c-accent);font-weight:700}
.sd-ftx{display:block;font-size:17px;line-height:1.45}
/* the reply is the only human event in the sequence, so it is the only tinted one */
.sd-node.rep .sd-fic{background:var(--c-accent-tint);color:var(--c-accent)}
.sd-node.rep .sd-fbody{border-color:var(--c-accent);background:var(--c-accent-tint)}
.sd-node.rep .sd-ftx{font-weight:600}
/* the text that never went out stays on the page, dashed and struck through,
   because seeing it cancelled is the point of the demo */
.sd-node.off .sd-fic{background:transparent;color:var(--c-muted)}
.sd-node.off .sd-fbody{border-style:dashed;background:var(--c-card)}
.sd-node.off .sd-ftx{color:var(--c-muted);text-decoration:line-through}
/* the wait: the line fills top to bottom while the days pass */
.sd-wait{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;height:44px}
.sd-line{position:relative;display:block;justify-self:center;width:2px;height:100%;background:var(--c-line);overflow:hidden}
.sd-line b{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--c-accent)}
.sd-chip{font-size:17px;color:var(--c-muted)}
/* finished frame (and reduced motion): every wait is done except the one the
   reply interrupted, which must stay part filled or the story is wrong */
.sd-wait.part .sd-line b{height:44%}
.js-motion .sd-demo .sd-wait[data-s] .sd-line b{height:0;transition:height 1.4s linear}
.js-motion .sd-demo .sd-wait[data-s].on .sd-line b{height:100%}
.js-motion .sd-demo .sd-wait.part[data-s].on .sd-line b{height:44%}
.sd-demo.is-cut .sd-wait.part .sd-line b{background:var(--c-muted)}
.sd-stamp{margin-top:16px;padding:9px 14px;border:2px solid var(--c-accent);border-radius:var(--radius);color:var(--c-accent);font-family:var(--f-display);font-size:21px;font-weight:700;text-align:center}
.sd-stampsub{margin:8px 0 0;text-align:center;font-size:17px}

/* ---------------------------------------------------------------- booking */
.sd-bk{width:100%;max-width:520px;margin:0 auto}
.sd-bkcard{padding:22px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen)}
.sd-bkt{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1.2}
.sd-bks{margin:2px 0 16px;font-size:17px;color:var(--c-muted)}
.sd-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sd-day{padding:8px 0;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen);text-align:center;font-size:17px;line-height:1.3;transition:border-color .4s ease,background-color .4s ease}
.sd-day b{display:block;font-size:20px}
.sd-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.sd-time{padding:10px 0;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen);text-align:center;font-size:17px;font-weight:600;transition:border-color .4s ease,background-color .4s ease,color .4s ease}
.sd-time.taken{background:var(--c-bg-alt);color:var(--c-muted);font-weight:400;text-decoration:line-through}
.sd-demo.is-day .sd-day.pick,html:not(.js-motion) .sd-day.pick{border-color:var(--c-accent);background:var(--c-accent-tint)}
.sd-demo.is-picked .sd-time.pick,html:not(.js-motion) .sd-time.pick{border-color:var(--c-highlight);background:var(--c-highlight);color:var(--c-highlight-text)}
.sd-bknote{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;margin-top:16px;padding-top:14px;border-top:1px solid var(--c-line);font-size:17px;line-height:1.45}
.sd-bknote svg{width:28px;height:28px;color:var(--c-accent)}
.sd-bknote b{display:block;font-weight:700}
.sd-msgs{margin-top:18px}
.sd-msg+.sd-msg{margin-top:14px}
.sd-mlab{display:block;margin-bottom:6px;font-size:17px;color:var(--c-muted)}
.sd-mb{display:block;width:fit-content;max-width:92%;margin-left:auto;padding:10px 15px;border-radius:17px;border-bottom-right-radius:5px;background:var(--c-accent);color:var(--c-bubble-out-text);font-size:17px;line-height:1.4}

/* ---------------------------------------------------------------- inbox */
.sd-inbox{width:100%;max-width:500px;margin:0 auto;overflow:hidden;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-screen)}
.sd-ibar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--c-line);background:var(--c-card)}
.sd-ibar b{font-family:var(--f-display);font-size:21px;font-weight:700}
.sd-ibar span{font-size:17px;font-weight:600;color:var(--c-accent)}
.sd-ihead{padding:14px 18px;border-bottom:1px solid var(--c-line)}
.sd-ihead b{display:block;font-size:21px;font-weight:700;line-height:1.3}
.sd-ihead span{display:block;font-size:17px;line-height:1.45;color:var(--c-muted)}
.sd-irow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--c-line)}
.sd-iav{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--c-accent-tint);color:var(--c-accent)}
.sd-iav svg{width:22px;height:22px}
.sd-irow b{display:block;font-size:19px;font-weight:700;line-height:1.3}
.sd-isn{display:block;font-size:17px;line-height:1.4}
.sd-irow time{display:flex;align-items:center;gap:8px;align-self:start;padding-top:2px;font-size:17px;color:var(--c-muted);white-space:nowrap}
.sd-idot{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--c-accent)}
.sd-ifoot{padding:16px 18px;background:var(--c-card);font-size:17px;line-height:1.5}
.sd-ifoot b{font-weight:700}

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width:980px){
  /* Armen: on mobile every row shows its TITLE above the animation and the copy
     below it. .sd-copy{display:contents} promotes its children to flex items of
     the row, and order:-1 lifts only the h3 above the art. Rows are separated by
     the row border-top lines. */
  .sd-row{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:44px 0}
  .sd-row:first-of-type{padding-top:8px}
  .sd-copy{display:contents}
  .sd-copy h3{order:-1;margin-bottom:18px}
  .sd-art{margin-bottom:26px}
  .sd-row.flip .sd-art{order:0}
  .sd-more{align-self:flex-start}
}
@media (max-width:560px){
  .sd-head p{font-size:20px}
  .sd-row{padding:36px 0}
  .sd-lede{font-size:20px}
  .sd-list span,.sd-more{font-size:19px}
  .sd-phone{border-radius:36px;padding:10px}
  .sd-screen{border-radius:27px}
  .sd-wpage{padding:10px}
  .sd-seo,.sd-bkcard{padding:16px}
  .sd-irow{padding:12px 14px;gap:10px}
  .sd-ibar,.sd-ihead,.sd-ifoot{padding-left:14px;padding-right:14px}
  .sd-cbtns{gap:40px}
}