/* ==========================================================================
   EnterIT — Design System (beta)
   Dark navy base, white type. Tokens taken from the official Enter Figma
   library; surfaces re-cast as a navy scale instead of full-colour sections.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Greycliff CF';src:url('/assets/fonts/GreycliffCF-Heavy.woff2') format('woff2'),url('/assets/fonts/GreycliffCF-Heavy.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Greycliff CF';src:url('/assets/fonts/GreycliffCF-Bold.woff2') format('woff2'),url('/assets/fonts/GreycliffCF-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Greycliff CF';src:url('/assets/fonts/GreycliffCF-Medium.woff2') format('woff2'),url('/assets/fonts/GreycliffCF-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Mono';src:url('/assets/fonts/FiraMono-Medium.woff2') format('woff2'),url('/assets/fonts/FiraMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Navy surface scale — the spine of the dark system */
  --bg:        #10171F;   /* page floor, deepest */
  --surface:   #17202E;   /* Figma "Dark" — default section */
  --surface-2: #1B2533;   /* raised card */
  --surface-3: #212C3C;   /* hover / higher card */
  --surface-4: #27334454; /* translucent wash */

  /* Type on dark */
  --text:   #FBFBFB;      /* Figma "White" */
  --text-2: #C6CEDC;
  --text-3: #8A95A8;
  --text-4: #686E77;      /* Figma "Grey" */

  /* Hairlines */
  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.17);

  /* Accents — Figma Palette 1 + 2 */
  --turquoise: #41E39E;
  --blue:      #6ECEFF;
  --blue-dark: #5ABAEB;
  --pink:      #E399FF;
  --violet:    #B790FF;
  --yellow:    #F8E354;
  --red:       #FF848C;

  --accent: var(--turquoise);        /* default accent per section */
  --on-accent: #10171F;              /* dark ink on bright fills */

  /* Type families */
  --font-head: 'Greycliff CF','Plus Jakarta Sans',system-ui,Arial,sans-serif;
  --font-mono: 'Fira Mono',ui-monospace,Menlo,monospace;

  /* Type scale — Figma desktop values, fluid down to 375px */
  --t-h1: clamp(40px, 5.4vw, 72px);
  --t-h2: clamp(30px, 3.6vw, 48px);
  --t-h3: clamp(23px, 2.4vw, 32px);
  --t-h4: clamp(20px, 1.8vw, 24px);
  --t-h5: 20px;
  --t-body-lg: 16px;
  --t-body:    14px;
  --t-body-sm: 12px;
  --t-mini:    10px;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 60px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text-2);
  font-family:var(--font-mono);font-weight:500;font-size:var(--t-body-lg);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--text);margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:900;line-height:.95;letter-spacing:-.01em}
h2{font-size:var(--t-h2);font-weight:900;line-height:.98;letter-spacing:-.01em}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.05}
h4{font-size:var(--t-h4);font-weight:700;line-height:1.1}
h5{font-size:var(--t-h5);font-weight:700;line-height:1.15}
p{margin:0}

::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,7vw,112px)}
.section--surface{background:var(--surface)}
.section--deep{background:var(--bg)}
.section--tint{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface))}
.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--s2)} .stack-3{gap:var(--s3)} .stack-4{gap:var(--s4)}
.stack-5{gap:var(--s5)} .stack-6{gap:var(--s6)} .stack-7{gap:var(--s7)}
.grid{display:grid;gap:var(--s5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Text helpers ---------- */
.lead{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--text-2);max-width:62ch}
.muted{color:var(--text-3)}
.accent-text{color:var(--accent)}
.label{font-family:var(--font-mono);font-size:var(--t-body-sm);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.label-lg{font-size:var(--t-body);letter-spacing:.1em;text-transform:uppercase}

/* Numbered section kicker — carried over from the live site */
.kicker{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);
  font-family:var(--font-mono);font-size:var(--t-body-sm);line-height:1.5;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.kicker::after{content:"";flex:1 1 60px;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.kicker b{font-weight:500;color:var(--text-3)}
@media(max-width:640px){.kicker::after{display:none}}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--on-accent); --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:14px 24px;border-radius:var(--r-sm);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-mono);font-size:var(--t-body);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .18s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn--outline:hover{--btn-bd:var(--accent)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text-2);--btn-bd:transparent;padding-inline:0}
.btn--ghost:hover{--btn-fg:var(--accent)}
.btn--dark{--btn-bg:var(--surface-2);--btn-fg:var(--text);--btn-bd:var(--line)}
.btn--dark:hover{--btn-bg:var(--surface-3)}
.btn--sm{padding:9px 16px;font-size:var(--t-body-sm)}
.btn--lg{padding:17px 30px;font-size:var(--t-body-lg)}

