/* Shared stylesheet for the three legal/policy pages (Terms and Conditions,
   Privacy Policy, Service Level Agreement) - resources/views/legal/*.blade.php.
   Header/nav/footer rules below are copied from public/css/pages/marketing-about.css
   (same dark-gradient header treatment used on About/How it Works) so these
   pages match the rest of the marketing site rather than introducing a
   fourth visual style. One shared file rather than three near-identical
   per-page files, since all three legal pages use the exact same layout -
   only the prose content differs, and that content comes from the blade
   view, not this stylesheet. */

:root{
  --ok-bg:#FAFAF8;
  --ok-ink:#17171A;
  --ok-black:#0B0B0C;
  --ok-orange-1:#7C2D12;
  --ok-orange-2:#C2410C;
  --ok-orange-3:#FF7A00;
  --ok-orange-light:#FFB347;
  --ok-orange-text:#9A3412;
}
.ok-page *{box-sizing:border-box}
.ok-page{font-family:'Poppins',sans-serif;background:var(--ok-bg);color:var(--ok-ink);overflow-x:hidden}
/* overflow-x:hidden silently turns .ok-page into a scroll container
   (overflow-y computes to auto), and a position:sticky descendant sticks
   relative to its NEAREST scroll container - here .ok-page, which never
   scrolls, so the sidebar TOC below would never track the window scroll.
   overflow-x:clip clips the same way without creating a scroll container. */
