/* ==========================================================================
   Skill Link Tech Private Limited
   Visual language: technical drafting sheet / cyanotype blueprint.
   Rules: hairlines, plate numbers, dimension strips, annotation callouts.
   No icon sets, no illustrations — every graphic is type, rule or geometry.
   ========================================================================== */

:root{
  --paper:      #efece4;
  --paper-2:    #e6e2d8;
  --paper-3:    #dcd7ca;
  --ink:        #10161a;
  --ink-2:      #454e55;
  --ink-3:      #6d767d;
  --blue:       #0a7dbf;
  --blue-deep:  #06537f;
  --cyan:       #073a5b;
  --cyan-2:     #0a476d;
  --hair:       rgba(16,22,26,.17);
  --hair-2:     rgba(16,22,26,.30);
  --hair-inv:   rgba(198,226,243,.26);

  /* product accents, sampled from the Skillifyedu logo */
  --sk-green:   #80c028;
  --sk-navy:    #204058;

  --rail: 54px;
  --pad:  clamp(18px, 4vw, 68px);
  --maxw: 1360px;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tech: "Chakra Petch", "Archivo", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  padding-left:var(--rail);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--blue); color:#fff; }

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

.skip{
  position:fixed; top:-60px; left:var(--rail); z-index:200;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; font:500 12px/1 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
}
.skip:focus{ top:0; }

/* ---------- shared bits ------------------------------------------------ */

