/* ==========================================
   Southbound — Public Site

   Shared styles for the guest-facing marketing pages (home,
   coaching, soccer, about, packages, apply). Deliberately separate
   from the internal app's navbar/dropdown/bottom-nav CSS in
   style.css -- this loads alongside style.css only for its design
   tokens (colors, fonts, radius), not its component classes, since
   a guest should never see internal-app chrome.
========================================== */

body.pub-body{
    background:var(--bg);
}

/* Every element here that sets its own display needs this --
   author display rules always outrank the browser's native
   [hidden]{display:none} at equal specificity/origin. */
.pub-body [hidden]{
    display:none !important;
}

/* ---- Nav ---- */

.pub-navbar{
    display:flex;
    align-items:center;
    gap:20px;
    max-width:1200px;
    margin:0 auto;
    padding:20px 24px;
}
.pub-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text);
    font-family:var(--font-display);
    font-size:20px;
    letter-spacing:.3px;
    flex-shrink:0;
    text-transform:uppercase;
}
.pub-logo .brand-mark{height:38px;}
.pub-logo-text{display:flex;flex-direction:column;gap:3px;}
.pub-logo .brand-word{font-size:21px;}
.pub-logo-sub{
    font:700 12px/1 var(--font-body);
    letter-spacing:.42em;
    text-transform:uppercase;
    color:var(--primary);
}

.pub-nav-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px;
    flex:1;
}
.pub-nav-link{
    text-decoration:none;
    color:var(--text-secondary);
    font-size:14px;
    font-weight:600;
    padding:8px 14px;
    border-radius:999px;
    white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.pub-nav-link:hover{color:var(--text);background:var(--surface);}
.pub-nav-link.active{color:var(--text);background:var(--surface);}
.pub-nav-link.pub-nav-cta{
    color:#0f2019;
    background:var(--primary);
}
.pub-nav-link.pub-nav-cta:hover{background:var(--primary);opacity:.9;}
.pub-nav-link.pub-nav-app{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text);
    border:1px solid var(--border);
}
.pub-nav-link.pub-nav-app .ui-icon{width:15px;height:15px;}

.pub-signin-btn{
    appearance:none;
    flex-shrink:0;
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    padding:9px 18px;
    border-radius:999px;
    font:700 13.5px/1 var(--font-body);
    cursor:pointer;
    white-space:nowrap;
}
.pub-signin-btn:hover{border-color:var(--primary);color:var(--primary);}

@media(max-width:720px){
    .pub-navbar{flex-wrap:wrap;padding:16px 20px;}
    /* flex-basis (not width) decides whether this wraps to its own
       row -- the base rule's flex:1 means basis 0, which lets it
       squeeze in beside the logo as a thin column instead. */
    .pub-nav-links{order:3;flex:0 0 100%;justify-content:center;gap:2px;}
    .pub-logo{flex:1;}
    /* The logo already links home -- dropping the separate link is
       what lets the rest fit on one row at phone widths. */
    .pub-nav-link[data-page="home.html"]{display:none;}
    /* "Get the App" -> "App" so Contact fits on the same row. */
    .pub-nav-long{display:none;}
    .pub-nav-link{padding:7px 10px;font-size:13px;}
}

@media(max-width:400px){
    .pub-nav-links{gap:0;}
    .pub-nav-link{padding:7px 8px;font-size:12.5px;}
    .pub-nav-link.pub-nav-app{gap:4px;}
    /* Small phones: a smaller logo and Sign In, so the wordmark never
       runs under the button (it did at 320px). */
    .pub-navbar{gap:12px;padding:14px 16px;}
    .pub-logo{gap:8px;}
    .pub-logo .brand-mark{height:32px;}
    .pub-logo .brand-word{font-size:18px;}
    .pub-logo-sub{font-size:12px;letter-spacing:.3em;}
    .pub-signin-btn{padding:8px 14px;}
}

/* ---- Page shell ---- */

.pub-page{
    width:min(1100px,92%);
    margin:0 auto;
    padding:0 0 100px;
}

.pub-hero{
    text-align:center;
    padding:64px 0 48px;
}
/* Form pages: the form is the point, so keep it close to the heading. */
.pub-hero.pub-hero-compact{padding-bottom:8px;margin-bottom:0;}
.pub-hero.pub-hero-compact p{margin-bottom:0;}
.pub-hero-kicker{
    color:var(--primary);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-bottom:14px;
}
/* "FASTER | STRONGER | SMARTER" from the brand board. */
.pub-tagline{display:flex;align-items:center;gap:12px;letter-spacing:.24em;}
.pub-tagline i{width:1px;height:12px;background:currentColor;opacity:.6;}
.pub-hero h1{
    font-family:var(--font-display);
    font-size:clamp(38px,7vw,64px);
    font-weight:400;
    letter-spacing:.3px;
    line-height:1.05;
    margin:0 0 18px;
    text-transform:uppercase;
}
.pub-hero p{
    color:var(--text-secondary);
    font-size:17px;
    line-height:1.6;
    max-width:560px;
    margin:0 auto 28px;
}
.pub-hero-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.pub-btn-primary,
.pub-btn-secondary{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    border-radius:999px;
    padding:14px 28px;
    font:700 14px/1 var(--font-body);
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;
}
.pub-btn-primary{
    background:var(--primary);
    color:#0f2019;
    border:1px solid var(--primary);
    box-shadow:0 8px 24px rgba(201,173,132,.28);
}
.pub-btn-primary:hover{transform:translateY(-1px);}
.pub-btn-primary:disabled{opacity:.6;cursor:default;transform:none;}
.pub-btn-secondary{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
}
.pub-btn-secondary:hover{border-color:var(--primary);color:var(--primary);}
.pub-btn-primary .ui-icon,
.pub-btn-secondary .ui-icon{width:16px;height:16px;}

/* ---- Sections / cards ---- */

.pub-section{
    padding:48px 0;
    border-top:1px solid var(--border);
}
.pub-section-head{
    text-align:center;
    max-width:620px;
    margin:0 auto 36px;
}
.pub-section-head h2{
    font-family:var(--font-display);
    font-size:clamp(28px,4vw,38px);
    font-weight:400;
    margin:0 0 12px;
    text-transform:uppercase;
}
.pub-section-head p{
    color:var(--text-secondary);
    font-size:15.5px;
    line-height:1.6;
}

