/* THE 13TH STATION — premium static landing page
   No framework, no external font dependency, Cloudflare Pages ready. */

:root{
  --bg:#090a0c;
  --bg-soft:#0e1013;
  --panel:#111419;
  --panel-2:#15191f;
  --text:#ece9df;
  --muted:#9a9b96;
  --line:rgba(236,233,223,.15);
  --line-strong:rgba(236,233,223,.28);
  --accent:#c9a46b;
  --accent-soft:rgba(201,164,107,.12);
  --danger:#8c342f;
  --max:1240px;
  --header:78px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 78% 8%, rgba(201,164,107,.06), transparent 32rem),
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.025), transparent 24rem),
    var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height:1.55;
  letter-spacing:.01em;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.012), transparent 20%, transparent 80%, rgba(255,255,255,.01));
  z-index:100;
}
::selection{background:var(--accent);color:#0a0b0d}
a{color:inherit;text-decoration:none}
button,a{ -webkit-tap-highlight-color:transparent}
.serif{font-family:Georgia, "Times New Roman", serif;font-weight:400;font-style:italic}
.noise{
  position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.scanline{
  position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.04;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#fff 4px);
}

.site-header{
  height:var(--header);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  max-width:var(--max);
  margin:0 auto;
  padding:0 26px;
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand-mark{
  width:42px;height:42px;border:1px solid var(--line-strong);
  display:grid;place-items:center;
  font-family:Georgia,serif;font-size:12px;letter-spacing:.12em;
}
.brand-name{font-size:12px;letter-spacing:.22em;font-weight:700}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;transition:.2s ease}
.nav a:hover{color:var(--text)}
.mini-cta{
  justify-self:end;
  border:1px solid var(--line-strong);
  padding:12px 16px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:.25s ease;
}
.mini-cta:hover{border-color:var(--accent);background:var(--accent-soft)}

.hero{
  min-height:calc(100svh - var(--header));
  max-width:var(--max);
  margin:0 auto;
  padding:74px 26px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:64px;
}
.eyebrow{
  margin:0 0 24px;
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.signal-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:10px;background:var(--accent);
  box-shadow:0 0 16px rgba(201,164,107,.55);
}
.hero h1{
  margin:0;
  font-size:clamp(58px,8vw,120px);
  line-height:.78;
  letter-spacing:-.055em;
  font-weight:800;
}
.hero h1 span{display:block}
.hero h1 .serif{
  padding-left:.42em;
  color:var(--accent);
  font-size:.92em;
  letter-spacing:-.045em;
}
.hero-kicker{
  margin:26px 0 0;
  font-size:12px;
  letter-spacing:.32em;
  font-weight:700;
}
.hero-lead{
  max-width:610px;
  margin:34px 0 0;
  font-size:clamp(18px,2vw,26px);
  color:#c9c8c2;
  font-weight:350;
}
.hero-lead strong{color:var(--text);font-weight:500}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:36px;flex-wrap:wrap}
.primary-cta{
  min-width:240px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:var(--text);color:#0b0c0e;
  padding:18px 20px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  transition:.25s ease;
}
.primary-cta:hover{background:var(--accent);transform:translateY(-2px)}
.arrow{font-size:18px}
.text-link{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid transparent;padding:4px 0;
}
.text-link:hover{color:var(--text);border-color:var(--text)}
.hero-meta{
  display:flex;gap:34px;margin-top:58px;padding-top:22px;border-top:1px solid var(--line);
}
.hero-meta div{display:flex;flex-direction:column;gap:6px}
.hero-meta span{font-size:9px;letter-spacing:.16em;color:#6f716f}
.hero-meta strong{font-size:11px;letter-spacing:.1em;font-weight:600}

.hero-art{position:relative;min-height:560px;display:grid;place-items:center}
.case-card{
  width:min(470px,92%);
  aspect-ratio:.78;
  border:1px solid var(--line-strong);
  background:
    linear-gradient(145deg, rgba(255,255,255,.03), transparent 35%),
    linear-gradient(180deg,#12151a,#0b0d10);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  transform:rotate(2.2deg);
  padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.case-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.025) 50%, transparent 50.5%);
  opacity:.5;
}
.case-card-top,.case-card-bottom{
  display:flex;justify-content:space-between;gap:20px;
  font-size:8px;letter-spacing:.18em;color:#777b7f;text-transform:uppercase;
}
.case-card-bottom{display:block}
.case-card-bottom p{margin:5px 0}
.rail-map{position:relative;height:240px;margin:20px 10px}
.rail-line{
  position:absolute;left:8%;right:8%;top:50%;height:1px;background:#5b5f62;
}
.station{
  position:absolute;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;
  border:1px solid #8c9093;background:#101318;
}
.station::after{
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:1px;height:26px;background:rgba(255,255,255,.06);
}
.s1{left:8%}.s2{left:25%}.s3{left:42%}.s4{left:59%}.s5{left:76%}
.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 22px rgba(201,164,107,.35)}
.ghost{
  left:92%;
  border-color:var(--danger);
  box-shadow:0 0 18px rgba(140,52,47,.35);
}
.case-stamp{
  position:absolute;right:32px;bottom:98px;
  color:#99443e;border:1px solid #71332e;
  padding:8px 12px;font-size:10px;font-weight:800;letter-spacing:.18em;
  transform:rotate(-7deg);opacity:.7;
}
.floating-tag{
  position:absolute;border:1px solid var(--line-strong);background:#0d0f12;
  color:#c8c8c2;padding:10px 12px;font-size:9px;letter-spacing:.15em;
  box-shadow:0 16px 35px rgba(0,0,0,.25);
}
.tag-a{left:2%;top:19%;transform:rotate(-5deg)}
.tag-b{right:-1%;bottom:19%;transform:rotate(4deg);color:var(--accent)}
.coordinate{
  position:absolute;right:3%;top:8%;
  writing-mode:vertical-rl;
  color:#5e6266;font-size:8px;letter-spacing:.17em;
}
.hero-footer{
  display:flex;align-items:center;gap:18px;margin-top:48px;
  color:#5e6265;font-size:9px;letter-spacing:.18em;
}
.scroll-rule{height:1px;background:var(--line);flex:1}

