@font-face{
  font-family:"Figtree";
  src:url("/fonts/Figtree.woff2") format("woff2");
  font-weight:300 900;font-display:swap;
}

/* Skyshift's living sky + the geocodify/calendarific SaaS-utility structure.
   Sky toggle (nav) demos dawn/day/dusk/night — production follows visitor's local time. */
:root{
  --sky1:#8ec9f5; --sky2:#e3f2fd; --glow:#ffffff;
  --ink:#123049; --ink2:#3e617e; --ink3:#6d8ba3;
  --card:rgba(255,255,255,.62); --card-line:rgba(255,255,255,.8); --chip:rgba(255,255,255,.45);
  --accent:#0b5f9e; --accent2:#0d76c4; --accent-ink:#ffffff; --ok:#128a68;
  --code:#10233a; --star-op:0; --sun:#ffd98a;
}
[data-sky="dawn"]{--sky1:#f2ac86;--sky2:#ccd6f4;--glow:#ffe9cf;--ink:#38273d;--ink2:#67536e;--ink3:#8d7a92;
  --card:rgba(255,246,238,.6);--card-line:rgba(255,255,255,.75);--chip:rgba(255,250,244,.45);
  --accent:#b3543a;--accent2:#c96a4c;--accent-ink:#fff;--ok:#217a5c;--code:#331f2f;--star-op:.25;--sun:#ffb35c}
[data-sky="dusk"]{--sky1:#d97c4f;--sky2:#403f77;--glow:#ffcf9e;--ink:#f9efe6;--ink2:#e3cdbd;--ink3:#c4a996;
  --card:rgba(48,44,88,.5);--card-line:rgba(255,214,178,.32);--chip:rgba(48,44,88,.4);
  --accent:#ffc07a;--accent2:#ffd096;--accent-ink:#3a2650;--ok:#7fd6b4;--code:#241f45;--star-op:.5;--sun:#ff9e54}
[data-sky="night"]{--sky1:#0b1630;--sky2:#1e2d54;--glow:#2c4276;--ink:#e9effc;--ink2:#adbcdb;--ink3:#7e91b8;
  --card:rgba(17,27,56,.62);--card-line:rgba(148,175,230,.26);--chip:rgba(24,36,70,.55);
  --accent:#9db8ff;--accent2:#b3c8ff;--accent-ink:#0b1630;--ok:#6fd0ac;--code:#0a1226;--star-op:1;--sun:#dfe6ff}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Figtree","Avenir Next","Seravek","Segoe UI",system-ui,sans-serif;color:var(--ink);line-height:1.6;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 72%,var(--glow) 100%);
  background-attachment:fixed;transition:background 1.1s ease,color .7s ease}
.stars{position:fixed;inset:0;pointer-events:none;opacity:var(--star-op);transition:opacity 1.1s ease;
  background-image:radial-gradient(1.5px 1.5px at 12% 16%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 33% 7%,#fff 50%,transparent 51%),
   radial-gradient(1.6px 1.6px at 57% 20%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 78% 11%,#fff 50%,transparent 51%),
   radial-gradient(1.3px 1.3px at 90% 27%,#fff 50%,transparent 51%),
   radial-gradient(1.1px 1.1px at 45% 31%,#fff 50%,transparent 51%)}
.sun{position:fixed;top:7rem;right:10%;width:150px;height:150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--sun) 0%,transparent 66%);filter:blur(2px);opacity:.85;transition:background 1.1s ease}
.cloud{position:fixed;pointer-events:none;opacity:.45;color:#fff;filter:blur(1px)}
.cloud svg{width:230px}
.c1{top:14%;left:-250px;animation:drift 100s linear infinite}
.c2{top:30%;left:-360px;animation:drift 150s linear 25s infinite;transform:scale(1.4)}
@keyframes drift{to{transform:translateX(135vw)}}
@media (prefers-reduced-motion:reduce){.c1,.c2{animation:none;left:10%}.c2{left:62%}}

.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem;position:relative}
a{color:var(--accent);text-decoration:none}

/* nav */
nav{display:flex;align-items:center;gap:1.5rem;padding:1.2rem 0;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.2rem;color:var(--ink)}
.logo::before{content:"◍ ";color:var(--accent)}
nav .links{display:flex;gap:1.3rem}
nav .links a{color:var(--ink2);font-size:.88rem}
nav .links a:hover{color:var(--ink)}
nav .right{margin-left:auto;display:flex;gap:.7rem;align-items:center}
.skysw{display:flex;gap:.2rem;background:var(--chip);border:1px solid var(--card-line);border-radius:99px;padding:.22rem;backdrop-filter:blur(8px)}
.skysw button{border:0;background:none;color:var(--ink2);font:inherit;font-size:.72rem;padding:.28rem .6rem;border-radius:99px;cursor:pointer}
.skysw button.on{background:var(--accent);color:var(--accent-ink)}
.btn{display:inline-block;border-radius:12px;padding:.62rem 1.25rem;font-weight:600;font-size:.9rem;border:0;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{color:var(--ink2);background:none}
.btn.glass{background:var(--chip);border:1px solid var(--card-line);color:var(--ink);backdrop-filter:blur(8px)}
/* Outline button. This lived only as `.plan .btn.line`, so every other use on
   the site fell through to a bare .btn with no background or border. */
.btn.line{background:var(--chip);border:1px solid var(--card-line);color:var(--ink);backdrop-filter:blur(8px)}
.btn.line:hover{border-color:var(--accent);color:var(--accent)}

/* hero */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:3rem;padding:4.2rem 0 3.6rem;align-items:center}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
h1 .soft{font-weight:300}
.sub{margin:1.2rem 0 1.9rem;color:var(--ink2);font-size:1.08rem;max-width:33rem}
.search{display:flex;background:var(--card);border:1px solid var(--card-line);border-radius:16px;overflow:hidden;max-width:31rem;
  backdrop-filter:blur(12px);box-shadow:0 14px 44px rgba(10,25,50,.14)}
.search input{flex:1;border:0;background:none;padding:1rem 1.15rem;font:inherit;color:var(--ink);outline:none}
.search input::placeholder{color:var(--ink3)}
.search .btn{border-radius:0;padding:1rem 1.4rem}
/* The hero's main object. Oversized on purpose: looking up a town is the
   thing most visitors came to do, and every city page is a live demo of the
   API underneath. The icon is a mask rather than a background image so it
   takes its colour from the sky state instead of being invisible at night. */
.search.big{max-width:38rem;border-radius:22px;padding:.5rem;align-items:center;
  position:relative;margin-top:1.6rem}
.search.big::before{content:"";position:absolute;left:1.35rem;top:50%;transform:translateY(-50%);
  width:1.1rem;height:1.1rem;background:var(--ink3);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat center/contain}
.search.big input{padding:1.25rem 1rem 1.25rem 2.85rem;font-size:1.05rem}
.search.big .btn{border-radius:16px;padding:1rem 1.5rem;white-space:nowrap}

.quiet{margin-top:1.4rem;font-size:.95rem;color:var(--ink2)}
.quiet a{font-weight:650}
.quiet span{display:block;margin-top:.3rem;font-size:.83rem;color:var(--ink3)}

.hero-ctas{margin-top:1rem;font-size:.87rem;color:var(--ink3)}
.hero-ctas a{font-weight:600}

.demo{background:var(--card);border:1px solid var(--card-line);border-radius:20px;backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(10,25,50,.16);padding:1.4rem;animation:up .6s ease .1s both}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.demo{animation:none}}
.demo .row1{display:flex;justify-content:space-between;align-items:baseline}
.demo .city{font-weight:650}
.demo .live{font-size:.66rem;letter-spacing:.14em;color:var(--ok);font-weight:700}
.demo .main{display:flex;align-items:center;gap:1.1rem;margin:.7rem 0 .3rem}
.demo .t{font-size:3.6rem;font-weight:200;letter-spacing:-.04em;line-height:1}
.demo .desc{color:var(--ink2);font-size:.92rem}
.demo .desc b{color:var(--ink);font-weight:600}
.lane{display:flex;gap:3px;height:40px;align-items:flex-end;margin-top:.8rem}
.lane i{flex:1;border-radius:3px 3px 0 0;background:var(--accent);opacity:.9;min-height:3px}
.lane i.dry{opacity:.2}
.lane-cap{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink3);margin-top:.35rem}
.mini{display:flex;gap:.45rem;margin-top:1rem}
.mini div{flex:1;background:var(--chip);border:1px solid var(--card-line);border-radius:10px;text-align:center;padding:.5rem .2rem;font-size:.72rem;color:var(--ink2)}
.mini b{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.demo footer{margin-top:.9rem;font-size:.7rem;color:var(--ink3)}

/* trust strip */
/* Proof bar. The market's convention here is a wall of customer logos; we do
   not have those, so these are numbers a visitor can go and verify instead.
   Every one links to the page that proves it. */
.proof{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2.6rem;
  padding:1.8rem 0 .6rem;text-align:center}
.proof a{text-decoration:none;display:flex;flex-direction:column;gap:.15rem;padding:.3rem .2rem;
  border-radius:10px;transition:background .15s}
.proof a:hover{background:var(--chip)}
.proof b{font-size:1.35rem;font-weight:650;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.proof span{font-size:.76rem;color:var(--ink3);letter-spacing:.02em}
@media(max-width:600px){.proof{gap:.4rem 1.4rem}.proof b{font-size:1.1rem}.proof span{font-size:.7rem}}

.trust{padding:1.4rem 0 .4rem;text-align:center}
.trust p{font-size:.75rem;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin-bottom:.8rem}
.logos{display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;font-weight:650;color:var(--ink2);font-size:.95rem}
.logos span{opacity:.85}

/* sections */
section{padding:3.8rem 0}
.center{text-align:center}
h2{font-size:1.9rem;letter-spacing:-.02em;font-weight:650;text-wrap:balance}
.lede{color:var(--ink2);max-width:38rem;margin:.8rem auto 2.3rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.f{background:var(--card);border:1px solid var(--card-line);border-radius:18px;padding:1.5rem;text-align:left;backdrop-filter:blur(10px)}
.f .ic{font-size:1.5rem}
.f h3{font-size:1rem;margin:.6rem 0 .35rem;font-weight:650}
.f p{font-size:.88rem;color:var(--ink2)}

/* cities */
.citygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:2rem}
.city{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--card-line);
  border-radius:12px;padding:.72rem .95rem;font-size:.88rem;color:var(--ink);backdrop-filter:blur(8px)}
.city:hover{border-color:var(--accent)}
.city .t{font-weight:650}.city .flag{margin-right:.45rem}
.more{margin-top:1.5rem;font-size:.92rem}

/* api duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
pre{background:var(--code);color:#d6e6f8;border-radius:16px;padding:1.35rem;font-size:.78rem;line-height:1.7;overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--card-line);transition:background 1.1s ease}
pre .g{color:#8bd8ab}pre .b{color:#93c5f2}pre .d{color:#64809c}
.ticks{list-style:none;padding:0;margin:1.2rem 0}
.ticks li{padding:.32rem 0 .32rem 1.7rem;position:relative;font-size:.92rem;color:var(--ink2)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}

/* pricing */
.toggle{display:inline-flex;background:var(--chip);border:1px solid var(--card-line);border-radius:99px;padding:.25rem;margin:0 auto 2.1rem;font-size:.82rem;backdrop-filter:blur(8px)}
.toggle span{padding:.35rem 1rem;border-radius:99px;color:var(--ink2)}
.toggle .on{background:var(--card);color:var(--ink);font-weight:600}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.plan{background:var(--card);border:1px solid var(--card-line);border-radius:18px;padding:1.5rem;text-align:left;
  display:flex;flex-direction:column;backdrop-filter:blur(10px)}
.plan.hot{border:2px solid var(--accent);position:relative;box-shadow:0 16px 44px rgba(10,25,50,.16)}
.plan.hot::before{content:"MOST POPULAR";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--accent-ink);font-size:.6rem;letter-spacing:.12em;font-weight:700;border-radius:99px;padding:.22rem .7rem}
.plan .nm{font-size:.78rem;font-weight:700;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}
.plan .pr{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin:.4rem 0 .1rem}
.plan .pr small{font-size:.85rem;color:var(--ink3);font-weight:500}
.plan .ticks li{font-size:.83rem;padding:.26rem 0 .26rem 1.5rem}
.plan .btn{margin-top:auto;text-align:center}
.plan .btn.line{border:1px solid var(--card-line);color:var(--ink);background:var(--chip)}
.plan .btn.line:hover{border-color:var(--accent);color:var(--accent)}

/* faq */
/* FAQ accordions only — this used to be a bare `details` selector, which
   silently constrained the city page's day rows and the country accordions
   to 46rem and centred them. */
.faq details{background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:1rem 1.2rem;
  margin-bottom:.8rem;text-align:left;backdrop-filter:blur(8px)}
/* Centred marketing sections want the narrow reading column; the city page,
   which is a full-width stack of cards, wants the FAQ to match its neighbours. */
.center .faq details{max-width:46rem;margin-left:auto;margin-right:auto}
.faq summary{font-weight:600;cursor:pointer;font-size:.95rem}
.faq details p{margin-top:.6rem;font-size:.9rem;color:var(--ink2)}

/* cta + footer */
.band{background:linear-gradient(120deg,var(--accent),var(--accent2));color:var(--accent-ink);border-radius:22px;
  padding:2.6rem 2.2rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.band h2{color:var(--accent-ink)}
.band p{opacity:.85;margin-top:.4rem;max-width:30rem}
.band .btn{background:var(--card);color:var(--ink);backdrop-filter:blur(8px)}
footer.site{padding:3rem 0 3.4rem;font-size:.84rem;color:var(--ink2)}
.cols4{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
footer.site b{color:var(--ink);display:block;margin-bottom:.5rem}
footer.site a{display:block;color:var(--ink2);padding:.15rem 0}
footer.site a:hover{color:var(--accent)}
.legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--card-line);font-size:.73rem;color:var(--ink3)}
/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .hero,.duo{grid-template-columns:1fr}
  .search.big{max-width:none}
  .grid3{grid-template-columns:1fr}
  .citygrid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .cols4{grid-template-columns:1fr 1fr}
  /* Navigation moves to its own scrollable row rather than disappearing —
     hiding it left phones with no way through the site at all. */
  nav{flex-wrap:wrap;gap:.55rem 1rem}
  nav .links{order:3;width:100%;overflow-x:auto;gap:1.1rem;padding-bottom:.15rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav .links::-webkit-scrollbar{display:none}
  nav .links a{white-space:nowrap}
  nav .right{margin-left:auto}
}
@media(max-width:600px){
  .wrap{padding:0 1rem}
  .citygrid,.plans,.cols4{grid-template-columns:1fr}
  /* The four-state sky switcher is a nicety; the page still follows local
     time on its own, so give the space back to the unit toggle and buttons. */
  .skysw{display:none}
  nav .logo{font-size:1.05rem}
  nav .right{gap:.45rem}
  .btn{padding:.5rem .95rem;font-size:.85rem}
  h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  h2{font-size:1.4rem}
  .band{padding:1.6rem 1.3rem;text-align:left}
  .band .btn{width:100%;text-align:center}
  .demo .t{font-size:3rem}
  .trust .logos{gap:1.1rem;font-size:.85rem}
  .lede,.sub{font-size:.95rem}
  .search input{padding:.85rem .95rem}
  /* Below this width the input and button side by side leave roughly 160px
     for typing. Stack them: full-width field, full-width thumb target. */
  .search.big{flex-direction:column;align-items:stretch;gap:.45rem;padding:.45rem;border-radius:18px;
    margin-top:1.3rem}
  .search.big::before{top:1.5rem;transform:none;left:1.15rem}
  .search.big input{padding:.95rem .9rem .95rem 2.5rem;font-size:1rem}
  .search.big .btn{width:100%;padding:.85rem 1rem;border-radius:13px;font-size:.9rem}
  .quiet{margin-top:1.05rem;font-size:.9rem}
  .quiet span{font-size:.78rem}
  details summary{font-size:.9rem}
  .wm-ac-wrap{max-width:none}
}

/* unit switcher — same pill family as the sky switcher */
.unitsw{display:flex;gap:.2rem;background:var(--chip);border:1px solid var(--card-line);border-radius:99px;padding:.22rem;backdrop-filter:blur(8px)}
.unitsw button{border:0;background:none;color:var(--ink2);font:inherit;font-size:.72rem;padding:.28rem .55rem;border-radius:99px;cursor:pointer}
.unitsw button.on{background:var(--accent);color:var(--accent-ink)}

/* content/legal pages */
.prose{max-width:44rem;padding:2.5rem 0 1rem}
.prose h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:650;letter-spacing:-.025em;text-wrap:balance}
.prose .updated{color:var(--ink3);font-size:.82rem;margin-top:.5rem}
.prose h2{font-size:1.2rem;font-weight:650;margin:2.2rem 0 .6rem;letter-spacing:-.01em}
.prose h3{font-size:1rem;font-weight:650;margin:1.4rem 0 .4rem}
.prose p, .prose li{color:var(--ink2);margin:.6rem 0}
.prose strong{color:var(--ink)}
.prose ul{padding-left:1.2rem}
.prose li::marker{color:var(--accent)}
.prose code{background:var(--chip);border:1px solid var(--card-line);border-radius:6px;padding:.08em .4em;font-size:.85em;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.prose .callout{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:1.1rem 1.3rem;
  backdrop-filter:blur(10px);margin:1.4rem 0}
.prose .callout p:first-child{margin-top:0}.prose .callout p:last-child{margin-bottom:0}
.srctable{width:100%;border-collapse:collapse;font-size:.86rem;margin:1rem 0}
.srctable th{text-align:left;font-size:.66rem;letter-spacing:.12em;color:var(--ink3);padding:.5rem .7rem;
  border-bottom:1px solid var(--card-line)}
.srctable td{padding:.5rem .7rem;border-bottom:1px solid var(--card-line);color:var(--ink2);vertical-align:top}
.srctable td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}

/* search autocomplete */
.wm-ac-wrap{position:relative;max-width:31rem}
.wm-ac-wrap .search{max-width:none}
.wm-ac{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:40;display:none;
  background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--card-line);
  border-radius:14px;overflow:hidden;max-height:19rem;overflow-y:auto;
  box-shadow:0 18px 50px rgba(10,25,50,.18)}
.wm-ac.open{display:block}
.wm-ac-item{display:flex;align-items:baseline;gap:.5rem;padding:.55rem .9rem;text-decoration:none;color:var(--ink);font-size:.92rem}
.wm-ac-item:hover, .wm-ac-item.on{background:var(--chip)}
.wm-ac-name{font-weight:600}
.wm-ac-sub{color:var(--ink3);font-size:.8rem}