/* Revdoku homepage: a bordered canvas with clear sections and real product views. */
.rd-home { width:min(1240px,calc(100% - 48px)); margin:0 auto; border-inline:1px solid var(--rd-line); color:var(--rd-ink); font-family:var(--rd-font); }
.rd-home * { box-sizing:border-box; }
.rd-home section { scroll-margin-top:80px; }
.rd-home h1,.rd-home h2,.rd-home h3,.rd-home p,.rd-home figure { margin:0; }
.rd-home h1,.rd-home h2,.rd-home h3 { font-family:var(--rd-font); font-weight:500; }
.rd-home h1 { font-size:clamp(36px,3.8vw,56px); line-height:1.12; letter-spacing:-.045em; }
.rd-home-hero__accent { color:inherit; text-decoration-line:underline; text-decoration-color:var(--rd-accent); text-decoration-thickness:clamp(2px,.055em,3px); text-underline-offset:.14em; text-decoration-skip-ink:auto; }
.rd-home h2 { font-size:clamp(30px,2.6vw,40px); line-height:1.15; letter-spacing:-.038em; }
.rd-home h3 { font-size:23px; line-height:1.24; letter-spacing:-.025em; }
.rd-home mark { padding:0 .09em .035em; background:var(--rd-accent); color:var(--rd-accent-ink); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.rd-home p { color:var(--rd-muted); }
.rd-home code { padding:0; border:0; background:transparent; color:inherit; font-family:var(--rd-mono); font-size:.9em; }
.rd-home a { text-underline-offset:4px; }
.rd-home :is(a,button):focus-visible { outline:2px solid var(--rd-accent); outline-offset:5px; }

/* Hero: only the pitch (title, one sentence, the signup button and Connect AI), centered. The animation lives in "How it works". */
.rd-home-hero { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:36px; padding:80px 36px 72px; border-bottom:1px solid var(--rd-line); text-align:center; }
.rd-home-hero__copy { display:block; }

.rd-home-hero__description { max-width:620px; margin:28px auto 0!important; font-size:18px; line-height:1.65; }
.rd-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:12px 20px; border:1px solid var(--rd-line); font:400 13px/1.5 var(--rd-font); text-decoration:none; transition:background .15s ease,border-color .15s ease; }
.rd-button--primary { background:var(--rd-accent); color:var(--rd-accent-ink); border-color:var(--rd-accent); }
.rd-button--primary:hover { background:var(--rd-accent-hover); border-color:var(--rd-accent-hover); }
.rd-home-hero__pricing { margin:-20px 0 0!important; font-size:14px; }
.rd-home-hero__pricing a { color:var(--rd-muted); text-decoration:underline; text-underline-offset:3px; }


.rd-home-hero__copy { min-width:0; }
.rd-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:50px 36px 34px; }

.rd-use-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--rd-line); }
.rd-use-card { padding:24px 30px 32px; min-width:0; }
.rd-use-card+.rd-use-card { border-left:1px solid var(--rd-line); }

.rd-use-diagram { height:120px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--rd-muted); }
.rd-diagram-box { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:44px; min-height:44px; padding:12px; border:1px solid var(--rd-line); background:var(--rd-paper); }
.rd-diagram-box--accent { color:var(--rd-accent); border-color:color-mix(in srgb,var(--rd-accent) 38%,var(--rd-line)); background:var(--rd-accent-soft); }
.rd-use-diagram .rd-icon,.rd-use-diagram .rd-ai-icon { width:20px; height:20px; }
.rd-use-diagram .rd-diagram-brand { display:block; flex:none; width:16px; height:16px; margin:0; border:0; border-radius:0; object-fit:contain; }
.rd-diagram-arrow { display:flex; width:26px; flex:none; color:var(--rd-accent); }
.rd-diagram-arrow svg { width:100%; height:16px; }
.rd-diagram-users { display:flex; gap:12px; }
.rd-diagram-users svg { width:22px; height:28px; }
.rd-diagram-stack { display:grid; gap:6px; }
.rd-diagram-stack .rd-diagram-box { min-height:34px; padding:7px 10px; }
.rd-diagram-stack .rd-diagram-box:last-child { margin-left:16px; }
.rd-diagram-stack i { display:block; width:33px; height:1px; background:currentColor; opacity:.5; }
.rd-use-card h3 { max-width:290px; margin:0 0 14px; }
.rd-use-card p { font-size:14px; line-height:1.7; }
.rd-use-card code { overflow-wrap:anywhere; }
.rd-home-control .rd-section-heading { padding-top:55px; }
.rd-home-control .rd-section-heading h2 { line-height:1.3; }
.rd-control-gallery { padding:0 36px 45px; }
.rd-home .rd-control-shot { border:1px solid var(--rd-line); background:var(--rd-paper); max-width:none; overflow:hidden; }

