/* The diarydeck marketing site: the homepage at the root of the domain.
   Loaded only by public/home.html, so none of this reaches a booking page or the admin.
   Brand guidelines v1.0: Studio Green on Paper, Archivo throughout, square corners, rules
   rather than cards, no gradients and no shadows. */

/* site.css loads only on the homepage, so this safely undoes the booking-page gutter
   and lets the bands run to the edge of the screen. */
body.public { padding: 0; }
.site { width: 100%; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }

/* Green is the main colour: the page alternates Studio Green and white, and nothing sits
   on cream. A white band carries no border, because the colour change is the division. */
.band { padding: 76px 0; }
.band.white { background: #fff; }
.band.green { background: var(--brand); color: #fff; }
.band.green h2, .band.green h3 { color: #fff; }
.band.green p, .band.green li { color: var(--on-green); }
.band.green a:not(.btn) { color: #fff; }
.band.deep { background: var(--brand-deep); color: #fff; }
.band.deep h2, .band.deep h3 { color: #fff; }
.band.deep p, .band.deep li { color: var(--on-green); }
.band.tight { padding: 58px 0; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
           color: var(--brand); margin: 0 0 12px; }
.band.green .eyebrow { color: rgba(255, 255, 255, .75); }
.band h2 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 600; max-width: 620px; margin: 0 0 14px; }
.lede-lg { font-size: 17px; color: var(--muted); max-width: 620px; margin: 0 0 32px; }
.band.green .lede-lg { color: rgba(255, 255, 255, .82); }

/* ---------- header
   The header is green, so the first thing on the page is the brand colour. */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--brand); }
.site-head .home-logo { color: #fff; }
.site-head nav a:not(.btn) { color: var(--on-green) !important; }
.site-head nav a:not(.btn):hover { color: #fff !important; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                   padding-block: 14px; }
.site-head nav { display: flex; gap: 18px; align-items: center; font-size: 14px; font-weight: 600; }
.site-head nav a:not(.btn) { color: var(--ink); text-decoration: none; }
.site-head nav a:not(.btn):hover { color: var(--brand); }
.home-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
             font-weight: 600; font-size: 22px; text-transform: lowercase; }
.home-logo img { height: 26px; width: auto; }

/* ---------- hero
   Green, full bleed, with the product shot sitting on it in white. */
.hero { padding: 84px 0 0; text-align: center; background: var(--brand); color: #fff; }
.hero h1, .hero h2 { color: #fff; }
.hero .lede-lg { color: var(--on-green); }
.hero .note { color: rgba(255, 255, 255, .6); }
.hero .shot { margin-bottom: -1px; }
.hero h1 { font-size: clamp(34px, 5.6vw, 52px); font-weight: 600; line-height: 1.08;
           letter-spacing: -.015em; max-width: 780px; margin: 0 auto 20px; }
.hero .lede-lg { font-size: 19px; margin: 0 auto 28px; text-align: center; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .note { font-size: 13px; margin: 18px 0 0; }

/* The hero picture is the product's own booking page, built from the same parts rather
   than a screenshot, so it stays sharp and never goes out of date. */
.shot { max-width: 880px; margin: 52px auto 0; border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--card); box-shadow: var(--shadow); overflow: hidden; text-align: left;
        display: grid; grid-template-columns: 200px 1fr 136px; }
.shot .col { padding: 22px 20px; }
.shot .col + .col { border-left: 1px solid var(--line); }
.shot .who { font-size: 12px; color: var(--muted); font-weight: 600; }
.shot h3 { font-weight: 600; font-size: 20px; margin: 4px 0 14px; letter-spacing: 0; }
.shot .fact { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.shot .month { font-weight: 600; font-size: 14px; margin: 0 0 12px; }
.shot .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center;
              font-size: 12px; max-width: 272px; margin: 0 auto; }
.shot .grid span { color: var(--faint); padding: 3px 0; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.shot .grid b { font-weight: 400; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--faint); }
.shot .grid b.open { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-weight: 600; }
.shot .grid b.on { background: var(--brand); color: #fff; font-weight: 600; }
.shot .day { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.shot .slot { border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: var(--radius-sm);
              padding: 7px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--brand);
              margin-bottom: 7px; }
.shot .slot.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 8px; }
.step-n { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--brand); color: var(--brand);
          display: grid; place-items: center; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.steps h3 { font-size: 17px; margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- the text-message band */
.sms-split { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center; }
.sms-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sms-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; }
.sms-points .tick { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .16);
                    display: grid; place-items: center; font-size: 11px; color: #fff; margin-top: 2px; }
.sms-points b { color: #fff; font-weight: 600; }
.phone { background: #fff; border-radius: var(--radius-sm); padding: 16px 14px 22px; border: 6px solid var(--brand-deep); }
.phone .from { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.phone .when { text-align: center; font-size: 10px; color: var(--muted); margin: 10px 0 6px; }
.phone .bubble { background: #e9e9eb; color: #000; border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px;
                 line-height: 1.4; }

/* ---------- features */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 0; border-top: 1px solid var(--line); }
.grid-3 .card { padding: 24px 24px 24px 0; border: 0; border-bottom: 1px solid var(--line);
                background: transparent; box-shadow: none; }
.grid-3 h3 { font-size: 16px; margin-bottom: 6px; }
.grid-3 p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- who it's for */
.trades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.trades span { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 14px; }

/* ---------- pricing */
.price-card { max-width: 520px; margin: 0 auto; text-align: center; padding: 40px 32px; }
.price-card .amount { font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1; }
.price-card .per { color: var(--muted); font-size: 15px; margin: 10px 0 22px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; display: grid; gap: 10px;
                 font-size: 15px; }
.price-card li::before { content: "\2713"; color: var(--brand); font-weight: 700; margin-right: 10px; }

/* ---------- faq */
.faq { display: grid; gap: 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-weight: 600; font-size: 16px; color: var(--ink); list-style: none; cursor: pointer;
               display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); font-size: 15px; margin: 12px 0 0; max-width: 640px; }

/* ---------- closing call to action */
.closer { text-align: center; }
.closer h2 { margin: 0 auto 14px; }
.closer .lede-lg { margin: 0 auto 26px; text-align: center; }

/* ---------- footer */
.site-foot { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 14px; color: var(--muted); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.site-foot a { color: var(--muted); }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* On a phone the header keeps the logo and the two actions; the section links would
   wrap onto three lines and push them off. */
/* The three section links are the first thing to go: below this width the header nav
   wraps onto three lines and pushes the sign-in actions off the edge. */
@media (max-width: 860px) {
  .site-head nav a:not(.btn):not(.home-logo)[href*="#"] { display: none; }
  .site-head nav { gap: 14px; }
  .hero h1 { font-size: clamp(30px, 8vw, 38px); }
  .hero .lede-lg { font-size: 17px; }
}

@media (max-width: 860px) {
  .band { padding: 56px 0; }
  .hero { padding: 56px 0 40px; }
  .shot { grid-template-columns: 1fr; }
  .shot .col + .col { border-left: 0; border-top: 1px solid var(--line); }
  .sms-split { grid-template-columns: 1fr; gap: 36px; }
  .phone { max-width: 300px; margin: 0 auto; }
}

/* ---------- terms and privacy
   A single column of prose. Measure is held narrow by .wrap.narrow; everything here is
   about making a long legal page readable rather than decorative. */
.legal { padding: 56px 0 72px; }
.legal h1 { font-size: clamp(30px, 4.4vw, 40px); font-weight: 600; margin: 0 0 10px; }
.legal .updated { color: var(--faint); font-size: 14px; margin: 0 0 36px; }
.legal .lede { font-size: 17px; color: var(--muted); margin: 0 0 36px; }
.legal h2 { font-size: 21px; font-weight: 600; margin: 38px 0 12px; padding-top: 22px;
            border-top: 1px solid var(--line); max-width: none; }
.legal h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; font-family: var(--sans); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 10px; }
.legal code { font-size: 13px; background: var(--card); border: 1px solid var(--line);
              border-radius: 4px; padding: 1px 5px; }
.legal a { color: var(--brand); }

@media (max-width: 860px) {
  .legal { padding: 36px 0 56px; }
}

/* ---------- see it working
   A short screen recording of the real product. Muted, looping and autoplaying, so it
   reads as a moving illustration rather than something you have to decide to watch;
   `controls` is still there for anyone who wants to scrub or pause it. */
.demo { background: var(--brand); color: #fff; }
.demo h2, .demo .eyebrow { color: #fff; }
.demo .eyebrow { color: rgba(255, 255, 255, .75); }
.demo .lede-lg { color: rgba(255, 255, 255, .78); }
.demo-frame { margin-top: 36px; border: 1px solid rgba(255, 255, 255, .3); background: #000;
              line-height: 0; }
.demo-frame video { width: 100%; height: auto; display: block; }
.demo-note { margin: 16px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .6); }

/* ---------- components on a green ground
   The trade chips and the FAQ now sit on Studio Green in places, so they need the
   guidelines' on-green values rather than the light-ground ones. */
.band.green .trades span, .band.deep .trades span {
  border-color: var(--on-green-line); color: #fff;
}
.band.green .faq details, .band.deep .faq details { border-bottom-color: var(--on-green-rule); }
.band.green .faq summary, .band.deep .faq summary { color: #fff; }
.band.green .faq summary::after, .band.deep .faq summary::after { color: #fff; }
.band.green .faq p, .band.deep .faq p { color: var(--on-green); }
.band.green .step-n { border-color: var(--on-green-line); color: #fff; }
.band.green .grid-3, .band.deep .grid-3 { border-top-color: var(--on-green-rule); }
.band.green .grid-3 .card, .band.deep .grid-3 .card { border-bottom-color: var(--on-green-rule); }
.band.green .price-card { background: transparent; border-color: var(--on-green-line); }

/* The footer closes the page on green, so the brand is the last thing as well as the first. */
.site-foot { background: var(--brand-deep); color: var(--on-green); border-top: 0;
             padding: 40px 0 52px; }
.site-foot a, .site-foot .home-logo { color: #fff; }
.site-foot a:hover { color: #fff; }

/* On any green ground the primary action is the one white panel, with green type -- the
   guidelines' "one white action". Inverting here rather than at each call site means a
   button never has to know which band it landed in. */
.site-head .btn, .hero .btn, .band.green .btn, .band.deep .btn, .site-foot .btn {
  background: #fff; border-color: #fff; color: var(--brand);
}
.site-head .btn:hover, .hero .btn:hover, .band.green .btn:hover, .band.deep .btn:hover {
  background: var(--paper); border-color: var(--paper); color: var(--brand);
}
/* The secondary action on green is an outline, so the page has only one white block. */
.hero .cta .btn + .btn, .band.green .btn.secondary, .band.deep .btn.secondary {
  background: transparent; border-color: var(--on-green-line); color: #fff;
}
.hero .cta .btn + .btn:hover, .band.green .btn.secondary:hover, .band.deep .btn.secondary:hover {
  background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff;
}

/* ---------- the walkthrough
   One 24-second clock. Each of the four shots is visible for its own quarter and the
   details inside it animate against the same timeline, so nothing can drift out of step
   the way separate animations do. Everything stops for anyone who asks it to. */
.reel { max-width: 860px; margin: 40px auto 0; }
.reel-screen { background: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.reel-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
            background: var(--paper); border-bottom: 1px solid var(--line); }
.reel-bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.reel-url { flex: 1; text-align: center; font-size: 12px; color: var(--muted);
            background: #fff; border: 1px solid var(--line); padding: 4px 10px; margin-left: 8px; }
.reel-stage { position: relative; height: 420px; color: var(--ink); }
.reel-step { position: absolute; inset: 0; padding: 26px 30px; opacity: 0;
             animation: reel 24s linear infinite; }
.shot-1 { animation-delay: 0s; }
.shot-2 { animation-delay: 6s; }
.shot-3 { animation-delay: 12s; }
.shot-4 { animation-delay: 18s; }
/* Visible for a quarter of the loop, with a short cross-fade at each end. */
@keyframes reel {
  0%, 25% { opacity: 1; }
  27%, 98% { opacity: 0; }
  100% { opacity: 1; }
}

.r-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.r-head b { display: block; font-size: 19px; }
.r-head span { color: var(--muted); font-size: 14px; }
.r-row { display: flex; gap: 14px; align-items: center; padding: 15px 0;
         border-bottom: 1px solid var(--line); }
.r-row i { width: 4px; align-self: stretch; background: #44d07f; flex: none; }
.r-row i.b { background: #3b8ff5; } .r-row i.p { background: #7b4df0; }
.r-row b { display: block; font-size: 15px; }
.r-row span { color: var(--muted); font-size: 13px; }
.r-row.dim { opacity: .55; }

.r-cal { display: grid; gap: 10px; }
.r-month { font-weight: 600; font-size: 14px; }
.r-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 320px;
          text-align: center; font-size: 13px; }
.r-grid em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--faint); }
.r-grid u { text-decoration: none; aspect-ratio: 1; display: grid; place-items: center;
            color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, #fff);
            font-weight: 600; }
.r-grid u.off { background: transparent; color: var(--faint); font-weight: 400; }
.r-grid u.pick { animation: pick 24s linear infinite; animation-delay: 6s; }
@keyframes pick {
  0%, 12% { background: color-mix(in srgb, var(--brand) 9%, #fff); color: var(--brand); }
  14%, 100% { background: var(--brand); color: #fff; }
}
.r-times { display: flex; gap: 8px; margin-top: 18px; }
.r-times span { flex: 1; text-align: center; font-size: 13px; font-weight: 600;
                color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 45%, #fff);
                padding: 9px 0; }
.r-times span.pick { animation: picktime 24s linear infinite; animation-delay: 6s; }
@keyframes picktime {
  0%, 19% { background: #fff; color: var(--brand); }
  21%, 100% { background: var(--brand); color: #fff; border-color: var(--brand); }
}

.r-field { margin-bottom: 14px; }
.r-field label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px; }
.r-field small { font-weight: 400; color: var(--muted); }
.r-input { border: 1px solid var(--line-strong); padding: 9px 11px; font-size: 14px;
           color: var(--ink); min-height: 38px; overflow: hidden; white-space: nowrap; }
/* Typed rather than pasted: the text is revealed a character at a time by clipping it. */
.typed, .typed2, .typed3 { animation: type 24s steps(14) infinite; width: 0; }
.typed { animation-delay: 12.3s; } .typed2 { animation-delay: 13.1s; } .typed3 { animation-delay: 13.9s; }
@keyframes type { 0% { width: 0; } 3%, 100% { width: 100%; } }
.r-cta { margin-top: 20px; background: var(--brand); color: #fff; font-weight: 600;
         font-size: 14px; padding: 13px 16px; display: flex; justify-content: space-between; }

.shot-4 { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: center; }
.r-done { text-align: left; }
.r-tick { width: 46px; height: 46px; border: 2px solid var(--brand); margin-bottom: 16px;
          position: relative; }
.r-tick::after { content: ""; position: absolute; left: 14px; top: 8px; width: 13px; height: 22px;
                 border: solid var(--brand); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.r-done b { display: block; font-size: 21px; margin-bottom: 6px; }
.r-done span { color: var(--muted); font-size: 14px; }
.r-sms { background: var(--paper); border: 1px solid var(--line); padding: 14px; }
.r-sms-from { font-size: 11px; font-weight: 600; text-align: center; margin-bottom: 8px; }
.r-bubble { background: #e9e9eb; color: #000; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; }
.r-sms-when { font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 8px; }

@media (max-width: 760px) {
  .reel-stage { height: 470px; }
  .reel-step { padding: 18px 18px; }
  .shot-4 { grid-template-columns: 1fr; gap: 16px; }
  .r-sms { display: none; }
}
/* Motion is decoration here: without it the first shot simply stays put. */
@media (prefers-reduced-motion: reduce) {
  .reel-step, .r-grid u.pick, .r-times span.pick, .typed, .typed2, .typed3 { animation: none; }
  .reel-step { opacity: 0; }
  .shot-1 { opacity: 1; }
  .typed, .typed2, .typed3 { width: 100%; }
}