/* ==========================================================================
   ewb.caimran.com — E-Way Bill Preparation for ERP Dispatches
   CA Imran Pathan · GST Operations & Compliance Systems
   Palette, type and radius values: Brand & Design System v1.0 (frozen).
   Implementation choices are marked "impl." (Brand DS 28.3), not brand rules.
   ========================================================================== */

/* Inter, text cut (opsz 14), Latin subset, SIL OFL 1.1. Loaded once, locally. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}

:root{
  --navy:#1F2340; --purple:#6F2DBD; --purple-dark:#572397;
  --purple-light:#EDE3F7; --purple-vlight:#F7F2FB;
  --white:#FFFFFF; --offwhite:#F7F7FA; --border:#E3E4EA; --grey:#626579;
  --radius-card:8px; --radius-ctl:6px;
  --wrap:1240px;
  --read:680px;
  --head-h:80px;
  --head-h-compact:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h-compact) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--white);color:var(--navy);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;font-optical-sizing:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:0;color:var(--navy)}
ul,ol{margin:0;padding:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.nw{white-space:nowrap}
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:16px;top:-64px;z-index:100;padding:10px 14px;background:var(--navy);color:var(--white);font-weight:600;font-size:14px;border-radius:var(--radius-ctl);text-decoration:none}
.skip-link:focus{top:12px}
.skip-link:focus-visible{outline-color:var(--white)}

/* ---------- The profile route: a small crafted object, secondary by design ---------- */
.profile-link{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 13px 0 12px;
  border:1px solid var(--border);border-radius:var(--radius-ctl);background:var(--white);
  color:var(--navy);font-size:14px;line-height:1;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:border-color .2s ease,color .2s ease}
.pl-stub{position:relative;flex:none;width:14px;height:1px;background:var(--purple);margin-left:3px;transition:width .2s ease}
.pl-stub::before{content:"";position:absolute;left:-3px;top:-2px;width:5px;height:5px;background:var(--purple)}
.pl-arrow{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;transition:transform .2s ease}
.profile-link:hover{border-color:var(--purple);color:var(--purple)}
.profile-link:hover .pl-stub{width:22px}
.profile-link:hover .pl-arrow{transform:translate(2px,-2px)}
.profile-link--rev{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}
.profile-link--rev .pl-stub{background:var(--white)}
.profile-link--rev .pl-stub::before{background:var(--white)}
.profile-link--rev:hover{border-color:var(--white);color:var(--white)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid transparent;transition:border-color .2s ease}
@supports (backdrop-filter:blur(1px)){.site-header{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(8px)}}
.site-header.is-compact{border-bottom-color:var(--border)}
.header-in{display:flex;align-items:center;gap:32px;height:var(--head-h);transition:height .2s ease}
.site-header.is-compact .header-in{height:var(--head-h-compact)}
.brand{display:block;flex:none;text-decoration:none}
.brand img{width:auto}
.brand-full{height:48px}                 /* primary horizontal: 297 px wide, above the 290 px minimum */
.brand-short{height:30px;display:none}   /* no-descriptor step: 186 px wide, above the 130 px minimum */
.site-header.is-compact .brand-full{display:none}
.site-header.is-compact .brand-short{display:block}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;display:flex;gap:4px}
.site-nav a{display:block;padding:8px 10px;font-size:14px;font-weight:500;color:var(--grey);text-decoration:none;border-radius:var(--radius-ctl);transition:color .15s ease}
.site-nav a:hover{color:var(--navy)}
.site-nav a[aria-current="location"]{color:var(--navy)}
.site-nav a[aria-current="location"]::after{content:"";display:block;height:1px;margin-top:4px;background:var(--purple)}

.menu{display:none;position:relative}
.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:40px;height:38px;border:1px solid var(--border);border-radius:var(--radius-ctl);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-icon{width:16px;height:12px;fill:none;stroke:var(--navy);stroke-width:1.6}
.menu-icon path{transform-box:view-box;transition:transform .2s ease}
.menu-icon .mi-a{transform-origin:8px 2px}
.menu-icon .mi-b{transform-origin:8px 10px}
.menu[open] .menu-icon .mi-a{transform:translateY(4px) rotate(45deg)}
.menu[open] .menu-icon .mi-b{transform:translateY(-4px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.menu-icon path{transition:none}}
.menu-panel{position:fixed;left:0;right:0;top:var(--menu-top,60px);background:var(--white);border-bottom:1px solid var(--border);padding:8px 0 16px}
.menu-panel ul{list-style:none;max-width:var(--wrap);margin:0 auto;padding:0 16px}
.menu-panel a{display:flex;align-items:center;gap:12px;padding:12px 4px;font-size:16px;font-weight:500;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--border)}
.menu-panel li:last-child a{border-bottom:0}
.menu-panel a::before{content:"";width:7px;height:7px;border:1.5px solid var(--purple);flex:none}

/* ---------- Opening (chapter 1: orientation) ---------- */
.hero{padding:56px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px;align-items:end}
.hero-kicker{text-wrap:balance;font-size:15px;line-height:1.4;font-weight:500;color:var(--grey)}
.hero-kicker::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;vertical-align:1px;background:var(--purple)}
.hero h1{margin-top:24px;font-size:clamp(34px,2.6vw + 14px,50px);line-height:1.12;max-width:17em}
.hero-lede{margin-top:28px;font-size:19px;line-height:1.6;color:var(--grey);max-width:34em}
.hero-lede strong{font-weight:500;color:var(--navy)}
.text-action{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font-size:16px;font-weight:600;color:var(--purple);text-decoration:none}
.text-action svg{width:12px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;transition:transform .2s ease}
.text-action span{border-bottom:1px solid transparent;transition:border-color .2s ease}
.text-action:hover span{border-bottom-color:currentColor}
.text-action:hover svg{transform:translateY(3px)}

