/* Anuvaad Translations — page styles.
   Design tokens come from _ds/.../tokens/*.css; this file only holds what the
   .dc.html carried as <helmet> CSS, plus the rules that replace the dc runtime's
   style-hover attributes and the DS Icon/Input/Select/Textarea components. */

html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
/* The design's markup carries inline `display` on the elements this page toggles
   (wizard steps, language chips). An inline display beats the UA stylesheet's
   [hidden]{display:none}, so `hidden` alone would not hide them. */
[hidden]{display:none!important}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
details summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}
[data-par],[data-reveal],[data-spin]{will-change:transform,opacity}
@keyframes versoDriftA{0%,100%{transform:translate3d(-7px,calc(var(--sy,0px) - 9px),0) scale(1.06)}50%{transform:translate3d(7px,calc(var(--sy,0px) + 11px),0) scale(1.09)}}
@keyframes versoDriftB{0%,100%{transform:translate3d(6px,calc(var(--sy,0px) + 8px),0) scale(1.08)}50%{transform:translate3d(-8px,calc(var(--sy,0px) - 10px),0) scale(1.05)}}
[data-stage-layer]{animation:versoDriftA 26s ease-in-out infinite}
[data-stage-layer="1"]{animation:versoDriftB 34s ease-in-out infinite}
[data-stage-layer="3"]{animation:versoDriftB 41s ease-in-out infinite}
@keyframes versoFall{from{transform:translate3d(0,-40%,0)}to{transform:translate3d(0,90%,0)}}
[data-fall]{animation:versoFall 10s linear infinite}
[data-fall="1.6"]{animation-duration:7s}
[data-fall="1.2"]{animation-duration:13s}
[data-fall="2"]{animation-duration:6s}
[data-fall="0.8"]{animation-duration:16s}
@keyframes versoMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
[data-drift]{animation:versoMarquee 46s linear infinite}
@keyframes wave{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(1)}}
[data-bar]{animation:wave 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){[data-par],[data-reveal],[data-spin]{transform:none!important;opacity:1!important}[data-stage-layer],[data-fall],[data-drift],[data-bar]{animation:none!important}}

/* --- Stage artwork. The gradient is a fallback: it shows only while/if the
   backdrop PNG is unavailable, and sits under the artwork once it loads. --- */