.pub-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.pub-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
}
.pub-card-icon{
    width:44px;
    height:44px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(201,173,132,.12);
    color:var(--primary);
    margin-bottom:16px;
}
.pub-card h3{
    font-size:18px;
    margin:0 0 8px;
}
.pub-card p{
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.6;
    margin:0;
}
.pub-card ul{
    margin:12px 0 0;
    padding-left:18px;
    color:var(--text-secondary);
    font-size:13.5px;
    line-height:1.8;
}

.pub-cta-band{
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:48px 32px;
}
.pub-cta-band h2{
    font-family:var(--font-display);
    font-size:clamp(26px,4vw,34px);
    font-weight:400;
    margin:0 0 12px;
    text-transform:uppercase;
}
.pub-cta-band p{
    color:var(--text-secondary);
    font-size:15px;
    margin:0 0 24px;
}

/* ---- Photos ----
   Every photo sits in a .pub-photo frame. Until the real file exists
   in images/, the <img>'s onerror removes it and the frame shows a
   branded gradient + icon instead of a broken-image box -- so the
   page looks finished before photos are uploaded, and a photo
   "just appears" once it's added with the right filename. */

.pub-photo{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 30% 20%,rgba(201,173,132,.35),transparent 60%),
        linear-gradient(135deg,#1F3A2C,#0F2019);
    border:1px solid var(--border);
}
.pub-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.pub-photo-fallback{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.35);
}
.pub-photo-fallback .ui-icon{width:44px;height:44px;}
.pub-photo img + .pub-photo-fallback{display:none;}

/* ---- Home: split hero ---- */

.pub-hero-split{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    align-items:center;
    text-align:left;
    padding:48px 0 56px;
}
.pub-hero-split p{margin-left:0;}
.pub-hero-split .pub-hero-actions{justify-content:flex-start;}
.pub-hero-photo{aspect-ratio:4/5;}

@media(max-width:820px){
    .pub-hero-split{grid-template-columns:1fr;gap:28px;text-align:center;padding-top:32px;}
    .pub-hero-split p{margin-left:auto;}
    .pub-hero-split .pub-hero-actions{justify-content:center;}
    .pub-hero-photo{order:-1;aspect-ratio:4/3;max-width:460px;width:100%;margin:0 auto;}
}

/* ---- Home: offering cards (image on top) ---- */

.pub-offer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:18px;
}
.pub-offer-card{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .15s ease,border-color .15s ease;
}
.pub-offer-card:hover{transform:translateY(-3px);border-color:rgba(201,173,132,.35);}
.pub-offer-card .pub-photo{
    aspect-ratio:16/10;
    border:0;
    border-radius:0;
}
.pub-offer-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pub-offer-body h3{font-size:18px;margin:0;}
.pub-offer-body p{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0;flex:1;}
.pub-offer-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--primary);
    font-size:13.5px;
    font-weight:700;
    margin-top:6px;
}
.pub-offer-link .ui-icon{width:15px;height:15px;}

/* ---- Home: meet your coach / app feature bands ---- */

.pub-feature-split{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:40px;
    align-items:center;
}
.pub-feature-split.pub-feature-reverse{grid-template-columns:1.2fr .8fr;}
.pub-feature-split .pub-photo{aspect-ratio:1/1;}
.pub-feature-text h2{
    font-family:var(--font-display);
    font-size:clamp(28px,4vw,38px);
    font-weight:400;
    margin:0 0 14px;
    text-transform:uppercase;
}
.pub-feature-text p{
    color:var(--text-secondary);
    font-size:15.5px;
    line-height:1.7;
    margin:0 0 20px;
}
.pub-feature-list{
    list-style:none;
    padding:0;
    margin:0 0 24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.pub-feature-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:var(--text-secondary);
    font-size:14.5px;
    line-height:1.5;
}
.pub-feature-list li strong{color:var(--text);}
.pub-feature-list .ui-icon{
    flex-shrink:0;
    width:20px;
    height:20px;
    color:var(--primary);
    margin-top:1px;
}
.pub-app-mock{
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
}
.pub-app-mock img{
    position:static;
    width:46%;
    height:auto;
    border-radius:22.5%;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}

@media(max-width:820px){
    .pub-feature-split,
    .pub-feature-split.pub-feature-reverse{grid-template-columns:1fr;gap:24px;}
    .pub-feature-split .pub-photo,
    .pub-app-mock{max-width:360px;width:100%;margin:0 auto;}
    .pub-feature-reverse .pub-app-mock{order:-1;}
}

/* ---- About page bio ---- */

.pub-bio{
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    align-items:flex-start;
    padding:20px 0 0;
}
.pub-bio-photo{
    flex-shrink:0;
    width:240px;
    aspect-ratio:4/5;
}
@media(max-width:560px){
    .pub-bio-photo{width:100%;max-width:320px;margin:0 auto;}
}

.pub-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.pub-gallery .pub-photo{aspect-ratio:1/1;}
@media(max-width:560px){
    .pub-gallery{grid-template-columns:1fr 1fr;}
    .pub-gallery .pub-photo:last-child{grid-column:1 / -1;aspect-ratio:2/1;}
}
.pub-bio-text{
    flex:1;
    min-width:260px;
    color:var(--text-secondary);
    font-size:15px;
    line-height:1.7;
}
.pub-bio-text p{margin:0 0 14px;}

/* ---- Packages ---- */

.pub-package-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    align-items:stretch;
}
.pub-package{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 26px;
}
.pub-package.pub-package-featured{
    border-color:var(--primary);
    box-shadow:0 12px 40px rgba(201,173,132,.15);
}
.pub-package-badge{
    position:absolute;
    top:-12px;
    left:26px;
    background:var(--primary);
    color:#0f2019;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:999px;
}
.pub-package h3{font-size:19px;margin:0 0 6px;}
.pub-package-for{color:var(--text-secondary);font-size:13.5px;line-height:1.5;margin:0 0 18px;}
.pub-package-price{
    font-family:var(--font-display);
    font-size:44px;
    line-height:1;
    color:var(--text);
    text-transform:uppercase;
}
.pub-package-unit{color:var(--muted);font-size:13.5px;font-weight:600;margin-left:4px;}
.pub-package-options{
    margin:14px 0 0;
    padding:12px 0 0;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13.5px;
    color:var(--text-secondary);
}
.pub-package-options div{display:flex;justify-content:space-between;gap:12px;}
.pub-package-options strong{color:var(--text);}
.pub-package .pub-feature-list{margin:20px 0 24px;flex:1;}
.pub-package .pub-feature-list li{font-size:14px;}
.pub-package .pub-btn-primary,
.pub-package .pub-btn-secondary{width:100%;}
/* The brand tile (css/style.css) sits in each card's top corner, the
   same place whatever the card's height; the title keeps clear of it. */