/* where the service sits: a quiet cue, not the detailed diagram */
.hero-route{margin:0;position:relative;padding-bottom:4px}
.hr-list{list-style:none;position:relative}
.hr-list::before{content:"";position:absolute;left:5px;top:10px;bottom:12px;border-left:1px solid var(--navy)}
.hr-node{position:relative;padding:0 0 0 32px}
.hr-node::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;background:var(--navy);border:1.5px solid var(--navy)}
.hr-name{display:block;font-size:15px;line-height:1.4;font-weight:600}
.hr-tag{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:500;color:var(--grey)}
.hr-tag::before{content:"";width:6px;height:6px;background:var(--navy)}
.hr-node--prep{margin:28px 0;padding:18px 20px 20px 32px;background:var(--purple-vlight);border-left:1px dashed var(--purple);border-right:1px dashed var(--purple);border-top:2px solid var(--purple);border-radius:0 0 var(--radius-ctl) var(--radius-ctl);margin-left:0}
.hr-node--prep::before{left:-6px;top:22px;background:var(--purple-vlight);border-color:var(--purple)}
.hr-node--prep .hr-name{color:var(--purple);font-size:13px;font-weight:500}
.hr-node--prep .syncway-lockup{margin-top:10px}
.hr-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--grey)}

/* SyncWay name treatment, specification v1.0 s.10 (live text) */
.syncway-lockup{--syncway-size:34px;font-family:"Inter",sans-serif;font-optical-sizing:none;text-transform:none}
.syncway-name{margin:0;font-size:var(--syncway-size);font-weight:600;line-height:1.05;letter-spacing:0;color:#1F2340}
.syncway-descriptor{margin:0;font-size:calc(var(--syncway-size) * 0.375);font-weight:400;line-height:1.25;letter-spacing:0;color:#6F2DBD}

/* ---------- Chapters ---------- */
.chapter{padding:96px 0}
.chapter + .chapter{padding-top:32px}
.chapter--tint{background:var(--offwhite)}
.chapter--tint + .chapter,.chapter + .chapter--tint{padding-top:96px}

/* chapter marker: a checkpoint on the route, not a label */
.chapter-mark{display:flex;align-items:center;gap:14px;margin:0 0 48px;font-size:13px;line-height:1;font-weight:500;color:var(--grey)}
.chapter-mark::before{content:"";flex:none;width:9px;height:9px;border:1.5px solid var(--purple);background:var(--white)}
.chapter-mark::after{content:"";flex:1 1 auto;height:0;border-top:1px solid var(--border)}
.chapter--tint .chapter-mark::before{background:var(--offwhite)}

.prose{max-width:var(--read)}
.prose h2,.h2{font-size:clamp(26px,1.3vw + 18px,36px);line-height:1.2}
.prose h3,.h3{font-size:clamp(21px,.6vw + 17px,26px);line-height:1.3}
.lede{margin-top:20px;font-size:18px;line-height:1.6;color:var(--grey)}
.prose p + p{margin-top:16px}
.prose .lede + p{margin-top:20px}
.prose h3{margin-top:0}

/* editorial split: heading left, reading text right (keeps the measure narrow without an empty half-page) */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 72px;align-items:start}
.split-body{max-width:38em}
.split-body > p + p{margin-top:16px}
.split-body > .lede{margin-top:0}
.split-body > .lede + p{margin-top:20px}
.split-body > p.statement{margin-top:40px}
h1,h2,h3,.pivot-statement,.ch-value{text-wrap:balance}
p,li,dd{text-wrap:pretty}

.statement{max-width:30em;margin:48px 0 0;padding:4px 0 4px 24px;border-left:2px solid var(--purple);font-size:clamp(19px,.5vw + 16px,22px);line-height:1.5;font-weight:500;color:var(--navy)}

.stage{margin-top:72px}
.pivot{margin-top:88px}
.pivot-statement{font-size:clamp(30px,1.9vw + 18px,44px);line-height:1.15;font-weight:600;letter-spacing:0}
.pivot-sub{margin-top:16px;font-size:18px;line-height:1.6;color:var(--grey);max-width:40em}

/* explanatory visual placement */
.pg{margin-top:0}
.pg-route{margin-top:48px}
.vis{margin-top:48px}
.vis-close{margin-top:32px;max-width:72ch;font-size:16px;line-height:1.6;color:var(--navy)}
.vis-block + .vis-block{margin-top:112px}
.vis-head{max-width:880px}
.vis-head .h2,.vis-head .h3{max-width:26em}

/* chapter 3: the service and its boundary */
.flow{list-style:none;margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.15fr);position:relative}
.flow li{position:relative;padding:28px 16px 0 0;font-size:14px;line-height:1.4;font-weight:600}
.flow li span{display:block;margin-top:4px;font-weight:400;font-size:13px;color:var(--grey)}
.flow li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border:1.5px solid var(--navy);background:var(--offwhite)}
.flow li::after{content:"";position:absolute;left:11px;right:0;top:5px;border-top:1px solid var(--navy)}
.flow li.f-in::before{background:var(--navy)}
.flow li.f-out::before{background:var(--purple);border-color:var(--purple)}
.flow li.f-out::after{border-top:1.5px dashed var(--purple);top:4.5px}
.flow li.f-route{padding-left:0}
.flow li.f-route::before{background:var(--navy)}
.flow li.f-route::after{display:none}
.boundary{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:32px;border-top:1.5px dashed var(--purple)}
.boundary-label{font-size:13px;font-weight:600;color:var(--purple);line-height:1.4}
.boundary .h3{margin-top:10px}
.boundary p.b-text{font-size:17px;line-height:1.6;color:var(--grey);padding-top:30px}

