/*
Theme Name: Godrevy
Theme URI: https://portloe.com
Author: Big Trouble Labs
Description: The parent theme of Godrevy, Portloe's bright, warm family for products that talk to families. Holds structure only: the section types, the menu bar and footer. Colour, type and pictures come from a Godrevy child theme. Needs the Portloe Core plugin. Do not activate this theme directly; activate a Godrevy child theme.
Version: 0.2.4
License: Proprietary
Text Domain: godrevy
*/

/* Every colour and typeface below is read from a custom property the child
   theme declares. This stylesheet holds none of its own. The layout is set
   by the width of the page through a container query on .site, so the
   phone-width view, which is the reference, is exactly what a phone sees. */

html, body { margin:0; }
/* In-page jumps (the logo, the menu links, the Join button) come to rest just
   below the pinned menu bar. They glide once the page has loaded (the script
   adds 'glide'), so a page that opens at a section lands there at once, and
   never glide for visitors who ask their device for reduced motion. */
html { scroll-padding-top:68px; }
html:has(body.admin-bar) { scroll-padding-top:100px; }
@media (prefers-reduced-motion: no-preference) { html.glide { scroll-behavior:smooth; } }
/* a little air where the target has no space of its own above it */
.statement + section.band, .signup, .su-done { scroll-margin-top:20px; }
body { background:var(--bg); }
.site { container-type:inline-size; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.skip { position:absolute; left:-9999px; top:0; z-index:20; background:var(--surface); color:var(--fg); padding:10px 14px; border-radius:8px; }
.skip:focus { left:12px; top:12px; }
img { max-width:100%; }

.wrap { max-width:1120px; margin:0 auto; padding:0 32px; position:relative; }
@container (max-width:700px) { .wrap { padding:0 20px; } }
h1, h2, h3 { font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.1; margin:0; }
h1 { font-size:clamp(40px, 6cqi, 66px); }
h2 { font-size:clamp(28px, 3.6cqi, 42px); }
h3 { font-size:20px; line-height:1.25; font-weight:700; }
p { margin:0; }
.sec { position:relative; }
.lede { font-size:19px; color:var(--muted); max-width:36ch; }
.pill { display:inline-block; font-weight:600; font-size:14px; background:var(--sun); color:var(--on-sun); padding:5px 12px; border-radius:999px; transform:rotate(-2deg); }

/* ═══ Palette slots a section's tone can name ═══ */
.tone-cream { background:var(--bg); }
.tone-cream2 { background:var(--cream2); }
.tone-sky { background:var(--sky); }
.tone-mint { background:var(--mint); }
.tone-blush { background:var(--blush); }
.tone-butter { background:var(--butter); }
.tone-lilac { background:var(--lilac); }

/* ═══ Menu bar ═══ */
.bar { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.admin-bar .bar { top:32px; }
.bar .wrap { display:flex; align-items:center; gap:22px; height:68px; }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--sage); font:800 21px/1 var(--display); }
.mark img { width:38px; height:38px; background:var(--surface); border-radius:50%; padding:3px; box-shadow:0 0 0 2px var(--mark-ring); box-sizing:content-box; }
.bar nav { margin-left:auto; display:flex; gap:22px; align-items:center; font-size:15px; }
.bar nav a.link { color:var(--muted); text-decoration:none; }
@container (max-width:700px) { .bar nav a.link, .bar .long { display:none; } }

/* ═══ Buttons ═══ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 var(--body); border:0; cursor:pointer; text-decoration:none;
  background:var(--coral); color:var(--on-coral); border-radius:999px; padding:15px 24px; box-shadow:0 3px 0 var(--coral-edge); transition:transform .12s, box-shadow .12s; white-space:nowrap; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--coral-edge); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid color-mix(in srgb, var(--sage) 55%, transparent); outline-offset:2px; }
.bar .btn { padding:10px 16px; font-size:14px; gap:.28em; }
.cta { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.fine { font-size:13px; color:var(--muted); margin-top:12px; }
/* the button with its line beneath, centred on the button; the pair centred on phones */
.cta-stack { display:inline-flex; flex-direction:column; align-items:center; margin-top:30px; }
@container (max-width:700px) { .cta-stack { display:flex; } }

