/* Royal Coast Labs. Palette and type from the brand bible: Deep Sea grounds
   the dark bands, Crown Gold is an accent and stays well under five percent,
   Fraunces for display, Inter for body, JetBrains Mono for labels.
   Light is the base; dark is derived, so no colour is defined only inside a
   media query. */
:root{
  --foam:#F5F3EE; --sand:#EDE5D6; --paper:#FFFFFF;
  --ink:#171514; --ink-2:#3F4A54; --slate:#52687A;
  --sea:#14293A; --sea-2:#1C3A4F; --sea-ink:#F2EFE8;
  --gold:#8C5F0E; --gold-bright:#C9A24A;
  --rule:#DED7C8; --rule-2:#ECE7DB;
  --live:#1F4D2B; --live-bg:#DCEAE0;
  --dev:#8A5A00;  --dev-bg:#F4E7CA;
  --shadow:0 1px 2px rgba(20,41,58,.05),0 12px 32px -20px rgba(20,41,58,.25);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --foam:#0C1B25; --sand:#15303E; --paper:#102632;
    --ink:#E8EEF2; --ink-2:#B4C5D0; --slate:#8CA6B4;
    --sea:#081620; --sea-2:#112C3C; --sea-ink:#EFF4F7;
    --gold:#E0BE6E; --gold-bright:#E0BE6E;
    --rule:#21404F; --rule-2:#17323F;
    --live:#8FD4A0; --live-bg:#13301B;
    --dev:#E8C376;  --dev-bg:#392C10;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 32px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --foam:#0C1B25; --sand:#15303E; --paper:#102632;
  --ink:#E8EEF2; --ink-2:#B4C5D0; --slate:#8CA6B4;
  --sea:#081620; --sea-2:#112C3C; --sea-ink:#EFF4F7;
  --gold:#E0BE6E; --gold-bright:#E0BE6E;
  --rule:#21404F; --rule-2:#17323F;
  --live:#8FD4A0; --live-bg:#13301B;
  --dev:#E8C376;  --dev-bg:#392C10;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 32px -20px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--foam);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(35px,5.4vw,60px);line-height:1.03}
h2{font-size:clamp(27px,4vw,40px);line-height:1.12}
h3{font-size:22px;line-height:1.25}
h4{font-size:16px}
p{margin:0}
a{color:inherit}
code,.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:4px}
img{max-width:100%}

.wrap{max-width:1120px;margin:0 auto;padding-inline:22px}
.narrow{max-width:66ch}

.eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500}
.lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-2);line-height:1.6}

