/* ============================================================
   PATL DOCUMENT PAGES, terms, privacy, scope, about, contact.

   A SHARED stylesheet, unlike home.html / product.html / deck.html, which each
   carry their own copy. Those three are set pieces: bespoke layouts where the
   duplication buys independence, and one of them prints to PDF from disk. These
   five are the same page five times, a column of prose under the site's nav,
   and five more inlined copies of the token block would guarantee they drift
   apart from each other and from the pages they sit beside.

   Still a separate file from app/globals.css, for the reason next.config.js
   gives: the class names here (.btn, .card, .patl-atmosphere) collide by name
   with the product's, and a stylesheet shared with the app would bleed
   marketing styling into /deals and /login. The tokens are copied from
   product.html verbatim so the seam between a landing page and a legal page is
   invisible; when the brand moves, it moves in both.
   ============================================================ */
:root{
  --patl-steel-500:#4682B4;
  --patl-steel-600:#3A6E99;
  --patl-steel-700:#2F5D7C;
  --patl-steel-800:#244761;
  --patl-copper-500:#B87333;
  --patl-copper-600:#A0632C;
  --patl-copper-700:#8A5626;

  --patl-text-brand:var(--patl-steel-700);
  --patl-text-accent:var(--patl-copper-700);
  --patl-text-primary:#16232E;
  --patl-text-secondary:#4A5C6A;
  --patl-text-muted:#71818E;

  --patl-white:#FFFFFF;
  --patl-neutral-25:#FBFCFD;
  --patl-neutral-50:#F5F8FA;
  --patl-border-subtle:rgba(36,71,97,.09);
  --patl-border-default:rgba(36,71,97,.16);

  --patl-shadow-xs:0 1px 2px rgba(36,71,97,.06), 0 1px 1px rgba(36,71,97,.04);
  --patl-shadow-sm:0 1px 3px rgba(36,71,97,.10), 0 2px 6px rgba(36,71,97,.06);
  --patl-shadow-md:0 2px 6px rgba(36,71,97,.10), 0 8px 20px rgba(36,71,97,.08);
  --patl-shadow-lg:0 4px 10px rgba(36,71,97,.11), 0 16px 36px rgba(36,71,97,.10);
  --patl-highlight-top:inset 0 1px 0 rgba(255,255,255,.75);
  --patl-ring-steel:0 0 0 4px rgba(70,130,180,.32);

  --patl-r-sm:6px; --patl-r-md:10px; --patl-r-lg:14px;
  --patl-r-xl:20px; --patl-r-pill:999px;

  --patl-dur-1:120ms; --patl-dur-2:180ms;
  --patl-ease-out:cubic-bezier(.16,.84,.44,1);

  /* Content fills the shell rather than sitting in a 68ch column. At 68ch every
     page on this stylesheet — about, contact, scope, terms, privacy, resources
     and the fee guide — ran to about 686px inside an 1140px shell and left the
     right third of the page empty, which read as a rendering fault rather than
     as a reading measure.
     Kept as a LENGTH (the shell's own width) rather than `none`: every use of
     this token is a max-width today, but a length still behaves if one of them
     ever becomes a width or lands in a calc(). The shell's 24px gutters mean the
     real text column is 1092px, so this caps nothing and simply gets out of the
     way. Lower this one value to bring the narrow column back everywhere. */
  --patl-shell:1140px;
  --patl-measure:var(--patl-shell);

  --patl-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --patl-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --patl-data:"IBM Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--patl-body);
  font-size:16px;
  line-height:1.7;
  color:var(--patl-text-secondary);
  background:var(--patl-white);
  -webkit-font-smoothing:antialiased;
}