/* ═══ Chips ═══ */
.channels { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.channels li { font-size:14px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--surface); box-shadow:0 0 0 2px var(--edge-warm); }
.channels li:nth-child(1) { background:var(--sky); box-shadow:none; } .channels li:nth-child(2) { background:var(--blush); box-shadow:none; }
.channels li:nth-child(3) { background:var(--mint); box-shadow:none; } .channels li:nth-child(4) { background:var(--butter); box-shadow:none; }

/* ═══ The site's mark between sections, on phones only ═══ */
.wren-gap { display:block; margin:16px auto; width:56px; height:56px; }
.perch { position:absolute; left:50%; top:-58px; width:66px; height:66px; transform:translateX(-50%); z-index:3; pointer-events:none; }
@container (min-width:701px) { .wren-gap, .perch { display:none !important; } }

/* ═══ Opening ═══ */
.opening { padding:10px 0 104px; overflow:hidden; }
.opening .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; z-index:1; }
@container (max-width:860px) { .opening .wrap { grid-template-columns:1fr; gap:52px; } .opening { padding-bottom:72px; } }
.opening h1 { margin:18px 0 6px; }
.opening .tagline { font:800 clamp(22px, 2.6cqi, 30px)/1.2 var(--display); color:var(--sage); margin-bottom:18px; }
.hl { background:linear-gradient(transparent 62%, color-mix(in srgb, var(--sun) 70%, transparent) 62%); padding:0 .06em; }
.blob { position:absolute; z-index:0; pointer-events:none; }
.blob.big { right:-120px; top:40px; width:640px; }
.blob.sun { right:40px; top:30px; width:110px; }
.splash { fill:var(--splash); }
.sun-fill { fill:var(--sun); }
.sun-rays { stroke:var(--sun); }
@container (max-width:700px) { .blob.big { width:420px; top:auto; bottom:-40px; right:-170px; } .blob.sun { display:none; } }

/* ═══ The phone, drawn from the product's own card styles ═══ */
.device { display:flex; justify-content:center; position:relative; }
.handset { width:290px; background:var(--app-bg); border-radius:40px; padding:14px; box-shadow:0 0 0 10px var(--app-frame), 0 30px 60px -20px var(--phone-shadow); position:relative; z-index:1; font:13px/1.45 var(--font-app); color:var(--app-ink); transform:rotate(3deg); text-align:left; }
.handset.tilt-l { transform:rotate(-3deg); }
.handset .top { display:flex; align-items:center; gap:7px; padding:6px 6px 12px; color:var(--app-sage); font-weight:600; }
.handset .top img { width:22px; height:22px; }
.handset .label { font-weight:500; margin:6px 6px 8px; }
.pc { background:var(--surface); border-radius:12px; box-shadow:0 0 0 1px var(--app-card-ring); padding:10px 12px; margin-bottom:8px; border-left:3px solid transparent; }
.pc.dl { border-left-color:var(--app-deadline); } .pc.rm { border-left-color:var(--app-reminder); } .pc.rc { border-left-color:var(--app-recurring); }
.pc .t { font-weight:500; } .pc .m { color:var(--app-muted); font-size:12px; display:flex; align-items:center; gap:6px; margin-top:2px; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--app-deadline); } .dot.s { background:var(--app-reminder); }
.wn { background:var(--surface); border-radius:16px; box-shadow:0 0 0 1px var(--app-card-ring); padding:14px; margin-top:4px; }
.wn .h { font:15px/1.3 var(--font-note); margin-bottom:6px; } .wn p { color:var(--app-note-ink); font-size:12px; line-height:1.6; margin-top:6px; }
.chip { display:inline-block; font-size:11px; background:var(--app-chip-bg); color:var(--app-chip-ink); border-radius:999px; padding:1px 7px; margin-left:4px; }
.src { font-size:10.5px; color:var(--app-sage); background:var(--app-src-bg); border-radius:999px; padding:0 6px; margin-left:auto; }
.backdrop { position:absolute; width:340px; height:340px; border-radius:50%; z-index:0; }
.backdrop-right { right:8%; top:8%; }
.backdrop-left { left:8%; top:6%; }
/* the lock screen */
.lock { background:linear-gradient(170deg, var(--mint) 0%, var(--sky) 55%, var(--butter) 100%); border-radius:28px; padding:22px 10px 16px; margin:-2px; }
.lock .time { text-align:center; font:300 54px/1 var(--font-app); color:var(--lock-time); letter-spacing:-.02em; }
.lock .day { text-align:center; font-size:13px; color:var(--lock-day); margin:6px 0 18px; }
.note2 { background:var(--lock-note-bg); border-radius:16px; padding:9px 11px; margin-bottom:7px; box-shadow:0 1px 2px var(--lock-note-shadow); }
.note2 .hd { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--lock-hd); margin-bottom:2px; }
.note2 .hd i { width:16px; height:16px; border-radius:5px; display:inline-block; }
.note2 .hd span:last-child { margin-left:auto; }
.note2 .tx { font-size:12.5px; color:var(--app-ink); line-height:1.4; }