/* chapter 4 notes */
.side-notes{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;max-width:1040px}
.side-notes p{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--grey)}
.side-notes p::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--navy)}
.side-notes strong{font-weight:600;color:var(--navy)}

/* chapter 6: fit */
.fit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
.fit-list{list-style:none;border-top:1px solid var(--border)}
.fit-list li{position:relative;padding:16px 0 16px 28px;border-bottom:1px solid var(--border);font-size:16px;line-height:1.5}
.fit-list li::before{content:"";position:absolute;left:2px;top:1.35em;width:8px;height:8px;background:var(--purple)}
.fit-aside{margin-top:20px;font-size:15px;line-height:1.6;color:var(--grey)}

/* provenance: a short signed note */
.note-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:start}
.note{position:relative;background:var(--white);border:1px solid var(--border);border-top:2px solid var(--purple);border-radius:var(--radius-card);padding:40px 44px 36px}
.note p{font-size:17px;line-height:1.7;color:var(--navy)}
.note p + p{margin-top:18px}
.signature{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.note .sig-name{font-size:18px;font-weight:600;line-height:1.3}
.note .sig-role{margin-top:4px;font-size:14px;line-height:1.5;color:var(--grey)}
.note .sig-place{margin-top:2px;font-size:14px;line-height:1.5;color:var(--grey)}

/* chapter 6: what it is not */
.not-grid{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.not-col h3{font-size:15px;font-weight:600;line-height:1.4;padding-bottom:12px;border-bottom:1px solid var(--navy)}
.not-col ul{list-style:none}
.not-col li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--border);font-size:15px;line-height:1.5}
.not-col li::before{content:"";position:absolute;left:1px;top:1.3em;width:12px;border-top:1.5px solid var(--grey)}
.not-foot{margin-top:24px;font-size:15px;line-height:1.6;color:var(--grey);max-width:60ch}

/* chapter 6: next step */
.contact{padding:56px 0 120px}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
.contact .lede{max-width:34em}
.channels{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.channel{display:flex;flex-direction:column;height:100%;padding:24px 24px 22px;border:1px solid var(--border);border-top:2px solid var(--navy);border-radius:var(--radius-card);text-decoration:none;color:var(--navy);background:var(--white);transition:border-color .2s ease}
.channel:hover{border-color:var(--purple)}
.ch-label{font-size:13px;font-weight:500;color:var(--grey)}
.ch-value{margin-top:8px;font-size:21px;line-height:1.3;font-weight:600;word-break:break-word}
.ch-action{margin-top:auto;padding-top:28px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--purple)}
.ch-action svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;transition:transform .2s ease}
.channel:hover .ch-action svg{transform:translate(2px,-2px)}
.ch-call{margin-top:18px;font-size:15px;color:var(--grey)}
.ch-call a{color:var(--navy);font-weight:600;text-decoration-color:var(--border);text-underline-offset:3px}
.ch-call a:hover{text-decoration-color:var(--purple)}