[data-stage-layer]{position:absolute;inset:-10%;background-position:center;background-size:cover;background-repeat:no-repeat}
[data-stage-layer="0"]{background-image:url(assets/backdrop-dusk.png),var(--grad-dusk)}
[data-stage-layer="1"]{background-image:url(assets/backdrop-cascade.png),linear-gradient(180deg,#181848 0%,#2A2160 38%,#6FC8E8 100%)}
[data-stage-layer="2"]{background-image:url(assets/backdrop-ember.png),linear-gradient(180deg,#12112E 0%,#3C2A78 42%,#E8763C 100%)}
[data-stage-layer="3"]{background-image:url(assets/backdrop-horizon.png),var(--grad-horizon)}

/* --- Icon: Lucide glyph as a CSS mask, so it always inherits currentColor. --- */
.ic{display:inline-block;width:var(--sz,16px);height:var(--sz,16px);flex:0 0 auto;background:currentColor;
-webkit-mask-image:var(--ic);mask-image:var(--ic);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-position:center;mask-position:center}

/* --- style-hover replacements ---
   Every one of these needs !important: the design's markup sets color and
   background inline, and an inline declaration beats any stylesheet rule. */
.hv-strong:hover{color:var(--text-strong)!important}
.hv-card:hover{background:var(--surface-card)!important}
.hv-cardup:hover{background:var(--surface-card-hover)!important}
.hv-drop:hover{background:var(--surface-card-hover)!important;color:var(--text-strong)!important}
.hv-bright:hover{filter:brightness(1.06)!important}

/* Scene sections let the artwork through on one side, which butts hard against
   the flat-scrim sections above and below. Fade their top and bottom edges with
   the design system's own scrim tokens so the join reads as depth, not a seam.
   Placed after each section's scrim overlay and before its content, so it sits
   above the artwork and below the copy without any z-index games. */
.scene-fade{position:absolute;inset:0;pointer-events:none;
background:var(--grad-scrim-t) top/100% 120px no-repeat,
           var(--grad-scrim-b) bottom/100% 120px no-repeat}

/* Visually hidden but still reachable by keyboard — the file input is styled
   by its wrapping label, and display:none would take it out of the tab order. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hv-drop:focus-within{background:var(--surface-card-hover)!important;color:var(--text-strong)!important;
border-color:var(--focus-ring)!important;box-shadow:var(--glow-ice)}
/* Honeypot: off-screen, unfocusable, invisible to assistive tech. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Interpretation waveform ---
   The design fixes the bars at 170px, which reads small once the rest of the
   page scales up. Size them from tokens that follow the same breakpoints, and
   derive the caption's offset from the same height so the two stay locked. */
:root{--wave-h:170px;--wave-gap:8px;--wave-w:4px}
.wave-bars{height:var(--wave-h)!important;gap:var(--wave-gap)!important}
.wave-bars [data-bar]{width:var(--wave-w)!important}
.wave-label{top:calc(50% + var(--wave-h) / 2 + 23px)!important}

/* --- Form controls (DS Input / Select / Textarea) --- */
.fld{display:block;width:100%}
.fld-label{display:block;font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
.fld-box{display:flex;align-items:center;gap:var(--space-2);height:var(--control-md);padding:0 14px;border-radius:var(--radius-sm);background:var(--surface-inset);border:var(--border-thin) solid var(--border-hairline);color:var(--text-muted);
transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.fld-box:focus-within{border-color:var(--focus-ring);box-shadow:var(--glow-ice)}
.fld-box input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text-strong);font:var(--type-body)}
.fld-hint{display:block;margin-top:var(--space-2);font:var(--type-mono);color:var(--text-faint)}
.fld-selwrap{position:relative;display:flex;align-items:center}
.fld-selwrap select{appearance:none;-webkit-appearance:none;width:100%;height:var(--control-md);padding:0 36px 0 14px;border-radius:var(--radius-sm);background:var(--surface-inset);border:var(--border-thin) solid var(--border-hairline);color:var(--text-strong);font:var(--type-body);outline:none;cursor:pointer}
.fld-selwrap select option{color:#0B0A1E}
.fld-chev{position:absolute;right:12px;color:var(--text-muted);pointer-events:none;display:flex}
.fld textarea{display:block;width:100%;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-inset);border:var(--border-thin) solid var(--border-hairline);color:var(--text-strong);font:var(--type-body);line-height:var(--leading-relaxed);outline:none;resize:vertical;
transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.fld textarea:focus{border-color:var(--focus-ring);box-shadow:var(--glow-ice)}

:where(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--ring-focus)!important}

/* --- Responsive layer ---------------------------------------------------
   The design system's spacing and type scales are fixed px, authored against a
   ~1440px canvas. At 1440px and above nothing here applies and the page is
   identical to the design. Below it, the tokens are rescaled rather than the
   layout rewritten: every section's padding and every type role is composed
   from these variables, so overriding them rescales the whole page in step. */

/* Above the authored canvas the same tokens are too small: the page reads
   sparse on a 1920px+ display and the hero stops filling the screen. Scale up,
   and lift the hero's 760px cap so the opening banner stays full-bleed. */
/* The opening banner fills the first screen exactly. The design capped it at
   min(88vh,760px); on a tall display that left a strip of the next section
   visible below it, and because that section scrims the same fixed artwork
   differently, the join read as a hard seam instead of a transition.
   --header-h is measured in site.js and kept current on resize. */
#top{min-height:calc(100vh - var(--header-h,59px))!important}
@supports (height:100svh){
  #top{min-height:calc(100svh - var(--header-h,59px))!important}
}

@media (min-width:1600px){
  :root{
    --wave-h:220px;--wave-gap:11px;--wave-w:5px;
    --gutter-page:40px;--gutter-page-lg:80px;
    --space-9:68px;--space-10:88px;--space-11:116px;--space-12:154px;
    --size-2xs:12px;--size-xs:13px;--size-sm:16px;--size-base:18px;--size-md:21px;
    --size-lg:26px;--size-xl:34px;--size-2xl:43px;--size-3xl:55px;--size-4xl:72px;--size-5xl:92px;
    --maxw-content:1440px;--maxw-prose:740px;--maxw-panel:440px;
    --control-md:44px;--control-lg:54px;
  }
}

@media (min-width:2100px){
  :root{
    --wave-h:276px;--wave-gap:14px;--wave-w:6px;
    --gutter-page:48px;--gutter-page-lg:104px;
    --space-9:78px;--space-10:100px;--space-11:134px;--space-12:180px;
    --size-2xs:13px;--size-xs:15px;--size-sm:18px;--size-base:20px;--size-md:24px;
    --size-lg:30px;--size-xl:39px;--size-2xl:50px;--size-3xl:64px;--size-4xl:84px;--size-5xl:106px;
    --maxw-content:1680px;--maxw-prose:860px;--maxw-panel:510px;
    --control-md:50px;--control-lg:62px;
  }
}

@media (max-width:1200px){
  :root{
    --gutter-page-lg:48px;
    --space-12:104px;--space-11:80px;--space-10:60px;
    --size-5xl:64px;--size-4xl:50px;--size-3xl:39px;--size-2xl:32px;
  }
}

@media (max-width:900px){
  :root{
    --gutter-page:24px;--gutter-page-lg:32px;
    --space-12:88px;--space-11:64px;--space-10:52px;--space-9:44px;--space-8:32px;
    --size-5xl:54px;--size-4xl:40px;--size-3xl:32px;--size-2xl:28px;--size-xl:24px;--size-lg:20px;
  }
  /* Decorative waveform sits behind the copy column once the section stacks. */
  .wave-bars,.wave-label{display:none!important}
  /* Header keeps only the wordmark and the one action that matters. */
  header{grid-template-columns:1fr auto!important}
  .nav-l{display:none!important}
}

@media (max-width:640px){
  :root{
    --gutter-page:18px;--gutter-page-lg:20px;
    --space-12:64px;--space-11:48px;--space-10:40px;--space-9:36px;
    --size-4xl:32px;--size-3xl:27px;--size-2xl:24px;--size-xl:21px;
  }
  .nav-secondary{display:none!important}
  /* The floating quote dock lands on top of the centred scroll hint at this
     width, and on touch the hint is the more expendable of the two. */
  .scroll-hint{display:none!important}
  /* The floating dock and the in-page CTA collide on a narrow screen. */
  [data-dock]{height:var(--control-md)!important;padding:0 18px!important;font:var(--type-nav)!important}
}