/* Corkboard for Business — shared styles. Tokens from docs/brand-deck:
   two brand colors, Montserrat only, bordeaux on light / porcelain on dark. */
/* Brand tokens — straight from docs/brand-deck. Two brand colors, nothing else. */
  :root{
    --bordeaux:#50061F;      /* wordmark · emblem · accents */
    --tagline:#5F5E5E;       /* taglines · secondary type  */
    --porcelain:#F5F0EA;     /* light ground               */
    --cream:#CEC4B8;         /* porcelain's shadow tone    */
    --cellar:#1A0F12;        /* dark ground                */
    --ink:#201B1C;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  /* nothing may push the page wider than the screen */
  /* NOTE: overflow-x:hidden on html/body silently BREAKS position:sticky — it creates a
     scroll container that kills the sticky context. Use overflow-x:clip, which contains
     the same accidental horizontal overflow without touching the scroll container. */
  html,body{max-width:100%;overflow-x:clip;}
  img{max-width:100%;height:auto;}
  h1,h2,h3,p{overflow-wrap:break-word;}
  body{
    margin:0;
    background:var(--porcelain);
    color:var(--ink);
    font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-weight:400;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{color:var(--bordeaux);margin:0;letter-spacing:-0.01em;}
  h1{font-weight:800;}
  h2{font-weight:700;}
  h3{font-weight:600;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  /* The nav stays put — a visitor three screens into Product shouldn't have to scroll
     back up to reach Contact. Sticks the whole bar, logo included. */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--porcelain);
    border-bottom:1px solid transparent;
    transition:border-color .2s, box-shadow .2s;
  }
  .topbar.scrolled{border-bottom-color:var(--cream);box-shadow:0 2px 14px rgba(26,15,18,.06);}
  header{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;}
  header img{transition:height .2s;}
  .topbar.scrolled header img{height:44px;}
  header img{height:58px;width:auto;display:block;}
  nav{display:flex;gap:24px;align-items:center;}
  nav a{font-size:1rem;font-weight:500;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
  nav a:hover{border-bottom-color:var(--bordeaux);}

  /* Single column since the label card came out — the headline carries the hero on its
     own, so give it room rather than stretching it across the full width. */
  .hero{padding:76px 0 88px;}
  .hero h1{font-size:clamp(2.2rem,6.4vw,4.2rem);line-height:1.08;margin-bottom:24px;max-width:19ch;}
  .lede{font-size:1.22rem;max-width:54ch;color:#463f40;margin:0 0 34px;}
  .cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .btn{
    display:inline-block;background:var(--bordeaux);color:var(--porcelain);
    padding:15px 32px;text-decoration:none;font-size:1.02rem;font-weight:600;
    border-radius:3px;transition:opacity .15s;
  }
  .btn:hover{opacity:.88;}
  .btn-ghost{font-size:1.02rem;font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--bordeaux);padding-bottom:2px;}


  section{border-top:1px solid var(--cream);}
  .problem{padding:60px 0;}
  .problem h2{font-size:1.7rem;margin-bottom:8px;}
  .sub{color:var(--tagline);font-size:.98rem;margin:0;}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:34px;}
  .grid3 h3{font-size:1.08rem;margin-bottom:8px;}
  .grid3 p{font-size:1rem;color:#463f40;margin:0;}

  .what-band{padding:60px 0 80px;}
  .what{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;}
  .what h2{font-size:2.2rem;max-width:15ch;line-height:1.15;}
  .feature{padding:20px 0;border-top:1px solid var(--cream);}
  .feature:first-child{border-top:none;padding-top:0;}
  .feature h3{font-size:1.1rem;margin-bottom:6px;}
  .feature p{margin:0;font-size:1rem;color:#463f40;}

  /* Dark band — porcelain on cellar dark. Never bordeaux here; it vanishes. */
  .close{background:var(--cellar);padding:72px 0;border-top:none;}
  .close h2{color:var(--porcelain);font-size:clamp(1.6rem,2.8vw,2.2rem);max-width:22ch;margin-bottom:14px;line-height:1.2;}
  .close p{color:var(--cream);max-width:52ch;margin:0 0 28px;font-size:1rem;}
  .close .btn{background:var(--porcelain);color:var(--cellar);}

  /* Contact form — no address in the markup, Turnstile in front of the handler. */
  .contact{padding:64px 0 76px;}
  .contact h2{font-size:1.9rem;margin-bottom:8px;}
  .form{max-width:560px;margin-top:26px;}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--ink);}
  .field input,.field textarea{
    width:100%;padding:11px 13px;font:inherit;font-size:.95rem;
    border:1px solid var(--cream);border-radius:3px;background:#FCFCFB;color:var(--ink);
  }
  .field input:focus,.field textarea:focus{outline:2px solid var(--bordeaux);outline-offset:-1px;border-color:var(--bordeaux);}
  .field textarea{min-height:130px;resize:vertical;}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .form button{
    background:var(--bordeaux);color:var(--porcelain);border:0;
    padding:14px 30px;font:inherit;font-size:.95rem;font-weight:600;
    border-radius:3px;cursor:pointer;
  }
  .form button:hover{opacity:.88;}
  .form button:disabled{opacity:.55;cursor:default;}
  .note{font-size:.82rem;color:var(--tagline);margin-top:14px;}
  .msg{margin-top:16px;padding:13px 16px;border-radius:3px;font-size:.92rem;display:none;}
  .msg.ok{display:block;background:#EDF3EB;border:1px solid #3E6B34;color:#2C4A25;}
  .msg.bad{display:block;background:#F7ECEF;border:1px solid var(--bordeaux);color:var(--bordeaux);}

  footer{padding:26px 0 40px;font-size:.85rem;color:var(--tagline);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

  @media (max-width:820px){
    .wrap{padding:0 22px;}
    .hero{padding:44px 0 56px;}
    .grid3{grid-template-columns:1fr;gap:26px;}
    .what{grid-template-columns:1fr;gap:28px;}
    .what-band{padding:44px 0 56px;}
    .what h2{max-width:none;}
    .row{grid-template-columns:1fr;gap:0;}
    .cta-row{gap:14px;}
    .btn{padding:13px 22px;}
    nav{display:none;}
  }

/* ---- multi-page additions ---- */
nav a.active{border-bottom-color:var(--bordeaux);font-weight:600;}
.page-head{padding:52px 0 8px;}
.page-head h1{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.12;max-width:20ch;margin-bottom:14px;}
.page-head p{font-size:1.08rem;color:#463f40;max-width:56ch;margin:0;}

/* screenshot showcase */
.shots{padding:44px 0 64px;}
.shot-row{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--cream);}
.shot-row:first-of-type{border-top:none;}
.shot-row.flip{grid-template-columns:1fr 400px;}
.shot-row.flip .shot-img{order:2;}
.shot-img{margin:0;}
.shot-img img{width:100%;border-radius:14px;box-shadow:0 12px 32px rgba(26,15,18,.18);display:block;}
.shot-img figcaption{font-size:.78rem;color:var(--tagline);margin-top:10px;text-align:center;}
.shot-copy h3{font-size:1.3rem;margin-bottom:10px;}
.shot-copy p{color:#463f40;margin:0 0 12px;}
.shot-copy ul{margin:0;padding-left:20px;color:#463f40;font-size:.95rem;}
.shot-copy li{margin-bottom:6px;}

/* numbered steps */
.steps{counter-reset:step;padding:12px 0 64px;}
.step{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--cream);}
.step:first-child{border-top:none;}
.step-n{counter-increment:step;font-size:1.5rem;font-weight:700;color:var(--bordeaux);opacity:.5;}
.step-n::before{content:counter(step,decimal-leading-zero);}
.step h3{font-size:1.12rem;margin-bottom:6px;}
.step p{margin:0;color:#463f40;}

/* about */
.about{display:grid;grid-template-columns:1.3fr .7fr;gap:52px;padding:36px 0 64px;}
.about p{color:#463f40;margin:0 0 16px;}
.aside-card{background:#FCFCFB;border:1px solid var(--cream);border-radius:4px;padding:22px;height:max-content;}
.aside-card h3{font-size:.95rem;margin-bottom:12px;}
.aside-card dl{margin:0;font-size:.9rem;}
.aside-card dt{font-weight:600;color:var(--ink);margin-top:12px;}
.aside-card dt:first-child{margin-top:0;}
.aside-card dd{margin:2px 0 0;color:var(--tagline);}

/* dark CTA strip reused across pages */
.strip{background:var(--cellar);padding:56px 0;}
.strip h2{color:var(--porcelain);font-size:1.7rem;margin-bottom:10px;}
.strip p{color:var(--cream);max-width:52ch;margin:0 0 22px;}
.strip .btn{background:var(--porcelain);color:var(--cellar);}

@media (max-width:820px){
  .shot-row,.shot-row.flip{grid-template-columns:1fr;gap:26px;}
  .shot-row.flip .shot-img{order:0;}
  .shot-img img{max-width:330px;margin:0 auto;}
  .about{grid-template-columns:1fr;gap:28px;}
  .step{grid-template-columns:40px 1fr;gap:14px;}
}