/* Otto — the shared design system for the marketing site.
 *
 * Extracted from index.html when the site went from one long page to several.
 * Five pages rendering the same shell from five copies of this file is how the
 * nav ends up different on one of them, so it lives here once. The legal pages
 * (terms, privacy, refunds) and the app pages (connect, billing, dashboard)
 * still carry their own inline CSS — they are not part of this shell and
 * rewriting them was not worth the risk.
 */
:root{
    /* Paper, not screen. Warm cream with a near-black warm ink — the two
       colours do almost all the work, which is what lets one accent mean
       something when it appears. */
    --paper:#f2ece1; --paper-2:#e9e0d0; --paper-3:#ded2be;
    --ink:#15120d; --ink-soft:#4b4337; --ink-faint:#756a5b;
    --rust:#b03d10; --gold:#9a7415;
    --rule:rgba(21,18,13,.16); --rule-soft:rgba(21,18,13,.08);

    --serif:"Fraunces",Georgia,serif;
    --sans:"Inter",-apple-system,system-ui,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

    --rail:76px;               /* the vertical text margin */
    --pad:clamp(20px,4vw,64px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* overflow-x on body alone does not stop the document scrolling — the
     ticker is wider than the viewport by design, so html has to clip too. */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
  body{
    background:var(--paper); color:var(--ink); font-family:var(--sans);
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--rust);color:var(--paper)}
  a{color:inherit}
  img,video{display:block;max-width:100%}

  /* ---- shared type ------------------------------------------------------ */
  .meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
  .display{font-family:var(--serif);font-weight:600;line-height:.96;letter-spacing:-.025em;font-optical-sizing:auto}
  h2.display{font-size:clamp(2.2rem,5.4vw,4rem)}
  .lede{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.55;color:var(--ink-soft);max-width:40ch}

  /* ---- the rail: vertical type down the left edge ----------------------- */
  .rail{
    position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
    border-right:1px solid var(--rule);background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    padding:22px 0;
  }
  .rail .mark{font-family:var(--serif);font-weight:700;font-size:1.1rem;letter-spacing:-.02em}
  .rail .mark i{font-style:italic;color:var(--rust)}
  .rail .vert{
    writing-mode:vertical-rl; text-orientation:mixed;
    font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--ink-faint);
  }
  .rail .dot{width:7px;height:7px;background:var(--rust)}
  body{padding-left:var(--rail)}
  @media(max-width:820px){ .rail{display:none} body{padding-left:0} }

  /* ---- top nav ---------------------------------------------------------- */
  nav.top{
    position:sticky;top:0;z-index:50;background:var(--paper);
    border-bottom:1px solid var(--rule);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--pad);height:62px;
  }
  nav.top .links{display:flex;gap:28px}
  nav.top a{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
    text-decoration:none;color:var(--ink-soft);transition:color .2s}
  nav.top a:hover{color:var(--rust)}
  nav.top .brand{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;display:none}
  /* A brand, five links and a CTA do not fit on one 375px row — they forced
     429px of content into a 375px viewport. Below 760px the bar becomes two
     rows and the links scroll horizontally, so navigation survives instead of
     being deleted on the devices most owners will open this on. */
  @media(max-width:760px){
    nav.top{height:auto;flex-wrap:wrap;padding:10px var(--pad) 0;row-gap:8px}
    nav.top .brand{display:block;font-size:1rem}
    nav.top .cta{padding:9px 14px;font-size:.62rem;margin-left:auto}
    nav.top .links{
      order:3;width:100%;gap:20px;overflow-x:auto;padding:9px 0;
      border-top:1px solid var(--rule-soft);scrollbar-width:none;
    }
    nav.top .links::-webkit-scrollbar{display:none}
    nav.top a{font-size:.62rem;white-space:nowrap}
  }
  .cta{
    font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);text-decoration:none;padding:11px 20px;
    display:inline-flex;align-items:center;gap:10px;transition:background .2s;
  }
  .cta:hover{background:var(--rust)}
  .cta .arrow{width:15px;height:1px;background:currentColor;position:relative}
  .cta .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
    border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

  /* ---- hero: hard asymmetric split -------------------------------------- */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100svh - 62px);border-bottom:1px solid var(--rule)}
  .hero-copy{padding:clamp(38px,6vw,86px) var(--pad) clamp(30px,4vw,54px);display:flex;flex-direction:column;justify-content:center}
  .hero-copy .meta{color:var(--rust);margin-bottom:26px}
  .hero h1{font-family:var(--serif);font-weight:600;font-optical-sizing:auto;
    font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:.94;letter-spacing:-.032em;margin-bottom:22px}
  .hero h1 em{font-style:italic;font-weight:300;color:var(--rust);display:block}
  .hero .lede{margin-bottom:34px}
  .hero-actions{display:flex;gap:0;align-items:stretch;flex-wrap:wrap;border:1px solid var(--ink);width:max-content;max-width:100%}
  .hero-actions a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;padding:15px 24px;transition:background .2s,color .2s}
  .hero-actions a:first-child{background:var(--ink);color:var(--paper)}
  .hero-actions a:first-child:hover{background:var(--rust)}
  .hero-actions a:last-child{border-left:1px solid var(--ink)}
  .hero-actions a:last-child:hover{background:var(--ink);color:var(--paper)}
  /* This is a sentence, not a label. Uppercase letter-spaced mono is for two
     or three words — a whole sentence set that way stops being readable and
     starts looking like a console warning. */
  .hero-foot{margin-top:30px;font-size:.92rem;color:var(--ink-faint);line-height:1.6;max-width:38ch}

  /* The dark panel. The one place the old site's ember palette survives —
     as a block of contrast against the paper, not as the whole page. */
  /* Was an abstract video with invented statistics laid over it. A cloud has
     nothing to do with a coffee shop's bookings, and numbers a visitor cannot
     verify should not be dressed as a live readout. This is the thing the
     product actually makes, set in type, and labelled as an example. */
  .hero-panel{background:var(--ink);color:var(--paper);border-left:1px solid var(--ink);
    display:flex;align-items:center;padding:clamp(30px,4vw,58px)}
  .brief{max-width:44ch}
  .brief-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
    color:#e9a24a;display:block;margin-bottom:22px}
  .brief h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);
    letter-spacing:-.02em;margin-bottom:10px}
  .brief p{color:rgba(242,236,225,.76);font-size:.95rem;margin-bottom:18px}
  .brief ol{list-style:none;counter-reset:b;margin-bottom:20px}
  .brief li{counter-increment:b;position:relative;padding:0 0 16px 30px;
    font-size:.93rem;color:rgba(242,236,225,.76);line-height:1.6}
  .brief li::before{content:counter(b,decimal-leading-zero);position:absolute;left:0;top:1px;
    font-family:var(--mono);font-size:.66rem;color:#e9a24a}
  .brief li b{color:var(--paper);font-weight:600}
  .brief-foot{border-top:1px solid rgba(242,236,225,.22);padding-top:16px;
    font-size:.86rem;color:rgba(242,236,225,.55);margin-bottom:0}
  @media(max-width:960px){
    .hero{grid-template-columns:1fr;min-height:0}
    .hero-panel{min-height:44vh;border-left:0;border-top:1px solid var(--ink)}
  }

  /* ---- mono ticker ------------------------------------------------------ */
  .ticker{border-bottom:1px solid var(--rule);background:var(--paper-2);overflow:hidden;padding:13px 0}
  .ticker-track{display:flex;width:max-content;animation:slide 46s linear infinite}
  .ticker span{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--ink-soft);white-space:nowrap;padding:0 22px}
  .ticker i{font-style:normal;color:var(--rust);padding:0 4px}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* ---- section frame ---------------------------------------------------- */
  section{padding:clamp(58px,8vw,116px) var(--pad);border-bottom:1px solid var(--rule);position:relative}
  .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);
    align-items:end;margin-bottom:clamp(38px,5vw,64px)}
  .head .meta{color:var(--rust);margin-bottom:16px;display:block}
  @media(max-width:820px){ .head{grid-template-columns:1fr;align-items:start} }

  /* ---- the agent index: rows, not cards --------------------------------- */
  .index{border-top:1px solid var(--ink)}
  .row{
    display:grid;grid-template-columns:64px minmax(150px,1.05fr) minmax(0,2.1fr) minmax(0,1.15fr);
    gap:clamp(14px,2.4vw,34px);align-items:baseline;
    padding:20px 0;border-bottom:1px solid var(--rule-soft);
    transition:background .18s,padding-left .18s;
  }
  .row:hover{background:var(--paper-2);padding-left:12px}
  .row .n{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);letter-spacing:.08em}
  .row .name{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:-.015em;line-height:1.2}
  .row .name .tag{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--rust);font-weight:500;margin-top:5px}
  .row .what{color:var(--ink-soft);font-size:.94rem}
  .row .hands{font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
  .row .hands span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--rust);margin-bottom:3px}
  @media(max-width:900px){
    .row{grid-template-columns:44px 1fr;gap:6px 16px;padding:18px 0}
    .row .what{grid-column:2}
    .row .hands{grid-column:2;margin-top:4px}
  }

  /* ---- full-bleed inverted statement ------------------------------------ */
  .statement{
    background:var(--ink);color:var(--paper);padding:clamp(64px,9vw,132px) var(--pad);
    border-bottom:0;
  }
  .statement .meta{color:#e9a24a;margin-bottom:26px;display:block}
  .statement blockquote{font-family:var(--serif);font-weight:300;font-style:italic;
    font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-.02em;max-width:19ch}
  .statement .rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:clamp(20px,4vw,54px);margin-top:clamp(40px,5vw,72px);border-top:1px solid rgba(242,236,225,.22);padding-top:34px}
  .statement .rules h3{font-family:var(--serif);font-size:1.12rem;font-weight:600;
    letter-spacing:-.01em;color:var(--paper);margin-bottom:10px}
  .statement .rules h3 span{display:block;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.18em;color:#e9a24a;font-weight:500;margin-bottom:7px}
  .statement .rules p{color:rgba(242,236,225,.76);font-size:.94rem}

  /* ---- conductor demo --------------------------------------------------- */
  .cond{border-top:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .cond-side{padding:clamp(28px,4vw,44px) clamp(24px,3vw,40px) clamp(28px,4vw,44px) 0;border-right:1px solid var(--rule)}
  .cond-main{padding:clamp(28px,4vw,44px) 0 clamp(28px,4vw,44px) clamp(24px,3vw,40px)}
  @media(max-width:900px){
    .cond{grid-template-columns:1fr}
    .cond-side{border-right:0;border-bottom:1px solid var(--rule);padding:26px 0}
    .cond-main{padding:26px 0 0}
  }
  .plans-toggle{display:flex;border:1px solid var(--ink);width:max-content;margin-bottom:22px}
  .plans-toggle button{font:inherit;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
    text-transform:uppercase;background:none;border:0;padding:10px 15px;cursor:pointer;color:var(--ink-soft)}
  .plans-toggle button + button{border-left:1px solid var(--ink)}
  .plans-toggle button.on{background:var(--ink);color:var(--paper)}
  .cond-log{min-height:150px;display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
  .msg{max-width:92%;font-size:.95rem;line-height:1.55}
  .msg.you{align-self:flex-end;background:var(--ink);color:var(--paper);padding:11px 15px}
  .msg.bot{align-self:flex-start;background:var(--paper-2);border-left:2px solid var(--rust);padding:13px 16px}
  .msg.bot .routed{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
  .msg.bot .agent{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--rust);color:var(--paper);padding:4px 9px}
  .msg.bot .arrow{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);align-self:center;text-transform:uppercase}
  .msg.bot .why{color:var(--ink-soft)}
  .msg.bot .locked{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule);
    font-size:.85rem;color:var(--ink-faint)}
  .msg.bot .locked b{color:var(--ink)}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .chips button{font:inherit;font-size:.8rem;text-align:left;background:none;border:1px dashed var(--rule);
    padding:7px 11px;cursor:pointer;color:var(--ink-soft);transition:border-color .2s,color .2s}
  .chips button:hover{border-color:var(--rust);color:var(--rust)}
  .cond-form{display:flex;border:1px solid var(--ink)}
  .cond-form input{flex:1;min-width:0;font:inherit;font-size:.95rem;background:none;border:0;padding:14px 16px;color:var(--ink)}
  .cond-form input:focus{outline:2px solid var(--rust);outline-offset:-2px}
  .cond-form button{font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);border:0;padding:0 22px;cursor:pointer;transition:background .2s}
  .cond-form button:hover{background:var(--rust)}
  .cond-form input:disabled,.cond-form button:disabled{opacity:.55}
  .dots span{display:inline-block;width:5px;height:5px;margin-right:4px;background:var(--ink-faint);
    animation:blink 1.2s infinite}
  .dots span:nth-child(2){animation-delay:.18s}
  .dots span:nth-child(3){animation-delay:.36s}
  @keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}


  /* ---- check lists and steps -------------------------------------------- */
  .checks{list-style:none;border-top:1px solid var(--ink);max-width:78ch}
  .checks li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--rule-soft);
    color:var(--ink-soft);font-size:.98rem}
  .checks li::before{content:"";position:absolute;left:0;top:26px;width:16px;height:1px;background:var(--rust)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
  .step{padding:28px clamp(18px,2.4vw,34px) 8px}
  .step + .step{border-left:1px solid var(--rule)}
  .step-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--rust);display:block;margin-bottom:14px}
  .step h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;margin-bottom:9px}
  .step p{color:var(--ink-soft);font-size:.93rem}
  @media(max-width:820px){
    .steps{grid-template-columns:1fr}
    .step{padding:26px 0 8px}
    .step + .step{border-left:0;border-top:1px solid var(--rule)}
  }

  /* ---- pricing: hairline columns ---------------------------------------- */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
  .plan{padding:34px clamp(18px,2.4vw,34px) 30px;position:relative;display:flex;flex-direction:column}
  .plan + .plan{border-left:1px solid var(--rule)}
  .plan .tier{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:6px}
  .plan .amount{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1}
  .plan .per{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}
  .plan .note{font-size:.84rem;color:var(--ink-faint);margin:12px 0 22px}
  .plan ul{list-style:none;flex:1;margin-bottom:26px}
  .plan li{font-size:.92rem;color:var(--ink-soft);padding:7px 0 7px 17px;position:relative}
  .plan li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--rust)}
  .plan .badge{position:absolute;top:12px;left:clamp(18px,2.4vw,34px);
    font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
  .plan .pick{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;border:1px solid var(--ink);padding:12px 18px;text-align:center;transition:background .2s,color .2s}
  .plan .pick:hover{background:var(--ink);color:var(--paper)}
  .plans-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
    font-size:.9rem;color:var(--ink-soft);max-width:62ch}
  @media(max-width:820px){
    .plans{grid-template-columns:1fr}
    .plan{padding:34px 0 30px}
    .plan + .plan{border-left:0;border-top:1px solid var(--rule)}
  }

  /* ---- faq -------------------------------------------------------------- */
  .faq{border-top:1px solid var(--ink)}
  details{border-bottom:1px solid var(--rule-soft)}
  summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
    font-family:var(--serif);font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";position:absolute;right:6px;top:26px;width:11px;height:1px;background:var(--ink)}
  summary::before{content:"";position:absolute;right:11px;top:21px;width:1px;height:11px;background:var(--ink);transition:opacity .2s}
  details[open] summary::before{opacity:0}
  details .a{padding:0 0 20px;color:var(--ink-soft);font-size:.95rem;max-width:70ch}

  /* ---- footer ----------------------------------------------------------- */
  footer{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,96px) var(--pad) 40px}
  footer .meta{color:#e9a24a;display:block;margin-bottom:22px}
  footer h2{font-family:var(--serif);font-weight:300;font-style:italic;
    font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
  footer p{color:rgba(242,236,225,.72);max-width:46ch;margin-bottom:30px}
  .signup{display:flex;border:1px solid rgba(242,236,225,.34);max-width:460px}
  .signup input{flex:1;min-width:0;font:inherit;background:none;border:0;padding:14px 16px;color:var(--paper)}
  .signup input::placeholder{color:rgba(242,236,225,.4)}
  .signup input:focus{outline:2px solid #e9a24a;outline-offset:-2px}
  .signup button{font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--paper);color:var(--ink);border:0;padding:0 20px;cursor:pointer}
  .foot-rule{margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid rgba(242,236,225,.22);
    display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
    font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,236,225,.5)}
  .foot-rule a{text-decoration:none}
  .foot-rule a:hover{color:#e9a24a}


  @media(prefers-reduced-motion:reduce){ .ticker-track{animation:none} .dots span{animation:none} }

/* Doors — the front page's four ways in ------------------------------------
   The landing page is a door, not the building: one sentence each and a link.
   Reused verbatim on the 404, which has the same job. */
.hero-short{grid-template-columns:1fr;min-height:auto;padding-bottom:clamp(40px,6vw,80px)}
.hero-short .hero-copy{max-width:62ch}

.doors{
  display:grid;gap:1px;background:var(--rule-soft);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.door{
  background:var(--paper);padding:clamp(22px,2.6vw,34px);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:9px;
  transition:background .18s ease;
}
.door:hover{background:var(--paper-2)}
.door-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-faint)}
.door h3{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.72rem);font-weight:500;line-height:1.12}
.door p{color:var(--ink-soft);font-size:.94rem;line-height:1.55;flex:1}
.door-go{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rust);margin-top:5px;
}
.door-go::after{content:" \2192"}

.door-try{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;padding:clamp(24px,3vw,38px) 0 0;
}
.door-try p{color:var(--ink-soft);font-size:1rem;max-width:52ch}

/* The current page, marked in the nav. Without it there is no way to tell
   which of five pages you are on. */
nav.top .links a.on{color:var(--ink)}
nav.top .links a.on::after{transform:scaleX(1)}
a.brand{text-decoration:none;color:inherit}

/* The nav links scroll sideways when they do not fit — which they do not on a
   phone. It already worked; nothing said so. The fade on the right edge is the
   only cue that there is more nav past the edge, and it is the front page's
   whole job now, so a hidden link is a page nobody visits. */
nav.top .links{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  scrollbar-width:none;
}
nav.top .links::-webkit-scrollbar{display:none}
@media (min-width:900px){
  /* No fade once they all fit, or the last link looks permanently faded. */
  nav.top .links{-webkit-mask-image:none;mask-image:none}
}