/* ---------- Surfaces ---------- */
.card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);transition:border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.card--hover:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-3px)}
.card--glow{position:relative;overflow:hidden}
.card--glow::after{content:"";position:absolute;inset:auto -20% -45% auto;width:56%;height:56%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 68%);
  opacity:0;transition:opacity .28s var(--ease);pointer-events:none}
.card--glow:hover::after{opacity:1}
.card--flat{background:transparent}

/* Checklist card — the Figma "what you get" pattern, re-cast dark */
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.check-list li{display:flex;gap:var(--s3);align-items:flex-start;
  font-size:var(--t-body);line-height:1.55;color:var(--text-2)}
.check-list li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2341E39E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;
}

/* ---------- Chips ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface-2);
  font-family:var(--font-mono);font-size:var(--t-body-sm);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);cursor:pointer;
  transition:all .18s var(--ease);
}
.chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--text)}
.chip[aria-pressed="true"],.chip.is-on{
  background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));
  border-color:var(--accent);color:var(--text);
}

/* ---------- Metric / KPI tile ---------- */
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.kpi .kpi-ob{font-family:var(--font-mono);font-size:var(--t-body-sm);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:var(--s3)}
.kpi .kpi-num{font-family:var(--font-head);font-weight:900;font-size:clamp(28px,3vw,40px);
  line-height:1;color:var(--accent);display:block;margin-bottom:var(--s2)}
.kpi p{font-size:var(--t-body);color:var(--text-3);line-height:1.5}

/* ---------- Testimonial ---------- */
.quote{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.quote blockquote{margin:0 0 var(--s4);font-size:var(--t-body);line-height:1.65;color:var(--text-2)}
.quote figcaption{display:flex;align-items:center;gap:var(--s3)}
.quote img,.quote .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--surface-3)}
.quote .who{font-family:var(--font-head);font-weight:700;font-size:var(--t-body);color:var(--text)}
.quote .role{font-size:var(--t-body-sm);color:var(--text-3)}

/* ---------- Inputs / inline capture ---------- */
.field{
  width:100%;padding:15px 18px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--font-mono);font-size:var(--t-body);transition:border-color .18s var(--ease);
}
.field::placeholder{color:var(--text-4)}
.field:focus{outline:none;border-color:var(--accent)}
.inline-form{display:flex;gap:var(--s2);flex-wrap:wrap;max-width:520px}
.inline-form .field{flex:1 1 240px}
.form-note{font-size:var(--t-body-sm);color:var(--text-4);margin-top:var(--s3)}
.form-note a{color:var(--text-3)}

/* ---------- Media frame (Figma rounded photo w/ play) ---------- */
.media{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);aspect-ratio:16/11}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media--placeholder{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,var(--surface-3) 14px 28px);
  color:var(--text-4);font-size:var(--t-body-sm);letter-spacing:.1em;text-transform:uppercase}
.play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  background:rgba(251,251,251,.92);color:var(--on-accent);
  transition:transform .2s var(--ease),background .2s var(--ease)}
.play:hover{transform:scale(1.07);background:var(--accent)}