.tag{
  font:500 10.5px/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue-deep);
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.tag::after{
  content:""; flex:1 1 auto; height:1px; max-width:120px;
  background:var(--hair-2);
}
.plate__head--inv .tag{ color:#8fc6e8; }
.plate__head--inv .tag::after{ background:var(--hair-inv); }

.ink-blue{ color:var(--blue); }

.btn{
  --bd: var(--ink);
  display:inline-block;
  font:500 11px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none;
  padding:15px 24px;
  border:1px solid var(--bd);
  background:var(--ink); color:var(--paper);
  position:relative;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
.btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:3px 3px 0 var(--blue);
}
.btn:active{ transform:none; box-shadow:none; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ box-shadow:3px 3px 0 var(--blue); }
.btn--light{ background:transparent; color:#eaf4fb; border-color:var(--hair-inv); }
.btn--light:hover{ box-shadow:3px 3px 0 #8fc6e8; border-color:#8fc6e8; }

.is-blank{ color:var(--ink-3); letter-spacing:.06em; }

/* ==========================================================================
   LEFT RAIL
   ========================================================================== */

.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:90;
  border-right:1px solid var(--hair);
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.rail__line{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--hair); transform:translateX(-.5px);
}
.rail__prog{
  position:absolute; left:-1px; top:0; width:3px; height:0;
  background:var(--blue);
}
.rail__text{
  writing-mode:vertical-rl;
  font:500 9.5px/1 var(--mono);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-2);
  background:var(--paper);
  padding:26px 0;
  position:relative; z-index:1;
  margin-top:auto; margin-bottom:auto;
}
.rail__foot{
  font:700 13px/1 var(--tech); letter-spacing:.16em;
  color:var(--blue);
  background:var(--paper); padding:8px 0; position:relative; z-index:1;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.head{
  position:fixed; top:0; left:var(--rail); right:0; z-index:80;
  height:62px;
  display:flex; align-items:center; gap:24px;
  padding:0 var(--pad);
  border-bottom:1px solid var(--hair);
  background:rgba(239,236,228,.9);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(9px);
          backdrop-filter:blur(9px);
}
.head__brand{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding-right:20px; border-right:1px solid var(--hair);
  height:100%;
}
.head__mark{ height:30px; width:auto; }
.head__word{ height:16px; width:auto; }

.head__nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.head__nav a{
  font:500 10.5px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2);
  padding:6px 0; position:relative;
  transition:color .15s;
}
.head__nav a b{ color:var(--blue); font-weight:500; margin-right:5px; }
.head__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ink); transition:right .22s cubic-bezier(.2,.8,.3,1);
}
.head__nav a:hover{ color:var(--ink); }
.head__nav a:hover::after{ right:0; }
.head__nav a.is-cta{ color:var(--ink); border:1px solid var(--hair-2); padding:9px 13px; }
.head__nav a.is-cta::after{ display:none; }
.head__nav a.is-cta:hover{ background:var(--ink); color:var(--paper); }
.head__nav a.is-cta:hover b{ color:#8fc6e8; }

.head__meta{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.head__clock{
  font:400 10.5px/1 var(--mono); letter-spacing:.1em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  padding-left:18px; border-left:1px solid var(--hair);
}
.head__burger{
  display:none;
  font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  background:none; border:1px solid var(--hair-2); color:var(--ink);
  padding:10px 14px; cursor:pointer;
}

/* ==========================================================================
   PLATE 00 — HERO
   ========================================================================== */

.hero{
  position:relative; overflow:hidden;
  padding:calc(62px + clamp(46px,7vw,96px)) var(--pad) 0;
  border-bottom:1px solid var(--hair);
}

/* isometric drafting grid */
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient( 30deg, rgba(10,125,191,.11) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(-30deg, rgba(10,125,191,.11) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(  0deg, rgba(10,125,191,.06) 0 1px, transparent 1px 62px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 62%,transparent 100%);
}
.hero__watermark{
  position:absolute; right:-6%; top:-8%; width:min(52vw,720px);
  opacity:.05; pointer-events:none;
}

.hero__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,80px); align-items:start;
}

.hero__h1{
  font-family:var(--tech);
  font-weight:700;
  font-size:clamp(38px,6.6vw,92px);
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 30px;
}
.hero__h1 span{ display:block; }
.hero__h1 span:nth-child(2){ padding-left:.09em; }
.hero__h1 span:nth-child(4){ padding-left:.09em; }

.hero__lede{
  max-width:50ch; font-size:clamp(15px,1.12vw,17.5px);
  color:var(--ink-2); margin:0 0 34px;
  padding-left:18px; border-left:1px solid var(--hair-2);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; padding-bottom:clamp(40px,6vw,80px); }

/* --- crosshair readout (drafting cursor) --- */
.hero__cross{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .25s;
}
.hero__cross.is-on{ opacity:1; }
.hero__cross-v,.hero__cross-h{ position:absolute; background:rgba(10,125,191,.4); }
.hero__cross-v{ top:0; bottom:0; width:1px; left:0; }
.hero__cross-h{ left:0; right:0; height:1px; top:0; }
.hero__cross-read{
  position:absolute; left:0; top:0;
  transform:translate(10px,10px);
  font:400 9.5px/1 var(--mono); letter-spacing:.12em;
  color:var(--blue-deep); background:var(--paper);
  padding:3px 5px; border:1px solid rgba(10,125,191,.35);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* --- isometric stack --- */
.hero__right{ position:relative; }
.iso{
  position:relative; height:clamp(300px,34vw,430px);
  perspective:1400px;
}
.iso__stage{
  position:absolute; left:4%; top:44%;
  width:min(300px,21vw); height:min(300px,21vw);
  transform-style:preserve-3d;
  transform:translateY(-50%) rotateX(58deg) rotateZ(-42deg);
}
.iso__plate{
  position:absolute; inset:0;
  border:1.5px solid var(--blue);
  background:rgba(10,125,191,.055);
  transform:translateZ(var(--z));
  box-shadow:5px 5px 0 rgba(6,83,127,.16);
  transition:transform .5s cubic-bezier(.2,.8,.3,1), background .3s;
}
.iso__plate::before{
  /* inner corner ticks, drafting style */
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(10,125,191,.3);
  border-style:dashed;
}
.iso__plate::after{
  content:attr(data-plate);
  position:absolute; right:8px; bottom:6px;
  font:700 15px/1 var(--tech); color:rgba(6,83,127,.5);
}
.iso:hover .iso__plate{ background:rgba(10,125,191,.1); }
.iso:hover .iso__plate:nth-child(1){ transform:translateZ(calc(var(--z) + 34px)); }
.iso:hover .iso__plate:nth-child(2){ transform:translateZ(calc(var(--z) + 22px)); }
.iso:hover .iso__plate:nth-child(3){ transform:translateZ(calc(var(--z) + 11px)); }

.iso__call{
  position:absolute; right:0; display:flex; align-items:center; gap:0;
  font:500 clamp(9px,.72vw,10px)/1.3 var(--mono); letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
}
.iso__call i{ width:clamp(22px,4.5vw,86px); height:1px; background:var(--hair-2); }
.iso__call span{ padding-left:10px; }
.iso__call b{ color:var(--blue); font-weight:700; font-family:var(--tech); font-size:12px; letter-spacing:.06em; }
.iso__call i::before{
  content:""; position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--blue); transform:translate(-2px,-2px);
}
.iso__call--d{ top:8%; }
.iso__call--c{ top:27%; }
.iso__call--b{ top:46%; }
.iso__call--a{ top:65%; }

.iso__cap{
  position:absolute; left:0; bottom:-6px; margin:0; max-width:40ch;
  font:400 10px/1.6 var(--mono); letter-spacing:.06em;
  color:var(--ink-3); text-transform:uppercase;
}

/* --- dimension strip --- */
.dim{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:0 0 26px;
}
.dim__row{ display:flex; border-top:1px solid var(--hair-2); }
.dim__seg{
  position:relative; padding:14px 12px 0;
  border-left:1px solid var(--hair-2);
  min-width:0;
}
.dim__seg:last-child{ border-right:1px solid var(--hair-2); }
.dim__seg::before{
  content:""; position:absolute; left:0; top:0; width:1px; height:8px;
  background:var(--blue);
}
.dim__seg span{
  display:block; font:400 10px/1.4 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dim__seg b{ font:700 clamp(15px,1.6vw,22px)/1.2 var(--tech); }
.dim__total{
  margin:12px 0 0; font:400 10px/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ==========================================================================
   TICKER
   ========================================================================== */

.ticker{
  overflow:hidden; border-bottom:1px solid var(--hair);
  background:var(--paper-2);
  padding:11px 0;
}
.ticker__track{
  display:flex; gap:0; width:max-content;
  animation:slide 46s linear infinite;
}
.ticker__track span{
  font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); padding:0 26px; white-space:nowrap;
  border-right:1px solid var(--hair);
}
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* ==========================================================================
   PLATE FRAME
   ========================================================================== */

.plate{
  position:relative;
  padding:clamp(60px,8vw,124px) var(--pad);
  border-bottom:1px solid var(--hair);
}
.plate > *{ position:relative; }
.plate__head{ max-width:var(--maxw); margin:0 auto clamp(38px,5vw,64px); }
.plate--wide .plate__head, .plate--wide .ledger, .plate--wide .enq{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.plate__title{
  font-family:var(--tech); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,4.6vw,62px); line-height:1; letter-spacing:-.015em;
  margin:0;
}
.plate__sub{
  margin:16px 0 0; max-width:62ch; color:var(--ink-2);
  font-size:15px;
}
.plate__head--inv .plate__title{ color:#f2f8fc; }
.plate__head--inv .plate__sub{ color:#a9cee6; }
.plate__head--inv{ max-width:var(--maxw); margin:0 auto clamp(38px,5vw,64px); position:relative; }

/* hidden only when scripting is available to reveal it again */
.js [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ==========================================================================
   PLATE 01 — POSITION
   ========================================================================== */

.pos{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(26px,5vw,72px);
}
.pos__notes{
  border-top:1px solid var(--hair-2);
  padding-top:8px;
  align-self:start;
  position:sticky; top:96px;
}
.note{
  margin:0; padding:14px 0; border-bottom:1px solid var(--hair);
  font:400 11.5px/1.75 var(--mono); letter-spacing:.02em;
  color:var(--ink-2);
}
.note b{ color:var(--blue-deep); font-weight:500; }

.pos__body{ border-top:1px solid var(--hair-2); padding-top:8px; }
.pos__body p{ margin:0 0 22px; max-width:66ch; }
.pos__lede{
  font-family:var(--tech); font-weight:600; text-transform:none;
  font-size:clamp(21px,2.5vw,34px)!important; line-height:1.24;
  letter-spacing:-.01em; margin-bottom:30px!important;
}
.pos__body > p:not(.pos__lede){ color:var(--ink-2); font-size:16.5px; }

.sig{
  display:flex; flex-wrap:wrap; margin-top:38px;
  border:1px solid var(--hair-2);
}
.sig div{
  flex:1 1 120px; padding:12px 16px;
  border-right:1px solid var(--hair-2);
}
.sig div:last-child{ border-right:0; }
.sig span{
  display:block; font:400 9.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}
.sig b{ font:600 13px/1 var(--tech); letter-spacing:.04em; }

/* ==========================================================================
   PLATE 02 — LEDGER
   ========================================================================== */

.ledger{ border-top:1px solid var(--ink); }
.ledger__hd{
  display:grid;
  grid-template-columns:74px minmax(0,2.5fr) 108px 74px 138px 128px 34px;
  gap:16px; padding:10px 0;
  border-bottom:1px solid var(--hair-2);
}
.ledger__hd span{
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}

.row{ border-bottom:1px solid var(--hair); }
.row__bar{
  display:grid; width:100%;
  grid-template-columns:74px minmax(0,2.5fr) 108px 74px 138px 128px 34px;
  gap:16px; align-items:center;
  padding:20px 0; background:none; border:0; cursor:pointer;
  text-align:left; color:inherit; font-family:inherit;
  transition:background .2s, padding .2s;
}
.row__bar:hover{ background:var(--paper-2); padding-left:12px; padding-right:12px; }
.row__no{
  font:600 12px/1 var(--tech); letter-spacing:.08em; color:var(--blue);
}
.row__name{
  font-family:var(--tech); font-weight:600; font-size:clamp(17px,1.9vw,25px);
  line-height:1.14; letter-spacing:-.005em;
}
.row__stream,.row__dur,.row__mode,.row__lvl{
  font:400 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
}
.row__mark{
  position:relative; width:14px; height:14px; justify-self:end;
  border:1px solid var(--hair-2);
}
.row__mark::before,.row__mark::after{
  content:""; position:absolute; background:var(--ink);
  left:50%; top:50%;
}
.row__mark::before{ width:7px; height:1px; transform:translate(-50%,-50%); }
.row__mark::after{ width:1px; height:7px; transform:translate(-50%,-50%); transition:transform .25s; }
.row.is-open .row__mark{ border-color:var(--blue); background:var(--blue); }
.row.is-open .row__mark::before,.row.is-open .row__mark::after{ background:#fff; }
.row.is-open .row__mark::after{ transform:translate(-50%,-50%) scaleY(0); }

.row__sheet{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.8,.3,1);
}
.row.is-open .row__sheet{ grid-template-rows:1fr; }
.row__sheet-in{ overflow:hidden; min-height:0; }
.row__sheet-in > *{ opacity:0; transition:opacity .3s .06s; }
.row.is-open .row__sheet-in > *{ opacity:1; }
.row__sheet-in p{
  margin:0 0 20px; max-width:70ch; color:var(--ink-2);
  padding:0 0 0 90px; font-size:16px;
}
.mods{
  list-style:none; margin:0 0 22px; padding:0 0 0 90px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.mods li{
  font:400 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--hair-2); padding:8px 11px; color:var(--ink-2);
}
.row__foot{
  display:flex; flex-wrap:wrap; gap:0 0; margin:0 0 26px 90px;
  border-top:1px solid var(--hair);
}
.row__foot span{
  font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-deep); padding:11px 18px 0 0;
}

/* ==========================================================================
   PLATE 03 — PRODUCT: SKILLIFYEDU
   The product carries its own colours; we let its logo do that and borrow
   only the green as a phase marker, so the sheet stays one drawing.
   ========================================================================== */

.prod{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4.4vw,72px); align-items:start;
}
.prod__left{ min-width:0; }
.prod__logo{ display:block; width:min(268px,62vw); margin-bottom:20px; }
.prod__logo img{ width:100%; }

.live{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 26px;
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--hair-2); padding:9px 13px;
}
.live::before{ content:""; width:7px; height:7px; background:var(--sk-green); }

.prod__lede{
  font-family:var(--tech); font-weight:600; text-transform:uppercase;
  font-size:clamp(21px,2.7vw,38px); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 22px; max-width:16ch;
}
.prod__body{ margin:0 0 30px; max-width:60ch; color:var(--ink-2); font-size:16.5px; }
.prod .lines{ margin-bottom:32px; }
.prod .lines li span{ color:var(--sk-green); }

.prod__side{ min-width:0; }
.prod__side .dtab{ margin-top:0; }
.prod__side .dtab ~ .dtab{ margin-top:26px; }
.prod__side .dtab td:last-child{
  font:500 13.5px/1.5 var(--mono); color:var(--ink); white-space:nowrap;
}
.prod__note{
  margin:14px 0 0; font:400 11px/1.7 var(--mono); letter-spacing:.03em;
  color:var(--ink-3);
}

.phase{
  max-width:var(--maxw); margin:clamp(44px,5vw,72px) auto 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ink);
}
.phase div{
  position:relative; padding:18px clamp(12px,1.6vw,24px) 4px 0;
  border-right:1px solid var(--hair);
}
.phase div:last-child{ border-right:0; }
.phase div::before{
  content:""; position:absolute; left:0; top:-1px; width:26px; height:3px;
  background:var(--sk-green);
}
.phase span{
  display:block; font:400 9.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:11px;
}
.phase b{
  display:block; font:700 clamp(19px,2.3vw,32px)/1 var(--tech);
  text-transform:uppercase; letter-spacing:-.01em; margin-bottom:9px;
}
.phase em{
  font:400 12.5px/1.5 var(--sans); font-style:normal; color:var(--ink-2);
}
.phase__total{
  max-width:var(--maxw); margin:14px auto 0;
  font:400 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ==========================================================================
   PLATE 04 — PATHWAY (cyanotype)
   ========================================================================== */

.blueprint{
  background:var(--cyan); color:#dcecf7;
  border-bottom:1px solid var(--cyan);
  overflow:hidden;
}
.blueprint__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(198,226,243,.12) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(198,226,243,.12) 0 1px, transparent 1px 44px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

.trace{ max-width:var(--maxw); margin:0 auto; position:relative; }
.trace svg{
  width:100%; height:auto; color:#7fc0e6; display:block;
  overflow:visible;
}
.trace__lines path{
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.trace.is-in .trace__lines path{ stroke-dashoffset:0; }
.trace__stub{ stroke-width:1.5; opacity:.5; }
.trace__nodes circle{
  fill:var(--cyan); stroke:#bfe0f4; stroke-width:3;
  opacity:0; transition:opacity .5s;
}
.trace.is-in .trace__nodes circle{ opacity:1; }
.trace.is-in .trace__nodes circle:nth-child(1){ transition-delay:.15s; }
.trace.is-in .trace__nodes circle:nth-child(2){ transition-delay:.45s; }
.trace.is-in .trace__nodes circle:nth-child(3){ transition-delay:.75s; }
.trace.is-in .trace__nodes circle:nth-child(4){ transition-delay:1.05s; }
.trace.is-in .trace__nodes circle:nth-child(5){ transition-delay:1.35s; }

.trace__legend{
  list-style:none; margin:clamp(34px,5vw,56px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0; border-top:1px solid var(--hair-inv);
}
.trace__legend li{
  padding:20px clamp(12px,1.6vw,22px) 8px;
  border-right:1px solid var(--hair-inv);
  position:relative;
}
.trace__legend li:last-child{ border-right:0; }
.trace__legend li::before{
  content:""; position:absolute; left:0; top:0; width:1px; height:10px; background:#7fc0e6;
}
.trace__legend b{
  display:block; font:500 10px/1 var(--mono); letter-spacing:.2em;
  color:#7fc0e6; margin-bottom:12px;
}
.trace__legend h3{
  font:600 clamp(16px,1.6vw,21px)/1.1 var(--tech); text-transform:uppercase;
  letter-spacing:.01em; margin:0 0 10px; color:#fff;
}
.trace__legend p{ margin:0; font-size:13.5px; line-height:1.66; color:#a9cee6; }

/* ==========================================================================
   PLATE 04 — MEASURES
   ========================================================================== */

.meas{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ink);
}
.meas__cell{
  padding:26px clamp(14px,2vw,28px) 26px 0;
  border-right:1px solid var(--hair);
  position:relative;
  display:flex; flex-direction:column;
}
.meas__cell:last-child{ border-right:0; }
.meas__cell::before{
  content:""; position:absolute; left:0; top:-1px; width:26px; height:3px;
  background:var(--blue);
}
.meas__cell b{
  display:block; font:700 clamp(40px,5.6vw,76px)/.94 var(--tech);
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
  margin-bottom:16px;
}
.meas__cell b sup{ font-size:.34em; top:-1.5em; color:var(--blue); }
.meas__cell b .pct{ font-size:.44em; color:var(--blue); }
.meas__cell > span{
  display:block; font-size:14.5px; line-height:1.5; max-width:22ch;
  margin-bottom:14px;
}
.meas__cell em{
  margin-top:auto;
  font:400 9.5px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-style:normal;
}

/* ==========================================================================
   PLATE 05 — SPLIT
   ========================================================================== */

.split{
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--hair);
}
.split__pane{
  padding:clamp(50px,7vw,110px) clamp(22px,4.4vw,76px);
  border-right:1px solid var(--hair);
  display:flex; flex-direction:column; align-items:flex-start;
}
.split__pane:last-child{ border-right:0; }
.split__pane--ink{
  background:var(--ink); color:var(--paper);
}
.split__pane--ink .tag{ color:#8fc6e8; }
.split__pane--ink .tag::after{ background:var(--hair-inv); }
.split__title{
  font:700 clamp(28px,3.6vw,50px)/1 var(--tech); text-transform:uppercase;
  letter-spacing:-.01em; margin:0 0 20px;
}
.split__lede{ margin:0 0 30px; max-width:44ch; font-size:16.5px; color:var(--ink-2); }
.split__pane--ink .split__lede{ color:#b9c2c8; }

.lines{ list-style:none; margin:0 0 36px; padding:0; width:100%; border-top:1px solid var(--hair); }
.split__pane--ink .lines{ border-color:var(--hair-inv); }
.lines li{
  display:flex; gap:16px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--hair);
  font-size:15.5px;
  transition:padding-left .2s;
}
.split__pane--ink .lines li{ border-color:var(--hair-inv); }
.lines li:hover{ padding-left:8px; }
.lines li span{
  flex:0 0 auto; font:500 10px/1.6 var(--mono); letter-spacing:.14em;
  color:var(--blue);
}
.split__pane--ink .lines li span{ color:#8fc6e8; }

/* ==========================================================================
   PLATE 06 — FIELD NOTES
   ========================================================================== */

.notes{ max-width:var(--maxw); margin:0 auto; }
.notes blockquote{
  margin:0; padding:34px 0; border-top:1px solid var(--hair-2);
  max-width:74ch;
}
.notes blockquote:last-child{ border-bottom:1px solid var(--hair-2); }
.notes--in1{ margin-left:clamp(0px,8vw,140px)!important; }
.notes--in2{ margin-left:clamp(0px,16vw,280px)!important; }
.notes p{
  margin:0 0 18px;
  font-family:var(--tech); font-weight:500;
  font-size:clamp(18px,2.2vw,29px); line-height:1.34; letter-spacing:-.005em;
}
.notes p::before{ content:"“"; color:var(--blue); }
.notes p::after{ content:"”"; color:var(--blue); }
.notes cite{
  font:400 10px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); font-style:normal;
}

/* ==========================================================================
   PLATE 07 — ENQUIRY (title block)
   ========================================================================== */

.enq{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,58px); align-items:start;
}
.tb{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--ink);
}
.tb__cell{
  position:relative; padding:11px 14px 12px;
  border-right:1px solid var(--hair-2);
  border-bottom:1px solid var(--hair-2);
  min-width:0;
}
.tb__cell--w2{ grid-column:span 2; }
.tb__cell--full{ grid-column:1/-1; }
.tb__cell--sign{ grid-column:span 1; }
.tb__cell--submit{ grid-column:span 2; padding:0; }
.tb__cell:nth-child(2n){ border-right:0; }
.tb__cell--full{ border-right:0; }
/* last band of the block: the container already draws the outer rule */
.tb__cell--sign{ border-right:1px solid var(--hair-2); border-bottom:0; }
.tb__cell--submit{ border-right:0; border-bottom:0; }

/* select affordance — drawn, not an icon set */
.tb__cell:has(select)::after{
  content:""; position:absolute; right:15px; bottom:19px;
  width:8px; height:5px; background:var(--ink-2);
  clip-path:polygon(0 0,100% 0,50% 100%);
  pointer-events:none;
}

.tb label{
  display:block; font:500 9.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.tb input,.tb select,.tb textarea{
  width:100%; background:none; border:0; padding:4px 0;
  font:500 15px/1.4 var(--sans); color:var(--ink);
  border-bottom:1px dotted var(--hair-2);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.tb select{ cursor:pointer; }
.tb textarea{ resize:vertical; min-height:96px; }
.tb input:focus,.tb select:focus,.tb textarea:focus{
  outline:0; border-bottom:1px solid var(--blue);
}
.tb input.is-bad,.tb textarea.is-bad{ border-bottom:1px solid #b4372c; }
.tb__ro{
  margin:0; font:500 15px/1.4 var(--sans); padding:4px 0;
  border-bottom:1px dotted var(--hair-2); color:var(--ink-2);
}
.tb__cell--submit button{
  width:100%; height:100%; min-height:64px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:0;
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  transition:background .18s, letter-spacing .18s;
}
.tb__cell--submit button:hover{ background:var(--blue); letter-spacing:.28em; }
.tb__status{
  grid-column:1/-1; margin:0; padding:0 14px;
  font:400 11px/1.6 var(--mono); letter-spacing:.1em; color:var(--blue-deep);
  max-height:0; overflow:hidden; transition:max-height .3s, padding .3s;
}
.tb__status.is-on{ max-height:80px; padding:12px 14px; }

.enq__side{ position:relative; }
.enq__mark{
  width:64px; opacity:.9; margin-bottom:26px;
}
.blanks{ margin:0; border-top:1px solid var(--hair-2); }
.blanks dt{
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); padding-top:14px;
}
.blanks dd{
  margin:5px 0 0; padding-bottom:13px; border-bottom:1px solid var(--hair);
  font-size:14.5px;
}
.blanks dd a{ text-decoration:none; border-bottom:1px solid var(--blue); }
.blanks dd a:hover{ color:var(--blue); }
.enq__fine{
  margin:20px 0 0; font:400 10.5px/1.7 var(--mono); letter-spacing:.04em;
  color:var(--ink-3);
}

/* ==========================================================================
   DOCUMENT PAGES — privacy, terms, refund, FAQ
   Same sheet, different drawing: control block, hanging clause numbers,
   sticky clause index, schedules as tables.
   ========================================================================== */

.doc main{ padding-top:62px; }

.dochead{
  padding:clamp(46px,6vw,88px) var(--pad) clamp(30px,3.4vw,46px);
  border-bottom:1px solid var(--hair);
  position:relative; overflow:hidden;
}
.dochead__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient( 30deg, rgba(10,125,191,.10) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(-30deg, rgba(10,125,191,.10) 0 1px, transparent 1px 62px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
}
.dochead__in{ position:relative; max-width:var(--maxw); margin:0 auto; }
.dochead__lede{
  margin:18px 0 0; max-width:64ch; color:var(--ink-2);
  font-size:clamp(15px,1.1vw,17px);
}

/* document control block */
.ctrl{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--ink); margin-top:clamp(26px,3vw,40px);
}
.ctrl div{
  padding:11px 14px 13px; border-right:1px solid var(--hair-2); min-width:0;
}
.ctrl div:last-child{ border-right:0; }
.ctrl span{
  display:block; font:500 9.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.ctrl b{ font:600 13.5px/1.35 var(--tech); letter-spacing:.03em; display:block; }
.ctrl .is-draft{ color:var(--blue-deep); }

/* body: index + clauses */
.docwrap{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(38px,4.6vw,70px) 0 clamp(56px,7vw,104px);
  display:grid; grid-template-columns:minmax(0,.27fr) minmax(0,.73fr);
  gap:clamp(26px,4.6vw,68px); align-items:start;
}
/* a nowrap schedule must scroll inside its track, not stretch it */
.docwrap > *{ min-width:0; }
.docouter{ padding:0 var(--pad); border-bottom:1px solid var(--hair); }

.docnav{ position:sticky; top:92px; border-top:1px solid var(--hair-2); padding-top:9px; }
.docnav h2{
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px;
}
.docnav a{
  display:flex; gap:10px; padding:9px 0 9px 8px; margin-left:-8px;
  border-bottom:1px solid var(--hair);
  font:400 11.5px/1.5 var(--mono); letter-spacing:.03em;
  color:var(--ink-2); text-decoration:none;
  border-left:2px solid transparent;
  transition:color .18s, border-color .18s, background .18s;
}
.docnav a b{ color:var(--blue); font-weight:500; flex:0 0 auto; }
.docnav a:hover{ color:var(--ink); background:var(--paper-2); }
.docnav a.is-cur{ color:var(--ink); border-left-color:var(--blue); }

.doctext{ counter-reset:sec; border-top:1px solid var(--hair-2); }
.doctext section{
  position:relative; counter-reset:item;
  padding:30px 0 34px 54px; border-bottom:1px solid var(--hair);
  scroll-margin-top:88px;
}
.doctext h2{
  counter-increment:sec;
  font:600 clamp(18px,2vw,26px)/1.16 var(--tech); text-transform:uppercase;
  letter-spacing:-.005em; margin:0 0 16px;
}
.doctext h2::before{
  content:counter(sec,decimal-leading-zero);
  position:absolute; left:0; top:34px;
  font:500 11px/1 var(--mono); letter-spacing:.1em; color:var(--blue);
}
.doctext h3{
  font:600 14px/1.4 var(--tech); text-transform:uppercase; letter-spacing:.04em;
  margin:24px 0 10px; color:var(--ink);
}
.doctext p{ margin:0 0 14px; max-width:72ch; color:var(--ink-2); font-size:15.5px; }
.doctext p:last-child{ margin-bottom:0; }
.doctext a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--blue); }
.doctext a:hover{ color:var(--blue); }
.doctext strong{ color:var(--ink); font-weight:600; }

.clauses{ list-style:none; margin:0 0 4px; padding:0; max-width:74ch; }
.clauses > li{
  position:relative; counter-increment:item;
  padding:0 0 0 54px; margin:0 0 15px;
  color:var(--ink-2); font-size:15.5px; line-height:1.62;
}
.clauses > li::before{
  content:counter(sec) "." counter(item);
  position:absolute; left:0; top:.3em;
  font:500 10.5px/1 var(--mono); letter-spacing:.08em; color:var(--blue-deep);
  font-variant-numeric:tabular-nums;
}
.clauses--plain{ counter-reset:none; }
.clauses--plain > li::before{ content:"—"; color:var(--hair-2); }

/* schedules */
.dtab{ width:100%; border-collapse:collapse; margin:20px 0 8px; text-align:left; }
.dtab caption{
  text-align:left; padding-bottom:11px;
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.dtab th,.dtab td{ border:1px solid var(--hair); padding:11px 14px; vertical-align:top; }
.dtab th{
  font:500 9.5px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--paper-2);
}
.dtab td{ font-size:14px; line-height:1.55; color:var(--ink-2); }
.dtab td:first-child{
  font:500 11.5px/1.5 var(--mono); letter-spacing:.04em; color:var(--ink);
  white-space:nowrap;
}
.dtab tbody tr:hover td{ background:var(--paper-2); }

/* note block */
.callout{
  margin:20px 0; padding:15px 18px 17px;
  border:1px solid var(--hair-2); border-left:3px solid var(--blue);
  background:var(--paper-2);
}
.callout span{
  display:block; font:500 9.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue-deep); margin-bottom:9px;
}
.callout p{ margin:0!important; font-size:14.5px!important; max-width:70ch; }

/* definition rows */
.defs{ margin:16px 0 4px; max-width:74ch; }
.defs dt{
  font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-deep); padding-top:14px;
}
.defs dd{
  margin:7px 0 0; padding-bottom:13px; border-bottom:1px solid var(--hair);
  font-size:15px; line-height:1.6; color:var(--ink-2);
}

/* related documents strip */
.rel{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(34px,4vw,58px) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  border-top:1px solid var(--hair);
}
.rel__lb{
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); padding-right:22px;
}
.rel a,.rel span.is-cur{
  font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border:1px solid var(--hair-2); padding:13px 17px; margin:4px 8px 4px 0;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
.rel a:hover{ transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--blue); }
.rel span.is-cur{ color:var(--ink-3); border-style:dashed; }

