/* =========================================================
   WP SailingFlow — home page styles
   Palette carried from the brand icon set.
   ========================================================= */
:root {
  --ink:#0b2a3a;       /* deep navy text */
  --ink-soft:#33545f;  /* secondary text */
  --sea:#0e6e8e;       /* primary brand blue */
  --sea-dark:#0a5063;
  --foam:#eaf3f5;      /* pale tint */
  --paper:#f6f4ec;     /* warm off-white */
  --line:#cdd9dc;      /* hairlines */
  --accent:#d9622b;    /* orange accent */
  --accent-dark:#bf5121;
  --white:#ffffff;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --maxw:1100px;
  --radius:12px;
  --shadow:0 10px 30px -12px rgba(11,42,58,.28);
  --shadow-sm:0 2px 8px -2px rgba(11,42,58,.15);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { max-width:100%; display:block; }
a { color:var(--sea); text-decoration:none; }
a:hover { color:var(--sea-dark); }

h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--ink); }

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

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus { left:0; }

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

.eyebrow {
  font-family:var(--mono);
  letter-spacing:.2em; text-transform:uppercase; font-size:12px;
  color:var(--sea); margin:0 0 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn-lg { padding:15px 30px; font-size:16px; }
.btn-block { width:100%; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--sea); color:var(--sea); transform:translateY(-2px); }

/* ---------- Header / nav ---------- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(246,244,236,.85);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); }
.brand-mark { color:var(--sea); flex:none; }
.brand-name { font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; }
.brand-name strong { font-weight:700; }

.primary-nav { display:flex; align-items:center; gap:28px; }
.primary-nav a { color:var(--ink-soft); font-weight:500; font-size:15.5px; }
.primary-nav a:hover { color:var(--sea); }
.primary-nav .nav-cta { color:#fff; }
.primary-nav .nav-cta:hover { color:#fff; }

.nav-toggle {
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
}
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position:relative;
  background:
    linear-gradient(90deg, rgba(246,244,236,.96) 0%, rgba(246,244,236,.85) 38%, rgba(246,244,236,.25) 66%, rgba(246,244,236,0) 100%),
    url("../img/hero-sailboat.jpg") center right / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero-inner { padding:88px 24px 96px; }
.hero-copy { max-width:620px; }
.hero h1 { font-size:clamp(38px,6.5vw,64px); margin:0 0 22px; }
.hero h1 .accent { color:var(--accent); }
.hero-sub { font-size:clamp(17px,2.2vw,20px); color:var(--ink-soft); margin:0 0 32px; max-width:54ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
.hero-trust {
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft);
}
.hero-trust li { display:flex; align-items:center; gap:8px; }
.hero-trust li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--sea); flex:none; }

/* ---------- Stat bar ---------- */
.statbar { background:var(--ink); color:#fff; }
.statbar-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:34px 24px; text-align:center; }
.stat { display:flex; flex-direction:column; gap:6px; }
.stat-num { font-family:var(--serif); font-size:34px; font-weight:700; color:#fff; line-height:1; }
.stat-label { font-size:13.5px; color:#bcd2d9; }

/* ---------- Sections ---------- */
.section { padding:88px 0; }
.section-tint { background:var(--foam); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head h2 { font-size:clamp(28px,4.4vw,42px); margin:0 0 16px; }
.section-lead { font-size:18px; color:var(--ink-soft); margin:0; }

/* ---------- Feature grid ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.feature:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sea); }
.feature .ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:12px; background:var(--foam); color:var(--sea);
  margin-bottom:18px;
}
.feature .ic svg { width:28px; height:28px; }
.feature h3 { font-size:20px; margin:0 0 10px; }
.feature p { margin:0; color:var(--ink-soft); font-size:15.5px; }

/* ---------- Steps ---------- */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;
  position:relative;
}
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--sea); color:#fff; font-family:var(--serif); font-weight:700; font-size:19px;
  margin-bottom:16px;
}
.step h3 { font-size:18px; margin:0 0 8px; }
.step p { margin:0; color:var(--ink-soft); font-size:15px; }

/* ---------- Publishing / shortcodes ---------- */
.publish-grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.publish-copy h2 { font-size:clamp(28px,4vw,40px); margin:0 0 18px; }
.publish-copy p { color:var(--ink-soft); margin:0 0 22px; }

.check-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.check-list li { position:relative; padding-left:30px; color:var(--ink-soft); font-size:15.5px; }
.check-list li::before {
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px;
  background:var(--sea); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat;
}