/* ---------- Signature footer: the closing dispatch rail ---------- */
.sig{position:relative;background:var(--navy);color:var(--white);padding:0 0 40px;overflow:hidden}
.sig::before{content:"";display:block;height:2px;background:var(--purple)}
.sig a{color:var(--white)}
.sig :focus-visible{outline-color:var(--white)}
.sig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:64px 0 56px}
.sig-logo{display:block}
.sig-logo img{height:48px;width:auto}
.sig-logo .sig-logo-short{display:none;height:32px}
.sig-intro{max-width:34em;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);text-align:right}
.sig-rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0}
/* the rail enters from the page edge and leaves as a dashed hand-off, like the routes above */
.sig-rail::before{content:"";position:absolute;left:-50vw;right:0;top:0;border-top:1px solid rgba(255,255,255,.35)}
.sig-rail::after{content:"";position:absolute;left:100%;width:50vw;top:0;border-top:1px dashed rgba(255,255,255,.35)}
.sig-stop{position:relative;padding:32px 24px 0 0}
.sig-stop::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border:1.5px solid var(--white);background:var(--navy)}
.sig-stop:first-child::before{background:var(--purple);border-color:var(--purple)}
.sig-stop dt{font-size:13px;font-weight:500;color:rgba(255,255,255,.72);line-height:1.4}
.sig-stop dd{margin:8px 0 0;font-size:17px;line-height:1.45;font-weight:600}
.sig-stop dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s ease}
.sig-stop dd a:hover{border-bottom-color:var(--white)}
.sig-stop dd .sig-sub{display:inline-block;margin-top:6px;font-size:14px;font-weight:500}
.sig-stop dd .profile-link{border-bottom:1px solid rgba(255,255,255,.35)}
.sig-stop dd .profile-link:hover{border-bottom-color:var(--white)}
.sig-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:72px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.72)}
.sig-base a{color:rgba(255,255,255,.86);text-decoration:none}
.sig-base a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .site-nav a{padding:8px 7px}
  .header-in{gap:20px}
}
@media (max-width:1023px){
  .wrap{padding:0 20px}
  .site-nav{display:none}
  .menu{display:block;margin-left:auto}
  .hero{padding:40px 0 72px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-route{max-width:460px}
  .hero-lede{font-size:17px}
  .chapter{padding:72px 0}
  .chapter--tint + .chapter,.chapter + .chapter--tint{padding-top:72px}
  .chapter-mark{margin-bottom:36px}
  .lede,.pivot-sub{font-size:16px}
  .split{grid-template-columns:1fr;gap:20px}
  .split-body > p.statement{margin-top:32px}
  .stage{margin-top:56px}
  .pivot{margin-top:64px}
  .vis-block + .vis-block{margin-top:88px}
  .flow{grid-template-columns:1fr;margin-top:36px}
  .flow li{padding:0 0 22px 32px}
  .flow li::before{top:4px}
  .flow li::after{left:5px;right:auto;top:15px;bottom:-4px;border-top:0;border-left:1px solid var(--navy)}
  .flow li.f-out::after{border-top:0;border-left:1.5px dashed var(--purple);left:4.5px;top:15px}
  .flow li.f-route{padding-left:32px;padding-bottom:0}
  .boundary{grid-template-columns:1fr;gap:12px;margin-top:56px}
  .boundary p.b-text{padding-top:4px;font-size:16px}
  .side-notes{grid-template-columns:1fr;gap:16px}
  .fit-grid,.note-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .note{padding:28px 24px 26px}
  .note p{font-size:16px}
  .not-grid{grid-template-columns:1fr;gap:32px}
  .contact{padding:40px 0 88px}
  .sig-head{flex-direction:column;align-items:flex-start;padding:48px 0 44px}
  .sig-intro{text-align:left}
  .sig-rail{grid-template-columns:1fr;padding-left:0}
  .sig-rail::before{left:5px;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid rgba(255,255,255,.35)}
  .sig-rail::after{display:none}
  .sig-stop{padding:0 0 28px 36px}
  .sig-stop:last-child{padding-bottom:0}
  .sig-stop::before{top:3px}
  .sig-base{margin-top:48px}
}
@media (max-width:640px){
  .channels{grid-template-columns:1fr}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .brand-full{display:none}
  .brand-short{display:block;height:26px}   /* 161 px wide, above the 130 px minimum */
  .header-in{gap:10px;height:64px}
  .site-header.is-compact .header-in{height:var(--head-h-compact)}
  .profile-link{height:38px;padding:0 10px;gap:7px}
  .profile-link .pl-stub{width:10px}
  .hero h1{margin-top:20px}
  .syncway-lockup{--syncway-size:32px}
  .sig-logo .sig-logo-full{display:none}
  .sig-logo .sig-logo-short{display:block}
  .statement{padding-left:18px}
}
@media (max-width:359px){
  .profile-link .pl-stub{display:none}
}
@media print{
  .site-header{position:static}
  .menu,.skip-link{display:none}
  .chapter,.hero,.contact{padding:32px 0}
  .sig{background:none;color:var(--navy)}
}
@media print{ .ir-run-g{opacity:1 !important} }


/* ==========================================================================
   Explanatory visuals: reusable cores of the four selected Visual Lab concepts
   (01 preparation gap, 02 implementation to routine, 03 three outputs,
   04 three run outcomes). Geometry and drawing grammar carried over; lab frame,
   embedded fonts and duplicated logos removed. Shared drawing classes appear once.
   ========================================================================== */
/* =================== REUSABLE VISUAL: preparation gap =================== */
.pg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- Overview: where preparation sits --- */
.pg-route{list-style:none;margin:56px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:15% 17% 36% 17% 15%}
.pg-route::before{content:"";position:absolute;left:0;right:calc(15% - 11px);top:10px;border-top:1px solid var(--navy)}
.node{position:relative;padding:32px 20px 0 0}
.node::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border:1.5px solid var(--navy);background:var(--white)}
.node--in-place::before{background:var(--navy)}
.node-title{margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:8px}
.node-title svg{width:18px;height:auto;flex:none}
.node-note{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--grey)}
.node-tag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:500;color:var(--navy)}
.node-tag::before{content:"";width:6px;height:6px;background:var(--navy)}
.node--gap{padding-left:20px;padding-right:20px}
.node--gap::before{left:0;right:0;top:3px;bottom:0;width:auto;height:auto;border:0;border-top:2px solid var(--purple);border-left:1px dashed var(--purple);border-right:1px dashed var(--purple);background:transparent}
.node--gap::after{content:"";position:absolute;left:1px;right:1px;top:9px;height:3px;background:var(--white)}
.node--gap + .node{padding-left:20px}
.node--gap + .node::before{left:20px}
.node--gap .node-title{color:var(--purple)}
.pg-callout{width:100%;height:48px}
.pg-callout path{fill:none;stroke:var(--purple);stroke-width:1;stroke-dasharray:4 4;opacity:.7;vector-effect:non-scaling-stroke}