.section{
  max-width:var(--max);margin:0 auto;padding:130px 26px;position:relative;
  border-top:1px solid var(--line);
}
.section-index{
  position:absolute;right:26px;top:34px;color:#4e5154;
  font-size:10px;letter-spacing:.18em;
}
.section-heading{max-width:870px}
.section-heading h2{
  margin:0;font-size:clamp(38px,5.2vw,72px);line-height:1.02;
  letter-spacing:-.035em;font-weight:550;
}
.section-intro{
  max-width:750px;margin:28px 0 0;color:var(--muted);font-size:18px;
}
.case-layout{
  display:grid;grid-template-columns:1.3fr .7fr;gap:90px;margin-top:78px;
}
.case-narrative{max-width:760px}
.case-narrative p{color:#9fa19f;font-size:17px}
.case-narrative .large-copy{font-size:clamp(24px,3vw,38px);line-height:1.3;color:#d9d8d2;margin-top:0}
.case-narrative strong{color:var(--text);font-weight:550}
.case-narrative .accent-copy{color:var(--accent);margin-top:36px}
.case-data{border-top:1px solid var(--line-strong)}
.data-row{
  display:flex;justify-content:space-between;gap:20px;padding:18px 0;
  border-bottom:1px solid var(--line);
}
.data-row span{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#676b6d}
.data-row strong{font-size:12px;letter-spacing:.1em;font-weight:600}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:72px}
.feature{
  min-height:300px;padding:28px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.02),transparent);
  display:flex;flex-direction:column;justify-content:flex-end;transition:.25s ease;
}
.feature:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.feature-no{margin-bottom:auto;color:var(--accent);font-family:Georgia,serif;font-size:22px}
.feature h3{font-size:28px;margin:0 0 12px;font-weight:500}
.feature p{margin:0;color:var(--muted);max-width:300px}

.steps{margin-top:64px;border-top:1px solid var(--line-strong)}
.step{
  display:grid;grid-template-columns:120px 1fr;gap:30px;
  padding:28px 0;border-bottom:1px solid var(--line);
}
.step-number{color:var(--accent);font-size:11px;letter-spacing:.14em;padding-top:7px}
.step h3{margin:0 0 6px;font-size:22px;font-weight:500}
.step p{margin:0;color:var(--muted)}