.code-card { background:var(--ink); border-radius:var(--radius); padding:18px 0 20px; box-shadow:var(--shadow); overflow:hidden; }
.code-card-bar { display:flex; gap:8px; padding:0 20px 16px; }
.code-card-bar span { width:11px; height:11px; border-radius:50%; background:#3a5a68; }
.code-card-bar span:first-child { background:var(--accent); }
.code { margin:0; padding:4px 22px 0; overflow-x:auto; font-family:var(--mono); font-size:13.5px; line-height:1.9; color:#cfe0e6; }
.code .c-tag { color:#8fd0e6; }
.code .c-cm { color:#6d8a96; }
.code-note { margin:14px 22px 0; font-family:var(--mono); font-size:11.5px; color:#6d8a96; }

/* ---------- Pricing ---------- */
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:26px; justify-content:center; }
.plan {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 30px;
  display:flex; flex-direction:column; position:relative;
}
.plan-featured { border-color:var(--sea); border-width:2px; box-shadow:var(--shadow); }
.plan-badge {
  position:absolute; top:-13px; left:30px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.plan-name { font-size:24px; margin:0 0 8px; }
.plan-price { margin:0 0 6px; display:flex; align-items:baseline; gap:8px; }
.plan-price .amount { font-family:var(--serif); font-size:38px; font-weight:700; color:var(--ink); }
.plan-price .per { color:var(--ink-soft); font-size:14px; }
.plan-tagline { margin:0 0 22px; color:var(--ink-soft); font-size:15px; }
.plan .check-list { margin-bottom:28px; }
.plan .btn { margin-top:auto; }
.pricing-foot { text-align:center; margin:30px auto 0; max-width:560px; color:var(--ink-soft); font-size:14.5px; }

/* ---------- FAQ ---------- */
.faq { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:26px; font-weight:400; color:var(--sea); transition:transform .2s;
}
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details p { margin:0 0 22px; color:var(--ink-soft); font-size:16px; max-width:64ch; }

/* ---------- CTA band ---------- */
.cta-band { background:var(--sea); color:#fff; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:60px 24px; flex-wrap:wrap; }
.cta-band h2 { color:#fff; font-size:clamp(26px,3.6vw,38px); margin:0 0 8px; }
.cta-band p { margin:0; color:#d7ecf2; font-size:17px; }
.cta-band .btn-primary { background:#fff; color:var(--sea-dark); border-color:#fff; }
.cta-band .btn-primary:hover { background:var(--paper); color:var(--sea-dark); border-color:var(--paper); }

/* ---------- Shared page masthead (inner pages) ---------- */
.page-masthead {
  background:var(--ink); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:56px 0 48px; text-align:center;
}
.page-masthead .eyebrow { color:#7fc6dd; }
.page-masthead h1 { color:#fff; font-size:clamp(34px,5.5vw,52px); margin:0 0 16px; }
.page-masthead p { color:#bcd2d9; font-size:18px; max-width:60ch; margin:0 auto; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:#bcd2d9; padding:56px 0 30px; }
.footer-inner { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12); }
.site-footer .brand { color:#fff; }
.site-footer .brand-mark { color:#7fc6dd; }
.footer-tag { margin:16px 0 0; max-width:34ch; font-size:14.5px; color:#9fbac3; }
.footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.footer-col h4 { color:#fff; font-family:var(--sans); font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px; }
.footer-col a { display:block; color:#9fbac3; font-size:15px; padding:5px 0; }
.footer-col a:hover { color:#fff; }
.footer-legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:24px; font-size:13px; color:#7e9aa3; }
.footer-legal p { margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .publish-grid { grid-template-columns:1fr; gap:34px; }
  .statbar-inner { grid-template-columns:repeat(2,1fr); gap:28px 16px; }
}

@media (max-width:720px) {
  body { font-size:16px; }
  .nav-toggle { display:flex; }
  .primary-nav {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 0 16px;
    box-shadow:var(--shadow);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .25s ease, opacity .2s ease;
  }
  .primary-nav.open { clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .primary-nav a { padding:14px 24px; font-size:17px; border-top:1px solid var(--line); }
  .primary-nav .nav-cta { margin:14px 24px 4px; padding:14px; border-radius:999px; text-align:center; }
  .hero-inner { padding:64px 24px 72px; }
  .hero {
    background:
      linear-gradient(180deg, rgba(246,244,236,.5) 0%, rgba(246,244,236,.82) 55%, rgba(246,244,236,.97) 100%),
      url("../img/hero-sailboat.jpg") center top / cover no-repeat;
  }
  .section { padding:64px 0; }
  .section-head { margin-bottom:40px; }
}

@media (max-width:520px) {
  .feature-grid, .steps { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
  .footer-inner { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}