.pub-package > .pub-package-mark{
    --sb-tile:46px;
    position:absolute;
    top:22px;
    right:22px;
}
.pub-package h3,
.pub-package-for{padding-right:58px;}

.pub-pricing-note{
    text-align:center;
    max-width:640px;
    margin:28px auto 0;
    color:var(--muted);
    font-size:13.5px;
    line-height:1.6;
}

/* ---- Apply form ---- */

.pub-apply-card{
    max-width:560px;
    margin:0 auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px;
}
.pub-field-label{
    display:block;
    font-size:12.5px;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 10px;
}
.pub-service-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:22px;
}
.pub-service-check{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    font-size:13px;
    cursor:pointer;
}
.pub-service-check:has(input:checked){border-color:var(--primary);color:var(--primary);}

.pub-apply-card textarea{
    width:100%;
    resize:vertical;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    padding:12px 14px;
    font:14px/1.5 var(--font-body);
    margin-bottom:22px;
}

.pub-apply-msg{
    display:block;
    margin-top:14px;
    font-size:13.5px;
    color:var(--green);
    text-align:center;
}
.pub-apply-msg.pub-apply-msg-error{color:var(--red);}

.pub-apply-success{
    text-align:center;
    padding:24px 0;
}
.pub-apply-success h3{font-size:20px;margin:14px 0 8px;}
.pub-apply-success p{color:var(--text-secondary);font-size:14.5px;line-height:1.6;}

/* ---- Contact form (reuses the Apply card) ---- */

.pub-input{
    display:block;
    width:100%;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    padding:11px 14px;
    font:14px/1.4 var(--font-body);
    margin-bottom:20px;
}
.pub-input:focus,
.pub-apply-card textarea:focus{outline:none;border-color:var(--primary);}
.pub-input-short{max-width:140px;}
select.pub-input{appearance:auto;}
.pub-apply-card input[type=radio],
.pub-apply-card input[type=checkbox]{accent-color:var(--primary);}
.pub-field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.pub-field-row .pub-input{margin-bottom:6px;}
.pub-field-hint{
    color:var(--muted);
    font-size:12.5px;
    margin:0 0 20px;
}
.pub-choice-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}
.pub-choice-row .pub-service-check{padding:10px 16px;}
.pub-trap{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}
.pub-contact-alt{
    text-align:center;
    color:var(--text-secondary);
    font-size:14px;
    margin:22px 0 0;
}
.pub-contact-alt a,
.pub-apply-alt a{color:var(--primary);font-weight:700;}
/* The open Apply form (apply.html): the guided screens use css/intake.css. */
.pub-apply-guide{margin:0 auto;}
.pub-apply-guide .ig-error{
    margin:14px 0 0;
    padding:10px 14px;
    border-radius:var(--radius-sm);
    border:1px solid color-mix(in srgb, var(--red) 45%, transparent);
    background:color-mix(in srgb, var(--red) 12%, transparent);
    color:var(--text);
    font-size:14px;
    line-height:1.45;
}
.pub-apply-done{text-align:center;}
.pub-apply-done .pub-card-icon{margin:0 auto 12px;}
.pub-apply-done .ig-foot{justify-content:center;flex-wrap:wrap;gap:10px;}
.pub-apply-foot{text-align:center;color:var(--text-secondary);font-size:13.5px;margin:22px 0 0;}
.pub-cta-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

@media(max-width:520px){
    .pub-service-grid{grid-template-columns:1fr;}
    .pub-field-row{grid-template-columns:1fr;gap:0;}
    .pub-apply-card{padding:24px 20px;}
}

/* ---- Footer ---- */

.pub-footer{
    border-top:1px solid var(--border);
    padding:28px 24px;
    text-align:center;
    color:var(--muted);
    font-size:12.5px;
}
.pub-footer a{color:var(--muted);}
/* The page links in the footer are a menu, not words in a sentence: give each a
   32px tap area (WCAG 2.2 asks 24px at least) without changing how the line looks. */
.pub-footer p a{
    display:inline-block;
    padding:8px 4px;
    line-height:16px;
}
/* Footer sign-off: the mark + wordmark, smaller than the header's. */
.pub-footer-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 auto 14px;
    color:var(--cream) !important;
    text-decoration:none;
}
.pub-footer-brand .brand-mark{height:30px;width:auto;}
.pub-footer-word{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.pub-footer-word .brand-word{font-size:17px;}
.pub-footer-sub{font:700 12px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--primary);}
.pub-footer p{margin:0;}

/* Shown until real prices are set -- reads as intentional, not blank. */
.pub-package-price.pub-package-price-tbd{
    font-family:var(--font-body);
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

/* ---- Privacy / legal text ---- */

.pub-legal{
    max-width:720px;
    color:var(--text-secondary);
    font-size:15px;
    line-height:1.7;
}
.pub-legal h2{
    color:var(--text);
    font-size:20px;
    margin:28px 0 8px;
}
.pub-legal h2:first-child{margin-top:0;}
.pub-legal p{margin:0 0 12px;}
.pub-legal ul{margin:0 0 12px;padding-left:20px;}
.pub-legal li{margin-bottom:8px;}
.pub-legal strong{color:var(--text);}
.pub-legal a{color:var(--primary);}
.pub-legal-date{color:var(--muted);font-size:13px;}

/* ==========================================
   INTEREST PICKER (free calculators)
   "What are you training for?" -- appears after a result.
========================================== */
.pub-interest{ text-align:center; }
.pub-interest[hidden]{ display:none !important; }
.pub-interest h2{ margin:0 0 6px; }
.pub-interest > p{ margin:0 auto 18px; max-width:520px; color:var(--text-secondary); }
.pub-interest-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}
.pub-interest-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:12px 24px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-pill, 999px);
    color:var(--text);
    font-weight:700;
    font-size:16px;
    text-decoration:none;
    transition:border-color .15s, background .15s;
}
.pub-interest-btn:hover,
.pub-interest-btn:focus-visible{ border-color:var(--primary); background:var(--surface-light); }
.pub-interest-btn small{ display:block; font-weight:500; font-size:12px; color:var(--text-secondary); }
.pub-interest-btn > span:last-child{ text-align:left; }
.pub-interest-skip{ margin:16px 0 0; font-size:13px; color:var(--text-secondary); }
.pub-interest-skip button{
    min-height:32px;
    padding:4px 6px;
    background:none;
    border:none;
    color:var(--text-secondary);
    font:inherit;
    text-decoration:underline;
    cursor:pointer;
}
@media (max-width:520px){
    .pub-interest-row{ flex-direction:column; align-items:stretch; }
}