/* ---------- Trust / logo strip ---------- */
.logo-strip{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.logo-strip img{height:26px;width:auto;opacity:.72;filter:grayscale(1) brightness(1.7);
  transition:opacity .2s var(--ease)}
.logo-strip img:hover{opacity:1}

/* Trust badge row */
.badges{display:flex;flex-wrap:wrap;gap:var(--s3)}
.badge{display:inline-flex;align-items:center;gap:var(--s2);padding:9px 14px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
  font-size:var(--t-body-sm);color:var(--text-2)}
.badge .ico{font-size:14px;line-height:1}

/* ---------- Notice bar ---------- */
.notice{background:var(--surface-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  padding:10px var(--gutter);font-size:var(--t-body-sm);color:var(--text-2);flex-wrap:wrap}

/* ---------- Numbered flow (process steps) ---------- */
.flow{counter-reset:flowstep;list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.flow > li{counter-increment:flowstep;position:relative;padding-left:56px}
.flow > li::before{
  content:counter(flowstep);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--accent);font-family:var(--font-head);font-weight:900;font-size:16px;
}
.flow > li h4{margin-bottom:var(--s2)}
.flow > li p{font-size:var(--t-body);color:var(--text-3)}

/* ---------- Two-up closing CTA ---------- */
.cta-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
@media(max-width:760px){.cta-duo{grid-template-columns:1fr}}
.cta-card{border-radius:var(--r-xl);padding:var(--s7);display:flex;flex-direction:column;
  gap:var(--s4);justify-content:space-between;min-height:220px}
.cta-card--solid{background:var(--accent);color:var(--on-accent)}
.cta-card--solid h3{color:var(--on-accent)}
.cta-card--solid .btn{--btn-bg:var(--on-accent);--btn-fg:var(--text)}
.cta-card--outline{background:var(--surface-2);border:1px solid var(--line)}

/* ---------- Decorative ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;z-index:0}
.squiggle{position:absolute;pointer-events:none;opacity:.5;color:var(--line-2);z-index:0}
.rel{position:relative;z-index:1}

/* ---------- Accent scoping ---------- */
.accent-turquoise{--accent:var(--turquoise)}
.accent-blue{--accent:var(--blue)}
.accent-violet{--accent:var(--violet)}
.accent-pink{--accent:var(--pink)}
.accent-yellow{--accent:var(--yellow)}
.accent-red{--accent:var(--red)}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Figma personality layer — decoration, stickers, illustrations, mascots.
   Navy stays the ground; colour arrives through these elements.
   ========================================================================== */

/* ---------- Hand-drawn squiggles ----------
   Brand manual: a decorative line never stands alone, it always accompanies text,
   a shape, a photo or an illustration — so these sit against a heading rather
   than floating in a corner. Colour is Stabilní černá by default and white on a
   clean dark ground; on this navy that means white, kept quiet.
   Source SVGs have a baked-in fill, so they are applied as masks and take their
   colour from the element background. */
.squig{position:absolute;pointer-events:none;z-index:0;
  background:var(--text);opacity:.16;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center}
.squig--wave{-webkit-mask-image:url('/assets/decor/cs-leftVector.svg');mask-image:url('/assets/decor/cs-leftVector.svg');aspect-ratio:690/115}
.squig--curl{-webkit-mask-image:url('/assets/decor/cs-rightVector.svg');mask-image:url('/assets/decor/cs-rightVector.svg');aspect-ratio:233/185}
.squig--loop{-webkit-mask-image:url('/assets/decor/tc-rightVector.svg');mask-image:url('/assets/decor/tc-rightVector.svg');aspect-ratio:260/227}
.squig--hook{-webkit-mask-image:url('/assets/decor/tc-leftVector.svg');mask-image:url('/assets/decor/tc-leftVector.svg');aspect-ratio:175/185}
.squig--arc{-webkit-mask-image:url('/assets/decor/leftVector.svg');mask-image:url('/assets/decor/leftVector.svg');aspect-ratio:506/363}
@media(max-width:760px){.squig{display:none}}

/* Heading that carries a decorative line. The line is anchored to the text it
   accompanies, so it moves and wraps with the heading instead of drifting. */
.sec-head{position:relative;display:inline-block;max-width:100%}

/* Hover: an "Empatická vlna" bar wipes in under the heading and the squiggle
   wakes up. The gradient rides a shape, never the type, which is what the brand
   manual allows. */
.sec-head::after{content:"";position:absolute;left:0;bottom:-14px;height:4px;width:100%;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--pink),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.sec-head:hover::after{transform:scaleX(1)}
.sec-head .squig{transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sec-head:hover .squig{opacity:.42;transform:translateX(5px) rotate(-5deg)}
@media(prefers-reduced-motion:reduce){
  .sec-head::after,.sec-head .squig{transition:none}
}

/* ---------- Sticker card ----------
   The Figma card: thick outline plus a hard offset shadow. On navy the outline
   carries the accent and the shadow is a solid colour block, not a blur. */
.sticker{position:relative;background:var(--surface-2);
  border:2px solid color-mix(in srgb,var(--accent) 42%,var(--line-2));
  border-radius:var(--r-lg);
  box-shadow:7px 7px 0 color-mix(in srgb,var(--accent) 26%,transparent);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.sticker:hover{transform:translate(-3px,-3px);
  box-shadow:12px 12px 0 color-mix(in srgb,var(--accent) 34%,transparent);
  border-color:var(--accent)}

/* ---------- Illustration block ----------
   Enter's line-art artwork ships on a solid coral field; it is used whole so the
   colour block itself becomes the accent against navy. */
.illus{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r-md);background:var(--red)}
.illus-wrap{position:relative;overflow:hidden;border-radius:var(--r-md);
  margin-bottom:var(--s4)}

/* ---------- Mascots ---------- */
.mascot{position:absolute;pointer-events:none;z-index:1}
.mascot--float{animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.mascot--float{animation:none}}

/* ---------- Photo frame ---------- */
.photo{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:2px solid var(--line-2);background:var(--surface-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--tall{aspect-ratio:4/5}
.photo--wide{aspect-ratio:16/10}

/* Sections that host squiggles need a positioning context and must clip them. */
.has-decor{position:relative;overflow:hidden}

/* ---------- Gradient blobs ----------
   Figma anchors its dark sections with soft gradient shapes bleeding in from the
   edges. Reproduced as blurred radial fills so they sit behind the content. */
.blob{position:absolute;pointer-events:none;z-index:0;border-radius:50%;
  filter:blur(70px);opacity:.3}
.blob--violet{background:radial-gradient(circle,var(--violet),transparent 68%)}
.blob--blue{background:radial-gradient(circle,var(--blue),transparent 68%)}
.blob--pink{background:radial-gradient(circle,var(--pink),transparent 68%)}
.blob--turquoise{background:radial-gradient(circle,var(--turquoise),transparent 68%)}
@media(max-width:760px){.blob{opacity:.18}}

/* ---------- Mascot peeking over an edge ----------
   In Figma the characters overlap the element they belong to rather than sitting
   beside it, which is what stops them reading as pasted-on clip art. */
.mascot--peek{position:absolute;z-index:2;width:78px}
@media(max-width:760px){.mascot--peek{width:54px}}

/* ---------- Horizontal tile rail ----------
   Progressive disclosure: a section shows a few tiles and the rest is revealed by
   moving right. Native scroll does the work, so touch swipe comes for free and the
   arrows are a desktop affordance on top of it. */
.rail{position:relative}
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s5)}
.rail-track{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(260px, calc((100% - 2 * var(--s5)) / 3));
  gap:var(--s5);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > *{scroll-snap-align:start}
@media(max-width:900px){
  .rail-track{grid-auto-columns:minmax(240px, calc((100% - var(--s5)) / 2))}
}
@media(max-width:620px){
  .rail-track{grid-auto-columns:minmax(0, 86%)}
}

.rail-nav{display:flex;gap:var(--s2);flex:none}
.rail-btn{width:42px;height:42px;border-radius:var(--r-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);
  transition:all .18s var(--ease)}
.rail-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail-btn svg{width:17px;height:17px}
@media(max-width:620px){.rail-nav{display:none}}

/* Fades hint that the strip continues past the edge. */
.rail::before,.rail::after{content:"";position:absolute;top:0;bottom:0;width:52px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .25s var(--ease)}
.rail::before{left:0;background:linear-gradient(90deg,var(--rail-bg,var(--bg)),transparent)}
.rail::after{right:0;background:linear-gradient(270deg,var(--rail-bg,var(--bg)),transparent)}
.rail[data-at-start="false"]::before{opacity:1}
.rail[data-at-end="false"]::after{opacity:1}
.section--surface .rail{--rail-bg:var(--surface)}

/* ---------- Side step markers ----------
   The numbered pills Figma runs down the edge of a stepped section. */
.side-steps{display:flex;flex-direction:column;gap:var(--s2)}
.side-steps span{width:26px;height:26px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-4)}
.side-steps span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}