/* header ------------------------------------------------------------------ */
.top{background:var(--sea);color:var(--sea-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
.top .wrap{display:flex;align-items:center;gap:20px;padding-block:15px}
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--sea-ink);margin-right:auto}
.lockup img{width:22px;height:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.lockup b{font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:600;letter-spacing:-.014em}
.lockup b span{font-weight:400;opacity:.82}
nav.links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;font-size:14.5px}
nav.links a{color:#B9CCD8;text-decoration:none;padding-block:4px}
nav.links a:hover,nav.links a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--gold-bright)}
.btn{
  display:inline-block;font:inherit;font-size:14.5px;font-weight:500;
  padding:9px 18px;border-radius:24px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.btn-ghost{border-color:rgba(255,255,255,.35);color:var(--sea-ink);background:transparent}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-gold{background:var(--gold-bright);color:#20180A;border-color:var(--gold-bright)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ink{background:var(--sea);color:var(--sea-ink);border-color:var(--sea)}
.btn-ink:hover{background:var(--sea-2)}
.btn-outline{border-color:var(--rule);color:var(--ink);background:var(--paper)}
.btn-outline:hover{border-color:var(--slate)}

.tide{border:1px solid rgba(255,255,255,.28);background:transparent;color:#B9CCD8;border-radius:22px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.tide:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.tide svg{width:16px;height:16px;display:block}
.tide .moon{display:none}
:root[data-theme="dark"] .tide .sun,:root:not([data-theme="light"]) .tide .sun{display:none}
:root[data-theme="dark"] .tide .moon,:root:not([data-theme="light"]) .tide .moon{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tide .sun{display:block}:root:not([data-theme="dark"]) .tide .moon{display:none}}

/* bands ------------------------------------------------------------------- */
.band{padding-block:84px}
.band.dark{background:var(--sea);color:var(--sea-ink)}
.band.dark h1,.band.dark h2,.band.dark h3{color:var(--sea-ink)}
.band.dark .lede,.band.dark p{color:#C3D4DE}
.band.sandy{background:var(--sand)}
.band.tight{padding-block:60px}
/* This used to collapse the top padding of any plain band following another
   band, which was meant for two consecutive light sections. The dark hero is
   also a band, so "Our work" lost its top padding and started hard against the
   fold. Each band owns its own spacing now. */
.band .head{max-width:60ch;margin-bottom:38px}
.band .head h2 + p{margin-top:14px}

/* hero -------------------------------------------------------------------- */
.hero{padding-block:92px 96px}
.hero-art{display:grid;place-items:center}
.hero-art img{width:100%;max-width:240px;filter:brightness(0) invert(1);opacity:.93}
.hero h1{margin-top:14px;max-width:17ch}
.hero .lede{margin-top:24px;max-width:56ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* product cards ----------------------------------------------------------- */
.tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:5px;background:var(--sand);color:var(--ink-2)}
.status{font-size:13px;color:var(--slate)}
.status.live{color:var(--live)}
.status.dev{color:var(--dev)}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:44px;align-items:start}
.feature h3{font-size:clamp(28px,3.4vw,38px);margin-top:12px}
.feature p{margin-top:16px;color:var(--ink-2)}
.feature .go{margin-top:24px}

.compare{background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.compare .half{padding:20px 22px}
.compare .half + .half{border-top:1px solid var(--rule)}
.compare .cap{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.compare .txt{font-family:Fraunces,Georgia,serif;font-size:17px;line-height:1.6;color:var(--ink)}
.compare .half.model{background:var(--sand)}
.tok{font-family:"JetBrains Mono",monospace;font-size:.82em;background:var(--sea);color:var(--sea-ink);padding:1px 6px;border-radius:4px}
.gen{background:rgba(201,162,74,.26);border-radius:3px;padding:0 2px;
  border-bottom:2px dotted var(--gold);}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold-bright);
  color:#20180A;padding:10px 16px;border-radius:0 0 8px 0;z-index:60;font-weight:500}
.skip:focus{left:0}
.compare .key{font-size:12px;color:var(--slate);padding:0 22px 16px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.compare .key b{font-weight:500;color:var(--ink)}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:16px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin-top:14px}
.card p{margin-top:12px;color:var(--ink-2);font-size:15.5px}
.card .go{margin-top:auto;padding-top:20px;font-size:14.5px;font-weight:500}
.go a,a.go{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold-bright);padding-bottom:1px}
.go a:hover,a.go:hover{color:var(--gold)}

.alsorow{display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;align-items:baseline;margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
.alsorow p{max-width:70ch;font-size:15.5px;color:var(--ink-2)}

/* three-up ---------------------------------------------------------------- */
.threeup{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:40px}
.threeup h3{font-size:20px}
.threeup p{margin-top:10px;font-size:15.5px}

/* split ------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:start}
.panel{background:var(--sand);border-radius:16px;padding:32px 30px}
.panel h2{font-size:clamp(24px,3vw,32px)}
.panel p{margin-top:14px;color:var(--ink-2);font-size:16px}

/* prose ------------------------------------------------------------------- */
.prose > * + *{margin-top:17px}
.prose h2{margin-top:52px}
.prose h3{margin-top:34px}
.prose ul,.prose ol{padding-left:20px;margin-top:14px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--gold)}
.prose a{border-bottom:1px solid var(--rule)}
.prose a:hover{border-bottom-color:var(--gold-bright)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin-top:22px}
.prose th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--rule)}
.prose td{padding:12px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top}

.note{border-left:2px solid var(--gold-bright);padding:4px 0 4px 20px;margin:26px 0;color:var(--ink-2)}
.steps{counter-reset:s;display:grid;gap:14px;margin-top:26px}
.step{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:19px 22px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start}
.step .n{counter-increment:s;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--gold);padding-top:3px}
.step .n::before{content:"L" counter(s)}
.step h4{font-size:16px}
.step p{margin-top:5px;font-size:15px;color:var(--ink-2)}

.statusgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:24px}
.sbox{border:1px solid var(--rule);border-radius:11px;padding:16px 18px;background:var(--paper)}
.sbox .k{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.sbox p{margin-top:7px;font-size:15px;color:var(--ink-2)}
.sbox.built{border-left:3px solid var(--live)}
.sbox.soon{border-left:3px solid var(--dev)}

/* contact ----------------------------------------------------------------- */
.mailto{display:inline-block;font-family:Fraunces,Georgia,serif;font-size:clamp(26px,4.4vw,44px);font-weight:600;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--gold-bright);margin-top:36px;letter-spacing:-.02em}
.mailto:hover{color:var(--gold)}

footer{background:var(--sea);color:#9FB6C4;padding-block:46px 56px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between}
footer b{color:var(--sea-ink);font-family:Fraunces,Georgia,serif;font-weight:600;font-size:16px}
footer a{color:#B9CCD8}
footer .fine{flex-basis:100%;font-size:12.5px;color:#7794A5;line-height:1.55;max-width:80ch}

@media (max-width:860px){
  .hero{padding-block:56px 60px}
  .hero h1{max-width:none}
  .feature,.split{grid-template-columns:1fr;gap:32px}
  .band{padding-block:58px}
  /* The navigation used to be display:none here, which left every page but
     the front one unreachable from the header on a phone. It wraps to its own
     row instead, and the "Get in touch" button is dropped because the contact
     section is already in the page. */
  .top .wrap{flex-wrap:wrap;gap:10px 14px;padding-block:12px}
  .lockup{margin-right:auto}
  .top .btn-ghost{display:none}
  nav.links{order:3;flex-basis:100%;gap:2px 18px;font-size:14px;
            padding-top:9px;border-top:1px solid rgba(255,255,255,.14)}
}

.tiny-note{font-size:13.5px;color:var(--slate);margin-top:14px;max-width:60ch}