/* Shared chrome for the Claude Design pages (/, /trial, /makeover).
   Layout stays inline so it matches the design file. This file is the
   responsive nav, hover, and checkout states. */
* { box-sizing: border-box; }
body { margin: 0; background: #F4EFE5; }
a { color: #1F4A3D; }
a:hover { color: #173A30; }
::selection { background: #1F4A3D; color: #FBF8F0; }

.pp-nav-links { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.pp-burger { display: none; }
.pp-mobile-menu { display: none; }
.pp-btn:hover { background: #173A30 !important; color: #FBF8F0 !important; }
.pp-btn-light:hover { background: #FFFFFF !important; color: #173A30 !important; }
.pp-btn-ghost:hover { background: #1F4A3D !important; color: #FBF8F0 !important; }
.pp-nav-links a:hover { color: #1F4A3D; }
[data-loading="true"] { opacity: 0.8; cursor: progress; }
.cta-error { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #b23b2e; margin: 10px 0 0; }
.pp-tab[aria-selected="true"] { border: 1.5px solid #1D2B45; background: #1D2B45; color: #FFFFFF; }
.pp-tab[aria-selected="false"] { border: 1px solid rgba(33,31,26,0.2); background: #FBF8F0; color: #211F1A; }
.pp-tab[aria-selected="false"]:hover { border-color: #1D2B45; }
[hidden] { display: none !important; }

@media (max-width: 880px) {
  .pp-nav-links { display: none !important; }
  .pp-burger { display: inline-flex !important; }
  .pp-mobile-menu[data-open="true"] { display: flex !important; }
}