/* ---- Direction A (2026-10-14): poster hero, squared buttons, mono labels ----
   Same forest / tan / cream palette as the app; the shapes and type follow
   the app's direction A (see .claude/skills/southbound-design). */

.pub-nav-link,
.pub-signin-btn,
.pub-btn-primary,
.pub-btn-secondary{border-radius:var(--radius-pill);}
.pub-nav-link.pub-nav-cta,
.pub-btn-primary{color:var(--on-primary);}
.pub-btn-primary{box-shadow:none;}
.pub-btn-primary,
.pub-btn-secondary{letter-spacing:.02em;}

.pub-hero-kicker,
.pub-offer-link{font-family:var(--font-mono);font-weight:600;}
.pub-hero-kicker{font-size:12px;}
.pub-offer-link{font-size:12px;letter-spacing:.08em;text-transform:uppercase;}

.pub-offer-card{border-top:2px solid var(--primary);}
.pub-offer-body h3{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.05;
    text-transform:uppercase;
}

/* Home: one poster -- the photo fills the right side and fades into the
   forest behind the headline. Text-first in the markup, photo is decoration. */
.pub-hero.pub-hero-poster{
    position:relative;
    display:flex;
    align-items:center;
    min-height:560px;
    margin:24px 0 8px;
    padding:56px 48px;
    text-align:left;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--surface);
    overflow:hidden;
    isolation:isolate;
}
.pub-hero-poster-photo{
    position:absolute;
    inset:0 0 0 auto;
    width:66%;
    z-index:-1;
}
.pub-hero-poster-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 25%;
    display:block;
}
.pub-hero-poster-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 88%,transparent) 12%,color-mix(in srgb,var(--surface) 55%,transparent) 32%,color-mix(in srgb,var(--surface) 20%,transparent) 52%,transparent 72%);
}
.pub-hero-poster-text{max-width:520px;}
.pub-hero-poster h1{font-size:clamp(44px,7vw,84px);line-height:.95;font-weight:700;}
.pub-hero-poster p{margin-left:0;}
.pub-hero-poster .pub-hero-actions{justify-content:flex-start;}

@media(max-width:820px){
    .pub-hero.pub-hero-poster{
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-end;
        min-height:0;
        margin-top:12px;
        padding:0;
    }
    .pub-hero-poster-photo{
        position:relative;
        inset:auto;
        width:100%;
        aspect-ratio:4/3;
        z-index:auto;
    }
    .pub-hero-poster-photo::after{
        background:linear-gradient(180deg,transparent 45%,var(--surface) 100%);
    }
    .pub-hero-poster-text{max-width:none;padding:0 22px 26px;margin-top:-56px;position:relative;}
    .pub-hero-poster h1{font-size:clamp(40px,12vw,60px);}
    .pub-hero-poster p{font-size:16px;}
    .pub-hero-poster .pub-hero-actions .pub-btn-primary,
    .pub-hero-poster .pub-hero-actions .pub-btn-secondary{flex:1 1 200px;}
}

/* Packages in direction A: display names, mono badge and placeholder price. */
.pub-package{border-top:2px solid var(--primary);}
.pub-package.pub-package-featured{box-shadow:none;}
.pub-package-badge{
    color:var(--on-primary);
    font:600 12px/1 var(--font-mono);
    letter-spacing:.1em;
    border-radius:var(--radius-sm);
}
.pub-package h3{
    font-family:var(--font-display);
    font-size:28px;
    font-weight:600;
    line-height:1.05;
    text-transform:uppercase;
}
.pub-package-price.pub-package-price-tbd{
    font:600 14px/1.3 var(--font-mono);
    letter-spacing:.08em;
    color:var(--primary);
}

/* ==========================================================
   PREMIUM PASS (2026-10-19, direction B "Your Week")
   One top bar on every screen size (the old computer sidebar is gone),
   a full-width hero with an example app screen, lines instead of boxes,
   a week strip, and a keyboard skip link. Photos stay on this site only.
   ========================================================== */

:root{ --pub-gutter:clamp(16px,4vw,48px); --pub-max:1240px; }
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
.pub-body{ -webkit-font-smoothing:antialiased; }
.pub-body ::selection{ background:var(--primary); color:var(--on-primary); }
.pub-body :focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }

.pub-skip{
    position:absolute; left:16px; top:-60px; z-index:3000;
    background:var(--primary); color:var(--on-primary);
    padding:12px 18px; border-radius:var(--radius-sm); font-weight:700;
    text-decoration:none; transition:top .15s ease;
}
.pub-skip:focus{ top:12px; }

/* ---- Top bar ---- */
.pub-navbar{
    position:sticky; top:0; z-index:1000;
    display:flex; align-items:center; gap:24px;
    max-width:none; margin:0; padding:12px var(--pub-gutter);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}
.pub-logo .brand-mark{ height:30px; }
.pub-logo .brand-word{ font-size:19px; }
.pub-nav-links{ flex:1; justify-content:center; flex-wrap:nowrap; gap:2px; }
.pub-nav-link{
    display:inline-flex; align-items:center; min-height:44px;
    padding:0 14px; border-radius:var(--radius-sm); font-size:15px;
}
.pub-nav-link:hover{ background:transparent; color:var(--primary); }
.pub-nav-link.active{ background:transparent; color:var(--text); box-shadow:inset 0 -2px 0 var(--primary); border-radius:0; }
.pub-nav-link.pub-nav-app{ border:0; color:var(--text-secondary); gap:8px; }
.pub-nav-end{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.pub-signin-btn{
    background:transparent; border:0; color:var(--text-secondary);
    min-height:44px; padding:0 12px; border-radius:var(--radius-sm); font-size:15px;
}
.pub-signin-btn:hover{ color:var(--primary); border:0; }
.pub-nav-cta{
    display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px;
    border-radius:var(--radius-pill); background:var(--primary); color:var(--on-primary);
    font:700 15px/1 var(--font-body); text-decoration:none;
}
.pub-nav-cta:hover{ background:var(--primary-light); }
.pub-nav-cta.active{ box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--primary); }
.pub-menu-btn{ display:none; }
/* Sign In inside the phone menu; the bar has its own button on wide screens. */
.pub-menu-signin{ display:none; }

