/* =====================================================================
   WorkKar Global — terms.html
   Page-only rules for the prose / legal layout. No new tokens, no new
   colours. Local overrides of shared components are marked "override".
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Reading progress rail (fixed, 3px, above the sticky header)
   --------------------------------------------------------------------- */
.read-progress{
  position:fixed;inset:0 0 auto;height:3px;z-index:var(--z-fab);
  pointer-events:none;background:transparent;
}
.read-progress__bar{
  display:block;height:100%;width:0;border-radius:0 2px 2px 0;
  background:var(--grad-ribbon-saffron);box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

/* ---------------------------------------------------------------------
   2. Hero
   --------------------------------------------------------------------- */
.legal-hero .page-hero__inner{align-items:start}
@media (min-width:900px){
  .legal-hero.page-hero--split .page-hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
}
.legal-hero .lead{max-width:56ch}
.legal-hero__note{
  display:flex;gap:10px;align-items:flex-start;margin-top:var(--sp-6);
  padding:12px 16px;border-radius:var(--r-md);
  border:1px dashed var(--saffron-300);background:#fff;
  color:var(--ink-700);font-size:var(--fs-sm);line-height:1.55;max-width:60ch;
}
.legal-hero__note svg{width:18px;height:18px;color:var(--saffron-700);flex:none;margin-top:2px}
.legal-hero__note b{color:var(--saffron-800)}

/* Document facts card */
.legal-facts{padding:clamp(20px,2vw,26px)}
.legal-facts__title{
  font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--sp-4);
  display:flex;align-items:center;gap:8px;
}
.legal-facts__title svg{width:16px;height:16px;color:var(--saffron-700)}
.legal-facts__list{margin:0;display:grid;gap:0}
.legal-facts__list>div{
  display:flex;flex-wrap:wrap;gap:4px var(--sp-4);justify-content:space-between;align-items:baseline;
  padding:10px 0;border-top:1px solid var(--line-soft);
}
.legal-facts__list>div:first-child{border-top:0;padding-top:0}
.legal-facts__list dt{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.legal-facts__list dd{
  margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--ink-800);text-align:right;
}
.legal-facts__ver{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-4);
  font-size:var(--fs-xs);color:var(--text-subtle);
}
.legal-facts__ver::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--forest-500);flex:none;
}

/* ---------------------------------------------------------------------
   3. "Short version" summary band
   --------------------------------------------------------------------- */
.legal-summary .card{display:flex;flex-direction:column;gap:var(--sp-3)}
.legal-summary .feature-tile h3{font-size:16.5px}
.legal-summary__foot{
  margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:var(--sp-4);
  align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:var(--sp-6);
}
.legal-summary__foot p{margin:0;max-width:64ch;font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------------------------------------------------------------------
   4. Table of contents (override: the shared .toc becomes a card)
   --------------------------------------------------------------------- */
.legal-layout .toc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);box-shadow:var(--sh-sm);
}
.legal-layout .toc ol{counter-reset:toc;padding-right:4px}
.legal-layout .toc a{
  display:grid;grid-template-columns:2.1em 1fr;gap:2px;line-height:1.4;padding:7px 8px;
}
.legal-layout .toc a::before{
  counter-increment:toc;content:counter(toc) ".";
  color:var(--text-subtle);font-variant-numeric:tabular-nums;font-weight:600;
}
.legal-layout .toc a.is-active::before{color:var(--saffron-800)}
.toc__grp{
  font-family:var(--font-head);font-size:11.5px;font-weight:600;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-subtle);padding:var(--sp-4) 10px 4px;
}
.toc__grp:first-child{padding-top:0}
.toc__foot{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.toc__foot .btn{width:100%}

/* Mobile "jump to section" select */
.toc-select{margin:0 0 var(--sp-6)}
.toc-select .field__label{display:block;margin-bottom:6px}

/* ---------------------------------------------------------------------
   5. The document itself
   --------------------------------------------------------------------- */
.legal-body{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,3vw,48px);box-shadow:var(--sh-sm);
}
.legal-prose{max-width:74ch}
.legal-prose h2{
  display:flex;gap:.6em;align-items:flex-start;text-wrap:pretty;
  font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem);
}
.legal-sec{scroll-margin-top:calc(var(--header-h) + 24px)}
.legal-sec+.legal-sec{
  margin-top:var(--sp-10);padding-top:var(--sp-10);border-top:1px solid var(--line-soft);
}
.legal-sec>h2:first-child{margin-top:0}
.legal-num{
  flex:none;display:inline-grid;place-items:center;min-width:1.85em;height:1.85em;padding:0 .35em;
  border-radius:var(--r-sm);background:var(--saffron-50);border:1px solid var(--saffron-200);
  color:var(--saffron-800);font-size:.62em;font-weight:700;font-variant-numeric:tabular-nums;
  margin-top:.28em;
}
.legal-part{
  margin:0 0 var(--sp-6);padding:10px 16px;border-radius:var(--r-md);
  background:var(--forest-50);border:1px solid var(--forest-100);
  font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--forest-700);
}
.legal-prose .callout{max-width:none}
.legal-prose dl{margin:var(--sp-5) 0}
.legal-prose dt{font-weight:600;color:var(--heading);margin-top:var(--sp-4)}
.legal-prose dd{margin:4px 0 0}

/* Definition-style list used for "what each setting does" */
.legal-deflist{list-style:none;padding:0;margin:var(--sp-5) 0;display:grid;gap:var(--sp-3)}
.legal-deflist>li{
  margin:0;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ink-50);
}
.legal-deflist b{color:var(--heading);display:block;margin-bottom:2px}