.rd-home .rd-control-shot img { display:block; width:100%; height:auto; aspect-ratio:1.5; object-fit:cover; object-position:top; border:0; border-radius:0; margin:0; cursor:zoom-in; background:#fff; }
.rd-home .rd-control-shot figcaption { padding:13px 14px; margin:0; border-top:1px solid var(--rd-line); color:var(--rd-muted); font:400 12px/1.5 var(--rd-font); }
.rd-control-gallery__details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body:has(.rd-home) .faq-section { width:min(1240px,calc(100% - 48px)); max-width:none; margin:0 auto!important; padding:45px 36px 55px; border-inline:1px solid var(--rd-line); border-top:1px solid var(--rd-line); }
body:has(.rd-home) .faq-section .faq-heading { margin:0 0 25px; font-size:30px; font-weight:500; letter-spacing:-.03em; }
.faq-section.rd-faq-accordion .faq-list { display:block; }
.faq-section.rd-faq-accordion .faq-item { display:block; padding:0; }
.faq-section.rd-faq-accordion .faq-question { margin:0; }
.faq-section.rd-faq-accordion .rd-faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border:0; background:transparent; color:inherit; cursor:pointer; font:400 16px/1.5 var(--rd-font); text-align:left; }
.faq-section.rd-faq-accordion .rd-faq-question::after { content:"+"; color:var(--rd-muted); font:400 22px/1 var(--rd-mono); }
.faq-section.rd-faq-accordion .rd-faq-question[aria-expanded="true"]::after { content:"−"; }
.faq-section.rd-faq-accordion .rd-faq-question:focus-visible { outline:2px solid var(--rd-accent); outline-offset:4px; }
.faq-section.rd-faq-accordion .faq-answer { padding:0 0 24px; max-width:740px; font-size:15px; }
.faq-section.rd-faq-accordion .faq-answer a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1100px) { .rd-home-hero { gap:35px; padding:55px 28px; } .rd-home h1 { font-size:43px; } .rd-use-card { padding-inline:22px; }.rd-section-heading { padding-inline:28px; } .rd-control-gallery { padding-inline:28px; } }
@media(max-width:800px) { .rd-home-hero { grid-template-columns:1fr; gap:34px; padding:38px 24px; } .rd-home h1 { font-size:clamp(35px,6.6vw,52px); } .rd-home-hero__description { max-width:550px; } .rd-use-grid { grid-template-columns:1fr; } .rd-use-card+.rd-use-card { border-left:0; border-top:1px solid var(--rd-line); } .rd-use-card { padding:25px 24px 30px; }.rd-use-card h3 { max-width:none; } .rd-section-heading { padding:35px 24px 27px; flex-direction:column; align-items:flex-start; gap:16px; }.rd-control-gallery { padding:0 24px 30px; } .rd-control-gallery__details { grid-template-columns:1fr 1fr; } .rd-control-gallery__details figure:last-child { grid-column:1 / -1; } .rd-home .rd-control-gallery__details figure:last-child img { aspect-ratio:2; } body:has(.rd-home) .faq-section { padding:32px 24px 40px; } }
@media(max-width:480px) { .rd-home { width:calc(100% - 24px); } .rd-home-hero { padding:30px 18px; gap:30px; } .rd-home h1 { font-size:clamp(29px,8.4vw,38px); }.rd-home-hero__description { margin-top:22px!important; font-size:15px; } .rd-home-hero__description code { font-size:12px; } .rd-button { padding:11px 12px; font-size:12px; }.rd-section-heading { padding-inline:18px; } .rd-home h2 { font-size:29px; } .rd-use-card { padding-inline:18px; } .rd-control-gallery { padding-inline:18px; } .rd-control-gallery__details { grid-template-columns:1fr; } .rd-control-gallery__details figure:last-child { grid-column:auto; } .rd-home .rd-control-shot img,.rd-home .rd-control-gallery__details figure:last-child img { aspect-ratio:1.5; }.rd-home .rd-control-shot figcaption { padding:11px 10px; } body:has(.rd-home) .faq-section { width:calc(100% - 24px); padding-inline:18px; } }
@container rd-pitch (max-width:300px) {
  .rd-home .rd-pitch .rd-create__methods .rd-ai-connect__tab { font-size:10px; gap:3px; padding-inline:3px; }
  .rd-home .rd-pitch .rd-create__methods .rd-ai-connect__tab-icon { width:12px; height:12px; flex-basis:12px; }
}
.rd-home-hero__pricing { margin-top:4px!important; }
@media(prefers-reduced-motion:reduce) { .rd-home * { scroll-behavior:auto!important; transition:none!important; } }

