@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("navigation.css");
@import url("https://unpkg.com/prewindcss@1.3.1");

@layer styles {
  /* Shared proportions for the small, single-purpose owner screens. */
  .admin-access { max-width:29rem; margin:clamp(0rem,4vh,3rem) auto; box-shadow:0 8px 32px rgb(0 0 0 / .035); }
  .admin-access > h1 { letter-spacing:-.035em; }
  .admin-access > p { font-size:var(--text-base); }
  .admin-access > p:last-child { font-size:max(.875rem,var(--text-sm)); }
  .container { min-width:0; max-width:100%; }
  .admin-access form { margin-block:var(--space-lg); }
  .admin-access .form-field { margin-bottom:var(--space-md); font-size:var(--text-sm); }
  .admin-access input { font-size:max(1rem,var(--text-base)); }
  .admin-access .code-input { max-width:none; }
  .admin-access [role="alert"],.admin-access [role="status"] { padding:var(--space-sm); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--lighter); }
  main > .container > h1 { max-width:20ch; }
  main > .container > h1:first-child { margin-top:0; }
  .desktop-navigation { display:flex; gap:var(--space-md); }
  .mobile-menu-toggle { display:none; align-items:center; justify-content:center; width:48px; height:48px; padding:8px; border:0; background:transparent; color:var(--black); }
  .mobile-menu-toggle:hover { background:transparent; }
  .mobile-menu-toggle span { display:block; width:30px; height:22px; background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat; }
  #mobile-navigation { margin:0 0 0 auto; inset:var(--flea-toolbar-height,0px) 0 0; width:min(22rem,100%); height:calc(100dvh - var(--flea-toolbar-height,0px)); overflow:auto; padding:var(--space-md); border:0; background:var(--white); color:var(--black); opacity:0; transform:translateX(24px); }
  #mobile-navigation:popover-open { opacity:1; transform:translateX(0); }
  #mobile-navigation::backdrop { inset:var(--flea-toolbar-height,0px) 0 0; background:#0005; opacity:0; }
  #mobile-navigation:popover-open::backdrop { opacity:1; }
  @media (prefers-reduced-motion:no-preference) {
    #mobile-navigation { transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    #mobile-navigation::backdrop { transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    @starting-style {
      #mobile-navigation:popover-open { opacity:0; transform:translateX(24px); }
      #mobile-navigation:popover-open::backdrop { opacity:0; }
    }
  }
  #mobile-navigation button[popovertargetaction="hide"] { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; color:inherit; font-size:0; }
  #mobile-navigation button[popovertargetaction="hide"]::before,
  #mobile-navigation button[popovertargetaction="hide"]::after { content:""; position:absolute; top:50%; left:50%; width:24px; height:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
  #mobile-navigation button[popovertargetaction="hide"]::after { transform:translate(-50%,-50%) rotate(-45deg); }
  @media (max-width: 767px) {
    .desktop-navigation,header > nav > a[href="/admin"] { display:none; }
    .mobile-menu-toggle { display:inline-flex; margin-left:auto; }
  }
  nav > a,.desktop-navigation > a {
    text-decoration: none;
    color: var(--darker);
  }

  /* Full-height sign-in shell with independently scrolling content. */
  .admin-shell {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .admin-main { min-height: 0; overflow: auto; }
  .admin-workspace {
    height: 100%;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .admin-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .admin-page-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
  .admin-page-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
  .admin-page-list a[aria-current="page"] {
    background: var(--white);
    color: var(--black);
    font-weight: var(--font-semibold);
  }
  .admin-content { min-width: 0; overflow-y: auto; }
  .admin-panel { max-width: 56rem; }
  @media (max-width: 640px) {
    .admin-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 30dvh) minmax(0, 1fr); }
  }

  /* Selected A2 hero and A3 process. Shared components and responsive geometry. */
  .hero { padding: 32px 0 0; text-align: center; }
  .hero h1 { font-size: 48px; font-weight: 800; line-height: 1.13; letter-spacing: -.035em; max-width: 760px; margin: 0 auto; text-wrap: balance; }
  .hero h1 span { display: block; }
  .lead { font-size: 18px; line-height: 1.65; color: var(--dark); max-width: 540px; margin: 18px auto 0; }
  .hero-offer { margin: 21px auto 0; gap: 20px; }
  .price { color: var(--black); font-weight: 800; font-size: 23px; letter-spacing: -.025em; line-height: 1.25; }
  .terms { font-size: 13px; color: var(--dark); margin-top: 3px; }
  .guarantee { font-size: 13px; color: var(--dark); margin: 10px auto 0; max-width: 54ch; }
  .film { max-width: 640px; margin: 0; }
  .vsl-player { aspect-ratio: 16/9; position: relative; isolation: isolate; overflow: hidden; border-radius: 8px; background: #c8cccb; }
  .vsl-poster { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; position: absolute; inset: 0; }
  .vsl-label { position: absolute; top: 12px; left: 12px; background: #f6f7f4; color: #202925; border-radius: 4px; font-size: 12px; padding: 4px 8px; }
  .vsl-play { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); background: var(--black); color: #fff; border: 0; border-radius: var(--rounded); min-height: 48px; padding: 10px 17px; font-size: 14px; font-weight: 750; }
  .vsl-play:hover { background: #35483f; }
  .vsl-play svg { width: 18px; height: 18px; flex-shrink: 0; }
  .video-caption { max-width: 56ch; font-size: 12px; color: var(--dark); margin: 8px auto 0; text-align: left; }
  .video-status { font-size: 14px; color: var(--dark); margin: 8px auto 0; }
  .video-status:empty { display: none; }
  .founder-note { font-size: 15px; color: var(--dark); max-width: 19ch; margin: 0; line-height: 1.7; text-align: left; }
  .founder-note strong { color: var(--black); font-weight: 750; display: block; font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
  .vsl-example { position: absolute; right: 18px; top: 24%; width: 145px; padding: 13px; background: #f6f7f4; border-radius: 4px; color: #202925; text-align: left; box-shadow: 0 8px 24px rgb(32 41 37/.13); }
  .vsl-example small { font-size: 12px; line-height: 1.4; display: block; }
  .vsl-example strong { display: block; font-size: 17px; line-height: 1.25; margin: 12px 0; }
  .vsl-example span { display: block; height: 3px; background: #c9d3cc; margin: 5px 0; }
  .vsl-example i { display: block; height: 12px; background: #45645e; width: 55%; margin-top: 12px; }
  .proof { padding: 29px 0 34px; margin: 0 auto; max-width: 650px; text-align: center; }
  .proof blockquote { font-size: 19px; line-height: 1.6; max-width: 50ch; margin: 0 auto; }
  .proof p { font-size: 12px; color: var(--dark); max-width: 56ch; margin: 10px auto 0; }
  .proof a { text-decoration: underline; }
  .explanation { padding: 40px 0 50px; border-top: 1px solid var(--light); max-width: 940px; margin: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; }
  .narrative { margin: 0; }
  .narrative p { color: var(--dark); max-width: 44ch; }
  .narrative p+p { margin-top: 16px; }
  .process { margin-top: 0; }
  .process>h2 { font-size: 25px; max-width: 30ch; }
  .process>p { font-size: 14px; color: var(--dark); margin-top: 13px; max-width: 42ch; }
  .process ol { list-style: none; padding: 0; margin-top: 22px; position: relative; }
  .process ol:before { content: ''; position: absolute; top: 20px; left: 20px; right: auto; height: auto; background: var(--light); bottom: 30px; width: 1px; }
  .process li { position: relative; text-align: left; display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 15px; margin-bottom: 18px; }
  .process .stage-icon { position: relative; width: 42px; height: 42px; background: var(--white); color: #45645e; border: 1px solid #b9c8be; border-radius: 50%; }
  .stage-icon svg { width: 21px; height: 21px; }
  .process li:nth-child(3) .stage-icon { background: #45645e; color: #fff; border-color: #45645e; }
  .process h3 { font-size: 15px; line-height: 1.4; margin-top: 0; max-width: 29ch; }
  .process li p { font-size: 13px; line-height: 1.6; color: var(--dark); margin-top: 4px; max-width: 36ch; }
  .service-plan { padding: 40px 0; border-top: 1px solid var(--light); max-width: 940px; margin: 0 auto; }
  .service-plan>h2 { max-width: 26ch; margin-bottom: 26px; }
  .plan-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
  .plan-columns p { font-size: 15px; color: var(--dark); margin-top: 12px; max-width: 49ch; }
  .onboarding { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--light); max-width: 650px; }
  .onboarding p { font-size: 15px; color: var(--dark); margin-top: 10px; max-width: 60ch; }
  .answers { max-width: 650px; margin: 0 auto; padding: 14px 0 30px; }
  .answers details { border-bottom: 1px solid var(--light); padding: 16px 0; }
  .answers summary { font-size: 15px; font-weight: 700; cursor: pointer; }
  .answers p { font-size: 14px; color: var(--dark); margin-top: 12px; max-width: 60ch; }
  .closing-offer { max-width: 650px; margin: 0 auto; text-align: center; padding: 32px 0 26px; }
  .closing-offer h2 { max-width: 23ch; margin: auto; font-size: 29px; }
  .closing-offer .hero-offer { margin-top: 22px; }
  .video-frame { max-width: 940px; background: #fff; padding: 22px; margin: 26px auto 0; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 26px; align-items: center; border-radius: 12px; }
  .narrative h2 { margin-bottom: 22px; }
  .stage-icon { grid-row: 1/3; }
  @media(max-width:767px) {
  .hero { padding-top: 22px; }
  .hero h1 { font-size: 34px; max-width: 19ch; line-height: 1.16; letter-spacing: -.03em; }
  .hero h1 span { display: inline; }
  .hero h1 span+span:before { content: ' '; }
  .lead { font-size: 16px; max-width: 34ch; line-height: 1.6; margin-top: 15px; }
  .hero-offer { gap: 14px; max-width: 340px; }
  .hero-offer .ui-button { padding: 10px 14px; gap: 8px; font-size: 13px; }
  .price { font-size: 21px; }
  .terms { font-size: 12px; max-width: 20ch; }
  .guarantee { font-size: 12px; max-width: 36ch; }
  .film { margin-top: 22px; max-width: none; }
  .vsl-example { display: none; }
  .vsl-play { font-size: 13px; bottom: 12px; min-height: 44px; padding: 9px 14px; white-space: nowrap; }
  .vsl-label { font-size: 12px; top: 9px; left: 9px; padding: 3px 7px; }
  .video-caption { font-size: 12px; line-height: 1.6; max-width: 36ch; }
  .founder-note { font-size: 13px; max-width: 35ch; text-align: center; margin: auto; }
  .proof { padding: 24px 0 28px; max-width: 36ch; }
  .proof blockquote { font-size: 17px; line-height: 1.65; max-width: 34ch; }
  .proof p { font-size: 12px; max-width: 35ch; }
  .explanation { display: block; padding: 29px 0 32px; }
  .narrative h2 { margin-bottom: 18px; }
  .narrative p { max-width: 36ch; font-size: 16px; }
  .process { margin-top: 30px; }
  .process>h2 { font-size: 25px; max-width: 24ch; }
  .process ol { margin-top: 23px; }
  .process li { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 16px; margin-bottom: 21px; }
  .process h3 { margin-top: 0; font-size: 15px; max-width: 29ch; }
  .process li p { font-size: 14px; margin-top: 4px; max-width: 31ch; }
  .process>p { font-size: 14px; max-width: 36ch; }
  .service-plan { padding: 28px 0; }
  .plan-columns { display: block; }
  .plan-columns>div+div { margin-top: 27px; }
  .plan-columns p { font-size: 15px; max-width: 36ch; }
  .onboarding { margin-top: 25px; }
  .onboarding p { max-width: 36ch; }
  .closing-offer h2 { font-size: 27px; }
  .video-frame { padding: 15px; margin-top: 22px; display: flex; flex-direction: column-reverse; gap: 15px; align-items: stretch; }
  .founder-note strong { font-size: 13px; display: inline; margin: 0; }
  .answers p { max-width: 36ch; }
  }
  @media(max-width:350px) {
  .hero h1 { font-size: 30px; }
  .hero-offer { gap: 10px; }
  .hero-offer .ui-button { padding: 10px 12px; }
  .price { font-size: 19px; }
  .terms { font-size: 12px; max-width: 17ch; }
  }

  html { scroll-behavior:smooth; scroll-padding-top:100px; }
  body { font-family:var(--font-body); color:var(--black); background:var(--white); font-size:16px; line-height:1.65; }
  button,a { touch-action:manipulation; }
  button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
  h1,h2,h3,p,figure,blockquote,ol { margin:0; }
  h2 { font-size:var(--text-2xl); line-height:1.2; letter-spacing:-.025em; font-weight:750; max-width:23ch; }
  h3 { font-size:var(--text-xl); line-height:1.3; font-weight:750; max-width:30ch; }
  p { color:var(--dark); max-width:var(--max-w-text); }
  .vsl-media { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--black); z-index:1; }
  .vsl-label,.vsl-example,.vsl-play { z-index:2; }
  .vsl-reset { margin-top:10px; background:transparent; border:0; padding:8px 0; min-height:44px; font-size:13px; text-decoration:underline; color:var(--black); }
  .video-status { max-width:56ch; }
  .answers h2 { margin-bottom:12px; font-size:27px; }
  .signup-summary { max-width:49ch; margin:16px auto 0; }
  .signup-status { max-width:49ch; margin:14px auto 0; font-size:13px; }
  .guarantee-note { margin:24px auto 0; padding:24px 0 10px; border-top:1px solid var(--light); max-width:580px; }
  .guarantee-note h3 { margin:0 auto 12px; }
  .guarantee-note p { font-size:14px; max-width:55ch; margin:auto; }
  @media(max-width:767px) { h2 { font-size:28px; } .vsl-player { min-width:0; } }
  @media(max-width:350px) { body > header img { width:130px; } }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }

  /* Shared site shell, preserving native navigation and authenticated editing. */
  .skip { position:fixed; top:-80px; left:20px; z-index:100; padding:12px 20px; background:var(--black); color:var(--white); }
  .skip:focus { top:12px; }
  body > header { z-index:20; }
  body > header > nav { min-height:76px; }
  body > header img { width:176px; height:auto; }
  .desktop-navigation > a { font-size:13px; font-weight:700; }
  .desktop-navigation > a:hover { text-decoration:underline; text-underline-offset:5px; }
  .desktop-navigation > .ui-button { min-height:0; padding:10px 18px; color:#fff; }
  body > footer { background:var(--white); color:var(--dark); }
  body > footer a { color:inherit; }
  body > footer .container { border-top:1px solid var(--light); }
  @media (max-width:800px) { body > header > nav { min-height:66px; } body > header img { width:143px; } }


}