/* FAQ — reuses the ledger row machinery */
.faq .row__bar{ grid-template-columns:74px minmax(0,1fr) 34px; }
.faq .row__name{ font-size:clamp(16px,1.55vw,21px); line-height:1.3; }
.faq .row__sheet-in p{ font-size:15.5px; }
.faqgrp{
  display:flex; align-items:center; gap:14px;
  margin:clamp(38px,4vw,56px) 0 0;
  font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-deep);
}
.faqgrp::after{ content:""; flex:1 1 auto; height:1px; background:var(--hair-2); }
.faqgrp--first{ margin-top:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{ padding:clamp(50px,6vw,84px) var(--pad) 26px; }
.foot__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
  gap:clamp(30px,5vw,70px);
  padding-bottom:46px; border-bottom:1px solid var(--hair);
}
.foot__brand img{ width:min(200px,46vw); }
.foot__nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.foot__nav h4{
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--hair);
}
.foot__nav a,.foot__nav span{
  display:block; font-size:14px; text-decoration:none; color:var(--ink-2);
  padding:5px 0;
}
.foot__nav a:hover{ color:var(--blue); }

.revs{
  max-width:var(--maxw); margin:34px auto 0;
  width:100%; border-collapse:collapse; text-align:left;
}
.revs caption{
  text-align:left; font:500 9.5px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:12px;
}
.revs th,.revs td{
  border:1px solid var(--hair); padding:10px 14px;
  font:400 11.5px/1.5 var(--mono); letter-spacing:.06em; color:var(--ink-2);
}
.revs th{ color:var(--ink); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:9.5px; }
.revs td:first-child,.revs th:first-child{ width:64px; }
.revs td:nth-child(2),.revs th:nth-child(2){ width:120px; }
.revs td:last-child,.revs th:last-child{ width:80px; }