.patl-atmosphere{
  background-color:var(--patl-white);
  background-image:
    radial-gradient(58rem 40rem at 8% 2%,  rgba(70,130,180,.16), transparent 62%),
    radial-gradient(46rem 34rem at 94% 6%, rgba(184,115,51,.12), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

.shell{width:100%;max-width:var(--patl-shell);margin:0 auto;padding:0 24px}

.eyebrow{
  font-family:var(--patl-data);
  font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--patl-text-accent);
  margin:0 0 16px;
}
h1,h2,h3{font-family:var(--patl-display);color:var(--patl-text-primary);letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,4.6vw,52px);font-weight:800;line-height:1.06}
h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.15}
h3{font-size:18px;font-weight:700;line-height:1.3}
p{max-width:var(--patl-measure)}
a{color:var(--patl-text-brand)}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--patl-text-secondary)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--patl-border-subtle);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--patl-text-brand);
  text-decoration:none;transition:color var(--patl-dur-1) var(--patl-ease-out);
}
.nav-links a:hover{color:var(--patl-steel-800)}
.nav-auth{display:flex;align-items:center;gap:10px}
.nav-auth .btn{padding:10px 18px;font-size:14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--patl-body);font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:var(--patl-r-md);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--patl-dur-2) var(--patl-ease-out),
             box-shadow var(--patl-dur-2) var(--patl-ease-out),
             background var(--patl-dur-1) var(--patl-ease-out);
}
.btn-accent{background:var(--patl-copper-500);color:#fff;box-shadow:var(--patl-highlight-top),var(--patl-shadow-sm)}
.btn-accent:hover{background:var(--patl-copper-600);transform:translateY(-2px);box-shadow:var(--patl-highlight-top),var(--patl-shadow-md)}
.btn-primary{background:var(--patl-steel-500);color:#fff;box-shadow:var(--patl-highlight-top),var(--patl-shadow-sm)}
.btn-primary:hover{background:var(--patl-steel-600);transform:translateY(-2px);box-shadow:var(--patl-highlight-top),var(--patl-shadow-md)}
.btn-outline{background:#fff;color:var(--patl-text-brand);border-color:var(--patl-border-default);box-shadow:var(--patl-shadow-xs)}
.btn-outline:hover{border-color:var(--patl-steel-500);transform:translateY(-2px);box-shadow:var(--patl-shadow-sm)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--patl-ring-steel)}

.brandmark{display:block;border:0}
.brandmark-sm{width:63px;height:28px}

/* ---------- the document itself ---------- */
.doc{padding:72px 0 96px}
.doc-head{max-width:var(--patl-measure)}
.doc-head h1{margin-bottom:14px}
.doc-meta{
  font-family:var(--patl-data);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--patl-text-muted);margin:20px 0 0;
}
.doc-body{margin-top:56px;display:grid;gap:44px}
.doc-body section{max-width:var(--patl-measure)}
.doc-body h2{margin-bottom:12px}
.doc-body h3{margin:24px 0 6px}
.doc-body p{margin:0 0 14px}
.doc-body p:last-child{margin-bottom:0}
.doc-body ul,.doc-body ol{margin:0 0 14px;padding-left:22px;max-width:var(--patl-measure)}
.doc-body li{margin-bottom:8px}
.doc-body li:last-child{margin-bottom:0}

/* A defined term, a field name, a scope string. Never decoration. */
.doc-body code{
  font-family:var(--patl-data);font-size:13.5px;
  background:var(--patl-neutral-50);border:1px solid var(--patl-border-subtle);
  border-radius:var(--patl-r-sm);padding:1px 6px;color:var(--patl-text-primary);
}

/* Where the page says what it is NOT. Every one of these five pages needs one,
   and it must not read as body copy. */
.doc-note{
  background:var(--patl-neutral-50);border:1px solid var(--patl-border-subtle);
  border-left:3px solid var(--patl-copper-500);
  border-radius:var(--patl-r-md);padding:18px 22px;max-width:var(--patl-measure);
}
.doc-note p{font-size:14.5px;margin:0}
.doc-note p + p{margin-top:10px}

/* A postal address. Set as an address block rather than a paragraph, because a
   line-wrapped address on a legal page reads as prose and is meant to be
   copied. */
.addr{
  font-style:normal;line-height:1.6;font-size:14.5px;
  color:var(--patl-text-primary);margin:0;
}

/* A two-column definition list: who processes what, what is in scope. */
.doc-table{
  width:100%;border-collapse:collapse;margin:0 0 14px;
  font-size:14.5px;max-width:var(--patl-measure);
}
.doc-table th,.doc-table td{
  text-align:left;vertical-align:top;padding:11px 14px;
  border-bottom:1px solid var(--patl-border-subtle);
}
.doc-table th{
  font-family:var(--patl-data);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--patl-text-muted);font-weight:600;
}
.doc-table tbody th{
  font-family:var(--patl-body);font-size:14.5px;letter-spacing:0;
  text-transform:none;color:var(--patl-text-primary);font-weight:600;width:34%;
}
.doc-tscroll{overflow-x:auto}

