/* The stylesheet of the PUBLIC SITE pages (resources/views/public/site.blade.php, front.blade.php, legal.blade.php): the front page and the legal documents. It sits on top of share-public.css, which carries the design tokens'
   values (light, and dark by the OS preference), Poppins (self-hosted), the base typography, the button (.share-button) and the focus ring, and adds only the page frame: header, hero, sections, footer, document text.
   Same-origin only, no inline style (the CSP is `default-src 'self'`). TOKENS ONLY: every colour, radius and shadow below is a custom property from share-public.css, so a white-label theme swaps them with no change here.
   Logical properties only (inline/block), so a right-to-left language needs no rework. Targets are at least 44 px. Layout: one column under 860 px (the pack's phone breakpoint). */

.front-wrap{max-inline-size:1040px;margin-inline:auto;padding-inline:20px}

.front-skip{position:absolute;inset-inline-start:12px;inset-block-start:-100px;z-index:10;padding:10px 16px;background:var(--surface);color:var(--navy);border:2px solid var(--teal);border-radius:var(--r-sm);font-weight:500}
.front-skip:focus{inset-block-start:12px}

/* header: the framed bar of the pack (.appbar on the frame colour) */
.front-header{background:var(--frame);border-block-end:1px solid var(--frame-2)}
.front-header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:8px}
.front-brand{display:inline-flex;align-items:center;min-block-size:44px;font-weight:600;font-size:1.15rem;color:var(--frame-hi);text-decoration:none}
.front-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.front-nav ul{display:flex;flex-wrap:wrap;gap:0 4px;margin:0;padding:0;list-style:none}
.front-nav li a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:10px;color:var(--frame-ink);text-decoration:none;font-size:.95rem}
.front-nav li a:hover{color:var(--frame-hi);text-decoration:underline}
.front-header :focus-visible,.front-hero :focus-visible{outline-color:var(--frame-hi)}
.front-signin{text-decoration:none}

/* hero: the pack's .pub-hero band (brand colour, light text) */
.front-hero{background:var(--hero-bg);color:var(--hero-ink)}
.front-hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-block:72px 64px}
.front-hero h1{max-inline-size:20ch;color:var(--hero-ink);font-size:2.6rem;line-height:1.15}
.front-lead{max-inline-size:62ch;color:var(--frame-ink);font-size:1.15rem;line-height:1.6}
.front-actions{display:flex;flex-wrap:wrap;gap:12px}
.front-cta{background:var(--frame-hi);color:var(--frame);text-decoration:none}
.front-cta:hover{background:var(--frame-ink)}
.front-ghost{background:transparent;color:var(--frame-hi);border-color:var(--frame-ink-2);text-decoration:none}
.front-ghost:hover{background:var(--frame)}
.front-hero-note{max-inline-size:62ch;color:var(--frame-ink);font-size:.95rem}

/* sections */
.front-section{padding-block:56px}
.front-section-alt{background:var(--surface-2);border-block:1px solid var(--line)}
.front-section [id],.front-section{scroll-margin-block-start:8px}
.front-section h2{font-size:1.6rem;line-height:1.3}
.front-section h3{margin-block-end:4px}
.front-intro{max-inline-size:62ch;margin-block:8px 28px;color:var(--text-2)}
.front-statement{max-inline-size:62ch;margin-block-start:14px;color:var(--text);font-weight:500}
.front-section h3+p{color:var(--text-2)}
.front-section h3:not(:first-child){margin-block-start:20px}

/* the four steps: a numbered list, the number drawn by CSS (the list stays an ordered list for assistive technology) */
.front-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:step}
.front-steps li{counter-increment:step;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-inline-size:0}
.front-steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;inline-size:32px;block-size:32px;margin-block-end:10px;border-radius:50%;background:var(--navy-soft);color:var(--navy);font-weight:600}
.front-steps p{color:var(--text-2);font-size:.95rem}

.front-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.front-grid li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-inline-size:0}
.front-grid p{color:var(--text-2);font-size:.95rem}

/* the five amounts: a definition list; the accent bar is the NEUTRAL line colour, never a status colour (those are fixed per status in the app, not here) */
.front-amounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.front-amounts.front-amounts-aside{grid-template-columns:minmax(0,1fr);margin-block-start:12px}
.front-amounts div{background:var(--surface);border:1px solid var(--line);border-block-start:4px solid var(--line-strong);border-radius:var(--r);padding:14px;min-inline-size:0}
.front-amounts dt{font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.front-amounts dd{margin:4px 0 0;color:var(--text-2);font-size:.9rem;overflow-wrap:anywhere}

/* footer */
.front-footer{padding-block:32px 48px;background:var(--surface);border-block-start:1px solid var(--line)}
.front-legal{display:flex;flex-wrap:wrap;gap:0 8px;margin:0 0 8px;padding:0;list-style:none}
.front-legal a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:4px}
.front-small{max-inline-size:70ch;margin-block-start:8px;font-size:.9rem;color:var(--text-2)}

/* a legal document */
.front-doc{padding-block:40px 64px;max-inline-size:820px}
.front-doc h1{margin-block-end:20px}
.front-banner{margin-block-end:20px;padding:12px 16px;border:1px solid var(--line-strong);border-inline-start:6px solid var(--red);border-radius:var(--r-sm);background:var(--red-soft);color:var(--text);font-weight:600}
.front-prose{color:var(--text);overflow-wrap:anywhere}
.front-prose h2{margin-block:28px 8px;font-size:1.3rem}
.front-prose h3{margin-block:20px 6px}
.front-prose h4,.front-prose h5,.front-prose h6{margin-block:16px 4px;font-size:1rem;font-weight:600;color:var(--navy)}
.front-prose p,.front-prose ul,.front-prose ol,.front-prose blockquote,.front-prose pre{margin-block:0 12px}
.front-prose ul,.front-prose ol{padding-inline-start:24px}
.front-prose blockquote{padding-inline-start:14px;border-inline-start:3px solid var(--line-strong);color:var(--text-2)}
.front-prose table{inline-size:100%;border-collapse:collapse;margin-block-end:12px;display:block;overflow-x:auto}
.front-prose th,.front-prose td{padding:8px 10px;border:1px solid var(--line);text-align:start;vertical-align:top}
.front-prose th{background:var(--surface-2)}
.front-prose code,.front-prose pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.front-prose pre{overflow-x:auto;padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.front-prose hr{border:0;border-block-start:1px solid var(--line);margin-block:20px}

@media (max-width:1000px){
  .front-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .front-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .front-hero-inner{padding-block:48px 40px}
  .front-hero h1{font-size:2rem}
  .front-section{padding-block:40px}
}
@media (max-width:560px){
  .front-wrap{padding-inline:14px}
  .front-hero h1{font-size:1.65rem}
  .front-lead{font-size:1.05rem}
  .front-steps,.front-grid,.front-amounts,.front-amounts-aside{grid-template-columns:1fr}
  .front-actions{inline-size:100%;flex-direction:column}
  .front-actions .share-button{inline-size:100%}
  .front-nav li a{padding-inline:8px}
}
@media print{.front-header,.front-actions,.front-skip{display:none}}