/* The sales pages' shared rules: download, pricing, login, account, start and thanks.
   Carried over from ticket 13's prototype, whose markup these pages reuse (A's download and
   pricing, B's account field list with C's strip above it, C's sign-in and guided /start, A's
   success page). The rest of the site still has no media queries; these pages keep the
   prototype's few, so they work at phone width. */

*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#14172e;background:#0b0e20;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#e07a24;text-decoration:none}
a:hover{color:#c4650f}
img{display:block;max-width:100%}
input,select,button{font-family:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
::selection{background:#e07a24;color:#fff}

.pp-wrap{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}
.pp-narrow{max-width:780px;margin:0 auto;padding:0 24px;width:100%}
.pp-tight{max-width:520px;margin:0 auto;padding:0 22px;width:100%}
.pp-2{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.pp-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pp-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;max-width:640px;margin:0 auto}
.pp-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* grid children default to min-width:auto, which stops a wide table from ever shrinking and
   pushes the whole page sideways on a phone */
.pp-2>*,.pp-3>*,.pp-terms>*{min-width:0}
.pp-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.pp-tbl th,.pp-tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid #e6e2d8;vertical-align:top}
.pp-tbl th{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;color:#7c7f92;border-bottom:1px solid #cfc9ba}
.pp-key{width:230px;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#7c7f92}

/* C's timeline, as the strip above the account page's field list */
.pp-tl{position:relative;display:flex;margin:0 0 4px}
.pp-tl::before{content:'';position:absolute;left:25%;right:25%;top:7px;height:2px;background:#e6e2d8}
.pp-tl>div{position:relative;flex:1;text-align:center;padding:0 8px}
.pp-tl-dot{display:block;width:16px;height:16px;border-radius:50%;border:3px solid #fff;margin:0 auto 12px}

/* A marker for a value nobody has decided yet: the operator fills it, never the page. The legal
   pages' own marker (terms.html), so one look finds both. */
.tbc{background:rgba(224,122,36,.16);border:1px dashed rgba(224,122,36,.6);border-radius:5px;padding:1px 6px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:#c4650f;word-break:break-word}

/* The pricing page's questions: a plain <details>, its marker a + / − on the right */
.pp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:'+';flex:none;font-family:'IBM Plex Mono',monospace;font-size:20px;line-height:1;color:rgba(255,255,255,.55)}
.pp-faq details[open] summary::after{content:'\2212'}

@media (max-width:640px){
  .pp-tl{flex-direction:column;gap:18px;padding-left:6px}
  .pp-tl::before{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .pp-tl>div{text-align:left;padding:0 0 0 28px}
  .pp-tl-dot{position:absolute;left:-1px;top:0;margin:0}
  .pp-key{width:auto}
}
@media (max-width:900px){
  .pp-2,.pp-3,.pp-terms{grid-template-columns:minmax(0,1fr);gap:26px}
  .pp-wrap{padding:0 18px}
  .pp-narrow{padding:0 18px}
  .pp-hide-sm{display:none!important}
}

/* The header, as the landing page draws it (index.html keeps its own copy of these rules). */
/* Where the header's links and Pricing / Sign in no longer fit on one line, the links move into a Menu dropdown. */
.nav-menu,.nav-menu-end{display:none}
@media (max-width:1100px){
.nav-wide{display:none!important}
.nav-menu{display:flex}
}
/* Pricing / Sign in keep to the right edge, as on the sales pages, only where the page is no wider
   than the screen: below that a phone stretches this fixed header to the page's own overflow. */
@media (min-width:641px) and (max-width:1100px){
.nav-end{margin-left:auto}
}
/* A phone: Pricing and Sign in join the Menu, and the bar narrows as the sales pages' does. */
@media (max-width:640px){
.nav-bar{padding:0 18px!important;gap:20px!important}
.nav-menu{margin-left:0!important}
.nav-end{display:none!important}
.nav-menu-end{display:block}
}