.product-section{padding-top:60px;padding-bottom:60px}
.product-panel{
  border:1px solid var(--line-strong);
  background:
    radial-gradient(circle at 75% 40%, rgba(201,164,107,.08), transparent 22rem),
    linear-gradient(145deg,#111419,#0d0f12);
  padding:clamp(30px,5vw,70px);
  display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;
}
.case-label{margin:0;color:#6f7376;font-size:11px;letter-spacing:.22em}
.product-copy h2{
  margin:12px 0 24px;font-size:clamp(54px,7vw,96px);line-height:.84;letter-spacing:-.05em
}
.product-copy p{max-width:630px;color:var(--muted)}
.product-specs{display:flex;gap:34px;margin-top:42px;flex-wrap:wrap}
.product-specs div{display:flex;flex-direction:column;gap:7px}
.product-specs span{font-size:9px;color:#666a6c;text-transform:uppercase;letter-spacing:.16em}
.product-specs strong{font-size:11px;letter-spacing:.12em}
.purchase-box{
  border-left:1px solid var(--line);padding-left:34px;
}
.purchase-label{font-size:9px;color:#676b6d;letter-spacing:.16em}
.price{font-size:18px;letter-spacing:.08em;margin:4px 0 28px}
.purchase-button{
  display:flex;justify-content:space-between;align-items:center;gap:30px;
  border:1px solid var(--accent);background:var(--accent);color:#0b0d10;
  padding:18px 20px;font-size:11px;letter-spacing:.14em;font-weight:800;
  transition:.22s ease;
}
.purchase-button:hover{background:#d7b77f;transform:translateY(-2px)}
.purchase-note{font-size:10px!important;color:#676b6d!important;margin-top:14px!important}

.manifesto{text-align:center;padding-top:150px;padding-bottom:150px}
.manifesto-line{
  font-size:clamp(34px,5.5vw,78px);line-height:1.08;
  letter-spacing:-.035em;color:#777a79;
}
.manifesto-line.serif{color:var(--text)}

.faq-list{margin-top:58px}
.faq-item{border-top:1px solid var(--line);padding:0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:24px 0;
  font-size:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-size:22px;font-weight:300}
.faq-item[open] summary::after{content:"−"}
.faq-item p{max-width:760px;color:var(--muted);margin:0;padding:0 0 26px}

.final-cta{padding-top:150px;padding-bottom:150px}
.final-cta-inner{max-width:980px}
.final-cta h2{
  font-size:clamp(42px,6.5vw,90px);line-height:.98;letter-spacing:-.045em;
  font-weight:500;margin:0 0 42px;
}

.footer{
  max-width:var(--max);margin:0 auto;padding:34px 26px 44px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  color:#5e6265;
}
.footer-brand{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.16em}
.footer .brand-mark{width:34px;height:34px;font-size:9px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.footer-links a:hover{color:var(--text)}
.footer>p{grid-column:1/-1;font-size:8px;letter-spacing:.12em;margin:10px 0 0}

.buy-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);
  background:#e8e4d9;color:#0c0d0f;padding:13px 16px;border-radius:2px;
  font-size:12px;z-index:200;box-shadow:0 14px 45px rgba(0,0,0,.35);
  transition:transform .3s ease;max-width:min(92vw,520px);text-align:center;
}
.buy-toast.show{transform:translate(-50%,0)}

.reveal{opacity:1;transform:none;transition:opacity .8s ease, transform .8s ease}
.motion-enabled .reveal.motion-pending{opacity:0;transform:translateY(18px)}
.motion-enabled .reveal.motion-pending.in{opacity:1;transform:none}
.reveal-delay{transition-delay:.12s}

@media (max-width: 920px){
  :root{--header:68px}
  .site-header{grid-template-columns:1fr auto;padding:0 18px}
  .nav{display:none}
  .brand-name{font-size:10px}
  .mini-cta{padding:10px 12px}
  .hero{padding:54px 18px 24px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-art{min-height:470px;margin-top:10px}
  .case-card{max-width:390px}
  .hero-meta{gap:24px}
  .section{padding:95px 18px}
  .section-index{right:18px}
  .case-layout{grid-template-columns:1fr;gap:50px;margin-top:58px}
  .feature-grid{grid-template-columns:1fr}
  .feature{min-height:220px}
  .product-panel{grid-template-columns:1fr;gap:48px}
  .purchase-box{border-left:0;border-top:1px solid var(--line);padding:28px 0 0}
  .footer{padding-left:18px;padding-right:18px}
}
@media (max-width: 620px){
  .brand-mark{width:36px;height:36px}
  .brand-name{display:none}
  .mini-cta{font-size:9px}
  .hero h1{font-size:17vw}
  .hero h1 .serif{padding-left:.18em}
  .hero-kicker{font-size:10px;letter-spacing:.25em}
  .hero-actions{align-items:stretch;flex-direction:column}
  .primary-cta{width:100%;min-width:0}
  .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hero-art{min-height:420px}
  .case-card{width:92%;padding:18px}
  .rail-map{height:180px}
  .tag-a{left:0}.tag-b{right:0}
  .coordinate{display:none}
  .section-heading h2{font-size:11vw}
  .case-narrative .large-copy{font-size:25px}
  .step{grid-template-columns:64px 1fr}
  .product-copy h2{font-size:15vw}
  .product-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .manifesto-line{font-size:10vw}
  .footer{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}


/* Advertising space: intentionally separated from the fictional case UI */
.ad-section{
  padding-top:70px;
  padding-bottom:70px;
}
.ad-shell{
  max-width:970px;
  margin:0 auto;
}
.ad-label{
  margin-bottom:10px;
  color:#666a6c;
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
}
.ad-slot{
  min-height:120px;
  border:1px solid rgba(236,233,223,.12);
  background:rgba(255,255,255,.012);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px;
  color:#676b6d;
}
.ad-slot p{
  margin:0 0 6px;
  color:#858986;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ad-slot span{
  font-size:11px;
  max-width:520px;
}
.archive-status{
  margin-left:10px;
  color:#6b6f71;
}
@media (max-width:620px){
  .ad-slot{min-height:100px}
  .archive-status{display:block;margin:6px 0 0}
}


.legal-page{
  max-width:900px;
  min-height:100svh;
  margin:0 auto;
  padding:80px 26px;
}
.legal-back{
  display:inline-block;
  margin-bottom:80px;
  color:#8f918f;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.legal-back:hover{color:var(--text)}
.legal-page h1{
  margin:0 0 28px;
  font-size:clamp(42px,7vw,82px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:500;
}
.legal-placeholder{
  max-width:700px;
  color:var(--muted);
  font-size:17px;
}


/* Legal / policy pages */
.legal-updated{
  margin:-8px 0 46px;
  color:#6f7376;
  font-size:10px;
  letter-spacing:.1em;
}
.legal-content{
  max-width:780px;
  color:#b4b5b1;
  font-size:15px;
  line-height:1.8;
}
.legal-content>p:first-child{
  color:#d5d4ce;
  font-size:18px;
}
.legal-content section{
  margin-top:42px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.legal-content h2{
  margin:0 0 14px;
  color:var(--text);
  font-size:20px;
  font-weight:550;
  letter-spacing:-.01em;
}
.legal-content p{margin:0 0 16px}
.legal-content ul{margin:12px 0 0;padding-left:20px}
.legal-content li{margin:8px 0}
.legal-content a{
  color:var(--accent);
  border-bottom:1px solid rgba(201,164,107,.35);
}
.legal-content a:hover{border-color:var(--accent)}
.legal-contact{font-size:18px!important}
.legal-table{
  border-top:1px solid var(--line-strong);
  margin-top:32px;
}
.legal-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:28px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.legal-key{
  color:#777b7d;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.legal-value{color:#c8c8c2}
@media (max-width:620px){
  .legal-page{padding:56px 18px}
  .legal-back{margin-bottom:56px}
  .legal-row{grid-template-columns:1fr;gap:8px}
  .legal-content{font-size:14px}
}