@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("prewind-1.3.1.css");

@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); }
  }
  .blog-public { max-width: 52rem; }
  .blog-cover { display:block; width:100%; height:auto; margin-block:var(--space-lg); }
  .blog-body { overflow-wrap:anywhere; }
  .blog-post-list { list-style:none; padding:0; }
  .blog-post-list li { display:flex; justify-content:space-between; gap:var(--space-md); padding-block:var(--space-md); border-bottom:1px solid var(--light); }
  .blog-format { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-block:var(--space-sm); }
  .blog-format button { font-size:var(--text-sm); }
  .blog-rich-editor { min-height:18rem; padding:var(--space-md); background:var(--white); border:1px solid var(--light); border-radius:var(--rounded); overflow-wrap:anywhere; }
  .blog-rich-editor:focus-visible { outline:2px solid var(--brand-1); outline-offset:2px; }
  .blog-cover-field { margin-block:var(--space-lg); padding:var(--space-md); border:1px solid var(--light); }
  .blog-cover-preview { display:block; max-width:100%; width:20rem; max-height:15rem; object-fit:contain; margin-block:var(--space-sm); }
  .blog-cover-preview[hidden] { display:none; }
  .blog-library { width:min(44rem,calc(100vw - 2rem)); max-height:80dvh; overflow:auto; padding:var(--space-lg); border:0; border-radius:var(--rounded); background:var(--white); }
  .blog-library::backdrop { background:#0005; }
  .blog-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:var(--space-sm); margin-block:var(--space-md); }
  .blog-photo-grid img { display:block; width:100%; height:6rem; object-fit:cover; }
  .blog-photo-grid button { overflow-wrap:anywhere; }

  #blog-editor { max-width:none; }
  #blog-editor [hidden] { display:none; }
  #blog-actions { position:sticky; bottom:0; background:var(--bg-color); border-top:1px solid var(--light); }

}