@supports (overflow:clip){.ok-page{overflow-x:clip}}
.ok-page a{text-decoration:none;color:inherit}
::selection{background:#FFB347;color:#0B0B0C}

/* --- Header / nav (identical to marketing-about.css) --- */
.ok-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;background:linear-gradient(135deg,rgba(11,11,12,.94) 0%,rgba(23,20,18,.94) 55%,rgba(43,26,18,.94) 100%);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid rgba(255,166,79,.14);box-shadow:0 10px 30px -18px rgba(0,0,0,.6);transition:box-shadow .3s;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.ok-wordmark{font-weight:800;font-size:21px;letter-spacing:-.02em}
.ok-nav-links{display:flex;align-items:center;gap:30px}
.ok-nav-links a{position:relative;font-size:14.5px;font-weight:500;color:#F1EFEC;padding:4px 0;transition:color .15s}
.ok-nav-links a:not(.ok-nav-home)::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ok-orange-light),var(--ok-orange-3));transition:right .25s ease}
.ok-nav-links a:hover{color:var(--ok-orange-light)}
.ok-nav-links a:hover::after{right:0}
.ok-nav-home{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:#F1EFEC;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:50%;transition:color .15s,background .15s,border-color .15s,transform .15s}
.ok-nav-home:hover{color:var(--ok-orange-light);background:rgba(255,166,79,.18);border-color:rgba(255,166,79,.4);transform:translateY(-1px)}
.ok-nav-home:active{transform:scale(.92)}
.ok-nav-mybookings{background:linear-gradient(120deg,var(--ok-orange-text),var(--ok-orange-2));border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.ok-nav-mybookings:hover{background:linear-gradient(120deg,var(--ok-orange-2),var(--ok-orange-3));border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.ok-nav-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,var(--ok-orange-2),var(--ok-orange-3));color:#fff;font-weight:700;font-size:13px;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.ok-mobile-avatar-row{display:flex !important;align-items:center;gap:12px}
.ok-nav-links a.ok-active{font-weight:600;color:var(--ok-orange-light)}
.ok-nav-actions{display:flex;align-items:center;gap:18px}
.ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar){color:#F1EFEC}
.ok-nav-actions a:not(.ok-nav-home):not(.ok-cta-pill):not(.ok-nav-avatar):hover{color:var(--ok-orange-light)}
.ok-cta-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;background:linear-gradient(120deg,var(--ok-orange-text),var(--ok-orange-2));color:#fff;font-weight:600;font-size:14.5px;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s}
.ok-cta-pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.ok-mobile-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;font-size:24px;line-height:1;color:#F1EFEC}
.ok-mobile-menu{position:fixed;inset:0;top:70px;z-index:99;background:linear-gradient(160deg,#0B0B0C 0%,#2B1A12 100%);padding:28px 8vw;display:none;flex-direction:column;gap:22px;overflow-y:auto}
.ok-mobile-menu.is-open{display:flex}
.ok-mobile-menu a{font-size:22px;font-weight:600;color:#F1EFEC}
.ok-mobile-menu .ok-cta-pill{margin-top:8px;text-align:center;padding:16px;font-size:16px;justify-content:center}

/* --- Footer (identical to marketing-about.css) --- */
.ok-footer{background:var(--ok-black);color:rgba(255,255,255,.7);padding:80px 5vw 30px}
.ok-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px;margin-bottom:60px}
.ok-footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ok-footer-desc{font-size:13.5px;line-height:1.7;max-width:280px;margin:0 0 22px}
.ok-footer-social{display:flex;align-items:center;gap:12px}
.ok-footer-social-icon{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex:none}
.ok-footer-social-link{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);text-decoration:none}
.ok-footer-social-link:hover{color:#fff;text-decoration:underline}
.ok-footer-col-title{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px}
.ok-footer-links{display:flex;flex-direction:column;gap:12px}
.ok-footer-links a{font-size:14px;color:rgba(255,255,255,.65)}
.ok-newsletter-row{display:flex;gap:8px}
.ok-newsletter-row input{flex:1;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:13.5px}
.ok-newsletter-row button{padding:12px 16px;border-radius:10px;border:none;background:linear-gradient(120deg,var(--ok-orange-2),var(--ok-orange-3));color:#fff;font-weight:600;cursor:pointer;font-size:16px}
.ok-footer-contact{margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.6)}
.ok-footer-contact a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:2px;transition:color .15s,text-decoration-color .15s}
.ok-footer-contact a:hover{color:#fff;text-decoration-color:#fff}
.ok-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(255,255,255,.45)}
.ok-footer-bottom-links{display:flex;gap:20px}
.ok-footer-bottom-links a{color:rgba(255,255,255,.45)}

@media (max-width: 880px){
  .ok-nav-links,.ok-nav-actions{display:none !important}
  .ok-mobile-toggle{display:block !important}
  .ok-footer-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width: 480px){
  .ok-footer-grid{grid-template-columns:1fr !important}
}

/* --- Legal-page-specific: hero, draft banner, prose, notes panel --- */
.ok-crumb{font-size:13px;color:#8a887f;margin-bottom:18px}
.ok-crumb a{color:#8a887f}
.ok-crumb a:hover{color:var(--ok-orange-text)}

.legal-hero{padding:56px 5vw 8px}
.legal-hero h1{font-size:clamp(30px,4.5vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 14px;max-width:780px}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.legal-meta-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid rgba(11,11,12,.1);color:#5c5b57}

.legal-draft-banner{max-width:840px;margin:0 5vw 40px;padding:18px 22px;border-radius:14px;background:#FFF4E8;border:1px solid #FFD8A8;display:flex;gap:14px;align-items:flex-start}
.legal-draft-banner .legal-draft-icon{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(120deg,var(--ok-orange-2),var(--ok-orange-3));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.legal-draft-banner p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ok-orange-1)}
.legal-draft-banner strong{color:var(--ok-orange-1)}

.legal-doc-wrap{padding:0 5vw 90px;display:flex;flex-direction:column;align-items:center}
.legal-doc{max-width:760px;width:100%;background:#fff;border:1px solid rgba(11,11,12,.08);border-radius:20px;padding:clamp(28px,4vw,56px);box-shadow:0 20px 50px -30px rgba(0,0,0,.15)}
.legal-doc h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.01em;color:var(--ok-black);margin:40px 0 14px;scroll-margin-top:120px}
/* The document's own title, inside the white card, right above its first
   numbered section - added Sep 26, 2026. Originally sized smaller than the
   .legal-hero h1 above the grid, with both showing "Terms and
   Conditions"/"Privacy Policy" at once; the user then asked to drop that
   outer h1 (legal-page-hero's $showTitle=false, see that partial) and make
   this the one on-page title, at the same size the outer h1 used to be.
   Not an h2: it isn't a TOC target and shouldn't join the sticky
   scroll-spy/h2 spacing rules above. */
.legal-doc-title{font-size:clamp(30px,4.5vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--ok-black);margin:0 0 26px;padding-bottom:26px;border-bottom:1px solid rgba(11,11,12,.08)}

/* --- Sidebar table of contents (Sep 26, 2026) ---
   Only pages that render partials/legal-toc.blade.php add the `has-toc`
   modifier to .legal-doc-wrap (currently Terms and Privacy); without it,
   .legal-doc-wrap keeps the original single-column layout above
   (currently the SLA page), so this grid never applies there.

   The base .legal-doc-wrap rule above sets align-items:center for its
   single-column flex layout. That value is INHERITED by this grid, so
   without the explicit reset below every grid item is vertically centered
   in its (article-tall) row: the sidebar landed ~3,000px down the page,
   in the middle of the policy text, which is why the left column looked
   empty. The cell must stay as tall as the article (so the sticky sidebar
   has room to track the scroll) while the sidebar itself hugs the top of
   it - hence align-items:stretch on the grid and align-self:start on the
   sidebar. */
.legal-doc-wrap.has-toc{display:grid;grid-template-columns:280px minmax(0,760px);gap:32px;justify-content:center;align-items:stretch;max-width:1216px;margin:0 auto}

/* Right-hand utility rail (Oct 5, 2026 QA request) - fills the big empty
   side gutters .has-toc's 1216px cap left on wide desktop screens, same
   problem catalog/show.blade.php already solved with its .ok-side-rail
   (see catalog-show.css). Gated to >=1280px, same breakpoint that page
   uses, so this file's base rules above (used at every width up to and
   including 1279px, and still the ONLY rules in effect below 1280px)
   stay byte-for-byte what they were before this change - this block is
   purely additive. .legal-rail defaults to display:none so the markup
   can exist in the DOM below 1280px without affecting layout (same
   pattern as .ok-side-rail's own default in catalog-show.css).

   Column math: TOC 280px (unchanged) + gap 32px + content minmax(0,760px)
   (unchanged - kept capped at 760px for reading-line-length, same as
   before) + gap 32px + rail 280px (new - matched to the TOC's own width
   for visual symmetry, rather than copying catalog's narrower 260px rail,
   since this page's TOC is itself 280px not catalog's 240px) = 1384px
   total. This doesn't erase every pixel of gutter on an ultra-wide
   (1920px+) monitor - the content column is deliberately capped for
   readability per this task's own constraint, which caps how wide the
   whole shell can usefully grow - but it meaningfully narrows the dead
   space by giving it real, useful content instead of leaving it as a
   bare margin, the same trade-off catalog/show.blade.php already made. */
.legal-rail{display:none}
@media (min-width: 1280px){
  /* Oct 5, 2026: widened (was 280 / 760 / 280, max 1384) so the page fills
     large screens; the reading column is capped at 1180px for line length. */
  .legal-doc-wrap.has-toc{grid-template-columns:320px minmax(0,1180px) 340px;gap:48px;max-width:2000px}
  .legal-doc-wrap.has-toc .legal-doc{max-width:none}
  .legal-rail{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px;align-self:start;max-height:calc(100vh - 156px);overflow-y:auto}
}

/* .ok-rail-card/.ok-rail-card-dark/.ok-rail-card-help/etc. below are the
   exact same classes/values catalog-show.css defines for its own right
   rail - reused rather than reinvented for visual consistency (per this
   task's own instruction), safe to duplicate here since legal-document.css
   and catalog-show.css are never loaded on the same page. */
.ok-rail-card{background:#fff;border:1px solid rgba(11,11,12,.08);border-radius:18px;padding:22px;box-shadow:0 16px 34px -22px rgba(11,11,12,.18)}
.ok-rail-card-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a887f;margin-bottom:14px}
.ok-rail-list{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.5;color:#3a3936;display:flex;flex-direction:column;gap:12px}
.ok-rail-list li{position:relative;padding-left:24px}
.ok-rail-list li::before{content:"\2713";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--ok-orange-2);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.ok-rail-links{display:flex;flex-direction:column}
.ok-rail-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;font-size:13.5px;font-weight:600;color:var(--ok-ink);border-bottom:1px solid rgba(11,11,12,.06);transition:color .15s}
.ok-rail-link:last-child{border-bottom:none;padding-bottom:0}
.ok-rail-link:hover{color:var(--ok-orange-text)}
.ok-rail-link-arrow{color:#c7c4ba;transition:transform .15s,color .15s}
.ok-rail-link:hover .ok-rail-link-arrow{color:var(--ok-orange-text);transform:translateX(2px)}
/* .is-current - new, not in catalog-show.css (that page never links to
   its own current service) - marks the "Related policies" entry for the
   page you're already on as disabled/inert rather than a pointless
   self-link, per this task's own requirement. */
.ok-rail-link.is-current{color:#c7c4ba;cursor:default;pointer-events:none}
.ok-rail-card-dark{background:linear-gradient(135deg,rgba(11,11,12,.96) 0%,rgba(23,20,18,.96) 55%,rgba(43,26,18,.96) 100%);border-color:transparent}
.ok-rail-card-title-light{color:var(--ok-orange-light)}
.ok-rail-list-light{color:#F1EFEC}
.ok-rail-card-help{text-align:left}
.ok-rail-help-text{font-size:13px;line-height:1.6;color:#5c5b57;margin:0 0 16px}
.ok-rail-help-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 16px;border-radius:999px;background:linear-gradient(120deg,var(--ok-orange-text),var(--ok-orange-2));color:#fff;font-size:13.5px;font-weight:700;margin-bottom:10px;transition:transform .15s,box-shadow .15s}
.ok-rail-help-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(154,52,18,.5)}
/* top:120px, not 96px - the .ok-header this sticks below is itself ~90px
   tall, so 96px only left a ~6px sliver between them (reported as "too
   close" when scrolling). 120px gives it real breathing room; the h2
   scroll-margin-top and the JS's ACTIVATE_AT/HEADER_OFFSET above are kept
   in step with this value so the sticky position, the scroll-spy trigger
   line, and the click-to-scroll landing spot all agree. max-height is
   adjusted to match (100vh - offset - 16px bottom gap). */
.legal-toc{align-self:start;position:sticky;top:120px;background:#fff;border:1px solid rgba(11,11,12,.08);border-radius:20px;padding:24px 16px 16px;box-shadow:0 20px 50px -30px rgba(0,0,0,.15);max-height:calc(100vh - 156px);overflow-y:auto}
.legal-toc-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8a887f;margin:0 10px 14px}
.legal-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.legal-toc-link{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:500;line-height:1.35;color:#5c5b57;transition:background .15s,color .15s}
.legal-toc-num{flex:none;width:24px;height:24px;border-radius:50%;background:#F4F2ED;color:#8a887f;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.legal-toc-link:hover{background:#F8F5EF;color:var(--ok-black)}
.legal-toc-link.is-active{background:#FFF4E8;color:var(--ok-orange-text);font-weight:600}
.legal-toc-link.is-active::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--ok-orange-2),var(--ok-orange-3))}
.legal-toc-link.is-active .legal-toc-num{background:linear-gradient(120deg,var(--ok-orange-2),var(--ok-orange-3));color:#fff}

@media (max-width: 980px){
  .legal-doc-wrap.has-toc{display:flex;flex-direction:column;align-items:stretch;max-width:none}
  /* min-width:0 - as a flex item the card otherwise grows to its nowrap
     content's width and overflows the viewport instead of scrolling. */
  .legal-toc{position:static;max-height:none;order:-1;padding:16px;min-width:0;max-width:100%}
  .legal-toc-title{margin-left:4px}
  .legal-toc-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .legal-toc-list li{flex:none}
  .legal-toc-link{white-space:nowrap}
  .legal-toc-link.is-active::before{display:none}
}.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:16.5px;font-weight:700;color:var(--ok-orange-text);margin:26px 0 10px}
.legal-doc p{font-size:15px;line-height:1.75;color:#3a3936;margin:0 0 16px}
.legal-doc ul,.legal-doc ol{margin:0 0 16px;padding-left:22px;font-size:15px;line-height:1.75;color:#3a3936}
.legal-doc li{margin-bottom:8px}
.legal-doc li > p{margin:0}
.legal-doc strong{color:var(--ok-black)}
.legal-doc hr{border:none;border-top:1px solid rgba(11,11,12,.08);margin:8px 0 32px}
.legal-doc code{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:13px;background:#F4F2ED;border:1px solid rgba(11,11,12,.08);border-radius:5px;padding:1px 6px;color:var(--ok-orange-1)}
.legal-doc table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:13.5px}
.legal-doc th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#8a887f;padding:10px 12px;border-bottom:2px solid rgba(11,11,12,.1)}
.legal-doc td{padding:12px;border-bottom:1px solid rgba(11,11,12,.06);line-height:1.55;color:#3a3936;vertical-align:top}

/* .legal-notes-panel rules removed (Sep 23, 2026, code review finding #1) -
   the CEO/legal review notes panel these styled was removed from all three
   legal/*.blade.php views for exposing internal detail on a public,
   unauthenticated route. See those views' own docblocks. */

@media (max-width: 640px){
  .legal-doc{padding:26px 20px;border-radius:16px}
}

/* Scroll-progress bar (Oct 5, 2026 QA request) - thin bar fixed just
   below the sticky .ok-header, filling with the brand orange gradient as
   the reader scrolls through the document content. Markup is injected
   entirely by legal-document.js (only when that script's existing
   has-toc no-op guard passes), not written into either Blade view - see
   that file. top:90px matches the ~90px header height this same
   stylesheet's .legal-toc/.legal-doc h2 sticky-offset comments already
   document and rely on, so this sits flush under the header at every
   width this page supports, never overlapping it. Applies at every
   width (not gated to >=1280px like the rail above) since it's a thin,
   harmless 3px strip - but it only ever renders on a has-toc page
   (Terms/Privacy), never SLA, because the JS that creates it no-ops
   there. */
/* Oct 5, 2026: hidden at the user's request (orange line under the header). Markup/JS left in place so it can be restored by deleting this one line. */
.legal-scroll-progress{display:none !important}
.legal-scroll-progress{position:fixed;top:90px;left:0;width:100%;height:3px;background:rgba(11,11,12,.06);z-index:99;pointer-events:none}
.legal-scroll-progress-fill{height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--ok-orange-2),var(--ok-orange-3));transition:transform .12s linear}
@media (prefers-reduced-motion: reduce){
  .legal-scroll-progress-fill{transition:none}
}