.foot__base{
  max-width:var(--maxw); margin:26px auto 0;
  display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between;
  font:400 10px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* the nav carries seven items now; the clock is the first thing to go */
@media (max-width:1240px){
  .head__clock{ display:none; }
  .head__meta{ gap:0; }
}
@media (max-width:1180px){
  /* schedules shrink to the column and scroll only if they truly must */
  .dtab{ display:block; overflow-x:auto; }
}

@media (max-width:1080px){
  .head__nav a b{ display:none; }
  .head__nav{ gap:14px; }
  .head__nav a{ font-size:10px; letter-spacing:.12em; }
  .head__brand{ padding-right:14px; }
  .head__mark{ height:26px; }
  .head__word{ height:14px; }
  .ledger__hd,.row__bar{ grid-template-columns:64px minmax(0,2fr) 96px 68px 120px; }
  .ledger__hd span:nth-child(6),.row__lvl{ display:none; }
  .row__mark{ display:none; }
  .ctrl{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ctrl div:nth-child(3n){ border-right:0; }
  .ctrl div:nth-child(-n+3){ border-bottom:1px solid var(--hair-2); }
  .phase{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phase div:nth-child(2n){ border-right:0; }
  .phase div:nth-child(-n+2){ border-bottom:1px solid var(--hair); padding-bottom:20px; }
  .phase div:nth-child(n+3)::before{ display:none; }
  .trace__legend{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trace__legend li{ border-bottom:1px solid var(--hair-inv); }
  .trace__legend li:nth-child(2n){ border-right:0; }
  .meas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .meas__cell:nth-child(2n){ border-right:0; }
  .meas__cell:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
}

@media (max-width:860px){
  :root{ --rail:38px; }
  .rail__text{ letter-spacing:.24em; font-size:8.5px; }

  .head{ height:56px; }
  .head__nav{
    position:fixed; top:56px; left:var(--rail); right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--hair);
    padding:8px var(--pad) 22px;
    transform:translateY(-140%); transition:transform .34s cubic-bezier(.2,.8,.3,1);
    max-height:calc(100vh - 56px); overflow:auto;
  }
  .head__nav.is-open{ transform:none; }
  .head__nav a{ padding:15px 0; border-bottom:1px solid var(--hair); font-size:12px; }
  .head__nav a b{ display:inline; }
  .head__nav a.is-cta{ border:0; border-bottom:1px solid var(--hair); padding:15px 0; }
  .head__nav a.is-cta:hover{ background:none; color:var(--blue); }
  .head__burger{ display:block; }
  .head__clock{ display:none; }

  .hero__inner{ grid-template-columns:1fr; }
  .hero__acts{ padding-bottom:20px; }
  .iso{ height:330px; margin-bottom:64px; }
  .iso__stage{ left:2%; width:210px; height:210px; }
  .iso__call i{ width:26px; }
  .iso__call{ font-size:9px; }
  .dim__row{ flex-wrap:wrap; }
  .dim__seg{ flex:1 1 50%!important; border-bottom:1px solid var(--hair); padding-bottom:12px; }
  .dim__seg:last-child{ border-right:0; }

  .pos{ grid-template-columns:1fr; }
  .pos__notes{ position:static; order:2; border-top:0; }

  .prod{ grid-template-columns:1fr; }
  .prod__side{ margin-top:8px; }

  .ledger__hd{ display:none; }
  .row__bar{
    display:flex; flex-wrap:wrap; align-items:baseline;
    gap:6px 16px; padding:20px 0;
  }
  .row__no,.row__name{ flex:0 0 100%; }
  .row__no{ margin-bottom:2px; }
  .row__stream,.row__dur,.row__mode,.row__lvl{ flex:0 0 auto; }
  .row__name{ margin-bottom:4px; }
  .row__sheet-in p,.mods{ padding-left:0; }
  .row__foot{ margin-left:0; }

  /* the horizontal trace becomes a vertical one, drawn on the legend itself */
  .trace svg{ display:none; }
  .trace__legend{
    position:relative; grid-template-columns:1fr;
    margin-top:0; border-top:0; padding-left:46px;
  }
  .trace__legend::after{
    content:""; position:absolute; left:13px; top:26px; bottom:40px;
    width:1px; background:var(--hair-inv);
  }
  .trace__legend li{ border-right:0; padding:14px 0 24px; }
  .trace__legend li::before{
    left:-39px; top:19px; width:13px; height:13px;
    background:var(--cyan); border:2px solid #bfe0f4; border-radius:50%;
  }
  .trace__legend b{ margin-bottom:8px; }

  .split{ grid-template-columns:1fr; }
  .split__pane{ border-right:0; border-bottom:1px solid var(--hair); }

  .enq{ grid-template-columns:1fr; }
  .tb{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tb__cell--w2{ grid-column:span 2; }
  .tb__cell--submit{ grid-column:span 2; }

  .foot__top{ grid-template-columns:1fr; }
  .foot__nav{ grid-template-columns:1fr 1fr; }
  .revs{ display:block; overflow-x:auto; white-space:nowrap; }

  /* document pages */
  .docwrap{ grid-template-columns:1fr; gap:0; }
  .docnav{
    position:static; margin-bottom:34px; border-top:0;
    border-bottom:1px solid var(--hair-2); padding-bottom:8px;
  }
  .docnav__list{ columns:2; column-gap:22px; }
  .docnav a{ break-inside:avoid; }
  .doctext section{ padding-left:0; padding-top:34px; }
  .doctext h2{ margin-top:6px; }
  .doctext h2::before{ position:static; display:block; margin-bottom:9px; }
  .clauses > li{ padding-left:46px; }
  .dtab{ display:block; overflow-x:auto; white-space:nowrap; }
  .dtab td{ white-space:normal; min-width:190px; }
  .rel__lb{ width:100%; padding:0 0 14px; }
  .faq .row__bar{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:14px; }
}

@media (max-width:520px){
  .meas{ grid-template-columns:1fr; }
  .meas__cell{ border-right:0; border-bottom:1px solid var(--hair); }
  .trace__legend{ grid-template-columns:1fr; }
  .trace__legend li{ border-right:0; }
  .foot__nav{ grid-template-columns:1fr; }
  .notes--in1,.notes--in2{ margin-left:0!important; }
  .phase{ grid-template-columns:1fr; }
  .phase div{ border-right:0; border-bottom:1px solid var(--hair); padding-bottom:18px; }
  .phase div::before{ display:none!important; }
  .ctrl{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ctrl div:nth-child(3n){ border-right:1px solid var(--hair-2); }
  .ctrl div:nth-child(2n){ border-right:0; }
  .ctrl div:not(:nth-last-child(-n+1)){ border-bottom:1px solid var(--hair-2); }
  .docnav__list{ columns:1; }
  .tb{ grid-template-columns:1fr; }
  .tb__cell,.tb__cell--w2,.tb__cell--full,.tb__cell--sign,.tb__cell--submit{
    grid-column:span 1; border-right:0;
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .trace__lines path{ stroke-dashoffset:0; }
  .trace__nodes circle{ opacity:1; }
}

@media print{
  .rail,.head,.ticker,.hero__cross{ display:none; }
  body{ padding-left:0; background:#fff; }
  .blueprint{ background:#fff; color:#000; }
}