/* AppyShift public website: one visual system (docs/ui-components.md, "Public website").
   Loaded last on every public layout (views/layouts/landing.php, developers.php, and guest.php
   for signup, verify, login and thank-you), so at equal specificity these rules win over a
   page's own CSS. The header and footer markup is views/partials/public-header.php and
   public-footer.php; the font is views/partials/public-fonts.php.

   - Tokens: --ps-* only, so nothing here collides with a layout's own variables.
   - Type: three hero sizes (home, inner page, long text), H2 a clear step below H1. Heroes are
     left-aligned in the 1180px column on every page; only the closing call-to-action band is
     centred.
   - Buttons: one primary (yellow) and one secondary (white, outlined; clear on dark bands),
     each in three sizes. Older class names (cx-btn, btn-primary, btn-white, btn-outline,
     ls-cta-ghost, ls-plan-cta, docs buttons) are mapped onto the same two styles below. */

:root{
    --ps-brand:#0b7aa5;
    --ps-brand-strong:#075979;
    --ps-accent:#fcc934;
    --ps-accent-hover:#ffd34d;
    --ps-accent-ink:#241a00;
    --ps-ink:#07182b;
    --ps-ink-strong:#041120;
    --ps-muted:#4b5d6b;          /* 6.7:1 on white */
    --ps-help:#566673;           /* 5.8:1 on white: the lightest text allowed for help lines */
    --ps-line:rgba(7,24,43,.14);
    --ps-line-strong:rgba(7,24,43,.22);
    --ps-surface:#fff;
    --ps-soft:#f4fbfd;
    --ps-danger:#b91c1c;
    --ps-font:"Aptos","AppyShift Sans","Aptos Narrow","Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
    --ps-font-display:"Aptos Display","Aptos","AppyShift Sans","Segoe UI Variable Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
    /* Type scale */
    --ps-h1-home:clamp(2.5rem,5.2vw,4.25rem);   /* homepage hero: 40-68px */
    --ps-h1-page:clamp(2.125rem,3.9vw,3.25rem); /* every other hero: 34-52px */
    --ps-h1-long:clamp(1.875rem,3vw,2.5rem);    /* legal pages and long text: 30-40px */
    --ps-h2:clamp(1.75rem,2.8vw,2.375rem);      /* section heads: 28-38px */
    --ps-h3:clamp(1.15rem,1.7vw,1.4rem);
    --ps-wrap:1180px;
}

/* Fields and buttons use the page font, not the browser's Arial. */
button,input,select,textarea{font:inherit}

/* ─── Type ────────────────────────────────────────────── */
.ps-h1,.ps-h1-home,.ps-h1-long{margin:0;font-family:var(--ps-font-display);font-weight:800;color:var(--ps-ink-strong);letter-spacing:-.02em;text-wrap:balance}
.ps-h1{font-size:var(--ps-h1-page);line-height:1.06}
.ps-h1-home{font-size:var(--ps-h1-home);line-height:1.02}
.ps-h1-long{font-size:var(--ps-h1-long);line-height:1.12}
.ps-h2{margin:0;font-family:var(--ps-font-display);font-size:var(--ps-h2);line-height:1.12;letter-spacing:-.015em;color:var(--ps-ink-strong)}
/* The story pages' own heading classes follow the same scale. */
.cxa-hero .cx-h1{font-size:var(--ps-h1-page);line-height:1.06}
.cxa-hero #story-hero-title{font-size:var(--ps-h1-home);line-height:1.02}
.cx-h2,.ls-section-head h2,.ls-cta-strip h2,.fs-part-title{font-size:var(--ps-h2);line-height:1.12;letter-spacing:-.015em}
.ls-library-hero h1,.ls-story-copy h1,.ls-hero h1,.ls-gate-copy h1,.fs-h1{font-size:var(--ps-h1-page);line-height:1.06;letter-spacing:-.02em}
.ls-article-main h1{font-size:var(--ps-h1-long);line-height:1.12}
/* Hero alignment: left in the content column, on every page. */
.ls-library-hero{max-width:var(--ps-wrap);text-align:left}
.ls-library-hero h1,.ls-library-hero p{margin-left:0;margin-right:0}
.ls-library-hero::after{margin-left:0}