@media(max-width:1020px){
    .pub-nav-links{
        position:fixed; left:0; right:0; top:var(--pub-bar-h,69px); z-index:999;
        flex-direction:column; align-items:stretch; gap:0; justify-content:flex-start;
        padding:8px var(--pub-gutter) 20px;
        background:var(--bg); border-bottom:1px solid var(--border);
        transform:translateY(-8px); opacity:0; visibility:hidden;
        transition:opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .pub-nav-open .pub-nav-links{ transform:none; opacity:1; visibility:visible; }
    .pub-nav-link{ min-height:52px; font-size:18px; border-bottom:1px solid var(--border); border-radius:0; padding:0 4px; }
    .pub-nav-link.active{ box-shadow:none; color:var(--primary); }
    .pub-menu-btn{
        display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
        width:44px; height:44px; background:transparent; border:1px solid var(--border);
        border-radius:var(--radius-sm); cursor:pointer;
    }
    .pub-menu-btn span{ display:block; width:20px; height:2px; background:var(--text); transition:transform .2s ease; }
    .pub-nav-open .pub-menu-btn span:first-child{ transform:translateY(4px) rotate(45deg); }
    .pub-nav-open .pub-menu-btn span:last-child{ transform:translateY(-4px) rotate(-45deg); }
    .pub-signin-btn{ display:none; }
    .pub-menu-signin{
        display:inline-flex; gap:10px; width:100%; background:transparent; border:0;
        border-bottom:1px solid var(--border); color:var(--primary); font:600 18px/1 var(--font-body);
        text-align:left; cursor:pointer;
    }
    .pub-menu-signin .ui-icon{ width:18px; height:18px; }
    .pub-menu-signin:disabled{ opacity:.6; cursor:default; }
}
@media(max-width:720px){
    .pub-navbar{ flex-wrap:nowrap; gap:12px; padding:10px var(--pub-gutter); }
    .pub-logo{ flex:1; }
    .pub-nav-links{ order:0; flex:initial; }
    .pub-nav-link[data-page="home.html"]{ display:none; }
    .pub-nav-cta{ padding:0 18px; }
}

/* ---- Page shell: full width, sections set their own measure ---- */
.pub-page{ width:100%; max-width:none; padding:0 0 80px; }
.pub-section{ border-top:0; padding:clamp(56px,8vw,104px) var(--pub-gutter); max-width:var(--pub-max); margin:0 auto; }
.pub-hero:not(.pub-stage){ max-width:var(--pub-max); margin:0 auto; padding-left:var(--pub-gutter); padding-right:var(--pub-gutter); }
.pub-section-head{ text-align:left; max-width:none; margin:0 0 clamp(28px,4vw,48px); }
.pub-section-head h2,
.pub-feature-text h2,
.pub-cta-band h2{
    font-family:var(--font-display); font-weight:900; text-transform:uppercase;
    font-size:clamp(40px,5.6vw,76px); line-height:.92; letter-spacing:-.01em; text-wrap:balance;
}
.pub-section-head p{ max-width:34em; font-size:17px; margin-top:14px; }
.pub-hero h1{ font-weight:900; line-height:.9; text-wrap:balance; }
.pub-hero-kicker{ font:600 12px/1 var(--font-mono); letter-spacing:.14em; }
.pub-btn-primary,.pub-btn-secondary{
    min-height:48px; border-radius:var(--radius-pill); padding:0 24px; font-size:16px; box-shadow:none;
}
.pub-btn-primary:hover{ transform:none; background:var(--primary-light); }
.pub-btn-secondary{ border-color:rgba(242,237,225,.28); }

/* ---- Home hero: words, then the product ---- */
.pub-stage{
    position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    min-height:min(820px,calc(100svh - 70px)); text-align:left; padding:0; margin:0;
    border-bottom:1px solid var(--border); overflow:hidden;
}
.pub-stage-copy{
    position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
    padding:clamp(40px,6vw,88px) var(--pub-gutter) clamp(40px,6vw,88px);
}
.pub-stage-copy h1{ font-size:clamp(56px,6.9vw,116px); margin:18px 0 24px; }
.pub-stage-copy p{ font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--text-secondary); max-width:25em; margin:0 0 32px; }
.pub-stage-copy .pub-hero-actions{ justify-content:flex-start; }
.pub-stage-media{ position:relative; display:flex; align-items:center; justify-content:flex-start; padding:48px 24px 48px 0; }
.pub-stage-media .pub-device{ margin-left:clamp(-72px,-4vw,-24px); }
.pub-stage-photo{ position:absolute; inset:0; margin:0; }
.pub-stage-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.pub-stage-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 20%,transparent) 22%,transparent 60%),
               linear-gradient(0deg,color-mix(in srgb,var(--bg) 70%,transparent),transparent 40%);
}
.pub-device{
    position:relative; z-index:2; width:min(320px,100%); border-radius:44px; padding:46px 20px 22px;
    background:var(--bg); border:10px solid #1d2a24;
    box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(242,237,225,.14);
}
.pub-device-kicker{ font:600 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--primary); }
.pub-device-title{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:48px; line-height:.9; margin:8px 0 6px; }
.pub-device-sub{ font:500 12.5px/1.3 var(--font-mono); color:var(--text-secondary); }
.pub-device-rule{ height:2px; background:var(--primary); margin:16px 0 4px; }
.pub-device-step{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.pub-device-step span:last-child{ font:500 12.5px/1.5 var(--font-mono); color:var(--text-secondary); }
.pub-device-note{ margin-top:16px; padding:12px 14px; border-radius:var(--radius-md); background:var(--surface-light); font-size:14px; line-height:1.45; }
.pub-device-note b{ display:block; font:600 12px/1 var(--font-mono); letter-spacing:.1em; color:var(--sage); margin-bottom:6px; }
.pub-device-go{
    display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:16px;
    border-radius:var(--radius-pill); background:var(--primary); color:var(--on-primary); font-weight:700;
}
.pub-stage-label{ position:absolute; z-index:2; right:20px; bottom:16px; font:500 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); }

@keyframes pubRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference){
    .pub-stage-copy > *{ animation:pubRise .7s cubic-bezier(.16,1,.3,1) both; }
    .pub-stage-copy > :nth-child(2){ animation-delay:.08s; }
    .pub-stage-copy > :nth-child(3){ animation-delay:.16s; }
    .pub-stage-copy > :nth-child(4){ animation-delay:.24s; }
    .pub-device{ animation:pubRise .9s .2s cubic-bezier(.16,1,.3,1) both; }
}
@media(max-width:900px){
    .pub-stage-media{ justify-content:center; padding:36px 16px 64px; }
    .pub-stage-media .pub-device{ margin-left:0; }
    .pub-stage{ grid-template-columns:1fr; min-height:0; }
    .pub-stage-copy{ padding-bottom:28px; }
    .pub-stage-copy h1{ font-size:clamp(52px,15vw,84px); }
    .pub-stage-copy .pub-hero-actions{ flex-direction:column; align-items:stretch; }
}