/* ═══ Bands ═══ */
section.band { padding:96px 0; }
@container (max-width:700px) { section.band { padding:64px 0; } }
.round { border-radius:48px; }
@container (max-width:700px) { .round { border-radius:36px; } }
.sec-head { max-width:640px; margin-bottom:44px; }
.sec-head p { color:var(--muted); margin-top:12px; font-size:17px; }
/* the mark in the gap above a band, or sitting on its top edge */
section.band.mark-above { padding-top:0; }
section.band.mark-perch { padding-top:96px; }
/* bands next to a statement give up their padding on that side */
section.band:has(+ .statement) { padding-bottom:0; }
.statement + section.band { padding-top:0; }
/* wide screens: one value for the space in a band */
@container (min-width:701px) {
  section.band, section.band.mark-above, section.band.mark-perch { padding-top:var(--pad); padding-bottom:var(--pad); }
  section.band:has(+ .statement) { padding-bottom:0; }
  .statement + section.band { padding-top:0; }
  .opening { padding-bottom:var(--pad); }
}

/* ═══ Cards ═══ */
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@container (max-width:900px) { .grid3 { grid-template-columns:1fr; } }
.card { border-radius:var(--r); padding:26px; }
.card p { color:var(--soft-ink); font-size:15px; margin-top:8px; }
.card:nth-child(3n+1) { background:var(--mint); } .card:nth-child(3n+2) { background:var(--blush); } .card:nth-child(3n) { background:var(--butter); }
.icon { width:56px; height:56px; margin-bottom:14px; }

