/* dreambug.app — shared styles. Self-hosted fonts only; the page makes no third-party requests. */
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-600.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(fonts/baloo2-700.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Andika";src:url(fonts/andika-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#0a0e1c; --ink2:#121a33; --ink3:#1b2445;
  --cream:#f8f2e4; --dim:rgba(248,242,228,.70); --faint:rgba(248,242,228,.46);
  --amber:#f0a35e; --amber-soft:#ffd8a8; --line:rgba(248,242,228,.13);
  --ui:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --display:"Baloo 2","Fredoka",ui-rounded,system-ui,sans-serif;
  --body:"Andika","Atkinson Hyperlegible",ui-rounded,system-ui,sans-serif;
  --wrap:1120px; --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; overflow-x:clip; background:var(--ink); color:var(--cream); font-family:var(--body);
  font-size:clamp(16px,1.05vw,18px); line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(80rem 40rem at 78% -10%, rgba(240,163,94,.14), transparent 62%),
    radial-gradient(60rem 34rem at 8% 8%, rgba(120,150,255,.11), transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%; display:block}
a{color:var(--amber-soft); text-underline-offset:3px}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.1; letter-spacing:.005em; margin:0}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.14rem; font-weight:700}
p{margin:.75em 0}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--dim); max-width:56ch}
.eyebrow{font-family:var(--ui); font-weight:600; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin:0 0 .9rem}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:20; backdrop-filter:blur(12px);
  background:linear-gradient(to bottom, rgba(10,14,28,.92), rgba(10,14,28,.72)); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:.4rem 1rem; padding:.8rem 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--ui); font-weight:600;
  font-size:1.18rem; color:var(--cream); text-decoration:none}
.brand img{width:34px; height:34px; border-radius:9px}
nav{margin-left:auto; display:flex; gap:1.4rem; font-family:var(--ui); font-size:.95rem}
nav a{color:var(--dim); text-decoration:none}
nav a:hover{color:var(--cream)}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,5vw,4rem)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.hero h1 em{font-style:normal; color:var(--amber-soft)}
.store{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:1.8rem}
.badge{display:inline-flex; align-items:center; gap:.65rem; padding:.8rem 1.25rem; border-radius:14px;
  background:var(--cream); color:#12182c; font-family:var(--ui); font-weight:600; text-decoration:none;
  border:0; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.badge small{display:block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; opacity:.62; font-weight:600}
.badge b{display:block; font-size:1.02rem; line-height:1.15; font-weight:600}
.badge[aria-disabled="true"]{background:transparent; color:var(--cream); border:1px solid var(--line); box-shadow:none}
.trial{font-family:var(--ui); font-size:.92rem; color:var(--faint)}

/* cover fan */
.fan{position:relative; aspect-ratio:4/2.9}
.fan img{position:absolute; width:66%; border-radius:14px; box-shadow:0 26px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10)}
.fan img:nth-child(1){left:0; top:2%; transform:rotate(-8deg)}
.fan img:nth-child(2){right:0; top:6%; transform:rotate(6deg)}
.fan img:nth-child(3){left:17%; bottom:0; transform:rotate(-1.5deg); z-index:2}

/* ---------- shelf ---------- */
/* Wraps on a wide screen so nothing is clipped at the edge; becomes a swipeable row on phones. */
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.2rem 1rem; margin-top:2.2rem}
.shelf figure{margin:0}
.shelf img{border-radius:12px; border:1px solid rgba(255,255,255,.09); box-shadow:0 14px 34px rgba(0,0,0,.4)}
.shelf figcaption{font-family:var(--ui); font-size:.88rem; margin-top:.6rem; color:var(--cream)}
.shelf span{display:block; color:var(--faint); font-size:.8rem}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; margin-top:2.4rem}
.card{background:linear-gradient(180deg, var(--ink2), rgba(18,26,51,.45)); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem 1.35rem}
.card svg{width:26px; height:26px; stroke:var(--amber); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.card h3{margin:.85rem 0 .3rem}
.card p{margin:0; color:var(--dim); font-size:.96rem}

/* ---------- spread ---------- */
.spread{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.5); margin-top:2.4rem}
/* margin:0 matters: a bottom margin on an absolutely positioned box lifts it off bottom:0
   and lets the bright edge of the art show under the caption. */