/* ---- The week ---- */
.pub-week-wrap{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg); }
.pub-week-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; max-width:var(--pub-max); margin:0 auto; padding:clamp(48px,7vw,88px) var(--pub-gutter) 28px; }
.pub-week-head h2{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(40px,5.6vw,76px); line-height:.92; margin:0; text-wrap:balance; }
.pub-week-head p{ color:var(--text-secondary); max-width:26em; line-height:1.55; font-size:16.5px; margin:0; }
.pub-week{ display:grid; grid-template-columns:repeat(7,1fr); max-width:var(--pub-max); margin:0 auto; padding:0 var(--pub-gutter) clamp(48px,7vw,88px); list-style:none; }
.pub-day{ padding:18px 16px 24px 0; border-top:1px solid var(--border); position:relative; }
.pub-day .pub-day-name{ font:600 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pub-day h3{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(22px,1.9vw,26px); line-height:1; margin:12px 0 6px; overflow-wrap:anywhere; }
.pub-day p{ color:var(--text-secondary); font-size:14.5px; line-height:1.4; margin:0; }
.pub-day.is-today{ border-top:2px solid var(--primary); }
.pub-day.is-today .pub-day-name{ color:var(--primary); }
.pub-day.is-rest h3{ color:var(--muted); }
@media(max-width:900px){
    .pub-week-head{ display:block; }
    .pub-week-head p{ margin-top:14px; }
    .pub-week{ grid-template-columns:repeat(2,1fr); gap:0 24px; }
    .pub-day{ padding-right:0; }
}

/* ---- Offers as rows (a rule between them, no boxes) ---- */
.pub-offer-grid{ display:block; }
.pub-offer-card{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr) 220px; align-items:center; gap:clamp(16px,3vw,40px);
    background:none; border:0; border-top:1px solid var(--border); border-radius:0; padding:26px 0; color:var(--text);
    transition:background .2s ease;
}
.pub-offer-card:last-child{ border-bottom:1px solid var(--border); }
.pub-offer-card:hover{ transform:none; border-color:var(--border); }
.pub-offer-card:hover h3{ color:var(--primary); }
.pub-offer-card .pub-photo{ grid-column:3; grid-row:1; aspect-ratio:16/10; border-radius:var(--radius-md); }
.pub-offer-body{ display:contents; }
.pub-offer-body h3{ grid-column:1; grid-row:1; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(32px,3.6vw,48px); line-height:.95; transition:color .2s ease; }
.pub-offer-body p{ grid-column:2; grid-row:1; font-size:16px; flex:none; }
.pub-offer-link{ display:none; }
@media(max-width:700px){
    .pub-offer-card{ grid-template-columns:minmax(0,1fr) 104px; gap:8px 16px; padding:20px 0; }
    .pub-offer-card .pub-photo{ grid-column:2; grid-row:1 / 3; aspect-ratio:1; align-self:start; }
    .pub-offer-body h3{ grid-column:1; grid-row:1; font-size:30px; }
    .pub-offer-body p{ grid-column:1; grid-row:2; font-size:15px; }
}

/* ---- Coach + app bands ---- */
.pub-feature-text p{ font-size:17px; max-width:32em; }
.pub-feature-split .pub-photo{ border-radius:var(--radius-md); }
.pub-coach:not(:has(.pub-photo img)) .pub-photo{ display:none; }
.pub-coach:not(:has(.pub-photo img)){ grid-template-columns:1fr; }
.pub-coach:not(:has(.pub-photo img)) .pub-feature-text h2{ max-width:12em; }

.pub-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,56px); counter-reset:step; }
.pub-flow li{ border-top:2px solid var(--primary); padding-top:18px; }
.pub-flow h3{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,3vw,40px); line-height:1; margin:0 0 10px; }
.pub-flow p{ color:var(--text-secondary); font-size:16px; line-height:1.55; margin:0; max-width:24em; }
@media(max-width:700px){ .pub-flow{ grid-template-columns:1fr; gap:24px; } }

.pub-cta-band{ background:var(--forest); border:0; border-radius:var(--radius); text-align:left; padding:clamp(36px,6vw,80px); }
.pub-cta-band p{ font-size:17px; max-width:30em; }
.pub-cta-band .pub-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:560px){ .pub-cta-band .pub-cta-actions{ flex-direction:column; } }

/* ---- Packages: three columns divided by lines ---- */
.pub-package-grid{ gap:0; }
.pub-package{
    background:none; border:0; border-top:2px solid var(--primary); border-radius:0;
    padding:28px clamp(0px,2vw,28px) 32px 0; box-shadow:none;
}
.pub-package + .pub-package{ padding-left:clamp(0px,2vw,28px); border-left:1px solid var(--border); }
.pub-package.pub-package-featured{ border-color:var(--primary); box-shadow:none; }
.pub-package-mark{ display:none; }
.pub-package-badge{ position:static; display:inline-block; align-self:flex-start; margin-bottom:12px; padding:6px 10px; }
.pub-package h3{ font-weight:900; font-size:clamp(34px,3.4vw,46px); }
@media(max-width:820px){
    .pub-package + .pub-package{ padding-left:0; border-left:0; }
    .pub-package{ padding-right:0; margin-bottom:12px; }
}

/* ---- Footer ---- */
.pub-footer{ border-top:1px solid var(--border); padding:40px var(--pub-gutter) 56px; }
.pub-footer p a{ display:inline-block; padding:10px 6px; }
body.pub-body{ padding-left:0; }

