/* ─────────────────────────  HOW IT WORKS (EN)  ─────────────────────────
   One example followed through five steps: a stepper on top, then a flat
   plate with plain copy on the left and a card that looks like the product
   on the right. Deliberately quiet: no gradients, no glow, one-colour
   headlines. Violet marks only what is active — the step, the track, the
   main button. The card borrows the cabinet's own colours for stars and
   sentiment, so it reads as the real product rather than a mock-up. */

.workflow{
  --flow-ring:#DCD3FF;
  --flow-mark:#E4DCFF;
  scroll-margin-top:90px;
  padding:clamp(64px,8vw,120px) 0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
}
.workflow .wrap{padding-inline:clamp(20px,4vw,var(--pad))}
.workflow :is(.workflow__number,.workflow__total strong,.workflow__stars,.workflow__rank,.workflow__ranking b,.workflow__focus strong,.workflow__cluster-count,.workflow__citations button,.workflow__cite-no){font-variant-numeric:lining-nums tabular-nums}

/* ── heading ───────────────────────────────────────────────────────── */

.workflow__heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(28px,4vw,48px)}
.workflow__eyebrow{margin:0 0 14px;color:var(--faint);font-size:14px}
.workflow__title{margin:0;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:360;line-height:1.22;letter-spacing:-.018em;color:var(--ink)}
.workflow__title>span{display:block}
.workflow__title>span+span{color:var(--ink-2)}
.workflow__lede{max-width:40ch;margin:0;color:var(--muted);font-size:16px;line-height:1.6}

/* ── stepper ───────────────────────────────────────────────────────── */

.workflow__steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:24px}
.workflow__track{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--line)}
.workflow__track i{display:block;height:100%;width:calc(var(--flow-progress,.2) * 100%);border-radius:inherit;background:var(--brand)}
/* Autoplay moves the fill every frame; only jumps (a click, a wrap back
   to the start, pausing) are eased. */
.workflow.is-jumping .workflow__track i{transition:width .45s cubic-bezier(.2,.8,.24,1)}
.workflow__tab{
  display:flex;align-items:center;gap:12px;
  min-width:0;padding:12px 4px 20px;
  border:0;background:none;color:inherit;font:inherit;text-align:left;
  cursor:pointer;
}
.workflow__number{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);
  color:var(--faint);font:500 12px/1 var(--font-sans);
  transition:background .2s,border-color .2s,color .2s;
}
.workflow__tab-title{font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--faint);transition:color .2s}
.workflow__tab-short{display:none}
.workflow__tab:hover .workflow__tab-title,.workflow__tab.is-done .workflow__tab-title{color:var(--ink-2)}
.workflow__tab.is-done .workflow__number{border-color:var(--flow-ring);color:var(--brand-ink)}
.workflow__tab[aria-selected="true"] .workflow__number{border-color:var(--brand);background:var(--brand);color:#fff}
.workflow__tab[aria-selected="true"] .workflow__tab-title{color:var(--ink)}
.workflow__tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:12px}

/* ── stage ─────────────────────────────────────────────────────────── */

.workflow__stage{
  display:grid;isolation:isolate;
  padding:clamp(24px,4vw,56px);
  border-radius:20px;
  background:var(--bg-2);
}
/* Every panel shares one grid cell, so the stage keeps the tallest height
   and switching steps never makes the page jump. Inactive panels stay out
   of the focus order and the accessibility tree. */
