/* =====================================================================
   Phantaslate — phantaslate.com
   assets/css/styles.css

   Token values come from Phantaslate_Brand_Identity.md. Do not
   approximate the hex values; other brand assets depend on them being
   exact.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  /* palette */
  --navy:#0D2045;
  --navy-deep:#0C1C44;
  --teal:#03B4A5;
  --teal-deep:#058F8D;
  --page:#F5F7FA;
  --white:#FFFFFF;
  --slate:#6B7A93;

  /* derived neutrals — kept out of the brand doc on purpose, these are
     interface-only greys, not brand colours */
  --line:#E3E8EF;
  --line-soft:#EDF1F6;
  --teal-wash:#E6F5F3;
  --alert:#C2543F;

  /* spacing — 4px grid */
  --xs:4px;
  --sm:8px;
  --md:16px;
  --lg:24px;
  --xl:40px;
  --xxl:64px;
  --xxxl:96px;

  /* radii */
  --r-sm:8px;
  --r-md:16px;
  --r-pill:100px;

  /* type */
  /* Fallbacks are ordered so the page still looks deliberate if the
     self-hosted woff2 files are missing or slow. See fonts.css. */
  --display:'Plus Jakarta Sans','Segoe UI Variable Display','Segoe UI',Roboto,-apple-system,system-ui,sans-serif;
  --body:'DM Sans','Segoe UI Variable Text','Segoe UI',Roboto,-apple-system,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,monospace;

  --shell:1120px;
  --header-h:64px;
}

/* ---------------------------------------------------------------- 2. reset */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--md))}

body{
  margin:0;
  background:var(--page);
  color:var(--navy);
  font-family:var(--body);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}

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

/* ---------------------------------------------------------------- 3. type */
h1,h2,h3,h4{
  font-family:var(--display);
  letter-spacing:-0.02em;
  margin:0;
  line-height:1.12;
}
h1{font-size:clamp(34px,5.4vw,56px);font-weight:800}
h2{font-size:clamp(24px,3.2vw,34px);font-weight:700}
h3{font-size:17px;font-weight:700}
h4{font-size:15px;font-weight:700}

.eyebrow{
  font-family:var(--body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin-bottom:var(--sm);
}

.lede{color:var(--slate);font-size:17px;max-width:58ch}
.lede + .lede{margin-top:var(--md)}

.muted{color:var(--slate)}
.small{font-size:13px}

/* ---------------------------------------------------------------- 4. layout */
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--lg);padding-right:var(--lg)}

.band{padding-top:var(--xxxl);padding-bottom:var(--xxxl)}
.band-tight{padding-top:var(--xl);padding-bottom:var(--xl)}
.band-white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-navy{background:var(--navy);color:var(--white)}
.band-navy .lede{color:#A9BAD6}
.band-navy .eyebrow{color:var(--teal)}

.section-head{max-width:58ch;margin-bottom:var(--xl)}
.section-head h2{margin-bottom:12px}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--navy);
  color:var(--white);
  padding:var(--sm) var(--md);
  border-radius:0 0 var(--r-sm) 0;
  text-decoration:none;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- 5. buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sm);
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  line-height:1;
  padding:12px 22px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn svg{width:16px;height:16px;flex-shrink:0}

.btn-primary{background:var(--teal);color:var(--white)}
.btn-primary:hover{background:var(--teal-deep)}

.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}

.btn-onnavy{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-onnavy:hover{background:var(--teal);color:var(--navy-deep)}

.btn-lg{padding:15px 28px;font-size:15px}

.linkbtn{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:var(--teal-deep);
  font-weight:500;
  cursor:pointer;
}
.linkbtn:hover{text-decoration:underline}
.linkbtn[hidden]{display:none}

.textlink{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.textlink:hover{color:var(--navy)}

/* ---------------------------------------------------------------- 6. header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(170%) blur(10px);
  -webkit-backdrop-filter:saturate(170%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--md);
  height:var(--header-h);
}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:30px;height:30px}

.wordmark{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.wordmark i{font-style:normal;color:var(--teal-deep)}

.site-nav{display:flex;align-items:center;gap:var(--lg)}
.site-nav a{color:var(--slate);text-decoration:none;font-size:14px}
.site-nav a:hover{color:var(--navy)}
.site-nav a.btn{color:var(--white)}
.site-nav a.btn:hover{color:var(--white)}

/* ---------------------------------------------------------------- 7. hero */
.hero{padding-top:var(--xxl);padding-bottom:var(--xl)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--xl);
  align-items:start;
}
.hero h1{margin-bottom:var(--md)}
.hero h1 em{font-style:normal;color:var(--teal-deep);display:block}
.hero .lede{margin-bottom:var(--lg)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sm);margin-bottom:12px}
.hero-note{font-size:13px;color:var(--slate)}