.pub-cta-band .pub-cta-actions{ justify-content:flex-start; }
.pub-coach:not(:has(.pub-photo img)){ padding-top:0; padding-bottom:clamp(24px,4vw,48px); }
.pub-device-plain{ width:min(340px,100%); animation:none; }
.pub-app-device{ display:flex; justify-content:center; padding:24px 0; background:var(--surface); border-radius:var(--radius); position:relative; }
.pub-app-device .pub-stage-label{ right:16px; bottom:12px; }
@media(max-width:820px){ .pub-app-device{ order:-1; } }
/* A photo that hasn't been uploaded yet leaves no empty frame on About. */
.pub-bio-photo:not(:has(img)),
.pub-gallery .pub-photo:not(:has(img)){ display:none; }
.pub-gallery:not(:has(img)){ display:none; }
.pub-gallery{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ---- Inner pages: left-aligned heroes, photo bands, lines instead of cards ---- */
.pub-hero:not(.pub-stage):not(.pub-hero-compact){ text-align:left; padding-top:clamp(48px,7vw,96px); padding-bottom:clamp(32px,4vw,56px); }
.pub-hero:not(.pub-stage):not(.pub-hero-compact) h1{ font-size:clamp(48px,7.4vw,112px); max-width:13em; }
.pub-hero:not(.pub-stage):not(.pub-hero-compact) p{ margin-left:0; max-width:34em; }
.pub-hero:not(.pub-stage):not(.pub-hero-compact) .pub-hero-actions,
.pub-hero:not(.pub-stage):not(.pub-hero-compact) .pub-cta-actions{ justify-content:flex-start; }
.pub-hero-compact h1{ font-size:clamp(44px,6vw,84px); }
.pub-band{ max-width:var(--pub-max); margin:0 auto; padding:0 var(--pub-gutter); }
.pub-band img{ width:100%; height:clamp(220px,34vw,460px); object-fit:cover; border-radius:var(--radius-md); }
.pub-grid{ gap:0; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pub-grid .pub-card{ background:none; border:0; border-top:2px solid var(--primary); border-radius:0; padding:24px clamp(0px,2vw,28px) 28px 0; }
.pub-grid .pub-card + .pub-card{ padding-left:clamp(0px,2vw,28px); border-left:1px solid var(--border); }
.pub-grid .pub-card h3{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,2.8vw,38px); line-height:1; }
.pub-grid .pub-card p{ font-size:16px; }
.pub-grid .pub-card ul{ font-size:15px; }
.pub-card-icon{ background:none; width:auto; height:auto; justify-content:flex-start; margin-bottom:12px; }
@media(max-width:820px){ .pub-grid .pub-card + .pub-card{ padding-left:0; border-left:0; } .pub-grid .pub-card{ padding-right:0; } }
.pub-gallery{ grid-template-columns:repeat(auto-fit,minmax(200px,340px)); }
.pub-bio{ padding-top:0; }
.pub-bio-text{ font-size:18px; max-width:36em; }
.pub-hero + .pub-section{ padding-top:clamp(24px,3vw,40px); }

/* ==========================================================
   FORMS (2026-10-19, "Full-screen question"): one huge question over a dimmed
   photo, big answer tiles, and a Back/Next bar fixed to the bottom.
   Apply (js/apply.js + css/intake.css) and Contact. Scoped, so the client's
   guided profile, which shares intake.css, is unchanged.
   ========================================================== */
.pub-stage-form{ position:relative; min-height:calc(100svh - 69px); display:flex; flex-direction:column; align-items:center; padding:clamp(24px,4vw,48px) var(--pub-gutter) 140px; overflow:hidden; isolation:isolate; }
.pub-stage-form-bg{ position:absolute; inset:0; z-index:-2; }
.pub-stage-form-bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 35%; opacity:.3; filter:saturate(.8); }
.pub-stage-form::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--bg) 40%,transparent),var(--bg) 78%); }
.pub-stage-form-inner{ width:100%; max-width:920px; }
.pub-stage-form-head{ text-align:center; margin:clamp(8px,3vw,32px) 0 clamp(24px,4vw,40px); }
.pub-stage-form-head h1{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; line-height:.9; font-size:clamp(48px,7vw,104px); margin:0; text-wrap:balance; }
.pub-stage-form-head p{ color:var(--text-secondary); font-size:18px; line-height:1.5; max-width:30em; margin:16px auto 0; }
.pub-stage-form .pub-apply-foot,.pub-stage-form .pub-contact-alt{ text-align:center; margin-top:36px; }