.workflow__panel{
  grid-area:1/1;min-width:0;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;gap:clamp(32px,4.4vw,72px);
}
.workflow__panel[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
.workflow__panel:focus-visible{outline:2px solid var(--brand);outline-offset:12px;border-radius:16px}
.workflow__panel:not([hidden]) .workflow__story{animation:workflow-rise .45s cubic-bezier(.2,.8,.24,1) both}
.workflow__panel:not([hidden]) .workflow__window{animation:workflow-rise .45s .06s cubic-bezier(.2,.8,.24,1) both}

.workflow__story{min-width:0}
.workflow__kicker{margin:0 0 14px;color:var(--faint);font-size:13px}
.workflow__headline{margin:0;font-size:clamp(1.55rem,2.3vw,2.1rem);font-weight:420;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.workflow__text{max-width:40ch;margin:16px 0 0;color:var(--ink-2);font-size:16px;line-height:1.6}
.workflow__next{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  color:var(--ink);font:500 14px/1 var(--font-sans);cursor:pointer;
  transition:border-color .2s,background .2s;
}
.workflow__next:hover{border-color:var(--ink-3)}
.workflow__next:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.workflow__next>span{color:var(--brand)}

/* ── product window ────────────────────────────────────────────────── */

.workflow__window{
  min-width:0;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
  box-shadow:0 1px 2px rgba(23,23,26,.04),0 14px 34px -24px rgba(23,23,26,.22);
}
.workflow__bar{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 20px;border-bottom:1px solid var(--line)}
.workflow__bar-title{color:var(--ink);font-size:14px;font-weight:600}
.workflow__bar-meta{margin-left:auto;color:var(--faint);font-size:12px;white-space:nowrap}
.workflow__screen{padding:22px 24px 24px}

.workflow__origin{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px}
.workflow__origin img{object-fit:contain;flex:none}
.workflow__stars{display:inline-block;color:#E6E3EC;font-size:13px;letter-spacing:1px;line-height:1;white-space:nowrap}
.workflow__stars b{color:#E8B23A;font-weight:inherit}
.workflow__origin .workflow__stars{margin-left:auto}
.workflow__feed .workflow__tr-src{font-size:15px}

/* Arabic: the cursive script breaks under negative tracking and needs a
   taller line. Inter has no Arabic glyphs, so the system face takes over. */
.workflow [lang="ar"]{font-family:var(--font-sans),"Geeza Pro","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;letter-spacing:0}
.workflow__lang{padding:1px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;line-height:1.5}
.workflow__label{margin:0 0 10px;color:var(--faint);font-size:12px}

/* Arabic reviews read in English on hover (a mouse) or on tap/Enter, which
   also pins the translation. Both texts share one grid cell, so the card
   keeps its height whichever language is showing. */
.workflow__tr{border-radius:6px;cursor:pointer}
.workflow__tr:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.workflow__tr-texts{display:grid}
.workflow__tr-texts>*{grid-area:1/1;min-width:0;transition:opacity .22s ease,visibility .22s}
.workflow__tr-en{direction:ltr;text-align:left;opacity:0;visibility:hidden}
.workflow__tr.is-translated .workflow__tr-src{opacity:0;visibility:hidden}
.workflow__tr.is-translated .workflow__tr-en{opacity:1;visibility:visible}
.workflow__tr-hint{display:block;margin-top:8px;color:var(--faint);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:0}
.workflow__tr-on,.workflow__tr-tap{display:none}
.workflow__tr.is-translated .workflow__tr-on{display:inline}
.workflow__tr.is-translated .workflow__tr-off{display:none}
@media (hover:hover){
  .workflow__tr:hover .workflow__tr-src{opacity:0;visibility:hidden}
  .workflow__tr:hover .workflow__tr-en{opacity:1;visibility:visible}
  .workflow__tr:hover .workflow__tr-on{display:inline}
  .workflow__tr:hover .workflow__tr-off{display:none}
}
@media (hover:none){
  .workflow__tr-hover{display:none}
  .workflow__tr-tap{display:inline}
}
.workflow__feed .workflow__tr-texts>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 01 · many sources, one inbox */
.workflow__sources{display:flex;flex-wrap:wrap;gap:8px}
.workflow__source{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px;font-weight:500}
.workflow__source img{object-fit:contain}
.workflow__source i{display:inline-flex;align-items:center;gap:5px;color:var(--faint);font-size:12px;font-style:normal;font-weight:400}
.workflow__source i::before{content:"";width:6px;height:6px;border-radius:50%;background:#34A361}
.workflow__source--more{padding-left:12px;border-style:dashed;color:var(--muted);font-weight:400}
.workflow__total{display:flex;align-items:baseline;gap:12px;margin:26px 0 10px}
.workflow__total strong{font-size:48px;font-weight:380;line-height:1;letter-spacing:-.04em}
.workflow__total span{color:var(--muted);font-size:14px}
.workflow__feed{margin:0;padding:0;list-style:none}
.workflow__feed li{display:grid;grid-template-columns:20px minmax(0,1fr) auto 76px;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.workflow__feed img{object-fit:contain}
.workflow__feed p{margin:0;overflow:hidden;color:var(--ink);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.workflow__place{color:var(--faint);font-size:12px;text-align:right}
.workflow__foot{display:flex;justify-content:space-between;gap:12px;margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--faint);font-size:12px}

/* 02 · the customer's own words, read */
.workflow__reading{margin:18px 0 22px;color:var(--ink);font-size:clamp(20px,1.9vw,24px);font-weight:380;line-height:1.5;letter-spacing:-.02em}
.workflow__reading .workflow__tr-src{font-size:clamp(22px,2vw,26px);line-height:1.75}
.workflow__reading mark{padding:0 2px;color:inherit;background:linear-gradient(transparent 55%,#FCE7B6 55%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.workflow__tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.workflow__tags>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.workflow__tags dt{color:var(--faint);font-size:12px}
.workflow__tags dd{margin:4px 0 0;color:var(--ink);font-size:15px;font-weight:500}
.workflow__tags dd.is-negative{color:#C4383C}
.workflow__cluster{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--bg-2)}
.workflow__cluster-count{color:var(--ink);font-size:36px;font-weight:420;line-height:1;letter-spacing:-.03em}
.workflow__cluster strong{display:block;color:var(--ink);font-size:15px;font-weight:500}
.workflow__cluster span:not(.workflow__cluster-count){display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.5}

/* 03 · a short ranked list and one clear focus */
.workflow__ranking{margin:0;padding:0;list-style:none}
.workflow__ranking li{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;padding:14px;border-radius:12px}
.workflow__ranking li+li{margin-top:4px}
.workflow__ranking .is-top{background:var(--bg-2)}
.workflow__rank{color:var(--faint);font-size:13px}
.workflow__ranking strong{min-width:0;color:var(--ink);font-size:15px;font-weight:500}
.workflow__badge{padding:2px 8px;border-radius:6px;background:#FDECEC;color:#C4383C;font-size:12px;line-height:1.5;white-space:nowrap}
.workflow__ranking b{grid-column:4;color:var(--ink);font-size:16px;font-weight:600}
.workflow__ranking li>i{
  grid-column:2/-1;height:6px;border-radius:6px;
  background:linear-gradient(#CFC5FA 0 0) left/var(--flow-bar) 100% no-repeat,#EEEBF4;
}
.workflow__ranking .is-top>i{background:linear-gradient(var(--brand) 0 0) left/var(--flow-bar) 100% no-repeat,#E4DDFB}
.workflow__panel:not([hidden]) .workflow__ranking li>i{animation:workflow-bar .7s .12s cubic-bezier(.2,.8,.24,1) both}
.workflow__focus{display:flex;align-items:center;gap:18px;margin-top:16px;padding:18px 20px;border:1px solid var(--line);border-radius:14px}
.workflow__focus strong{flex:none;color:var(--ink);font-size:36px;font-weight:420;line-height:1;letter-spacing:-.03em}
.workflow__focus strong>span{color:var(--ink-3);font-size:22px;letter-spacing:0}
.workflow__focus p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.workflow__focus b{color:var(--ink);font-weight:600}

/* 04 · the review and the draft side by side in time */
.workflow__review{margin:0;padding:16px 18px;border-radius:14px;background:var(--bg-2)}
.workflow__review .workflow__tr{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.6}
.workflow__review .workflow__tr-src{font-size:17px;line-height:1.75}

.workflow__compose{display:flex;flex-direction:column;margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);transition:border-color .2s}
.workflow__compose:focus-within{border-color:var(--flow-ring)}
.workflow__compose--preview{background:var(--bg-2)}
.workflow__compose[hidden]{display:none!important}
.workflow__compose-label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;font-weight:500}
.workflow__chip{margin-left:auto;padding:2px 8px;border-radius:6px;background:var(--bg-2);color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}
.workflow__reply-input{display:block;width:100%;height:118px;min-height:118px;margin:0;padding:10px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:15px/1.65 var(--font-sans);resize:vertical}
.workflow__reply-input[lang="ar"],.workflow__reply-output[lang="ar"]{font-size:16px;line-height:1.8}
.workflow__reply-input:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
.workflow__reply-output{min-height:118px;margin:0;padding:10px 0;color:var(--ink);font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.workflow__reply-output:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
.workflow__compose-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.workflow__compose-actions>span{color:var(--faint);font-size:12px;line-height:1.5}
.workflow__button{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:0 16px;border:0;border-radius:9px;background:var(--brand);color:#fff;font:500 14px/1 var(--font-sans);cursor:pointer;transition:background .2s}
.workflow__button:hover{background:var(--brand-ink)}
.workflow__button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.workflow__button:disabled{opacity:.45;cursor:default}
.workflow__button svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6}
.workflow__button--quiet{background:var(--brand-soft);color:var(--brand-ink)}
.workflow__button--quiet:hover{background:var(--flow-mark)}

/* 05 · a question, an answer, and the reviews behind it */
.workflow__question{width:fit-content;max-width:80%;margin:0 0 16px auto;padding:10px 14px;border-radius:12px 12px 4px 12px;background:var(--bg-2);color:var(--ink);font-size:15px;line-height:1.5}
.workflow__answer p{margin:10px 0 0;color:var(--ink-2);font-size:15px;line-height:1.6}
.workflow__answer strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}
.workflow__citations{display:inline-flex;gap:4px;margin-left:6px;vertical-align:1px}
.workflow__citations button{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--flow-ring);border-radius:6px;background:var(--brand-soft);color:var(--brand-ink);font:500 12px/1 var(--font-sans);cursor:pointer;transition:background .2s}
.workflow__citations button:hover{background:var(--flow-mark)}
.workflow__citations button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.workflow__evidence{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.workflow__evidence blockquote{min-width:0;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.workflow__evidence blockquote.is-highlighted{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.workflow__evidence blockquote:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.workflow__evidence .workflow__origin{font-size:12px}
.workflow__cite-no{margin-left:auto;color:var(--faint);font-size:12px}
.workflow__evidence blockquote>p{margin:8px 0;color:var(--ink-2);font-size:13px;line-height:1.55}
.workflow__evidence .workflow__tr-src{font-size:15px;line-height:1.7}
.workflow__evidence .workflow__tr{margin:8px 0;color:var(--ink-2);font-size:13px;line-height:1.55}
.workflow__evidence footer{color:var(--faint);font-size:12px}
.workflow__move{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:500}
.workflow__move>span{display:block;margin-bottom:2px;color:var(--faint);font-size:12px;font-weight:400}

.workflow__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 4px 0}
.workflow__disclaimer{margin:0 0 0 auto;color:var(--faint);font-size:12px;text-align:right}
.workflow__autoplay{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--muted);font:500 12px/1 var(--font-sans);cursor:pointer;transition:border-color .2s,color .2s}
.workflow__autoplay:hover{border-color:var(--flow-ring);color:var(--ink)}
.workflow__autoplay:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.workflow__autoplay svg{width:12px;height:12px;fill:currentColor}
.workflow__icon-play,.workflow.is-autoplay-off .workflow__icon-pause{display:none}
.workflow.is-autoplay-off .workflow__icon-play{display:block}

@keyframes workflow-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes workflow-bar{from{background-size:0 100%,auto}}

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .workflow__tab{gap:10px}
  .workflow__tab-title{font-size:14px}
}
/* Story on top, window below — the headline still leads. */
@media (max-width:960px){
  .workflow__heading{flex-direction:column;align-items:flex-start;gap:16px}
  .workflow__panel{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px}
  /* Stacked, the height reserve would leave a tall empty plate under the
     shorter steps; the stage fits the current step instead. */
  .workflow__panel[hidden]{display:none!important}
  .workflow__text{max-width:52ch}
  .workflow__next{margin-top:20px}
}
/* Five full titles no longer fit: numbers over one-word labels. */
@media (max-width:800px){
  .workflow__steps{gap:4px;margin-bottom:18px}
  .workflow__tab{flex-direction:column;justify-content:flex-start;gap:8px;padding:6px 2px 14px;text-align:center}
  .workflow__tab-title{display:none}
  .workflow__tab-short{display:block;color:var(--faint);font-size:12px;font-weight:500;line-height:1.3}
  .workflow__tab:hover .workflow__tab-short,.workflow__tab.is-done .workflow__tab-short{color:var(--ink-2)}
  .workflow__tab[aria-selected="true"] .workflow__tab-short{color:var(--ink)}
}
@media (max-width:640px){
  .workflow__stage{padding:20px 16px;border-radius:20px}
  .workflow__screen{padding:18px 16px 20px}
  .workflow__bar{padding:0 14px}
  .workflow__bar-meta{display:none}
  .workflow__lede,.workflow__text{font-size:15px}
  .workflow__feed li{grid-template-columns:20px minmax(0,1fr) auto;gap:10px}
  .workflow__place{display:none}
  .workflow__total strong{font-size:40px}
  .workflow__tags{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .workflow__tags>div:last-child{grid-column:1/-1}
  .workflow__ranking li{padding:12px 10px}
  .workflow__badge{display:none}
  .workflow__focus{align-items:flex-start;padding:16px}
  .workflow__focus strong{font-size:34px}
  .workflow__evidence{grid-template-columns:1fr}
  .workflow__reply-input{height:150px;min-height:150px}
  .workflow__reply-output{min-height:150px}
  .workflow__compose-actions{flex-wrap:wrap}
  .workflow__compose-actions .workflow__button{margin-left:auto}
  .workflow__disclaimer{font-size:11px}
}
@media (max-width:380px){
  .workflow__tab-short{font-size:11px}
  .workflow__number{width:28px;height:28px;font-size:11px}
  .workflow__chip{display:none}
  .workflow__cluster{align-items:flex-start;gap:12px;padding:14px}
  .workflow__cluster-count{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .workflow__panel:not([hidden]) :is(.workflow__story,.workflow__window),
  .workflow__panel:not([hidden]) .workflow__ranking li>i{animation:none}
  .workflow__track i,.workflow__number,.workflow__tab-title,.workflow__next,.workflow__button,.workflow__citations button,.workflow__evidence blockquote,.workflow__tr-texts>*{transition:none}
}