/* ═══ Showcase ═══ */
.type-showcase .wrap { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.type-showcase.flip .words { order:2; }
@container (max-width:860px) { .type-showcase .wrap { grid-template-columns:1fr; gap:44px; } .type-showcase.flip .words { order:0; } }
.type-showcase .words p { color:var(--muted); font-size:17px; margin-top:14px; max-width:40ch; }
.ticks { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.ticks li { display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.ticks li::before { content:'\2713'; flex:none; width:24px; height:24px; border-radius:50%; background:var(--sage); color:var(--on-sage); font-size:12px; font-weight:700; display:grid; place-items:center; margin-top:1px; }

/* ═══ Steps ═══ */
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; counter-reset:s; }
@container (max-width:860px) { .steps { grid-template-columns:1fr; gap:40px; } .step { display:flex; flex-direction:column; } .step .slot { order:3; margin:16px 0 0; } .step h3 { order:1; } .step p { order:2; } }
.step { counter-increment:s; }
.step .slot { height:180px; border-radius:var(--r); margin-bottom:18px; display:grid; place-items:center; background:var(--surface); }
.step .slot svg { width:44%; height:auto; max-height:80%; }
.step h3::before { content:counter(s); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; margin-right:10px; font:600 14px/1 var(--font-app); background:var(--sun); color:var(--on-sun); vertical-align:2px; }
.step p { color:var(--muted); margin-top:8px; font-size:15px; }

/* ═══ Statement ═══ */
.statement { text-align:center; padding:32px 0; background:var(--bg); }
.statement h2 { font-size:clamp(30px, 4.6cqi, 54px); max-width:18ch; margin:0 auto; position:relative; }
.statement .panel { position:relative; overflow:hidden; background:var(--sage); color:var(--on-sage); border-radius:40px; padding:84px 28px; }
.statement .panel .sun2 { position:absolute; width:120px; right:-20px; top:-24px; opacity:.95; }
.statement .panel .dot2 { position:absolute; width:70px; height:70px; border-radius:50%; background:var(--coral); left:-18px; bottom:-18px; }
@container (max-width:700px) { .statement .panel { padding:64px 22px; border-radius:32px; } .statement .panel .sun2 { width:84px; } }

/* ═══ Questions ═══ */
.qs { max-width:760px; }
@container (min-width:701px) { .qs { margin-left:auto; margin-right:auto; } }
details { background:var(--surface); border-radius:var(--r-sm); padding:18px 22px; margin-bottom:10px; }
summary { cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; color:var(--coral); font-size:22px; line-height:1; }
details[open] summary::after { content:'\2013'; }
details p { color:var(--muted); margin-top:10px; }

/* ═══ Sign-up ═══ */
.closing { text-align:center; }
.closing .lede { margin:14px auto 0; }
.closing .cta { justify-content:center; margin-left:auto; margin-right:auto; }

/* ═══ Sign-up form ═══ */
.signup { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; max-width:520px; }
@container (max-width:560px) { .signup { grid-template-columns:1fr; } }
.signup input[type=text], .signup input[type=email] { font:inherit; font-size:15px; padding:13px 18px; border-radius:999px; border:2px solid var(--edge-warm); background:var(--surface); color:var(--fg); min-width:0; }
.signup input[type=text]:focus, .signup input[type=email]:focus { outline:2px solid color-mix(in srgb, var(--sage) 40%, transparent); outline-offset:1px; }
.signup .full { grid-column:1 / -1; }
.signup .btn { justify-self:start; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--muted); margin:4px 2px 2px; cursor:pointer; }
.consent input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--sage); cursor:pointer; }
.consent a { color:var(--sage); }
.su-msg { font-size:14px; background:var(--blush); color:var(--fg); border-radius:var(--r-sm); padding:10px 16px; }
.su-done { margin-top:28px; max-width:520px; background:var(--mint); border-radius:var(--r-sm); padding:16px 20px; box-sizing:border-box; display:flex; align-items:center; }
.su-done p { font-weight:600; color:var(--fg); }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.closing .signup, .closing .su-done { margin-left:auto; margin-right:auto; text-align:left; }
/* the closing form's button sits in the middle on wide screens, under the centred heading (Seb, 29 October 2026) */
@container (min-width:701px) { .closing .signup .btn { justify-self:center; } }

/* ═══ Footer ═══ */
.foot { padding:44px 0 52px; font-size:13px; color:var(--muted); background:var(--bg); }
.foot .fmark { display:flex; align-items:center; gap:8px; font:800 17px/1 var(--display); color:var(--sage); margin-bottom:14px; }
.foot .fmark img { width:28px; height:28px; }
.foot p { margin-top:4px; }
.foot a { color:inherit; }

/* ═══ Document pages ═══ */
.doc { padding:72px 0 96px; }
.doc .wrap { max-width:760px; }
.doc .lab { font-weight:600; font-size:14px; color:var(--sage); }
.doc h1 { font-size:clamp(34px, 5cqi, 48px); margin:10px 0 14px; }
.doc .date { color:var(--muted); font-size:14px; margin-bottom:32px; }
.doc h2 { font-size:24px; margin:36px 0 10px; }
.doc p, .doc li { color:var(--soft-ink); margin-top:10px; }
.doc ul { padding-left:1.2em; margin:0; }
.doc a { color:var(--sage); }
.doc .tblwrap { overflow-x:auto; }
.doc table { border-collapse:collapse; width:100%; margin-top:12px; font-size:15px; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--edge-warm); }
.doc th { color:var(--fg); width:34%; }
.doc strong { color:var(--fg); }
.doc .placeholder { background:var(--butter); border-radius:var(--r-sm); padding:14px 18px; color:var(--fg); }
.lost { text-align:center; padding:110px 0 130px; }
.lost-mark { width:120px; height:120px; border-radius:50%; background:var(--sky); display:inline-grid; place-items:center; }
.lost-mark img { width:77px; height:77px; }
.lost h1 { margin:22px 0 14px; }
.lost p { color:var(--muted); font-size:18px; margin-bottom:28px; }