@media(max-width:1100px) { .rd-use-diagram { gap:5px; } .rd-diagram-box { padding:9px; gap:6px; } .rd-diagram-arrow { width:20px; } .rd-diagram-stack i { width:25px; } }
@media(max-width:800px) { .rd-use-diagram { height:105px; justify-content:flex-start; } }

/* Protection list under the hero text; also used by the reusable pitch block. */
.rd-home-hero__protect { display:grid; gap:8px; width:fit-content; max-width:min(560px,100%); margin:18px auto 0!important; padding:0; list-style:none; text-align:left; }
.rd-home-hero__protect li { position:relative; margin:0; padding-left:26px; color:var(--rd-ink); font-size:15px; line-height:1.5; }
.rd-home-hero__protect li::before { content:""; position:absolute; left:4px; top:4px; width:6px; height:11px; border:solid var(--rd-accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
@media(max-width:480px) { .rd-home-hero__protect li { font-size:14px; } }
/* Signup: one primary button that opens Try free, the plan note, then a quiet "or Starter" line (2026-10-21). */
.rd-home-cta { display:flex; flex-direction:column; align-items:center; margin-top:-6px; }
.rd-home-cta .rd-button--primary { min-width:260px; min-height:52px; justify-content:center; padding:12px 28px; font-size:16px; font-weight:500; }
.rd-home .rd-home-cta__note { margin:10px 0 0!important; color:var(--rd-muted); font-size:13px; line-height:1.4; text-wrap:balance; }
.rd-home .rd-home-cta__free { margin:14px 0 0!important; color:var(--rd-muted); font-size:14px; line-height:1.5; text-wrap:balance; }
.rd-home-cta__free a { color:var(--rd-accent); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:800px) { .rd-home-cta { align-items:stretch; text-align:center; } .rd-home-cta .rd-button--primary { width:100%; } }

/* Split hero (homepage): headline, text and button on the left, checklist card on the right; stacks below 900px with the button first. */
.rd-home-hero--split { grid-template-columns:minmax(0,1fr) minmax(340px,460px); align-items:center; justify-items:stretch; gap:72px; padding:72px 36px; text-align:left; }
.rd-home-hero--split .rd-home-hero__description { max-width:560px; margin:22px 0 0!important; text-wrap:balance; }
.rd-home-hero--split .rd-home-cta { align-items:flex-start; margin-top:30px; }
.rd-home-hero--split .rd-home-hero__card { width:100%; max-width:none; margin:0!important; gap:0; border:1px solid var(--rd-line); background:var(--rd-paper); }
.rd-home-hero--split .rd-home-hero__card li { padding:17px 22px 17px 52px; font-size:16px; text-wrap:balance; }
.rd-home-hero--split .rd-home-hero__card li+li { border-top:1px solid var(--rd-line); }
.rd-home-hero--split .rd-home-hero__card li::before { left:25px; top:20px; }
@media(max-width:900px) { .rd-home-hero--split { grid-template-columns:1fr; justify-items:center; gap:28px; padding:38px 24px; text-align:center; } .rd-home-hero--split .rd-home-hero__description { margin-inline:auto!important; } .rd-home-hero--split .rd-home-cta { align-items:stretch; width:100%; max-width:560px; } .rd-home-hero--split .rd-home-hero__card { max-width:560px; text-align:left; } }
@media(max-width:480px) { .rd-home-hero--split { padding:30px 18px; } .rd-home-hero--split .rd-home-hero__card li { padding:13px 14px 13px 42px; font-size:14px; } .rd-home-hero--split .rd-home-hero__card li::before { left:18px; top:16px; } }
/* Plan choice above Create mailbox (2026-10-20). A transparent native select covers a face that can strike out the full price. */
.rd-home-hero--split .rd-home-cta--plan { align-items:stretch; width:min(100%,420px); }
.rd-home-cta--plan .rd-button--primary { width:100%; }
.rd-home-plan { position:relative; margin-bottom:10px; }
.rd-home-plan__face { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-height:48px; padding:13px 40px 13px 14px; border:1px solid var(--rd-line); border-radius:8px; background:var(--rd-paper); color:var(--rd-ink); font-size:15px; line-height:1.3; text-align:left; }
.rd-home-plan::after { content:""; position:absolute; right:17px; top:50%; width:7px; height:7px; border:solid var(--rd-muted); border-width:0 1.5px 1.5px 0; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.rd-home-plan:hover .rd-home-plan__face { border-color:color-mix(in srgb,var(--rd-accent) 45%,var(--rd-line)); }
.rd-home-plan:focus-within .rd-home-plan__face { outline:2px solid var(--rd-accent); outline-offset:3px; }
.rd-home-plan__name { font-weight:600; }
.rd-home-plan__detail { color:var(--rd-muted); font-size:14px; }
.rd-home-plan__price { margin-left:auto; font-weight:600; white-space:nowrap; }
.rd-home-plan__price s { margin-right:2px; color:var(--rd-muted); font-weight:400; }
.rd-home-plan select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px; }
@media(max-width:900px) { .rd-home-hero--split .rd-home-cta--plan { width:100%; max-width:560px; } }

/* Hero list: the check marks tick one by one, once, when the page loads (done in about 1.6s). The button is
   visible the whole time. On the homepage one shine crosses the button right after the last check; the shine
   itself is defined in revdoku-agent-flow.css, so pages without that file show no shine. */
.rd-home-hero__card li { animation:rd-hero-check-row .35s ease-out backwards; }
.rd-home-hero__card li::before { animation:rd-hero-check-tick .35s cubic-bezier(.3,1.6,.6,1) backwards; }
.rd-home-hero__card li:nth-child(1),.rd-home-hero__card li:nth-child(1)::before { animation-delay:.3s; }
.rd-home-hero__card li:nth-child(2),.rd-home-hero__card li:nth-child(2)::before { animation-delay:.55s; }
.rd-home-hero__card li:nth-child(3),.rd-home-hero__card li:nth-child(3)::before { animation-delay:.8s; }
.rd-home-hero__card li:nth-child(4),.rd-home-hero__card li:nth-child(4)::before { animation-delay:1.05s; }
.rd-home-hero__card li:nth-child(5),.rd-home-hero__card li:nth-child(5)::before { animation-delay:1.3s; }
.rd-home-hero__card li:nth-child(6),.rd-home-hero__card li:nth-child(6)::before { animation-delay:1.55s; }
@keyframes rd-hero-check-row { from { opacity:.35; } to { opacity:1; } }
@keyframes rd-hero-check-tick { from { opacity:0; transform:rotate(45deg) scale(.3); } to { opacity:1; transform:rotate(45deg) scale(1); } }
.rd-home-hero .rd-cta--shine::after { animation:rd-cta-shine var(--rd-flow-loop,16s) ease-in-out infinite,rd-cta-shine-once .9s ease-in-out 1.8s; }
@keyframes rd-cta-shine-once { from { transform:translateX(-110%); } to { transform:translateX(110%); } }
@media(prefers-reduced-motion:reduce) { .rd-home-hero__card li,.rd-home-hero__card li::before,.rd-home-hero .rd-cta--shine::after { animation:none; } }