/* Apply: the guided card */
.pub-apply-guide{ max-width:none; margin:0; }
.pub-apply-guide .ig-card{ background:none; border:0; padding:0; border-radius:0; text-align:center; }
.pub-apply-guide .ig-progress{ display:flex; flex-direction:column; width:min(560px,100%); margin:0 auto clamp(32px,6vw,56px); }
.pub-apply-guide .ig-progress-text{ order:2; margin:16px 0 0; font:600 12px/1 var(--font-mono); letter-spacing:.12em; color:var(--primary); }
.pub-apply-guide .ig-bar{
    order:1; height:4px; border-radius:0; background:rgba(242,237,225,.16);
    -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/9 - 6px),transparent 0 calc(100%/9)); mask:repeating-linear-gradient(90deg,#000 0 calc(100%/9 - 6px),transparent 0 calc(100%/9));
}
.pub-apply-guide .ig-bar span{ border-radius:0; min-width:0; }
.pub-apply-guide .ig-title{ font-weight:900; font-size:clamp(44px,7vw,100px); line-height:.9; letter-spacing:-.01em; text-wrap:balance; max-width:12em; margin:0 auto; }
.pub-apply-guide .ig-sub{ font-size:18px; margin:16px auto 0; max-width:30em; }
.pub-apply-guide .ig-body{ margin:clamp(24px,4vw,40px) auto 0; gap:14px; max-width:620px; text-align:left; }
.pub-apply-guide .ig-body:has(.ig-grid){ max-width:900px; }
.pub-apply-guide .ig-q{ font-size:15px; margin-top:10px; }
.pub-apply-guide .ig-input{
    background:color-mix(in srgb,var(--surface) 70%,transparent); border:1px solid rgba(242,237,225,.22); border-radius:var(--radius-md);
    padding:12px 16px; font-size:20px; min-height:56px;
}
.pub-apply-guide .ig-input:focus{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.pub-apply-guide textarea.ig-input{ min-height:140px; }
.pub-apply-guide .ig-chips{ gap:10px; justify-content:center; }
.pub-apply-guide .ig-chip{ border-radius:var(--radius-sm); min-height:52px; padding:0 20px; font-size:17px; background:color-mix(in srgb,var(--surface) 70%,transparent); border:1px solid rgba(242,237,225,.22); }
.pub-apply-guide .ig-chip.is-on{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:700; }
.pub-apply-guide .ig-chip.is-on .ui-icon{ color:var(--on-primary); }
.pub-apply-guide .ig-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.pub-apply-guide .ig-chip.is-big{
    position:relative; flex-direction:column; align-items:flex-start; justify-content:flex-end; min-height:120px; padding:20px 22px;
    border:1px solid rgba(242,237,225,.22); border-radius:var(--radius); background:color-mix(in srgb,var(--surface) 72%,transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-align:left;
}
.pub-apply-guide .ig-chip.is-big span{ font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:clamp(26px,2.6vw,32px); line-height:1; }
.pub-apply-guide .ig-chip.is-big::after{ content:""; position:absolute; top:16px; right:16px; width:24px; height:24px; border:1.5px solid rgba(242,237,225,.35); border-radius:6px; }
.pub-apply-guide .ig-chip.is-big.is-on{ background:rgba(214,185,142,.16); color:var(--primary); border:1px solid var(--primary); box-shadow:inset 0 0 0 1px var(--primary); font-weight:600; }
.pub-apply-guide .ig-chip.is-big.is-on::after{ background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2019' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat; border-color:var(--primary); }
/* Back / Next bar, fixed to the bottom */
.pub-apply-guide .ig-foot{
    position:fixed; left:0; right:0; bottom:0; z-index:900; margin:0; padding:14px var(--pub-gutter); border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.pub-apply-guide .ig-foot .sb-btn-primary{ min-width:180px; min-height:52px; }
.pub-apply-guide .ig-status{ text-align:center; }
.pub-apply-guide .ig-review-section h3{ font-family:var(--font-mono); }
.pub-apply-guide .ig-review{ text-align:left; max-width:700px; margin:0 auto; }

/* Contact: the same stage, one narrow form */
.pub-stage-form-narrow{ max-width:640px; }
.pub-stage-form-narrow .pub-apply-card{ background:none; border:0; padding:0; max-width:none; margin:0; }
.pub-stage-form .pub-input,
.pub-stage-form .pub-apply-card textarea{
    background:color-mix(in srgb,var(--surface) 70%,transparent); border:1px solid rgba(242,237,225,.22); border-radius:var(--radius-md); padding:12px 16px; font-size:18px; min-height:56px;
}
.pub-stage-form .pub-input:focus,
.pub-stage-form .pub-apply-card textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); outline:none; }
.pub-stage-form .pub-apply-card textarea{ min-height:140px; }
.pub-stage-form .pub-field-label{ font:600 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin-top:22px; }
.pub-stage-form .pub-service-check{ border-radius:var(--radius-sm); min-height:52px; padding:0 20px; font-size:17px; }
.pub-stage-form .pub-service-check:has(input:checked){ background:var(--primary); color:var(--on-primary); font-weight:700; }
.pub-stage-form #contactSubmitBtn{ margin-top:28px; }

@media(max-width:700px){
    .pub-stage-form{ padding-bottom:120px; }
    .pub-apply-guide .ig-chip.is-big{ min-height:64px; flex-direction:row; align-items:center; justify-content:flex-start; padding:0 56px 0 18px; }
    .pub-apply-guide .ig-chip.is-big::after{ top:50%; transform:translateY(-50%); }
    .pub-apply-guide .ig-grid{ grid-template-columns:1fr; gap:10px; }
    .pub-apply-guide .ig-foot .sb-btn-primary{ flex:1; }
    .pub-stage-form-head h1{ font-size:clamp(44px,13vw,64px); }
}

/* ---- Footer: a real one (2026-10-19) ---- */
.pub-footer{ text-align:left; color:var(--text-secondary); font-size:15px; background:var(--forest); border-top:0; padding:clamp(40px,6vw,80px) var(--pub-gutter) 28px; margin-top:clamp(24px,4vw,56px); }
.pub-footer-top{ max-width:var(--pub-max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(32px,6vw,96px); }
.pub-footer-lead{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.pub-footer-brand{ margin:0; }
.pub-footer-line{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; line-height:.92; font-size:clamp(36px,4.4vw,60px); color:var(--cream); margin:0; max-width:8em; }
.pub-footer-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.pub-footer-cols h2{ font:600 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--primary); margin:0 0 10px; }
.pub-footer-cols a{ display:flex; align-items:center; min-height:44px; color:var(--text-secondary); text-decoration:none; font-size:16px; }
.pub-footer-cols a:hover{ color:var(--primary); }
.pub-footer-legal{ max-width:var(--pub-max); margin:clamp(32px,5vw,64px) auto 0; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); }
@media(max-width:820px){ .pub-footer-top{ grid-template-columns:1fr; } }
@media(max-width:480px){ .pub-footer-cols{ grid-template-columns:1fr 1fr; } }
.pub-footer .pub-btn-primary{ color:var(--on-primary); }
.pub-footer .pub-btn-primary:hover{ color:var(--on-primary); }
.pub-footer-lead .pub-btn-primary{ margin-top:6px; }
.pub-apply-done .pub-card-icon{ display:flex; justify-content:center; color:var(--sage); margin-bottom:16px; }
.pub-apply-done .pub-card-icon .ui-icon,.pub-apply-done .pub-card-icon svg{ width:56px; height:56px; }
.pub-apply-done .ig-title{ margin-top:0; }
.pub-logo,.pub-footer-brand{ min-height:44px; }

/* ---- Home: app tour (phone with a video per feature) ---- */

.pub-tour-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.pub-tour-tab{
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-secondary);
    font:600 14.5px/1 var(--font-body);
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s;
}
.pub-tour-tab:hover{border-color:var(--primary);color:var(--text);}
.pub-tour-tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.pub-tour-blurb{min-height:3.4em;}
.pub-tour-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0;}
.pub-tour-stage::before{
    content:"";position:absolute;width:min(460px,90%);aspect-ratio:1/1;border-radius:50%;
    background:radial-gradient(circle,rgba(201,173,132,.2),transparent 66%);pointer-events:none;
}
.pub-tour-phone{
    position:relative;width:min(300px,72vw);aspect-ratio:440/928;
    border-radius:14%/6.6%;overflow:hidden;background:#06100b;
    box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.pub-tour-phone video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;}
.pub-tour-play{
    position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
    border-radius:50%;border:1.5px solid rgba(242,237,225,.5);background:rgba(11,26,20,.72);
    color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.pub-tour-play[hidden]{display:none;}
.pub-tour-play .ui-icon{width:24px;height:24px;margin-left:3px;}
.pub-tour-note{position:relative;margin:14px 0 0;font:600 11.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
@media(max-width:820px){
    .pub-tour .pub-tour-stage{order:-1;}
    .pub-tour-phone{width:min(260px,68vw);}
    .pub-tour-blurb{min-height:0;}
}