/* --- Detail panel --- */
.pg-detail{border:1px solid var(--border);border-top:2px solid var(--purple);border-radius:var(--radius-card);padding:32px 32px 28px;background:var(--white)}
.pg-detail-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;align-items:baseline}
.pg-detail-title{margin:0;font-size:22px;line-height:1.3;font-weight:600;color:var(--navy)}
.pg-detail-note{margin:0;font-size:15px;line-height:1.55;color:var(--grey);max-width:60ch}

.pg-stage{margin-top:28px;display:grid;grid-template-columns:20% repeat(8,7.5%) 20%}
.pg-band{grid-column:1 / -1;grid-row:1;width:100%;height:auto;overflow:visible}
.pg-end--source{grid-column:1;grid-row:2;padding:14px 16px 0 1%}
.pg-steps{grid-column:2 / span 8;grid-row:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr)}
.pg-end--output{grid-column:10;grid-row:2;padding:14px 0 0 18.4%}
.pg-entry,.pg-exit,.lane-cell,.end-sheet,.step-no{display:none}

.end-title{margin:0;font-size:14px;line-height:1.35;font-weight:600;color:var(--navy)}
.end-text{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--grey)}
.step{text-align:center;padding:14px 5px 0}
.step-title{margin:0;font-size:13px;line-height:1.3;font-weight:600;color:var(--navy)}
.step-desc{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--grey)}

/* key */
.pg-key{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 28px}
.pg-key li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;color:var(--grey)}
.pg-key svg{width:30px;height:16px;flex:none}

.pg-close{margin:32px 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--navy)}

/* --- SVG drawing classes (shared by desktop band and mobile lanes) --- */
.ln,.ln-x,.ln-alt,.ln-p,.gt,.g-stop,.g-open,.g-dia,.g-doc,.g-docl,.run-edge{vector-effect:non-scaling-stroke}
.ln{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ln-x{fill:none;stroke:var(--grey);stroke-width:1.25;stroke-dasharray:3 3;opacity:.8}
.ln-alt{fill:none;stroke:var(--grey);stroke-width:1.25;stroke-dasharray:1.5 3;stroke-linecap:round}
.ln-p{fill:none;stroke:var(--purple);stroke-width:1.25;stroke-linecap:round}
.gt{fill:none;stroke:var(--purple);stroke-width:1;opacity:.45}
.gt--strong{opacity:.9}
.g-stop{fill:none;stroke:var(--grey);stroke-width:1.5;stroke-linecap:square}
.g-open{fill:var(--purple-vlight);stroke:var(--navy);stroke-width:1.25}
.g-sq{fill:var(--purple)}
.g-node{fill:var(--navy)}
.g-dia{fill:var(--purple-vlight);stroke:var(--purple);stroke-width:1.25}
.g-doc{fill:var(--white);stroke:var(--navy);stroke-width:1.25}
.g-docl{fill:none;stroke:var(--navy);stroke-width:1}
.sh-edge{fill:var(--white);stroke:var(--grey);stroke-opacity:.55;stroke-width:1}
.sh-edge--firm{fill:var(--white);stroke:var(--navy);stroke-width:1}
.sh-grid{fill:none;stroke:var(--border);stroke-width:1}
.sh-head{fill:none;stroke:var(--navy);stroke-width:1}
.sh-soft{fill:var(--border)}
.sh-val{fill:var(--grey);opacity:.55}
.sh-strong{fill:var(--navy)}
.sh-band{fill:var(--purple-light)}
.sh-dot{fill:var(--navy)}
.sh-dot--x{fill:var(--grey);opacity:.8}
.band-tint{fill:var(--purple-vlight);stroke:var(--purple-light);stroke-width:1}
.gt-no{font:500 12px/1 "Inter",sans-serif;fill:var(--purple);text-anchor:middle}
.gt-tick{stroke:var(--purple);stroke-width:1;opacity:.45}

/* one explanatory motion moment: a single run across the checkpoints */
.run-sweep{display:none}
.run-edge{stroke:var(--purple);stroke-width:1.5}
@media (prefers-reduced-motion:no-preference){
  .js .pg .run-sweep{display:inline}
  .js .pg.is-seen .run-sweep{animation:pg-run 2.8s cubic-bezier(.45,0,.35,1) .35s both}
}
@keyframes pg-run{from{transform:translateX(0)}to{transform:translateX(770px)}}

/* ---------- Tablet and mobile: recomposed vertically ---------- */
@media (max-width:1023px){

  .pg-route{display:block;margin-top:36px}
  .pg-route::before{left:5px;right:auto;top:8px;bottom:24px;border-top:0;border-left:1px solid var(--navy)}
  .node{padding:0 0 22px 32px}
  .node::before{top:5px}
  .node--gap{margin:0 0 22px;padding:14px 16px 14px 32px;background:var(--purple-vlight);border-left:2px solid var(--purple);z-index:1}
  .node--gap::before{left:-1px;top:19px;right:auto;bottom:auto;width:11px;height:11px;border:1.5px solid var(--purple);background:var(--purple-vlight)}
  .node--gap::after{display:none}
  .node--gap + .node{padding-left:32px}
  .node--gap + .node::before{left:0}
  .pg-callout{display:none}

  .pg-detail{padding:24px 20px 20px}
  .pg-detail-head{grid-template-columns:1fr;gap:8px}
  .pg-detail-title{font-size:20px}

  .pg-stage{display:block;margin-top:24px;--lane-col:136px}
  .pg-band{display:none}
  .pg-end{display:grid;grid-template-columns:var(--lane-col) minmax(0,1fr);column-gap:16px;align-items:start;padding:0}
  .end-sheet{display:block;width:100%;height:auto}
  .end-text{font-size:14px}
  .end-title{font-size:15px}
  .pg-entry,.pg-exit{display:grid;grid-template-columns:var(--lane-col)}
  .pg-entry svg,.pg-exit svg{width:100%;height:28px}
  .pg-steps{display:block}
  .step{display:grid;grid-template-columns:var(--lane-col) minmax(0,1fr);column-gap:16px;text-align:left;padding:0}
  .lane-cell{display:flex;flex-direction:column;background:var(--purple-vlight)}
  .step:first-child .lane-cell{border-radius:6px 6px 0 0}
  .step:last-child .lane-cell{border-radius:0 0 6px 6px}
  .lane-sym{width:100%;height:auto}
  .lane-fill{flex:1 1 auto;width:100%;min-height:10px}
  .step-body{padding:12px 0 18px}
  .step-no{display:inline-block;margin-right:6px;color:var(--purple);font-weight:600}
  .step-title{font-size:15px}
  .step-desc{font-size:14px;line-height:1.5}
  .step-body{min-height:64px}
  .pg-key{gap:10px 20px}
}
@media (max-width:480px){
  .pg-stage{--lane-col:112px}
  .pg-detail{padding:20px 14px 16px}
}
@media print{
  .run-sweep{display:none}
}

/* =================== REUSABLE VISUAL: implementation to routine =================== */
.ir-sprite{position:absolute;width:0;height:0;overflow:hidden}

.ir-panel{margin-top:48px;border:1px solid var(--border);border-top:2px solid var(--purple);border-radius:var(--radius-card);padding:32px 32px 28px;background:var(--white)}

.ir-stage{display:grid;grid-template-columns:35% 65%}
.ir-zone-title{margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--navy)}
.ir-zone-title span{display:block;font-weight:400;font-size:13px;color:var(--grey);margin-top:2px}
.ir-zone-title--once{grid-column:1;grid-row:1;padding:0 16px 0 1%}
.ir-zone-title--run{grid-column:2;grid-row:1;padding-left:10.8%}
.ir-band{grid-column:1 / -1;grid-row:2;width:100%;height:auto;margin-top:12px;overflow:visible}
.ir-once{grid-column:1;grid-row:3;padding:16px 16px 0 1%;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:start}
.ir-run{grid-column:2;grid-row:3;padding:16px 0 0 10.8%}
.ir-fitted-m,.ir-runs-m{display:none}

