@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.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; padding:var(--space-lg); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--white); 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; }
  main > .container > p { max-width:58ch; }
  .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 nav { display:flex; flex-direction:column; gap:var(--space-md); }
  #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: 640px) {
    .desktop-navigation,header > nav > a[href="/admin"] { display:none; }
    .mobile-menu-toggle { display:inline-flex; margin-left:auto; }
  }
  .contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--space-xl); }
  @media (max-width: 760px) { .contact-layout { grid-template-columns:minmax(0,1fr); } }
  .team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
  .team-grid article > :last-child > p:last-child { margin-bottom:0; }
  @media (max-width: 900px) { .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width: 560px) { .team-grid { grid-template-columns:minmax(0,1fr); } }
  /* Global styles go here */
  nav > a,.desktop-navigation > a {
    text-decoration: none;
    color: var(--darker);
  }

  /* Full-height shell with independently scrolling navigation and editing. */
  .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); }
  }
  /* Approved Content desk art direction: angles, specimen proportions and route
     geometry cannot be expressed by the loaded Prewind 1.3.1 utilities. */
  html { scroll-behavior:smooth; scroll-padding-top:6rem; scrollbar-color:var(--brand-1) var(--lighter); }
  ::selection { background:var(--brand-2); color:var(--black); }
  body > header { z-index:20; border-bottom:1px solid var(--light); }
  header > nav { min-height:5.5rem; }
  .desktop-navigation { margin-left:auto; align-items:center; }
  .desktop-navigation > .ui-brand-1,#mobile-navigation .ui-brand-1 { color:var(--white); }
  a:has(svg) { display:inline-flex; align-items:center; gap:.5rem; }
  h1,h2,h3 { font-weight:700; }
  .desk { position:relative; isolation:isolate; min-height:51rem; height:58vw; max-height:59rem; overflow:hidden; }
  .desk-copy { position:relative; z-index:2; width:66%; padding:var(--space-lg) 0 0 4.5%; pointer-events:none; }
  .desk h1 { font-size:clamp(2.6rem,4.6vw,5.8rem); line-height:1.04; letter-spacing:-.035em; margin:0 0 var(--space-md); text-wrap:initial; }
  .desk-copy p { max-width:52ch; font-size:clamp(1rem,1.5vw,1.45rem); }
  .workbench { position:absolute; inset:0 0 4.5rem; }
  .desk-route { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .desk-route path { fill:none; stroke:var(--brand-1); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
  .desk-route [data-progress] { stroke:var(--brand-2); stroke-dasharray:1000; stroke-dashoffset:667; }
  .desk-route circle { fill:var(--brand-1); }
  .specimen,.conversation,.print-fragment { position:absolute; transform:rotate(var(--angle)); }
  .specimen { --angle:0deg; display:block; text-align:left; height:auto; padding:clamp(.7rem,1.25vw,1.4rem); border:0; border-radius:0; background:var(--white); color:var(--black); box-shadow:0 12px 24px rgb(24 35 49 / .18); line-height:1.3; min-height:0; font-weight:400; transition:box-shadow 220ms,transform 220ms; }
  .specimen:hover { filter:none; transform:rotate(calc(var(--angle) + 1deg)) translateY(-5px); box-shadow:0 18px 34px rgb(24 35 49 / .24); }
  .specimen:focus-visible { z-index:5; outline-offset:7px; }
  .specimen[aria-pressed=true] { box-shadow:0 14px 30px rgb(24 35 49 / .25); }
  .specimen-label { display:block; font-size:clamp(.65rem,.8vw,.8rem); border-bottom:1px solid var(--light); padding-bottom:.6rem; margin-bottom:.7rem; }
  .specimen img { display:block; width:100%; height:auto; margin-bottom:.7rem; }
  .specimen strong { display:block; font-size:clamp(1.05rem,1.9vw,2rem); line-height:1.08; letter-spacing:-.025em; margin-bottom:.5rem; }
  .specimen > span:not(.specimen-label):not(.sample-cta) { display:block; font-size:clamp(.7rem,.9vw,.95rem); }
  .specimen small { display:block; font-size:clamp(.6rem,.7vw,.75rem); border-top:1px solid var(--light); padding-top:.65rem; margin-top:.8rem; }
  .sample-cta { display:inline-flex; align-items:center; gap:.5rem; background:var(--brand-1); color:var(--white); font-size:clamp(.65rem,.85vw,.85rem); padding:.5rem .65rem; margin-top:.65rem; }
  .specimen[data-kind=website] { --angle:-8deg; left:12%; top:41%; width:21%; }
  .specimen[data-kind=detail] { --angle:-5deg; left:37%; top:44%; width:20%; }
  .specimen[data-kind=article] { --angle:7deg; right:9%; top:5%; width:23%; }
  .specimen[data-kind=article] img { float:left; width:45%; margin:.8rem .7rem .5rem 0; }
  .specimen[data-kind=article] small { clear:both; }
  .specimen[data-kind=social] { --angle:10deg; right:3%; top:48%; width:19%; }
  .conversation { --angle:8deg; left:58%; top:73%; width:18%; padding:1rem; text-align:center; background:var(--lighter); box-shadow:0 8px 20px rgb(24 35 49 / .14); }
  .conversation strong { display:block; font-size:clamp(.8rem,1vw,1.05rem); line-height:1.3; }
  .conversation span { display:block; font-size:.7rem; margin-top:.5rem; }
  .print-fragment { --angle:-12deg; width:22%; left:-12%; top:52%; padding:1rem; background:var(--white); box-shadow:0 8px 18px rgb(24 35 49 / .15); }
  .print-fragment img { display:block; width:100%; height:auto; }
  .desk-controls { position:absolute; inset:auto 4.5% .8rem; z-index:4; }
  .desk-controls p { font-size:.85rem; max-width:60ch; margin:0; }
  .desk-controls button { min-height:2.5rem; padding:.4rem .65rem; font-size:.8rem; background:transparent; border:1px solid var(--light); }
  .offer-strip { border-block:1px solid var(--light); padding-block:var(--space-md); }
  .offer-strip p { margin:0; }
  .offer-strip > div > div:last-child { font-size:.9rem; }
  .start-link { color:var(--black); font-size:clamp(1.7rem,3vw,3.5rem); font-weight:700; letter-spacing:-.035em; text-decoration-thickness:3px; text-decoration-color:var(--brand-1); text-underline-offset:.2em; }
  .start-link:hover { color:var(--brand-1); }
  .price { font-size:clamp(3rem,4vw,4.8rem); font-weight:700; line-height:1.1; letter-spacing:-.035em; margin:0 0 var(--space-sm); font-variant-numeric:tabular-nums; }
  .price span { font-size:1rem; letter-spacing:0; }
  .introduction { display:grid; grid-template-columns:42% 58%; background:var(--lighter); max-width:1440px; margin-inline:auto; padding:var(--space-xl) 4.5%; align-items:center; gap:var(--space-lg); }
  .introduction h2 { font-size:clamp(2rem,3vw,3.5rem); margin-top:0; max-width:21ch; }
  .introduction p { max-width:48ch; }
  .portrait { overflow:hidden; background:#80817f; }
  .portrait img { display:block; width:100%; height:auto; }
  .assurance { background:var(--brand-1); color:var(--white); }
  .assurance h2,.example-chapter h2 { font-size:clamp(2.5rem,4.6vw,5.5rem); line-height:1.05; margin-top:0; }
  .handoff { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl); align-items:start; }
  .plan-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-block:var(--space-xl) var(--space-lg); }
  .plan-stages button { display:block; text-align:left; color:var(--white); background:transparent; border:0; border-top:2px solid rgb(255 255 255 / .5); padding:var(--space-md) var(--space-md) 0 0; border-radius:0; }
  .plan-stages button:hover { filter:none; color:var(--brand-2); }
  .plan-stages button:focus-visible { outline-color:var(--brand-2); }
  .plan-stages span { display:block; font-size:.9rem; margin-bottom:var(--space-sm); }
  .plan-stages strong { display:block; font-size:var(--text-lg); line-height:1.2; }
  .plan-stages small { display:block; font-size:.85rem; font-weight:400; margin-top:var(--space-xs); }
  .plan-stages [aria-pressed=true] { color:var(--brand-2); border-top-color:var(--brand-2); }
  .explanation { display:grid; grid-template-columns:1fr 1.5fr; gap:var(--space-lg); border-top:1px solid rgb(255 255 255 / .4); padding-top:var(--space-md); }
  .explanation strong { display:block; }
  .explanation p { min-height:4.8em; margin-bottom:0; }
  .example-chapter { background:var(--brand-1-light); }
  .feature-print { margin:0; transform:rotate(3deg); background:var(--white); box-shadow:0 16px 35px rgb(24 35 49 / .14); padding:var(--space-md); }
  .feature-print img { display:block; width:100%; height:auto; }
  .feature-print figcaption { padding-top:var(--space-sm); }
  .feature-print figcaption strong { display:block; font-size:var(--text-xl); line-height:1.15; }
  .feature-print figcaption span { display:block; margin-top:var(--space-xs); font-size:.8rem; color:var(--dark); }
  .scope,.proof { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl); }
  .scope h3 { margin-top:var(--space-md); }
  #included h2,.proof h2 { font-size:clamp(2rem,3.2vw,4rem); max-width:24ch; }
  .proof { border-block:1px solid var(--light); }
  .proof blockquote { padding:0; border:0; margin:var(--space-lg) 0; }
  .proof blockquote p { font-size:var(--text-xl); line-height:1.3; }
  cite { font-size:.9rem; font-style:normal; color:var(--dark); }
  .questions { max-width:58rem; }
  details { border-bottom:1px solid var(--light); padding-block:var(--space-md); }
  summary { cursor:pointer; font-size:var(--text-lg); font-weight:700; }
  details > p { padding-top:var(--space-xs); }
  .closing { background:var(--brand-2); }
  .closing h2 { margin-top:0; font-size:clamp(2.5rem,4vw,4.5rem); }
  .closing button { background:var(--black); color:var(--white); border-color:var(--black); }
  .closing button:disabled { opacity:1; }
  @media(max-width:900px) {
    header > nav { gap:var(--space-sm); }
    .desktop-navigation { gap:var(--space-sm); font-size:.9rem; }
    .desk { min-height:54rem; height:90vw; }
    .desk-copy { width:73%; }
    .desk h1 { font-size:clamp(2.6rem,5vw,4rem); }
    .desk-copy p { font-size:1rem; max-width:40ch; }
    .specimen[data-kind=article] { top:26%; right:2%; width:26%; }
    .specimen[data-kind=website] { top:47%; left:9%; width:26%; }
    .specimen[data-kind=detail] { display:none; }
    .specimen[data-kind=social] { top:61%; right:2%; width:24%; }
    .conversation { top:35%; left:40%; width:24%; }
    .desk-controls p { max-width:42ch; }
    .desk-controls { bottom:.8rem; }
    .introduction { grid-template-columns:40% 60%; gap:var(--space-sm); }
    .introduction h2 { font-size:2.2rem; }
    .introduction p { font-size:.95rem; }
    .handoff { gap:var(--space-lg); }
  }
  @media(max-width:640px) {
    header > nav { min-height:4.5rem; }
    .desk { height:auto; min-height:0; max-height:none; }
    .desk-copy { width:auto; padding:var(--space-lg) 6% 0; }
    .desk h1 { font-size:clamp(2.3rem,8.1vw,3.4rem); }
    .desk-copy p { font-size:1rem; }
    .workbench { position:relative; height:50rem; margin-top:var(--space-lg); }
    .specimen[data-kind=website] { width:44%; left:4%; top:22%; --angle:-3deg; }
    .specimen[data-kind=article] { width:44%; right:4%; top:1%; --angle:3deg; }
    .specimen[data-kind=detail] { display:none; }
    .specimen[data-kind=social] { width:44%; right:4%; top:52%; --angle:3deg; }
    .specimen strong { font-size:clamp(1.05rem,4.1vw,1.5rem); }
    .specimen-label { font-size:.75rem; }
    .specimen > span:not(.specimen-label):not(.sample-cta) { font-size:.875rem; }
    .specimen small { font-size:.75rem; }
    .specimen[data-kind=article] img { float:none; width:100%; margin:.8rem 0 .7rem; }
    .conversation { top:1%; left:4%; width:44%; padding:.7rem; --angle:-4deg; }
    .conversation strong { font-size:.75rem; }
    .conversation span { font-size:.65rem; }
    .print-fragment { display:none; }
    .desk-controls { position:relative; inset:auto; margin:0 6% var(--space-md); }
    .desk-controls p { font-size:.8rem; }
    .offer-strip > div { gap:var(--space-md); }
    .offer-strip .start-link { font-size:1.5rem; }
    .offer-strip .price { font-size:2.3rem; }
    .offer-strip > div > div:last-child { flex-basis:100%; }
    .introduction,.scope,.proof,.handoff,.explanation { grid-template-columns:minmax(0,1fr); }
    .introduction { padding:var(--space-xl) 6%; }
    .introduction > div:last-child { padding:var(--space-md) 0 0; }
    .portrait { max-width:28rem; }
    .introduction h2 { font-size:clamp(2rem,7vw,3rem); }
    .plan-stages { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
    .plan-stages button { padding-right:0; }
    .plan-stages span { margin-bottom:var(--space-xs); }
    .explanation p { min-height:0; }
    .feature-print { transform:rotate(1deg); margin-top:var(--space-md); }
  }
  @media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .specimen { transition:none; }
    .specimen:hover { transform:rotate(var(--angle)); }
  }
}