/* ─── Buttons ─────────────────────────────────────────── */
.ps-btn,
.cx-btn,.btn-primary,.btn-white,.btn-outline,.ls-cta-ghost,.ls-gate-submit,
.ls-plan-cta,.ls-nav-cta,.ls-nav-menu-cta,.ls-nav-signin,
.docs-hero-button,.docs-access-button{
    --ps-btn-h:48px;--ps-btn-py:10px;--ps-btn-px:22px;--ps-btn-r:12px;--ps-btn-fs:.96rem;
    /* Centred both ways by flex, and by real vertical padding too, so a label that wraps on a
       phone (or a page style that turns the button into a block) never touches the edges. */
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:var(--ps-btn-h);padding:var(--ps-btn-py) var(--ps-btn-px);border-radius:var(--ps-btn-r);
    border:2px solid transparent;font-family:var(--ps-font);font-size:var(--ps-btn-fs);font-weight:800;
    line-height:1.2;letter-spacing:0;text-align:center;text-decoration:none;white-space:normal;text-wrap:balance;cursor:pointer;
    box-shadow:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
/* Sizes: large (hero), medium (everywhere else), small (header). */
.ps-btn-lg,.cx-btn{--ps-btn-h:54px;--ps-btn-py:13px;--ps-btn-px:26px;--ps-btn-r:14px;--ps-btn-fs:1.02rem}
.ps-btn-sm,.ls-nav-cta,.ls-nav-signin{--ps-btn-h:40px;--ps-btn-py:7px;--ps-btn-px:16px;--ps-btn-r:10px;--ps-btn-fs:.88rem;white-space:nowrap}
.ps-btn-block{display:flex;width:100%}
/* Primary: yellow with dark text. */
.ps-btn-primary,
.cx-btn-primary,.btn-primary,.btn-white,.ls-gate-submit,.ls-plan-cta.primary,.ls-nav-cta,.ls-nav-menu-cta,
.docs-hero-button-primary,.docs-access-button{
    background:var(--ps-accent, #fcc934);border-color:var(--ps-accent, #fcc934);color:var(--ps-accent-ink, #241a00);
    box-shadow:0 10px 22px rgba(229,178,26,.26);
}
.ps-btn-primary:hover,
.cx-btn-primary:hover,.btn-primary:hover,.btn-white:hover,.ls-gate-submit:hover,.ls-plan-cta.primary:hover,.ls-nav-cta:hover,.ls-nav-menu-cta:hover,
.docs-hero-button-primary:hover,.docs-access-button:hover{
    background:var(--ps-accent-hover, #ffd34d);border-color:var(--ps-accent-hover, #ffd34d);color:var(--ps-accent-ink, #241a00);
    box-shadow:0 14px 28px rgba(229,178,26,.32);transform:translateY(-1px);
}
/* Secondary: white with a line, dark text. */
.ps-btn-secondary,
.cx-btn-ghost,.btn-outline,.ls-plan-cta.outline,.ls-nav-signin{
    background:#fff;border-color:var(--ps-line-strong);color:var(--ps-ink);
}
.ps-btn-secondary:hover,
.cx-btn-ghost:hover,.btn-outline:hover,.ls-plan-cta.outline:hover,.ls-nav-signin:hover{
    background:#fff;border-color:var(--ps-brand);color:var(--ps-brand-strong);transform:translateY(-1px);
}
/* The secondary button on a dark band: same shape, light line and text. */
.ps-btn-secondary.ps-on-dark,.ls-cta-ghost,.docs-hero-button-secondary{
    background:transparent;border-color:rgba(255,255,255,.5);color:#fff;
}
.ps-btn-secondary.ps-on-dark:hover,.ls-cta-ghost:hover,.docs-hero-button-secondary:hover{
    background:rgba(255,255,255,.1);border-color:#fff;color:#fff;transform:translateY(-1px);
}
.ps-btn:focus-visible,
.cx-btn:focus-visible,.btn-primary:focus-visible,.btn-white:focus-visible,.btn-outline:focus-visible,.ls-cta-ghost:focus-visible,
.ls-plan-cta:focus-visible,.ls-nav-cta:focus-visible,.ls-nav-signin:focus-visible,.ls-nav-menu-cta:focus-visible,
.docs-hero-button:focus-visible,.docs-access-button:focus-visible{outline:3px solid var(--ps-brand);outline-offset:3px}
.ls-cta-strip .btn-white:focus-visible,.ls-cta-ghost:focus-visible,.docs-hero-button:focus-visible{outline-color:#fff}
.ps-btn:disabled,.btn-primary:disabled,.ps-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){
    .ps-btn,.cx-btn,.btn-primary,.btn-white,.btn-outline,.ls-cta-ghost,.ls-plan-cta,.ls-nav-cta,.ls-nav-signin,.docs-hero-button{transition:none}
    .ps-btn:hover,.cx-btn:hover,.btn-primary:hover,.btn-white:hover,.btn-outline:hover,.ls-cta-ghost:hover,.ls-plan-cta:hover,.ls-nav-cta:hover,.ls-nav-signin:hover{transform:none}
}

/* ─── Fields ──────────────────────────────────────────── */
.ps-field{display:grid;gap:6px;min-width:0}
.ps-label{display:block;color:var(--ps-ink);font-size:.86rem;font-weight:750;line-height:1.3}
.ps-label small,.ps-optional{font-weight:500;color:var(--ps-help)}
.ps-input,.ps-select,.ps-textarea{
    width:100%;min-width:0;min-height:46px;padding:10px 14px;border:1px solid var(--ps-line-strong);border-radius:10px;
    background:#fff;color:var(--ps-ink-strong);font-size:.95rem;line-height:1.35;outline:none;
    transition:border-color .16s ease,box-shadow .16s ease;
}
.ps-input::placeholder,.ps-textarea::placeholder{color:#6b7a86}
.ps-input:focus,.ps-select:focus,.ps-textarea:focus{border-color:var(--ps-brand);box-shadow:0 0 0 3px rgba(11,122,165,.18)}
.ps-input[aria-invalid="true"],.ps-select[aria-invalid="true"],.ps-textarea[aria-invalid="true"]{border-color:#f87171}
.ps-help{margin:0;color:var(--ps-help);font-size:.8rem;line-height:1.45}
.ps-error{margin:0;color:var(--ps-danger);font-size:.8rem;line-height:1.45;font-weight:650}
.ps-check{display:flex;gap:10px;align-items:flex-start;color:var(--ps-muted);font-size:.86rem;line-height:1.5}
.ps-check input{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--ps-brand)}
.ps-link{color:var(--ps-brand-strong);font-weight:750;text-decoration:underline;text-underline-offset:3px}
.ps-link:hover{color:var(--ps-brand)}
.ps-note{padding:13px 15px;border:1px solid #cfe6ef;border-radius:12px;background:#f2fafd;color:#0c4a63;font-size:.88rem;line-height:1.5}
.ps-alert{padding:14px 16px;border:1px solid rgba(220,38,38,.25);border-radius:12px;background:#fef2f2;color:#991b1b;font-size:.9rem;line-height:1.5}
.ps-alert strong{display:block;margin-bottom:3px;color:#7f1d1d}
.ps-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:20px;box-shadow:0 8px 32px rgba(15,23,42,.06)}

/* ─── Header ──────────────────────────────────────────── */
.ls-site-header{position:sticky;top:0;z-index:40}
.ls-nav{
    display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px;
    min-height:68px;padding:10px 40px;background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(4,23,34,.07);
    font-family:var(--ps-font);
}
.ls-nav *,.ls-nav *::before,.ls-nav *::after{box-sizing:border-box}
.ls-nav-brandless{justify-content:flex-end}
.ls-brand{display:flex;align-items:center;flex-shrink:0;min-width:0;text-decoration:none}
.ls-brand-mark{display:flex;align-items:center;min-width:0}
.ls-brand-mark img{display:block;width:auto;height:44px;max-width:none}
.ls-nav-links{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px 18px;min-width:0}
.ls-nav-link{
    display:inline-flex;align-items:center;min-height:40px;white-space:nowrap;
    color:var(--ps-muted);font-size:.93rem;font-weight:750;text-decoration:none;transition:color .16s ease;
}
.ls-nav-link:hover,.ls-nav-modules[open] > summary{color:var(--ps-ink-strong)}
.ls-nav-signin{margin-left:4px}
/* Only the logo, Sign In and the trial button (2026-10-28): one row at every width, no Menu. */
@media (max-width:1079px){
    .ls-nav{padding:10px 24px}
    .ls-nav-links{gap:10px}
}
@media (max-width:599px){
    .ls-nav{gap:10px;min-height:58px;padding:8px 16px}
    .ls-brand-mark img{height:28px}
    .ls-nav-links{gap:8px}
    .ls-nav-signin{margin-left:0;--ps-btn-h:38px;--ps-btn-px:12px;--ps-btn-fs:.84rem}
    .ls-nav-cta{--ps-btn-h:38px;--ps-btn-px:12px;--ps-btn-fs:.84rem}
}
@media (max-width:389px){
    .ls-brand-mark img{height:24px}
    .ls-nav{gap:8px;padding:8px 12px}
    .ls-nav-links{gap:6px}
    .ls-nav-signin,.ls-nav-cta{--ps-btn-px:9px;--ps-btn-fs:.78rem}
}

/* ─── Footer ──────────────────────────────────────────── */
.ls-footer{
    padding:62px 40px 0;border-top:1px solid rgba(255,255,255,.08);
    background:linear-gradient(145deg,#03131d 0%,#062b3d 58%,#074761 100%);color:#fff;font-family:var(--ps-font);
}
.ls-footer *,.ls-footer *::before,.ls-footer *::after{box-sizing:border-box}
.ls-footer a{text-decoration:none}
.ls-footer-main{display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(5,minmax(110px,.7fr));gap:36px;max-width:var(--ps-wrap);margin:0 auto}
.ls-footer-brand{max-width:360px}
.ls-footer-logo-shell{display:inline-flex;align-items:center;padding:9px 14px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 14px 32px rgba(0,0,0,.16)}
.ls-footer-logo-shell img{display:block;width:auto;height:40px;max-width:none}
.ls-footer-brand p{max-width:340px;margin:22px 0 0;color:rgba(255,255,255,.74);font-size:.9rem;line-height:1.7}
.ls-footer-column h2{margin:5px 0 18px;color:var(--ps-accent);font-family:var(--ps-font);font-size:.72rem;font-weight:900;letter-spacing:.13em;line-height:1.3;text-transform:uppercase}
.ls-footer-column nav{display:grid;gap:12px}
.ls-footer-column a{width:fit-content;color:rgba(255,255,255,.78);font-size:.88rem;font-weight:650;transition:color .16s ease,transform .16s ease}
.ls-footer-column a:hover{color:#fff;transform:translateX(2px)}
.ls-footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;max-width:var(--ps-wrap);margin:46px auto 0;padding:24px 0 30px;border-top:1px solid rgba(255,255,255,.12)}
.ls-footer-copy{font-size:.8rem;color:rgba(255,255,255,.66)}
.ls-footer-compare{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;max-width:var(--ps-wrap);margin:36px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem}
.ls-footer-compare a{color:rgba(255,255,255,.7)}
.ls-footer-compare a:first-child{color:rgba(255,255,255,.86);font-weight:700}
.ls-footer-compare a:hover{color:#fff}
.ls-footer-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ls-footer-legal-separator{color:rgba(255,255,255,.4);font-size:.8rem}
.ls-footer-legal a{color:rgba(255,255,255,.7);font-size:.8rem;transition:color .16s ease}
.ls-footer-legal a:hover{color:#fff}
.ls-footer-legal a.ls-footer-privacy-choices{display:inline-flex;align-items:center;gap:7px}
.ls-footer-privacy-choices .privacy-choices-icon{flex:none;width:30px;height:14px}
.ls-footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ls-footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.78);transition:background .16s ease,color .16s ease,border-color .16s ease}
.ls-footer-social a:hover,.ls-footer-social a:focus-visible{background:#fff;border-color:#fff;color:#062b3d}
.ls-footer a:focus-visible{outline:2px solid var(--ps-accent);outline-offset:2px}
@media (max-width:1079px){
    .ls-footer{padding:52px 24px 0}
    .ls-footer-main{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
    .ls-footer-brand{grid-column:1 / -1;max-width:520px}
}
@media (max-width:700px){
    .ls-footer{padding:44px 20px 0}
    .ls-footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
    .ls-footer-bottom{align-items:flex-start;margin-top:36px}
}

/* ─── Fields, continued ─── */
.ps-input-group{display:flex;align-items:stretch;min-width:0}
.ps-input-group > .ps-input{flex:1;border-top-right-radius:0;border-bottom-right-radius:0}
.ps-input-addon{flex:0 0 auto;padding:0 14px;border:1px solid var(--ps-line-strong);border-left:0;border-radius:0 10px 10px 0;background:#f6f9fb;color:var(--ps-ink);font-size:.84rem;font-weight:800;cursor:pointer}
.ps-input-addon:hover{background:#eef4f7}
.ps-input-addon:focus-visible{outline:3px solid var(--ps-brand);outline-offset:2px}
.ps-input-mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.9rem}
.ps-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ─── Signup (views/signup/index.php) ─── */
.ps-signup{width:100%;max-width:540px;margin:0 auto;padding:8px 0 0;color:var(--ps-ink);font-family:var(--ps-font)}
.ps-signup-head{margin:0 0 26px;text-align:center}
.ps-signup-mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 0 16px;padding:10px;border-radius:18px;border:1px solid rgba(11,122,165,.14);background:#fff;box-shadow:0 12px 28px rgba(7,89,121,.12)}
.ps-signup-mark img{display:block;width:44px;height:44px;border-radius:12px}
.ps-signup-head h1{margin:0 0 8px}
.ps-signup-head p{margin:0;color:var(--ps-muted);font-size:.98rem;line-height:1.55}
.ps-signup-alert{margin:0 0 20px}
.ps-signup-card{padding:clamp(22px,4vw,32px)}
.ps-signup-fields{display:grid;gap:18px}
.ps-signup-offer{display:grid;gap:10px}
.ps-signup-offer strong,.ps-signup-offer-timing{color:#0c4a63}
.ps-signup-offer-timing{margin:0;font-weight:700}
.ps-signup-offer ul{margin:0;padding-left:18px;font-size:.88rem;line-height:1.6}
.ps-signup-offer p{margin:0}
.ps-signup-industry strong{color:var(--ps-ink-strong)}
.ps-signup-more{padding-top:14px;border-top:1px solid rgba(15,23,42,.08)}
.ps-signup-more > summary{cursor:pointer;color:var(--ps-ink);font-size:.86rem;font-weight:800}
.ps-signup-more > summary:focus-visible{outline:3px solid var(--ps-brand);outline-offset:3px;border-radius:6px}
.ps-signup-more > .ps-field{margin-top:12px}
.ps-signup-terms-error{margin-top:-10px}
.ps-signup-captcha{display:flex;justify-content:center}
.ps-signup-foot{margin:20px 0 0;text-align:center;color:var(--ps-muted);font-size:.9rem}

/* ─── Guest pages with the public header (signup, verify, login, thank-you) ─── */
body.guest-public{display:block;padding:0;font-family:var(--ps-font)}
body.guest-public > #main-content{display:flex;justify-content:center;align-items:flex-start;min-height:calc(100vh - 68px);padding:40px 16px 64px}
@media (max-width:599px){body.guest-public > #main-content{padding:24px 12px 48px;min-height:0}}

/* ─── Balanced card grids (Support\PublicGrid picks N from the card count) ─── */
/* No lone card on a last row: 8 cards in 4 columns, 4 in 4 (or 2x2 on a tablet), 5 as 3+2.
   Phones keep each grid's own one-column or swipe layout. */
@media (min-width:1100px){
    .ps-grid.ps-cols-1{grid-template-columns:minmax(0,1fr)}
    .ps-grid.ps-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ps-grid.ps-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ps-grid.ps-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .ps-grid.ps-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:721px) and (max-width:1099px){
    .ps-grid.ps-cols-2,.ps-grid.ps-cols-4,.ps-grid.ps-cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ps-grid.ps-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    /* The short module cards at the end of a page still fit four across on a tablet. */
    .md-strip-compact .md-grid.ps-grid.ps-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* A module page's jump links as even chips (phones hide them, feature-story.css). */
@media (min-width:721px){
    .fs-jump.fs-jump-grid{display:grid;gap:8px}
    .fs-jump.fs-jump-grid a{display:flex;align-items:center;justify-content:center;min-height:38px;text-align:center}
}

/* ─── Plan badges (the plan a feature starts on, from PlanEntitlements) ─── */
.ps-plan-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#fff7e0;border:1px solid #f5d77a;color:#6b4800;font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1.3;white-space:nowrap;vertical-align:middle}
.ps-plan-badge.is-every{background:#e9f7f2;border-color:#a7dcc8;color:#075e46}

/* ─── Pricing page ─── */
.ls-plans-page{padding-top:clamp(40px,6vw,72px)}
.ls-pricing-hero{max-width:46rem;margin:0 0 clamp(24px,4vw,40px);text-align:left}
.ls-pricing-hero .cx-lead{margin-left:0;margin-right:0}
.ls-pricing-hero .cx-kicker{margin:0 0 14px}
.ls-pricing-hero .cx-lead{margin-top:16px}
.ls-plan-price-custom{font-size:1.9rem;padding-top:6px}

/* ─── Long pages paint as you reach them ─── */
.ps-defer{content-visibility:auto;contain-intrinsic-size:auto 900px}