/* TunaCut marketing site - shared stylesheet.
 *
 * The palette variables and the three-state theming below are carried over verbatim from the
 * original single-page www/index.html so the site, the portal and the app icons stay one family.
 * Do not rename these variables: the login page and the portal reference the same names.
 *
 * THEMING IS THREE-STATE on purpose:
 *   :root                                        -> light (the default, always fully defined)
 *   @media (prefers-color-scheme: dark) guarded  -> dark for visitors who never chose
 *   :root[data-theme="dark"]                     -> dark for visitors who chose
 * Never give a colour its ONLY definition inside a media query.
 *
 * No webfonts anywhere - the portal uses the system stack and so does this.
 */

:root {
  --bg:#fbfaf6; --panel:#ffffff; --line:#e4e0d4;
  --ink:#1a2620; --ink-dim:#5c6b63; --ink-faint:#8b978f;
  --nori:#3a6b52; --coral:#ff5a45; --coral-ink:#c8341f;

  /* Derived surfaces. --art is the cream the generated illustrations are drawn on; it stays
     cream in BOTH themes so the artwork never sits on a mismatched rectangle. */
  --art:#fbfaf6;
  --panel-2:#f6f4ec;
  --shadow:0 1px 2px rgba(26,38,32,.05), 0 8px 24px rgba(26,38,32,.06);
  --shadow-lg:0 2px 4px rgba(26,38,32,.06), 0 18px 48px rgba(26,38,32,.10);
  --radius:14px;
  --maxw:1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1116; --panel:#161b22; --line:#2a3038;
    --ink:#e6edf3; --ink-dim:#98a5ae; --ink-faint:#6e7681;
    --nori:#5f9d7c; --coral:#ff6b57; --coral-ink:#ff8b7a;
    --panel-2:#1b212a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --bg:#0e1116; --panel:#161b22; --line:#2a3038;
  --ink:#e6edf3; --ink-dim:#98a5ae; --ink-faint:#6e7681;
  --nori:#5f9d7c; --coral:#ff6b57; --coral-ink:#ff8b7a;
  --panel-2:#1b212a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.45);
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img { max-width:100%; height:auto; display:block; }
a { color:var(--coral-ink); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap-narrow { max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- site header ---------- */

.site-head {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap {
  display:flex; align-items:center; gap:22px; height:62px;
}
.brand {
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:17px; letter-spacing:-.01em; flex:none;
}
.brand img { width:28px; height:28px; }
.nav { display:flex; gap:4px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.nav a {
  color:var(--ink-dim); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:7px 11px; border-radius:8px;
}
.nav a:hover { color:var(--ink); background:var(--panel-2); }
.nav a.here { color:var(--ink); font-weight:600; }
.nav .btn { margin-left:8px; }
/* `.nav a` is more specific than `.btn-primary`, so without these the sign-in button rendered
   dim-ink on coral and was unreadable. Restate the button colours at the same weight. */
.nav a.btn-primary, .nav a.btn-primary:hover { color:#fff; background:var(--coral); }
.nav a.btn-ghost, .nav a.btn-ghost:hover { color:var(--ink); background:transparent; }

.menu-btn {
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--ink); border-radius:9px; padding:7px 11px; font-size:15px; cursor:pointer;
}

/* ---------- buttons ---------- */

.btn {
  display:inline-block; padding:11px 20px; border-radius:10px; text-decoration:none;
  font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer;
  transition:opacity .15s, background .15s; white-space:nowrap;
}
.btn:hover { opacity:.88; }
.btn-primary { background:var(--coral); color:#fff; }
.btn-ghost { border-color:var(--line); color:var(--ink); background:transparent; }
.btn-lg { padding:14px 26px; font-size:16px; }

/* ---------- hero ---------- */

.hero { padding:76px 0 8px; text-align:center; }
.hero .mark { width:96px; height:96px; margin:0 auto 24px; }
h1 { margin:0; font-size:52px; line-height:1.07; letter-spacing:-.025em; font-weight:750; }
.hero .tag { margin:18px auto 0; font-size:20px; color:var(--ink-dim); max-width:620px; }
.cta { margin:34px 0 0; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-note { margin:16px 0 0; font-size:13.5px; color:var(--ink-faint); }

.eyebrow {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nori); margin-bottom:12px;
}

/* ---------- page header (inner pages) ---------- */

.page-head { padding:64px 0 0; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.page-head h1 { font-size:42px; }
.page-head p.lede-lg { margin:18px 0 0; font-size:18px; color:var(--ink-dim); }
.page-head .art { border-radius:var(--radius); overflow:hidden; background:var(--art); box-shadow:var(--shadow); }

/* ---------- sections ---------- */

section { padding:0; }
h2 { margin:0 0 14px; font-size:30px; line-height:1.2; letter-spacing:-.02em; font-weight:700; }
h3 { margin:0 0 7px; font-size:17px; font-weight:650; letter-spacing:-.005em; }
.sec { margin:88px 0 0; }
.sec > p.sub { margin:0 0 30px; font-size:17px; color:var(--ink-dim); max-width:660px; }

.kicker {
  margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}

.lede {
  margin:56px 0 0; padding:26px 30px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); font-size:17.5px; color:var(--ink-dim);
}
.lede b { color:var(--ink); font-weight:600; }

/* ---------- cards ---------- */

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.cards-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px;
}
.card p { margin:0; font-size:14.5px; color:var(--ink-dim); }
.card .step {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--nori); text-transform:uppercase; margin-bottom:9px;
}
a.card { text-decoration:none; color:inherit; display:block; transition:border-color .15s, transform .15s; }
a.card:hover { border-color:var(--nori); transform:translateY(-2px); }
.card .more { display:inline-block; margin-top:12px; font-size:13.5px; color:var(--coral-ink); font-weight:600; }

.card .ic { width:62px; height:62px; border-radius:12px; background:var(--art); margin-bottom:14px; }

/* ---------- alternating feature rows ---------- */

.row {
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; margin:72px 0 0;
}
/* A row that directly follows a section heading is part of it, not a new thing. */
.sec + .row { margin-top:36px; }
.row.flip .txt { order:2; }
.row .txt h2 { font-size:26px; }
.row .txt p { color:var(--ink-dim); font-size:16px; }
.row .shot { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
/* The square illustrations are 1:1, so at half the content width they tower over the paragraph
   beside them. Cap them and centre what is left. */
.row .shot.art { background:var(--art); box-shadow:var(--shadow); max-width:420px; margin:0 auto; }

/* ---------- screenshots ---------- */

figure { margin:0; }
.shotwrap {
  margin:34px 0 0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg); background:#16161a;
}
figcaption { margin:12px 2px 0; font-size:13.5px; color:var(--ink-faint); }

/* ---------- feature list ---------- */

.flist { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.flist li {
  padding:13px 0; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink-dim);
}
.flist li:last-child { border-bottom:0; }
.flist b { color:var(--ink); font-weight:600; }

/* ---------- pricing ---------- */

.toggle { display:flex; justify-content:center; gap:6px; margin:28px 0 40px; }
.toggle button {
  border:1px solid var(--line); background:var(--panel); color:var(--ink-dim);
  padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer; border-radius:9px;
  font-family:inherit;
}
.toggle button[aria-pressed="true"] { background:var(--nori); border-color:var(--nori); color:#fff; }
.save-badge { font-size:12.5px; color:var(--nori); font-weight:650; align-self:center; margin-left:8px; }

.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; align-items:start; }
.plan {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 28px;
  display:flex; flex-direction:column; height:100%;
}
.plan.feature { border-color:var(--nori); box-shadow:var(--shadow-lg); position:relative; }
.plan .flag {
  position:absolute; top:-11px; left:26px; background:var(--nori); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 10px; border-radius:6px;
}
.plan h3 { font-size:19px; margin-bottom:4px; }
.plan .who { font-size:13.5px; color:var(--ink-faint); margin:0 0 18px; min-height:38px; }
.price { display:flex; align-items:baseline; gap:5px; margin-bottom:4px; }
.price .amt { font-size:40px; font-weight:750; letter-spacing:-.03em; }
.price .per { font-size:14px; color:var(--ink-faint); }
.plan .billed { font-size:12.5px; color:var(--ink-faint); min-height:18px; margin:0 0 20px; }
.plan ul { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.plan li { font-size:14.5px; color:var(--ink-dim); padding-left:22px; position:relative; }
.plan li::before {
  content:""; position:absolute; left:2px; top:.55em; width:9px; height:9px; border-radius:50%;
  background:var(--nori);
}
.plan li b { color:var(--ink); font-weight:600; }
.plan .btn { margin-top:auto; text-align:center; }

.tablewrap { overflow-x:auto; margin:34px 0 0; border:1px solid var(--line); border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px; background:var(--panel); }
th, td { text-align:left; padding:13px 18px; border-bottom:1px solid var(--line); }
thead th { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
tbody th { font-weight:600; color:var(--ink); }
td { color:var(--ink-dim); }
tr:last-child td, tr:last-child th { border-bottom:0; }

/* ---------- docs ---------- */

.doc { display:grid; grid-template-columns:214px 1fr; gap:52px; align-items:start; margin:52px 0 0; }
.toc { position:sticky; top:86px; font-size:14px; }
.toc a { display:block; padding:6px 0; color:var(--ink-dim); text-decoration:none; }
.toc a:hover { color:var(--coral-ink); }
.toc .grp { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
            font-weight:700; margin:20px 0 6px; }
.toc .grp:first-child { margin-top:0; }
.prose h2 { margin:52px 0 12px; font-size:25px; scroll-margin-top:86px; }
.prose h2:first-child { margin-top:0; }
.prose h3 { margin:30px 0 8px; font-size:17px; scroll-margin-top:86px; }
.prose p { color:var(--ink-dim); }
.prose ul, .prose ol { color:var(--ink-dim); padding-left:22px; }
.prose li { margin:6px 0; }
.prose code {
  font:13.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px;
  color:var(--ink);
}
.prose pre {
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:15px 17px;
  overflow-x:auto; font:13.5px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; color:var(--ink);
}
.prose pre code { background:none; border:0; padding:0; }
.note {
  border-left:3px solid var(--nori); background:var(--panel); padding:14px 18px;
  border-radius:0 10px 10px 0; margin:20px 0; font-size:15px; color:var(--ink-dim);
}
.note b { color:var(--ink); }
.kbd {
  font:12.5px ui-monospace, Consolas, monospace; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px; padding:1.5px 6px; background:var(--panel);
  color:var(--ink);
}

/* ---------- cta band ---------- */

.band {
  margin:96px 0 0; padding:52px 44px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; text-align:center;
}
.band h2 { font-size:28px; }
.band p { color:var(--ink-dim); max-width:520px; margin:12px auto 0; }
.band .cta { margin-top:26px; }

/* ---------- footer ---------- */

footer.site-foot {
  margin:96px 0 0; border-top:1px solid var(--line); padding:38px 0 56px;
}
footer.site-foot .cols {
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:34px;
}
footer.site-foot h4 {
  margin:0 0 12px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
footer.site-foot a { display:block; color:var(--ink-dim); text-decoration:none; font-size:14.5px; padding:4px 0; }
footer.site-foot a:hover { color:var(--coral-ink); }
footer.site-foot .about { font-size:14px; color:var(--ink-faint); max-width:270px; }
footer.site-foot .about .brand { margin-bottom:12px; font-size:16px; }
footer.site-foot .base {
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink-faint);
}

/* ---------- responsive ---------- */

@media (max-width:900px) {
  .page-head { grid-template-columns:1fr; gap:30px; padding-top:44px; }
  .row, .row.flip { grid-template-columns:1fr; gap:26px; margin-top:56px; }
  .row.flip .txt { order:0; }
  .doc { grid-template-columns:1fr; gap:26px; }
  .toc { position:static; border-bottom:1px solid var(--line); padding-bottom:16px; }
  .toc .grp { margin-top:14px; }
  footer.site-foot .cols { grid-template-columns:1fr 1fr; gap:26px; }
}

@media (max-width:680px) {
  h1 { font-size:36px; }
  .page-head h1 { font-size:32px; }
  h2 { font-size:25px; }
  .hero { padding-top:48px; }
  .hero .tag { font-size:18px; }
  .hero .mark { width:78px; height:78px; }
  .sec { margin-top:64px; }
  .band { padding:38px 24px; }
  .menu-btn { display:block; }
  .nav {
    display:none; position:absolute; top:62px; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--line); padding:10px 18px 16px; flex-direction:column;
    align-items:stretch; gap:2px; margin-left:0;
  }
  .nav.open { display:flex; }
  .nav .btn { margin:8px 0 0; text-align:center; }
  footer.site-foot .cols { grid-template-columns:1fr; }
}