/* ---------------------------------------------------------------- 8. demo panel */
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}

.panel-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px var(--md);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.bar-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--slate);
}
.lang-select{
  font-family:var(--body);
  font-size:13px;
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:7px 10px;
  cursor:pointer;
  max-width:170px;
}
.lang-select:hover{border-color:var(--teal)}

.swap{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--teal-deep);
  flex-shrink:0;
}
.swap:hover{border-color:var(--teal)}
.swap svg{width:16px;height:16px}

.cap-pill{
  margin-left:auto;
  background:var(--teal-wash);
  color:var(--teal-deep);
  font-size:12px;
  font-weight:500;
  padding:5px 13px;
  border-radius:var(--r-pill);
}

.panes{display:grid;grid-template-columns:1fr 1fr;position:relative}

.pane{padding:var(--md);min-height:186px;display:flex;flex-direction:column}
.pane-source{border-right:1px solid var(--line)}
.pane-target{background:#FBFCFD}

.pane-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:var(--sm);
}

#source{
  flex:1;
  width:100%;
  border:0;
  padding:0;
  resize:none;
  background:transparent;
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
  color:var(--navy);
}
#source::placeholder{color:#A9B4C6}
#source:focus{outline:none}

#output{
  flex:1;
  font-size:15px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
#output:empty::before{content:attr(data-empty);color:#A9B4C6}

/* The demo panel never returns a translation, so its output shouldn't
   look like one. Setting the notice apart from real result text keeps
   the distinction visible rather than relying on the wording alone. */
#output.is-notice{
  font-size:14px;
  color:var(--slate);
  border-left:2px solid var(--teal);
  padding-left:12px;
}

.pending{color:var(--teal-deep)}

.claim-pending{border-style:dashed}

.pane-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sm);
  margin-top:var(--sm);
  min-height:22px;
  font-size:12px;
  color:var(--slate);
}
.pane-foot .push{margin-left:auto}

.panel-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--md);
  flex-wrap:wrap;
  padding:12px var(--md);
  border-top:1px solid var(--line);
}
.status{display:flex;align-items:center;gap:var(--sm);font-size:13px;color:var(--slate)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0}
.status[data-state="error"] .dot{background:var(--alert)}
.status[data-state="error"]{color:var(--alert)}
.status[data-state="notice"]{color:var(--teal-deep)}

#translate{
  background:var(--navy);
  color:var(--white);
  border:0;
  border-radius:var(--r-sm);
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  padding:11px 26px;
  cursor:pointer;
}
#translate:hover{background:var(--navy-deep)}
#translate:disabled{opacity:.55;cursor:default}

/* --- signature: the dissolving trail ------------------------------------
   The logo's tail breaks into dashes. The same motif carries the text
   across the panel while a translation is in flight, and carries it away
   when the panel is cleared. This is the one animated moment on the page.
   ------------------------------------------------------------------------ */
.trail{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:5px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.trail span{display:block;width:10px;height:3px;border-radius:2px;background:var(--teal)}

.panes.is-working .trail{opacity:1}
.panes.is-working .trail span{animation:drift .95s ease-in-out infinite}
.trail span:nth-child(1){animation-delay:0s}
.trail span:nth-child(2){animation-delay:.08s}
.trail span:nth-child(3){animation-delay:.16s}
.trail span:nth-child(4){animation-delay:.24s}
.trail span:nth-child(5){animation-delay:.32s}
.trail span:nth-child(6){animation-delay:.40s}

@keyframes drift{
  0%{opacity:0;transform:translateX(-12px)}
  40%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(12px)}
}

.dissolving{animation:dissolve .45s ease forwards}
@keyframes dissolve{
  to{opacity:0;filter:blur(3px);transform:translateX(16px)}
}