/* in / out of scope */
.scope-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:none}
.scope-col{
  background:#fff;border:1px solid var(--patl-border-subtle);
  border-radius:var(--patl-r-lg);padding:24px;box-shadow:var(--patl-shadow-sm);
}
.scope-col.is-out{background:var(--patl-neutral-25);box-shadow:none}
.scope-col h3{margin:0 0 14px}
.scope-col ul{list-style:none;padding:0;margin:0}
.scope-col li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-bottom:1px solid var(--patl-border-subtle);font-size:14.5px;
}
.scope-col li:last-child{border-bottom:0}
.scope-mark{
  flex:none;width:18px;height:18px;margin-top:3px;border-radius:var(--patl-r-pill);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;
  background:var(--patl-steel-500);
}
.scope-col.is-out .scope-mark{background:var(--patl-text-muted)}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:none}
.contact-card{
  background:#fff;border:1px solid var(--patl-border-subtle);
  border-radius:var(--patl-r-lg);padding:24px;box-shadow:var(--patl-shadow-md);
}
.contact-card h3{margin-bottom:6px}
.contact-card p{font-size:14.5px;margin:0 0 14px}
.contact-addr{
  font-family:var(--patl-data);font-size:14px;color:var(--patl-text-brand);
  text-decoration:none;word-break:break-word;
}
.contact-addr:hover{text-decoration:underline}

/* about */
.tl{list-style:none;padding:0;margin:0;max-width:var(--patl-measure)}
.tl li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--patl-border-subtle)}
.tl li:last-child{border-bottom:0}
.tl-dot{flex:none;width:9px;height:9px;margin-top:9px;border-radius:var(--patl-r-pill);background:var(--patl-steel-500)}
.tl-role{font-weight:600;color:var(--patl-text-primary)}
.tl-org{font-size:14px;color:var(--patl-text-muted)}
.logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 28px;margin-top:36px;padding:22px 0;
  border-top:1px solid var(--patl-border-subtle);
  border-bottom:1px solid var(--patl-border-subtle);
}
.logos img{display:block;width:auto;height:auto;max-height:32px;max-width:150px;object-fit:contain;opacity:.88}
.logos img.logo-marriott{max-height:48px}
.logos img.logo-xenia{max-height:50px}
.logos img.logo-universal{max-height:46px}
.logos img.logo-disney{max-height:34px}
.logos img.logo-hyatt{max-height:26px}
.logos-cap{
  font-family:var(--patl-data);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--patl-text-muted);margin-top:12px;opacity:.72;
}

/* ---------- footer ----------
   Four columns: the mark and the legal line, then the links split three
   ways — Product, Company, Legal — instead of the old two (Company/About),
   which put 8 links in one column against 4 in the other. Grid rather than
   flex so every link column shares a baseline whatever its length. Even
   fourths, not a wider mark column — the mark's actual content (a small
   logo and one line of text) never filled a wider track, so the link
   columns sat pushed right with a dead gap between them and the mark. */
footer{padding:44px 0;border-top:1px solid var(--patl-border-subtle);background:var(--patl-neutral-25)}
.foot-in{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px;align-items:start;
}
.foot-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-h{
  font-family:var(--patl-data);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--patl-text-muted);margin:0 0 2px;
}
/* Column layout now, not the old single row. The class name is unchanged so
   the pages that have not been touched still pick up footer styling. */
.foot-links{display:flex;flex-direction:column;gap:10px}
.foot-links a{font-size:13.5px;color:var(--patl-text-brand);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
/* No width cap. The tagline is one line of 12.5px inside its own grid
   column, and 34ch broke it into three for no reason product.html ever
   shared. */
footer small{font-size:12.5px;color:var(--patl-text-muted)}
/* Fills the shell. 80ch is ~600px at this size, so the disclaimer wrapped
   into three lines against 540px of empty space to its right. It is legal
   boilerplate set small and grey, not something anyone reads line by line,
   so the reading measure buys nothing here. */
.disclaim{margin:20px 0 0;font-size:12px;color:var(--patl-text-muted);max-width:none}

@media (max-width:900px){
  .scope-cols,.contact-grid{grid-template-columns:1fr}
  /* The mark keeps its own row; the two link columns stay side by side, which
     is still readable at this width and avoids a four-screen footer. */
  .foot-in{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .nav-links{display:none}
  .doc{padding:48px 0 64px}
  .doc-body{margin-top:40px;gap:36px}
  .logos{justify-content:flex-start;gap:16px 22px}
}