.ir-sub{margin:0;font-size:13px;line-height:1.35;font-weight:600;color:var(--navy)}
.ir-list{list-style:none;margin:8px 0 0;padding:0}
.ir-list li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.45;color:var(--grey)}
.ir-list li + li{margin-top:6px}
.ir-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--navy)}
.ir-text{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--grey)}

.ir-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ir-step-title{margin:0;font-size:13px;line-height:1.35;font-weight:600;color:var(--navy)}
.ir-step-no{color:var(--purple);margin-right:6px}
.ir-step-desc{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--grey)}
.ir-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.5;color:var(--grey);max-width:64ch}

.ir-key{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 28px}
.ir-key li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;color:var(--grey)}
.ir-key svg{width:30px;height:16px;flex:none}
.ir-close{margin:32px 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--navy)}


/* concept-specific drawing classes */
.ir-zone{fill:var(--purple-vlight);stroke:var(--purple-light);stroke-width:1}
.ir-profile{fill:none;stroke:var(--purple);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ir-profile--tail{stroke-dasharray:4 5}
.ir-rail{fill:none;stroke:var(--navy);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ir-rail--tail{stroke-dasharray:4 5;opacity:.7}
.ir-tag{fill:var(--white);stroke:var(--navy);stroke-width:1;vector-effect:non-scaling-stroke}
.ir-fit{fill:none;stroke:var(--purple);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ir-fix{fill:var(--white);stroke:var(--purple);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ir-me{fill:var(--white);stroke:var(--grey);stroke-width:1.25}
.ir-mo{fill:var(--white);stroke:var(--navy);stroke-width:1.25}
.ir-mv{fill:var(--grey)}
.ir-mh{fill:none;stroke:var(--navy);stroke-width:1}
.ir-ms{fill:var(--navy)}
.ir-ann{font:400 13px/1 "Inter",sans-serif;fill:var(--grey)}
.ir-ann--mid{text-anchor:middle}
.ir-num{font:600 13px/1 "Inter",sans-serif;fill:var(--purple);text-anchor:end}
.ir-prof-label{font:500 13px/1 "Inter",sans-serif;fill:var(--purple)}

/* one motion moment: runs appear one after another, reading as repetition */
@media (prefers-reduced-motion:no-preference){
  .js .ir .ir-run-g{opacity:0}
  .js .ir.is-seen .ir-run-g{opacity:1;animation:ir-in .25s ease-out both}
}
@keyframes ir-in{from{opacity:0}to{opacity:1}}

@media (max-width:1023px){
  .ir-panel{margin-top:32px;padding:24px 20px 20px}
  .ir-stage{display:flex;flex-direction:column}
  .ir-band{display:none}
  .ir-zone-title{padding:0}
  .ir-zone-title--once{order:1}
  .ir-once{order:2;margin-top:12px;padding:16px;background:var(--purple-vlight);border:1px solid var(--purple-light);border-radius:6px;
    grid-template-columns:112px minmax(0,1fr);column-gap:16px;row-gap:16px}
  .ir-fitted-m{display:block;width:100%;height:auto;grid-row:1 / span 2}
  .ir-zone-title--run{order:3;margin-top:28px}
  .ir-run{order:4;padding:0}
  .ir-runs-m{display:block;width:100%;max-width:440px;height:auto;margin:4px 0 20px}
  .ir-steps{grid-template-columns:1fr;gap:14px}
  .ir-list li,.ir-text,.ir-step-desc,.ir-note{font-size:14px}
  .ir-step-title,.ir-sub{font-size:15px}
  .ir-key{gap:10px 20px}
}
@media (max-width:480px){
  .ir-panel{padding:20px 14px 16px}
  .ir-once{grid-template-columns:1fr}
  .ir-fitted-m{grid-row:auto;width:120px}
}

/* =================== REUSABLE VISUAL: three output forms =================== */

.to-panel{margin-top:48px;border:1px solid var(--border);border-top:2px solid var(--purple);border-radius:var(--radius-card);padding:32px 32px 28px;background:var(--white)}

.to-stage{display:grid;grid-template-columns:22% repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto}
.to-src{grid-column:1;grid-row:1;position:relative;height:200px}
.to-src svg{width:200px;height:80px}
.to-src::after{content:"";position:absolute;left:200px;right:0;top:40px;border-top:1.5px solid var(--navy)}
.to-src-text{grid-column:1;grid-row:2;padding:16px 24px 0 0}
.to-cut-label{grid-column:1;grid-row:3;margin:20px 0 0;padding-top:10px;border-top:1.5px dashed var(--purple);font-size:13px;line-height:1.4;font-weight:600;color:var(--purple)}
.to-route-note{grid-column:1;grid-row:4;margin:0;padding:12px 24px 0 0;font-size:12.5px;line-height:1.5;color:var(--grey)}

.to-outs{grid-column:2 / 5;grid-row:1 / 5;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.to-out{grid-row:1 / 5;display:grid;grid-template-rows:subgrid;position:relative}
.to-out::before{content:"";position:absolute;left:0;right:0;top:40px;border-top:1.5px solid var(--navy)}
.to-out:last-child::before{right:calc(100% - 114px)}
.to-out::after{content:"";position:absolute;left:113.25px;top:40px;height:32px;border-left:1.5px solid var(--navy)}
.to-fig{padding:72px 0 0 24px;height:200px}
.to-fig svg{width:180px;height:128px}
.to-txt{padding:16px 24px 0}
.to-cut{margin-top:20px;border-top:1.5px dashed var(--purple)}
.to-route{padding:12px 24px 0;display:flex;gap:10px;align-items:flex-start}
.to-route svg{width:12px;height:18px;flex:none;margin-top:1px}

.to-fmt{margin:0;font-size:12px;line-height:1.4;font-weight:500;color:var(--grey)}
.to-name{margin:2px 0 0;font-size:15px;line-height:1.35;font-weight:600;color:var(--navy)}
.to-desc{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--grey)}
.to-src-title{margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--navy)}
.to-goes{margin:0;font-size:12px;line-height:1.4;color:var(--grey)}
.to-goes strong{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;font-weight:500;color:var(--navy)}

.to-key{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 28px}
.to-key li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;color:var(--grey)}
.to-key svg{width:30px;height:16px;flex:none}
.nw{white-space:nowrap}
.to-close{margin:32px 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--navy)}


.to-block{fill:var(--purple-vlight);stroke:var(--purple-light);stroke-width:1;vector-effect:non-scaling-stroke}
.to-fit{fill:none;stroke:var(--purple);stroke-width:1.5}
.to-brace{font:500 15px/1 "Inter",sans-serif;fill:var(--navy)}
.to-arrow{fill:none;stroke:var(--grey);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1023px){
  .to-panel{margin-top:32px;padding:24px 20px 20px}
  .to-stage{display:flex;flex-direction:column}
  .to-src{order:1;height:auto}
  .to-src::after{display:none}
  .to-src-text{order:2;padding:12px 0 0 0;max-width:60ch}
  .to-outs{order:3;display:block;margin:16px 0 0 10px;padding:12px 0 0 22px}
  .to-out{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"fig txt" "cut cut" "route route";column-gap:16px}
  .to-out + .to-out{margin-top:28px}
  .to-out::before{left:-22px;right:auto;width:22px;top:44px}
  .to-out:last-child::before{right:auto}
  .to-outs{position:relative}
  .to-outs::before{content:"";position:absolute;left:-1.5px;top:0;height:12px;border-left:1.5px solid var(--navy)}
  .to-out::after{left:-23.5px;top:0;bottom:-28px;height:auto;border-left:1.5px solid var(--navy)}
  .to-out:last-child::after{bottom:auto;height:45px}
  .to-fig{grid-area:fig;padding:0;height:auto}
  .to-fig svg{width:128px;height:auto}
  .to-txt{grid-area:txt;padding:0}
  .to-cut{grid-area:cut;margin-top:14px}
  .to-route{grid-area:route;padding:10px 0 0}
  .to-cut-label{order:4;margin-top:28px}
  .to-route-note{order:5;padding:6px 0 0}
  .to-desc,.to-route-note{font-size:14px}
  .to-key{gap:10px 20px}
}
@media (max-width:480px){
  .to-panel{padding:20px 14px 16px}
  .to-out{grid-template-columns:1fr;grid-template-areas:"fig" "txt" "cut" "route"}
  .to-fig svg{width:150px;margin-bottom:12px}
}

/* =================== REUSABLE VISUAL: three run outcomes =================== */
.ro-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ro-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ro-panel{margin-top:48px;border:1px solid var(--border);border-top:2px solid var(--purple);border-radius:var(--radius-card);padding:24px 32px 28px;background:var(--white)}

.ro-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ro-table col.c-in{width:8%}.ro-table col.c-gate{width:6%}.ro-table col.c-back{width:34%}.ro-table col.c-mean{width:27%}.ro-table col.c-next{width:25%}
.ro-table thead th{padding:0 16px 14px 0;text-align:left;font-size:12.5px;line-height:1.35;font-weight:500;color:var(--grey);border-bottom:1px solid var(--border);vertical-align:bottom}
.ro-table thead th.h-gate{text-align:center;padding-right:0}
.ro-table tbody td,.ro-table tbody th{padding:28px 16px 28px 0;vertical-align:middle;text-align:left;border-bottom:1px solid var(--border);position:relative}
.ro-table tbody tr:last-child td,.ro-table tbody tr:last-child th{border-bottom:0}

/* the same export enters every row */
.ro-in svg{width:36px;height:48px;position:relative;z-index:1;background:var(--white)}
.ro-in::after{content:"";position:absolute;left:36px;right:0;top:50%;border-top:1.5px solid var(--navy)}
/* one continuous checkpoint across all rows */
.ro-table td.ro-gate{padding:0}
.ro-gate::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--navy)}
.ro-gate::after{content:"";position:absolute;left:calc(50% - 4px);width:8px;top:-1px;bottom:-1px;border-left:1.5px solid var(--purple);border-right:1.5px solid var(--purple);background:var(--white);z-index:1}
.ro-table tbody tr:first-child .ro-gate::after{top:0}
.ro-table thead th.h-gate{position:relative}
/* what comes back: identical frame for all three */
.ro-table tbody th.ro-back{padding-left:24px}
.ro-back::before{content:"";position:absolute;left:0;width:24px;top:50%;border-top:1.5px solid var(--navy)}
.ro-back-in{display:flex;align-items:center;gap:16px}
.ro-back svg{width:130px;height:110px;flex:none}
.ro-name{font-size:15px;line-height:1.35;font-weight:600;color:var(--navy)}
.ro-mean,.ro-next{margin:0;font-size:14px;line-height:1.55;color:var(--grey)}
.ro-next{color:var(--navy)}