/* ---------------------------------------------------------------- 9. trust row */
.trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sm);
  padding-bottom:var(--xxl);
}
.trust li{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px var(--md);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
}
.trust svg{width:18px;height:18px;color:var(--teal-deep);flex-shrink:0}

/* ---------------------------------------------------------------- 10. steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lg)}
.step{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--lg);
}
.step-mark{
  font-family:var(--display);
  font-weight:800;
  font-size:12px;
  letter-spacing:.09em;
  color:var(--teal-deep);
  margin-bottom:12px;
}
.step h3{margin-bottom:var(--sm)}
.step p{color:var(--slate);font-size:14px}

/* ---------------------------------------------------------------- 11. why */
.why-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--xl);
  align-items:start;
}
.why-grid .lede{font-size:16px}

.absent{background:var(--page);border-radius:12px;padding:var(--lg)}
.absent h3{margin-bottom:var(--md);font-size:15px}
.absent li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--slate);
}
.absent li:first-child{border-top:0;padding-top:0}
.absent li svg{width:16px;height:16px;color:var(--teal-deep);flex-shrink:0;margin-top:4px}

/* ---------------------------------------------------------------- 12. extension */
.ext-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--xl);
  align-items:center;
}
.ext-claims{display:flex;flex-wrap:wrap;gap:var(--sm);margin:var(--lg) 0}
.claim{
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);
  padding:6px 16px;
  font-size:13px;
}
.ext-actions{display:flex;flex-wrap:wrap;gap:var(--sm)}

.shot{
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:var(--white);
}
.shot-light{border-color:var(--line)}

/* ---------------------------------------------------------------- 13. languages */
.lang-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--xl);
  align-items:center;
}
.lang-chips{display:flex;flex-wrap:wrap;gap:var(--sm);margin-top:var(--lg)}
.chip{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:7px 16px;
  font-size:14px;
  display:inline-flex;
  align-items:baseline;
  gap:var(--sm);
}
.chip b{font-weight:500}
.chip span{color:var(--slate);font-size:13px}
.chip code{
  font-family:var(--mono);
  font-size:11px;
  color:var(--slate);
  background:var(--page);
  padding:2px 7px;
  border-radius:var(--xs);
}
.chip-note{margin-top:var(--md);font-size:13px;color:var(--slate)}

/* ---------------------------------------------------------------- 14. open source */
.open-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--xl);
  align-items:center;
}
.repo{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--lg);
  font-family:var(--mono);
  font-size:13px;
}
.repo li{
  display:flex;
  justify-content:space-between;
  gap:var(--md);
  padding:9px 0;
  border-top:1px solid var(--line);
  color:var(--slate);
}
.repo li:first-child{border-top:0;padding-top:0}
.repo li span:last-child{color:var(--navy)}

/* ---------------------------------------------------------------- 15. platforms */
.platform-list{display:flex;flex-wrap:wrap;gap:var(--sm);margin-top:var(--lg)}
.platform{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 18px;
  font-size:14px;
  color:var(--slate);
}

/* ---------------------------------------------------------------- 16. footer */
.site-footer{
  background:var(--white);
  border-top:1px solid var(--line);
  padding-top:var(--xl);
  padding-bottom:var(--lg);
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:var(--lg);
  flex-wrap:wrap;
  margin-bottom:var(--lg);
}
.footer-nav{display:flex;gap:var(--lg);flex-wrap:wrap;font-size:14px}
.footer-nav a{color:var(--slate);text-decoration:none}
.footer-nav a:hover{color:var(--navy)}
/* Brand claims sit above the rule; the copyright sits below it, as the
   literal last line of the page. Both use the same size and colour so
   neither reads as more important than the other. */
.footer-claims{
  display:flex;
  justify-content:space-between;
  gap:var(--md);
  flex-wrap:wrap;
  margin-bottom:var(--md);
  font-size:13px;
  color:var(--slate);
}

.footer-base{
  border-top:1px solid var(--line);
  padding-top:var(--md);
  font-size:13px;
  color:var(--slate);
}

.footer-legal{
  margin:0;
  font-size:13px;
  color:var(--slate);
}
.footer-legal a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px}
.footer-legal a:hover{color:var(--navy)}

/* ---------------------------------------------------------------- 17. prose (privacy page) */
.page-head{padding-top:var(--xxl);padding-bottom:var(--lg)}
.page-head h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:12px}