/* Tables scroll inside their own box, never the page */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--sp-6) 0;
  border:1px solid var(--line);border-radius:var(--r-md);
}
.table-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.table-scroll table{margin:0;min-width:560px;border-collapse:collapse;width:100%}
.table-scroll th,.table-scroll td{border:0;border-bottom:1px solid var(--line-soft)}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll th{position:sticky;top:0;z-index:1}
.table-hint{
  display:block;margin:-12px 0 var(--sp-6);font-size:var(--fs-xs);color:var(--text-subtle);
}
@media (min-width:768px){ .table-hint{display:none} }

/* Contact block repeated at the end of the document */
.legal-contact{margin-top:var(--sp-8)}
.legal-contact address{font-style:normal;margin:0}
.legal-contact a{font-weight:600}

/* ---------------------------------------------------------------------
   6. Dark band: exercise your rights
   --------------------------------------------------------------------- */
.rights-band__grid{
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:start;
}
@media (min-width:900px){
  .rights-band__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.rights-card{padding:clamp(20px,2.4vw,30px)}
.rights-card h3{font-size:var(--fs-h4);margin-bottom:var(--sp-2)}
.rights-card address{font-style:normal;font-size:var(--fs-sm);line-height:1.7}
.rights-card__rows{margin:var(--sp-5) 0 0;display:grid;gap:0}
.rights-card__rows>div{
  display:flex;flex-wrap:wrap;gap:4px var(--sp-4);justify-content:space-between;
  padding:10px 0;border-top:1px solid var(--line-dark);font-size:var(--fs-sm);
}
.rights-card__rows dt{margin:0;color:var(--text-on-dark-muted)}
.rights-card__rows dd{margin:0;font-weight:600;color:#fff;text-align:right}
.rights-card__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* ---------------------------------------------------------------------
   7. Print
   --------------------------------------------------------------------- */
@media print{
  .read-progress,.toc,.toc-select,.page-hero__actions,.section--dark,.cta-band,
  .legal-summary__foot .btn,.toc__foot{display:none!important}
  .page-hero{background:#fff;padding-block:0 12pt}
  .page-hero::after{display:none}
  .section{padding-block:10pt}
  .legal-body{border:0;box-shadow:none;padding:0;border-radius:0}
  .legal-prose{max-width:none;font-size:10.5pt;line-height:1.5;color:#000}
  .legal-prose h2{font-size:13pt;break-after:avoid}
  .legal-prose h3{font-size:11.5pt;break-after:avoid}
  .legal-sec+.legal-sec{margin-top:16pt;padding-top:16pt}
  .legal-facts,.callout,.legal-deflist>li,.table-scroll{break-inside:avoid}
  .table-scroll{overflow:visible}
  .table-scroll table{min-width:0}
  .card{box-shadow:none}
  .legal-prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
}

/* ---------------------------------------------------------------------
   8. Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .read-progress__bar{transition:none}
}

/* ---------------------------------------------------------------------
   9. Part headings sit above the first h2 of a part
   --------------------------------------------------------------------- */
.legal-sec>.legal-part+h2{margin-top:0}

/* ---------------------------------------------------------------------
   10. Stepper used as an <ol> in the dark band (override: the shared
       .stepper never resets list styling, and its h3 is forest green,
       which fails on a dark ground)
   --------------------------------------------------------------------- */
.rights-band__grid .stepper{list-style:none;margin:0;padding:0}
.section--dark .stepper__body h3{color:#fff}
.section--dark .stepper__body p{color:var(--text-on-dark-muted)}
.section--dark .stepper__item:not(:last-child)::before{background:rgba(255,255,255,.18)}

/* ---------------------------------------------------------------------
   11. Related-policy link cards (same pattern as refund-policy.css;
       kept local because .policy-link is not a shared component)
   --------------------------------------------------------------------- */
.policy-links{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .policy-links{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .policy-links{grid-template-columns:repeat(4,minmax(0,1fr))} }
.policy-link{
  display:flex;gap:var(--sp-3);align-items:flex-start;text-decoration:none;
  padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-xs);
  transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover),border-color var(--dur-fast);
}
.policy-link:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--saffron-200)}
.policy-link__icon{
  width:40px;height:40px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--saffron-50);color:var(--saffron-700);
}
.policy-link__icon svg{width:20px;height:20px}
.policy-link:nth-child(even) .policy-link__icon{background:var(--forest-50);color:var(--forest-600)}
.policy-link__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.policy-link__body b{font-family:var(--font-head);font-size:15.5px;font-weight:600;color:var(--heading);line-height:1.35}
.policy-link__body span{font-size:13px;color:var(--text-muted);line-height:1.55}
.policy-link__go{width:17px;height:17px;color:var(--ink-400);flex:none;margin-top:12px;transition:transform var(--dur-fast) var(--ease-hover)}
.policy-link:hover .policy-link__go{transform:translateX(3px);color:var(--saffron-700)}

/* ---------------------------------------------------------------------
   12. Small readability fixes inside the document
   --------------------------------------------------------------------- */
.legal-prose ol>li{margin-top:var(--sp-3)}
.legal-prose .callout+h3{margin-top:var(--sp-8)}
.legal-prose address{font-style:normal;line-height:1.75}
.toc__foot .btn svg{width:16px;height:16px}
@media print{ .policy-links,.read-progress{display:none!important} }