@layer styles {
  html { scroll-behavior:smooth; scroll-padding-top:7rem; scrollbar-color:var(--brand-1) var(--lighter); }
  ::selection { background:var(--mint); color:var(--brand-2); }
  :focus-visible { outline:3px solid var(--brand-1); outline-offset:4px; }
  input { caret-color:var(--brand-1); }
  header { z-index:30; border-bottom:1px solid rgb(33 63 69 / .07); }
  header .desktop-navigation { font-size:.875rem; font-weight:600; }
  header .ui-button { font-size:.875rem; min-height:44px; }
  .ui-button { border-radius:9px; box-shadow:none; padding:.9rem 1.3rem; }
  .ui-button svg { width:18px; height:18px; }
  a > svg { display:inline-block; vertical-align:middle; width:18px; height:18px; }
  .skip-link { position:fixed; top:-100px; left:16px; padding:12px 20px; background:var(--white); z-index:100; }
  .skip-link:focus { top:12px; }
  #hero-title br { display:none; }
  #hero-title { letter-spacing:var(--heading-tracking); line-height:1.02; font-weight:600; }
  .hero-description { font-size:clamp(1rem,.85rem + .5vw,1.25rem); line-height:1.65; color:var(--dark); max-width:48ch; }
  .demo-stage { background:var(--stage-green); border-radius:16px; overflow:hidden; }
  .demo-menubar { height:38px; background:rgb(255 255 255 / .55); font-size:12px; }
  .demo-menu-word { font-weight:700; }
  .demo-canvas { position:relative; height:clamp(320px,27vw,390px); padding:35px 7%; }
  .sample-window { width:62%; overflow:hidden; border-radius:10px; background:var(--white); box-shadow:var(--soft-elevation); transform:rotate(-2deg); }
  .window-chrome { padding:9px 12px; font-size:11px; color:var(--dark); background:#F0F5F4; }
  .traffic-lights { display:flex; gap:5px; }
  .traffic-lights i { width:7px; height:7px; border-radius:50%; background:#e88877; }
  .traffic-lights i:nth-child(2) { background:#e9c66f; }
  .traffic-lights i:nth-child(3) { background:#8BBBAE; }
  .sample-photo { position:relative; aspect-ratio:2.4; }
  .sample-photo > img { display:block; width:100%; height:100%; object-fit:cover; }
  .selection-box { position:absolute; inset:16% 14%; border:1px solid var(--white); background:rgb(255 255 255 / .04); }
  .selection-box span { position:absolute; width:7px; height:7px; border:1px solid var(--white); background:var(--brand-1); }
  .selection-box span:nth-child(1) { top:-4px; left:-4px; }.selection-box span:nth-child(2) { top:-4px; right:-4px; }.selection-box span:nth-child(3) { bottom:-4px; left:-4px; }.selection-box span:nth-child(4) { bottom:-4px; right:-4px; }
  .demo-menu { position:absolute; right:6%; top:34px; width:315px; padding:14px 10px 8px; background:#F6FAF9; border-radius:12px; box-shadow:var(--soft-elevation); font-size:12px; }
  .demo-menu > div:first-child { padding-inline:5px; }
  .demo-menu-action { display:flex; width:100%; justify-content:flex-start; gap:9px; padding:10px 8px; min-height:42px; font-size:12px; font-weight:500; border:0; background:transparent; border-radius:5px; }
  .demo-menu-action:hover { background:var(--brand-1-light); }
  .demo-menu-action svg { width:17px; height:17px; }
  .demo-menu-action kbd { margin-left:auto; color:var(--dark); font-size:11px; }
  .demo-menu-foot { margin-top:6px; border-top:1px solid var(--light); padding:10px 5px 3px; font-size:10px; color:var(--dark); }
  .link-receipt { position:absolute; bottom:47px; right:9%; display:flex; align-items:center; gap:12px; width:390px; padding:17px; background:var(--white); border-radius:12px; box-shadow:var(--soft-elevation); }
  .receipt-check { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; background:var(--mint); }
  .receipt-check svg { width:20px; height:20px; }
  .link-receipt strong,.link-receipt span:not(.receipt-check) { display:block; font-size:12px; }
  .link-receipt #demo-url { font-size:11px; color:var(--dark); margin-top:4px; overflow-wrap:anywhere; }
  #copy-demo { padding:8px; min-height:36px; margin-left:auto; background:transparent; border:0; }
  #copy-demo svg { width:18px; height:18px; }
  .demo-bottom { font-size:11px; color:var(--brand-2); border-top:1px solid rgb(33 63 69 / .1); }
  .demo-stage[data-running] .selection-box { animation:capture 850ms cubic-bezier(.16,1,.3,1); }
  .demo-stage[data-running] .link-receipt { animation:receipt 850ms cubic-bezier(.16,1,.3,1); }
  @keyframes capture { 0% { clip-path:inset(0 80% 80% 0); } 55%,100% { clip-path:inset(-8px); } }
  @keyframes receipt { 0%,55% { transform:translateY(14px); } 100% { transform:translateY(0); } }
  .story-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:var(--space-xl); margin-bottom:var(--space-lg); }
  .story-heading h2,.preview-band h2,.offer-panel h2,.faq-layout h2 { font-size:clamp(2rem,1.5rem + 1.9vw,3.4rem); line-height:1.1; letter-spacing:-.035em; font-weight:600; }
  .story-heading p { margin:0; max-width:35ch; }
  .workflow { max-width:none; list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); }
  .workflow li { margin:0; }
  .workflow h3,.detail-list h3 { font-size:1.1rem; letter-spacing:-.02em; line-height:1.4; }
  .workflow p,.detail-list p { font-size:.925rem; color:var(--dark); line-height:1.8; }
  .workflow-art { position:relative; height:180px; display:flex; align-items:center; justify-content:center; background:#E6EEEC; border-radius:12px; margin-bottom:var(--space-md); overflow:hidden; }
  .capture-art { background:#E6EEEC; }
  .capture-corner { width:110px; height:75px; border:1px dashed var(--brand-1); background:rgb(166 217 205 / .5); transform:translate(-22px,-14px); }
  .crosshair { position:absolute; top:39px; right:65px; }
  .crosshair svg { width:26px; height:26px; }
  .keyboard-shortcut { display:flex; gap:6px; position:absolute; bottom:24px; }
  .keyboard-shortcut kbd { display:grid; place-items:center; width:37px; height:35px; background:var(--white); border:1px solid var(--light); border-radius:6px; font:500 15px var(--font-body); }
  .upload-art { gap:20px; background:#f1eee5; }
  .mini-file { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; background:var(--white); border-radius:6px; transform:rotate(-8deg); }
  .mini-file svg { width:36px; height:36px; color:var(--brand-1); }
  .mini-file span { font-size:8px; }
  .upload-path { height:0; width:36px; border-top:2px dotted #789692; }
  .paste-art { background:#e6edec; padding:20px; }
  .message-example { background:var(--white); border-radius:12px 12px 2px 12px; padding:15px 18px; font-size:11px; transform:rotate(2deg); }
  .message-example span { display:block; margin-top:7px; font-size:9px; color:var(--brand-1); text-decoration:underline; }
  .preview-band { background:var(--brand-2); color:#F0F5F4; }
  .preview-layout { display:grid; grid-template-columns:.85fr 1.2fr; gap:var(--space-xl); align-items:center; }
  .preview-band p { color:#D0DFDD; font-size:1rem; line-height:1.8; max-width:38ch; }
  .format-controls button { min-height:42px; padding:8px 16px; font-size:.8rem; border-color:#50696B; color:#E6EEEC; background:transparent; }
  .format-controls button[aria-pressed=true] { background:var(--mint); color:var(--brand-2); border-color:var(--mint); }
  .format-controls button:focus-visible { outline-color:var(--mint); }
  .recipient-window { overflow:hidden; border-radius:12px; background:var(--white); color:var(--black); transform:rotate(1deg); }
  .recipient-address { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; background:#E7EFED; font-size:10px; }
  .recipient-address svg { width:12px; height:12px; }
  .recipient-content { padding:20px; }
  .recipient-content strong { font-size:12px; overflow-wrap:anywhere; }
  .sample-download { display:flex; align-items:center; gap:4px; padding:7px 10px; border-radius:5px; background:var(--brand-1); color:var(--white); font-size:9px; text-decoration:none; white-space:nowrap; }
  .sample-download svg { width:12px; height:12px; }
  .preview-image { display:block; width:100%; height:250px; object-fit:cover; border-radius:5px; }
  .recipient-footer { text-align:center; padding:10px; font-size:9px; background:#F0F5F4; color:var(--dark); }
  .sample-document,.sample-archive { height:250px; overflow:auto; background:#F0F5F4; border-radius:5px; padding:20px; }
  .sample-document h3 { margin:0 0 15px; font-size:24px; }.sample-document h4 { font-size:14px; }.sample-document p,.sample-document li { color:var(--dark); font-size:11px; }.sample-document ul { margin-block:10px; }
  .sample-archive { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }.sample-archive svg { width:50px; height:50px; color:var(--brand-1); }.sample-archive span { font-size:11px; }
  [hidden] { display:none !important; }
  .detail-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); }
  .detail-list article { border-top:1px solid var(--light); padding-top:var(--space-xs); }
  .readable-link,.retry-example { margin-top:var(--space-md); font-size:.75rem; color:var(--brand-1); overflow-wrap:anywhere; }
  .retry-example svg { width:18px; height:18px; flex:none; }
  .offer-panel { background:var(--mint); border-radius:16px; text-align:center; padding:var(--space-xl) var(--space-lg); }
  .offer-panel > img { border-radius:16px; }
  .offer-panel p { max-width:43ch; color:var(--brand-2); }
  .faq-layout { display:grid; grid-template-columns:1fr 1.55fr; gap:var(--space-xl); }
  .faq-list details { border-top:1px solid var(--light); padding-block:20px; }.faq-list details:last-child { border-bottom:1px solid var(--light); }
  .faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.95rem; font-weight:600; cursor:pointer; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }
  .faq-list summary::after { content:'+'; font-size:22px; font-weight:400; }.faq-list details[open] summary::after { content:'−'; }
  .faq-list p { font-size:.925rem; color:var(--dark); padding-right:32px; }
  @media (max-width:850px) {
    #hero-title br { display:initial; }
    .preview-layout { grid-template-columns:1fr; }.preview-band p { max-width:60ch; }
    .demo-canvas { height:350px; }.demo-menu { width:285px; right:4%; }.link-receipt { right:6%; bottom:25px; width:340px; }.sample-window { width:75%; }
    .workflow,.detail-list { gap:var(--space-md); }.upload-art { gap:10px; }.upload-path { width:20px; }
    .desktop-navigation { gap:18px; }
  }
  @media (max-width:640px) {
    .container { padding-inline:22px; }
    header .container { gap:14px; } header img { width:100px; height:auto; }.header-cta { margin-left:auto; }.sign-in-link { display:none; }
    .mobile-menu-toggle { margin:0; width:36px; height:40px; }.mobile-menu-toggle span { width:22px; height:15px; }
    #hero-title { font-size:clamp(3rem,11.7vw,4.5rem); }.hero-description { font-size:1rem; }.hero-description br { display:none; }
    .demo-canvas { height:370px; padding:31px 20px; }.sample-window { width:93%; transform:rotate(-3deg); }.sample-photo { aspect-ratio:1.5; }
    .demo-menu { top:142px; right:15px; width:260px; }.demo-menu-extra { display:none; }
    .link-receipt { width:calc(100% - 32px); right:16px; bottom:16px; padding:12px; gap:9px; }.link-receipt #demo-url { font-size:9px; }.link-receipt strong { font-size:11px; }
    .demo-bottom { font-size:9px; gap:4px; }.window-chrome { font-size:8px; }.traffic-lights i { width:5px; height:5px; }
    .story-heading { grid-template-columns:1fr; gap:24px; }.story-heading p { max-width:45ch; }
    .workflow,.detail-list { grid-template-columns:1fr; gap:32px; }.workflow-art { height:190px; }.workflow h3 { margin-top:20px; }.workflow p { margin-top:8px; }
    .preview-image,.sample-document,.sample-archive { height:210px; }.recipient-window { transform:none; }.recipient-content { padding:14px; }.recipient-content .sample-download span { display:none; }
    .faq-layout { grid-template-columns:1fr; gap:30px; }.offer-panel { padding:42px 22px; }.offer-panel h2 { font-size:2.4rem; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.demo-stage[data-running] .selection-box,.demo-stage[data-running] .link-receipt { animation:none; } }
}
@layer styles {
  .pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); }
  .plan-panel { border:1px solid var(--light); border-radius:12px; background:var(--white); padding:var(--space-lg); }
  .plus-panel { background:#E6EEEC; border-color:#B9DAD2; }
  .plan-panel h3 { margin:0; font-size:1.4rem; }
  .plan-description { color:var(--dark); font-size:.9rem; }
  .plan-price { display:flex; gap:8px; align-items:baseline; font-size:3.8rem; line-height:1.2; font-weight:600; letter-spacing:-.04em; margin-block:var(--space-md) 0; font-variant-numeric:tabular-nums; }
  #plus-period { font-size:.9rem; font-weight:400; letter-spacing:0; }
  .plan-panel > .ui-button { width:100%; margin-block:var(--space-sm); }
  .plan-features { list-style:none; padding:0; font-size:.875rem; }
  .plan-features li { display:flex; gap:10px; align-items:center; margin-block:14px; }
  .plan-features svg { width:17px; height:17px; color:var(--brand-1); flex:none; }
  .billing-choice { display:flex; gap:2px; padding:3px; border:1px solid #B9DAD2; border-radius:7px; }
  .billing-choice button { min-height:30px; padding:5px 10px; font-size:.75rem; border:0; background:transparent; border-radius:4px; font-weight:500; }
  .billing-choice button[aria-pressed=true] { background:var(--white); color:var(--brand-1); }
  @media(max-width:640px) { .pricing-grid { grid-template-columns:1fr; }.plan-panel { padding:28px; }.plan-price { font-size:3.2rem; } }
}