.prose{max-width:74ch;padding-bottom:var(--xxl)}
.prose h2{
  font-size:22px;
  margin-top:var(--xxl);
  margin-bottom:var(--md);
  padding-bottom:var(--sm);
  border-bottom:1px solid var(--line);
}
.prose h3{margin-top:var(--xl);margin-bottom:var(--sm)}
.prose p{margin-bottom:var(--md);color:#33456B}
.prose ul.bullets{margin:0 0 var(--md);padding-left:0}
.prose ul.bullets li{
  position:relative;
  padding-left:var(--lg);
  margin-bottom:var(--sm);
  color:#33456B;
}
.prose ul.bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:10px;
  height:3px;
  border-radius:2px;
  background:var(--teal);
}
.prose strong{font-weight:500;color:var(--navy)}

.prose table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:var(--md);
  font-size:14px;
}
.prose th,.prose td{
  text-align:left;
  padding:11px var(--md);
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.prose th{
  font-weight:500;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  background:var(--white);
}
.prose td{color:#33456B}
.prose code{
  font-family:var(--mono);
  font-size:13px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--xs);
  padding:1px 6px;
}

.callout{
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:var(--r-sm);
  padding:var(--lg);
  margin-bottom:var(--md);
}
.callout p:last-child{margin-bottom:0}

.summary-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--lg);
  margin-bottom:var(--lg);
}
.summary-card p:last-child{margin-bottom:0}

.toc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--lg);
  margin-bottom:var(--xl);
}
.toc h2{
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--slate);
  border:0;
  margin:0 0 var(--sm);
  padding:0;
  font-family:var(--body);
  font-weight:500;
}
.toc ol{margin:0;padding-left:var(--lg);color:var(--slate);font-size:14px}
.toc li{padding:3px 0}
.toc a{color:var(--slate);text-decoration:none}
.toc a:hover{color:var(--teal-deep);text-decoration:underline}

/* ---------------------------------------------------------------- 18. error page */
.error-wrap{
  min-height:60vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-top:var(--xxl);
  padding-bottom:var(--xxl);
}
.error-wrap .trail-static{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-bottom:var(--lg);
}
.error-wrap .trail-static span{
  display:block;
  width:14px;
  height:4px;
  border-radius:2px;
  background:var(--teal);
}
.error-wrap .trail-static span:nth-child(2){opacity:.7}
.error-wrap .trail-static span:nth-child(3){opacity:.45}
.error-wrap .trail-static span:nth-child(4){opacity:.2}

/* ---------------------------------------------------------------- 19. responsive */
@media (max-width:960px){
  .hero-grid,
  .why-grid,
  .ext-grid,
  .open-grid,
  .lang-grid{grid-template-columns:1fr;gap:var(--lg)}

  .steps{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}

  .site-nav a:not(.btn){display:none}

  .hero{padding-top:var(--xl)}
  .band{padding-top:var(--xl);padding-bottom:var(--xl)}
}

@media (max-width:640px){
  .shell{padding-left:var(--md);padding-right:var(--md)}

  .panes{grid-template-columns:1fr}
  .pane-source{border-right:0;border-bottom:1px solid var(--line)}
  .trail{display:none}
  .cap-pill{margin-left:0;order:99}

  .panel-foot{flex-direction:column;align-items:stretch}
  #translate{width:100%}

  .prose table{display:block;overflow-x:auto}
}

/* ---------------------------------------------------------------- 20. motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------------------------------------------------------------- 21. print */
@media print{
  .site-header,.site-footer,.panel,.hero-actions{display:none}
  body{background:#fff}
}

/* ---------------------------------------------------------------- 22. utilities
   A deliberately tiny set. These exist so no HTML file needs an inline
   style attribute — the Content-Security-Policy in _headers omits
   'unsafe-inline' for style-src, so inline styles are blocked in
   production while still working locally. That combination ships
   silently broken pages, so keep it to classes.
   ------------------------------------------------------------------ */
.mt-0{margin-top:0}
.mt-xs{margin-top:var(--xs)}
.mt-sm{margin-top:12px}
.mt-md{margin-top:var(--md)}
.mt-lg{margin-top:var(--lg)}
.mb-0{margin-bottom:0}
.centered{margin-left:auto;margin-right:auto}