.spread .cap{position:absolute; inset:auto 0 0 0; margin:0; padding:clamp(2.5rem,7vw,4.5rem) 8% clamp(1rem,3vw,1.9rem);
  background:linear-gradient(to top, rgba(6,9,16,.86) 0%, rgba(6,9,16,.5) 42%, transparent 100%);
  font-family:"Baloo 2",var(--body); font-weight:600; color:#fff6e0; text-align:center;
  font-size:clamp(.86rem,1.5vw,1.12rem); line-height:1.35; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.spread .cap mark{background:none; color:var(--amber-soft)}

/* ---------- bento features ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; margin-top:2.4rem}
.tile{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--ink2), rgba(18,26,51,.42)); padding:1.5rem 1.45rem}
.tile.w6{grid-column:span 6} .tile.w4{grid-column:span 4}
.tile.w3{grid-column:span 3} .tile.w2{grid-column:span 2}
.tile h3{margin:.9rem 0 .35rem}
.tile p{margin:0; color:var(--dim); font-size:.96rem}
.tile svg{width:26px; height:26px; stroke:var(--amber); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* A tile that shows the real app rather than an icon. The screenshot fills its half and is
   cropped to fit, so one tall image cannot stretch the whole grid row. */
.tile.shot{display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; padding:0;
  min-height:330px}
.tile.shot.w6{grid-template-columns:1.2fr .8fr; min-height:300px}
.tile.shot .txt{padding:1.5rem 1.4rem; align-self:center}
.tile.shot img{width:100%; height:100%; object-fit:cover; object-position:center top;
  border-radius:0 var(--r) var(--r) 0; border-left:1px solid rgba(255,255,255,.09)}
.tile.accent{background:linear-gradient(160deg, rgba(240,163,94,.16), rgba(18,26,51,.5))}

/* ---------- ages ---------- */
.ages{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:1.1rem; margin-top:2.4rem}
.age{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:rgba(18,26,51,.42);
  display:flex; flex-direction:column}
.age img{aspect-ratio:16/10; object-fit:cover; width:100%}
.age .body{padding:1.15rem 1.2rem 1.35rem}
.age b{font-family:var(--ui); font-weight:600; font-size:1.35rem; color:var(--amber); display:block; line-height:1.1}
.age .len{font-family:var(--ui); font-size:.8rem; color:var(--faint); display:block; margin:.15rem 0 .7rem}
.age p{margin:0 0 .9rem; font-size:.93rem; color:var(--dim)}
.age .eg{font-family:var(--ui); font-size:.82rem; color:var(--faint); border-top:1px solid var(--line); padding-top:.75rem}
.age .eg i{font-style:normal; color:var(--cream); display:block}

/* ---------- price ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem; margin-top:2.4rem}
.tier{position:relative; border:1px solid var(--line); border-radius:20px; padding:1.7rem 1.6rem;
  background:linear-gradient(180deg, var(--ink2), rgba(18,26,51,.42)); display:flex; flex-direction:column}
.tier.best{border-color:rgba(240,163,94,.55); background:linear-gradient(170deg, rgba(240,163,94,.15), rgba(18,26,51,.55))}
.tier .flag{position:absolute; top:-.72rem; left:1.5rem; font-family:var(--ui); font-weight:600; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:#12182c; background:var(--amber); padding:.28rem .7rem; border-radius:99px}
.tier .name{font-family:var(--ui); font-weight:600; font-size:.95rem; color:var(--cream)}
.tier .amt{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,3.6vw,2.7rem); line-height:1.1; margin:.5rem 0 .1rem}
.tier .per{font-family:var(--ui); font-size:.84rem; color:var(--faint)}
.tier .pm{font-family:var(--ui); font-size:.86rem; color:var(--amber-soft); margin-top:.5rem}
.tier ul{list-style:none; padding:0; margin:1.1rem 0 0; font-size:.92rem; color:var(--dim)}
.tier li{padding-left:1.4rem; position:relative; margin:.42em 0}
.tier li::before{content:"✓"; position:absolute; left:0; color:var(--amber); font-size:.9em}
.pricefoot{text-align:center; margin-top:1.8rem}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.w6,.tile.w4,.tile.w3,.tile.w2{grid-column:span 1}
  .tile.shot.w6{grid-column:span 2; grid-template-columns:1fr}
  .tile.shot{grid-column:span 2; grid-template-columns:1fr; min-height:0}
  .tile.shot img{max-height:300px; border-radius:0 0 var(--r) var(--r); border-left:0;
    border-top:1px solid rgba(255,255,255,.09)}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile.shot{grid-column:span 1}
}

/* ---------- faq + prose ---------- */
.faq{max-width:74ch; margin-top:2rem}
details{border-bottom:1px solid var(--line); padding:1.1rem 0}
summary{font-family:var(--ui); font-weight:600; cursor:pointer; list-style:none; display:flex; gap:1rem; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; margin-left:auto; color:var(--amber); font-size:1.3rem; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--dim); margin:.7rem 0 0}
/* small utilities, so no page needs an inline style attribute and the CSP can stay strict */
.center{margin-inline:auto}
.tight{margin-bottom:.4rem}
.fine{font-size:.78rem}
.mt{margin-top:1.2rem}
.pagetitle{font-size:clamp(2rem,4vw,2.8rem)}
.prose{max-width:72ch}
.prose h2{margin-top:2.5rem; font-size:clamp(1.3rem,2.4vw,1.7rem)}
.prose ul{color:var(--dim); padding-left:1.2rem}
.prose li{margin:.4em 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem; margin-top:2rem}
.foot{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; font-family:var(--ui); font-size:.9rem; color:var(--faint)}
.foot nav{margin-left:auto}

@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .fan{order:-1; aspect-ratio:4/2.7; max-width:520px}
  nav{gap:1rem; font-size:.9rem}
  .shelf{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64%;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.8rem}
  .shelf figure{scroll-snap-align:start}
}
@media (max-width:560px){
  /* the brand plus four links cannot fit one phone row; give the nav its own line
     rather than letting the header push the whole page sideways */
  nav{margin-left:0; width:100%; justify-content:space-between; gap:.5rem}
  .store{gap:.6rem}
  .trial{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}