.ro-key{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 28px}
.ro-key li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;color:var(--grey)}
.ro-key svg{width:30px;height:16px;flex:none}
.ro-close{margin:32px 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--navy)}


.ro-me{fill:var(--white);stroke:var(--grey);stroke-width:1.25}
.ro-mv{fill:var(--grey)}
.ro-mh{fill:none;stroke:var(--navy);stroke-width:1}
.ro-ms{fill:var(--navy)}
.ro-frame{fill:var(--white);stroke:var(--navy);stroke-width:1.25}
.ro-err{fill:var(--white);stroke:#C62828;stroke-width:1.5}
.ro-err-x{fill:none;stroke:#C62828;stroke-width:1.5;stroke-linecap:round}
.ro-warn{fill:var(--white);stroke:#B7791F;stroke-width:1.5;stroke-linejoin:round}
.ro-warn-i{fill:none;stroke:#B7791F;stroke-width:1.5;stroke-linecap:round}

@media (max-width:1023px){
  .ro-panel{margin-top:32px;padding:20px 20px 20px}
  .ro-table,.ro-table tbody{display:block}
  .ro-table colgroup,.ro-table thead{display:none}
  .ro-table tbody tr{display:grid;grid-template-columns:36px 28px minmax(0,1fr);grid-template-areas:"in gate back" "mean mean mean" "next next next";
    padding:24px 0;border-bottom:1px solid var(--border)}
  .ro-table tbody tr:first-child{padding-top:4px}
  .ro-table tbody tr:last-child{border-bottom:0;padding-bottom:4px}
  .ro-table tbody td,.ro-table tbody th{display:block;padding:0;border-bottom:0}
  .ro-in{grid-area:in}
  .ro-in::after{display:none}
  .ro-table td.ro-gate{grid-area:gate;align-self:stretch;min-height:110px}
  .ro-gate::after,.ro-table tbody tr:first-child .ro-gate::after{top:0;bottom:0}
  .ro-table tbody th.ro-back{grid-area:back;padding-left:16px}
  .ro-back::before{width:16px;top:50px}
  .ro-gate::before{top:50px}
  .ro-in{align-self:start;margin-top:26px}
  .ro-back-in{flex-wrap:wrap;gap:8px 14px}
  .ro-back svg{width:118px;height:100px}
  .ro-name{flex:1 1 120px}
  .ro-table tbody td.ro-mean-c{grid-area:mean;margin-top:16px}
  .ro-table tbody td.ro-next-c{grid-area:next;margin-top:10px}
  .ro-table tbody td.ro-mean-c::before,.ro-table tbody td.ro-next-c::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:500;color:var(--grey);margin-bottom:2px}
  .ro-mean,.ro-next{font-size:15px}
  .ro-key{gap:10px 20px}
}
@media (max-width:480px){
  .ro-panel{padding:16px 14px}
  .ro-back svg{width:104px;height:88px}
}