/* SJP Homeschool — marketing site.
   Palette + materials lifted from the app's login screen so the site and the
   app read as one product. Textures are the same .webp files the app ships. */

:root{
  --ink:#F7EFDC;            /* parchment text on dark */
  --ink-soft:rgba(231,214,168,.66);
  --gold:#D9BC72;
  --gold-bright:#E9C063;
  --green-deep:#1c2723;
  --green-card:#233B2E;
  --brown:#3E2B20;
  --rule:rgba(217,188,114,.28);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  color:var(--ink);
  /* Darkened over the leather so the paintings are the brightest thing on the page. */
  background:
    linear-gradient(rgba(8,14,11,.55),rgba(8,14,11,.55)),
    url("assets/leather-green.webp") center/560px,
    #16201c;
  line-height:1.62;
  font-size:17px;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright);text-decoration:underline}

/* ---------- shared bits ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.eyebrow{
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-bright);text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.rule{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--rule),transparent);
}
h1,h2,h3{font-weight:400;letter-spacing:.01em}
h2{font-size:1.9rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
h3{font-size:1.15rem;color:#EFE4C4}

.btn{
  display:inline-block;position:relative;padding:15px 34px 16px;border-radius:11px;
  border:1px solid rgba(0,0,0,.55);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.22) 60%,rgba(0,0,0,.38)),
             url("assets/leather-brown.webp") center/520px;
  background-color:var(--brown);
  font-family:var(--serif);font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 -1px 1px rgba(0,0,0,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.5);
  transition:.15s;
}
/* the app's signature stitched edge */
.btn::after{
  content:"";position:absolute;inset:5px;border-radius:8px;pointer-events:none;
  border:1.5px dashed rgba(216,196,154,.45);
}
.btn:hover{filter:brightness(1.12);text-decoration:none;color:var(--gold)}
.btn:active{transform:translateY(2px);filter:brightness(.95)}
.btn-quiet{
  background:rgba(0,0,0,.32);border:1px solid var(--rule);color:var(--ink);
  box-shadow:none;letter-spacing:.14em;
}
.btn-quiet::after{display:none}
.btn-quiet:hover{background:rgba(0,0,0,.45);color:var(--ink)}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(12,18,15,.94),rgba(12,18,15,.82));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.6);
  box-shadow:0 1px 0 rgba(217,188,114,.12);
}
.masthead .wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.masthead img{width:34px;height:34px;object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.7))}
.masthead .name{font-size:1.05rem;letter-spacing:.03em;color:#F2E5BC}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:.86rem}
.masthead nav a{color:var(--ink-soft);letter-spacing:.06em}
.masthead nav a:hover{color:var(--gold-bright);text-decoration:none}
.masthead .btn{padding:9px 20px 10px;font-size:.72rem}
@media(max-width:720px){
  .masthead nav a.hide-sm{display:none}
  .masthead .name{font-size:.95rem}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background-color:var(--green-deep)}
.hero-art{position:absolute;inset:0;background:center/cover no-repeat;opacity:.9}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 90% at 50% 40%,rgba(18,26,22,.05) 0%,rgba(18,26,22,.5) 70%,rgba(10,15,12,.82) 100%),
    linear-gradient(180deg,rgba(10,15,12,.55),transparent 26%,rgba(10,15,12,.7));
}
.hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:100px;max-width:820px;text-align:center}
.hero-seal{width:104px;height:104px;object-fit:contain;margin:0 auto 18px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.7))}
.hero h1{
  font-size:clamp(2.1rem,5.4vw,3.35rem);line-height:1.15;color:#F7EFDC;
  text-shadow:0 3px 22px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.9);
}
.hero .lede{
  margin:20px auto 0;max-width:600px;font-size:1.09rem;color:#E9DFC4;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}
.hero .cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .fine{margin-top:20px;font-size:.8rem;color:rgba(231,214,168,.62);
  text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* ---------- sections ---------- */
section{padding:78px 0}
.section-head{text-align:center;max-width:620px;margin:0 auto 46px}
.section-head .eyebrow{display:block;margin-bottom:11px}
.section-head p{color:var(--ink-soft);margin-top:12px}

.band{background:rgba(8,13,10,.42);border-top:1px solid rgba(0,0,0,.5);
  border-bottom:1px solid rgba(0,0,0,.5)}

/* feature cards — green leather, same recipe as the login card */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:24px}
.card{
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(0,0,0,.1) 55%,rgba(0,0,0,.24)),
             url("assets/leather-green.webp") center/560px;
  background-color:var(--green-card);
  border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px rgba(6,10,8,.6);
}
/* Screenshots are a whole 1440px window. At card width the full frame is mush, so
   crop into the top-left where the actual content is rather than shrinking it all. */
.card-art{aspect-ratio:16/10;background:#1a251f top left no-repeat;background-size:175%;
  border-bottom:1px solid rgba(0,0,0,.5)}
.card-body{padding:22px 26px 28px}
.card h3{margin-bottom:8px}
.card p{font-size:.93rem;color:var(--ink-soft)}

/* numbered day-flow */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;
  counter-reset:step}
.flow > div{position:relative;padding-left:58px}
.flow > div::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:-4px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:1.15rem;color:var(--gold);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.3)),
             url("assets/leather-brown.webp") center/520px;
  background-color:var(--brown);
  border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.5);
}
.flow h3{margin-bottom:6px}
.flow p{font-size:.93rem;color:var(--ink-soft)}

/* two plaques side by side, stacking on a phone */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;
  align-items:start;max-width:920px;margin:0 auto}
.tiers .plaque{max-width:none;margin:0}
.tier-name{font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.tier-sub{margin-top:10px;font-size:.85rem;color:rgba(240,228,196,.72)}

/* pricing plaque — brown leather, the "important" material */
.plaque{
  position:relative;max-width:470px;margin:0 auto;border-radius:16px;
  padding:44px 38px 38px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(0,0,0,.12) 55%,rgba(0,0,0,.26)),
             url("assets/leather-brown.webp") center/520px;
  background-color:var(--brown);
  border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 34px 90px rgba(6,10,8,.75);
}
.price{font-size:3.2rem;line-height:1;color:#F2E5BC;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.price span{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.plaque ul{list-style:none;text-align:left;margin:26px 0 30px;font-size:.95rem}
.plaque li{padding:9px 0 9px 27px;position:relative;border-bottom:1px solid rgba(0,0,0,.28)}
.plaque li:last-child{border-bottom:0}
.plaque li::before{content:"\2726";position:absolute;left:2px;color:var(--gold)}
.plaque .btn{width:100%}
.plaque .fine{margin-top:16px;font-size:.78rem;color:rgba(231,214,168,.6)}

/* ---------- footer ---------- */
footer{
  background:rgba(6,10,8,.72);border-top:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(217,188,114,.1);
  padding:44px 0 52px;font-size:.87rem;color:var(--ink-soft);
}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center}
footer nav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}

/* ---------- legal pages ---------- */
.doc{max-width:760px;margin:0 auto;padding:60px 22px 90px}
.doc h1{font-size:2.05rem;color:#F7EFDC;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.doc .updated{color:var(--ink-soft);font-size:.87rem;margin-top:8px}
.doc h2{font-size:1.32rem;color:#EFE4C4;margin:40px 0 10px}
.doc p,.doc li{color:#E4DAC0}
.doc p{margin:13px 0}
.doc ul{margin:13px 0 13px 22px}
.doc li{margin:7px 0}
.doc .note{
  position:relative;border-radius:12px;padding:18px 22px;margin:24px 0;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(0,0,0,.12) 55%,rgba(0,0,0,.24)),
             url("assets/leather-green.webp") center/560px;
  background-color:var(--green-card);
  border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px rgba(6,10,8,.5);
}
.doc .note strong{color:var(--gold-bright)}

/* ---------- sales pages ---------- */

/* page banner for the inner pages — shorter than the home hero */
.pagehead{position:relative;overflow:hidden;background-color:var(--green-deep)}
.pagehead .art{position:absolute;inset:0;background:center/cover no-repeat;opacity:.55}
.pagehead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,12,.72),rgba(10,15,12,.5) 45%,rgba(10,15,12,.86));
}
.pagehead .wrap{position:relative;z-index:2;padding:74px 22px 66px;max-width:760px;text-align:center}
.pagehead h1{font-size:clamp(1.9rem,4.4vw,2.9rem);color:#F7EFDC;
  text-shadow:0 3px 20px rgba(0,0,0,.85)}
.pagehead p{margin-top:14px;color:#E9DFC4;text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* alternating image / copy rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin:0 0 68px}
.split:last-child{margin-bottom:0}
.split .shot{
  border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#1a251f center/cover no-repeat;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 60px rgba(6,10,8,.6);
}
.split.flip .shot{order:2}
.split h3{font-size:1.42rem;margin-bottom:12px}
.split p{color:var(--ink-soft);margin-bottom:12px}
.split ul{list-style:none;margin-top:16px}
.split li{position:relative;padding:7px 0 7px 26px;font-size:.94rem;color:var(--ink-soft)}
.split li::before{content:"\2726";position:absolute;left:0;top:7px;color:var(--gold)}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:26px;margin-bottom:52px}
  .split.flip .shot{order:0}
}

/* the "nothing else does this" grid */
.claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.claim{
  border-radius:14px;padding:24px 26px 26px;
  background:rgba(0,0,0,.34);border:1px solid var(--rule);
}
.claim h3{font-size:1.03rem;margin-bottom:8px}
.claim p{font-size:.9rem;color:var(--ink-soft)}
.claim .tag{
  display:inline-block;margin-bottom:11px;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--rule);
  border-radius:999px;padding:4px 11px;
}
.claim .tag.soon{color:#c9b58c;opacity:.8}

/* referral */
.pricing-tiers-section{padding-bottom:34px}
.pricing-referral-section{padding-top:64px}
.pricing-faq-section{margin-top:0}
.referral{
  position:relative;max-width:860px;margin:0 auto;border-radius:7px;
  color:#39291f;
  background:
    radial-gradient(circle at 14% 20%,rgba(117,73,30,.07),transparent 24%),
    radial-gradient(circle at 86% 74%,rgba(117,73,30,.06),transparent 28%),
    repeating-linear-gradient(3deg,rgba(87,53,26,.018) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,#f3e5bf 0%,#ead5a5 48%,#f5e8c5 100%);
  border:1px solid rgba(91,57,28,.55);
  box-shadow:inset 0 0 0 5px rgba(255,251,232,.34),
             inset 0 0 45px rgba(111,72,34,.16),0 30px 80px rgba(6,10,8,.62);
}
.referral::before{
  content:"";position:absolute;inset:12px;border:1px solid rgba(109,69,31,.24);
  border-radius:3px;pointer-events:none;
}
.referral .copy{position:relative;padding:70px clamp(30px,7vw,76px) 50px}
.referral-seal{
  position:absolute;left:50%;top:0;width:122px;height:122px;object-fit:contain;
  transform:translate(-50%,-55%);z-index:2;
  filter:drop-shadow(0 10px 10px rgba(48,22,16,.4));
}
.referral .eyebrow{color:#7b321f;text-shadow:none;text-align:center}
.referral h2{font-size:1.9rem;margin-bottom:14px;color:#34241c;text-align:center;text-shadow:none}
.referral p{color:#5c4838;margin-bottom:11px}
.referral ol{list-style:none;counter-reset:ref;margin:22px 0 0}
.referral li{counter-increment:ref;position:relative;padding:10px 0 10px 42px;font-size:.95rem}
.referral li::before{
  content:counter(ref);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;color:#f8e9c2;background:#7b321f;
}
@media(max-width:800px){
  .pricing-tiers-section{padding-bottom:28px}
  .pricing-referral-section{padding-top:58px}
  .referral .copy{padding:62px 26px 36px}
  .referral-seal{width:104px;height:104px}
}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(217,188,114,.18);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-size:1.02rem;color:#EFE4C4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:15px;color:var(--gold);font-size:1.3rem;line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 18px;color:var(--ink-soft);font-size:.95rem}

/* raspberry pi panel */
.kit{
  border-radius:16px;padding:34px 36px 36px;
  background:rgba(0,0,0,.38);border:1px solid var(--rule);
}
.kit h3{margin-bottom:10px}
.kit p{color:var(--ink-soft);font-size:.95rem;margin-bottom:14px}
.kit .status{
  display:inline-block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:#2A1D14;background:var(--gold);border-radius:999px;padding:5px 13px;margin-bottom:14px;
}
.kit ol{margin:16px 0 0 20px;color:var(--ink-soft);font-size:.94rem}
.kit li{margin:8px 0}
.kit .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- temporary public holding page ---------- */
.construction-page{
  min-height:100vh;
  background:
    linear-gradient(rgba(7,16,12,.54),rgba(7,16,12,.7)),
    url("assets/login-bg.webp") center/cover fixed no-repeat,
    #102219;
}
.construction-shell{
  position:relative;isolation:isolate;min-height:100vh;overflow:hidden;
  display:grid;place-items:center;padding:clamp(78px,12vh,130px) 22px 64px;
}
.construction-shell::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,transparent 15%,rgba(3,9,6,.62) 100%);
}
.construction-glow{
  position:absolute;z-index:-1;width:min(820px,88vw);height:min(650px,75vh);
  border-radius:50%;background:rgba(225,193,112,.09);filter:blur(70px);
}
.construction-letter{
  position:relative;width:min(700px,100%);padding:clamp(76px,10vw,104px) clamp(30px,7vw,78px) clamp(40px,6vw,62px);
  text-align:center;color:#3c2c22;border-radius:8px;
  background:
    radial-gradient(circle at 18% 15%,rgba(129,78,32,.08),transparent 24%),
    radial-gradient(circle at 88% 82%,rgba(129,78,32,.07),transparent 30%),
    repeating-linear-gradient(2deg,rgba(80,48,20,.018) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,#f5e8c6 0%,#ead5a6 48%,#f6eacb 100%);
  border:1px solid rgba(84,51,24,.62);
  box-shadow:inset 0 0 0 6px rgba(255,252,235,.38),inset 0 0 55px rgba(103,63,29,.19),0 35px 100px rgba(0,0,0,.72);
}
.construction-letter::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(103,63,29,.22);border-radius:4px;pointer-events:none;
}
.construction-seal{
  position:absolute;z-index:2;left:50%;top:0;width:132px;height:132px;object-fit:contain;
  transform:translate(-50%,-53%);filter:drop-shadow(0 13px 13px rgba(49,22,15,.48));
}
.construction-kicker{color:#7b321f;font-size:.69rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700}
.construction-letter h1{
  margin-top:14px;color:#35251d;font-size:clamp(2.15rem,6vw,3.7rem);line-height:1.08;text-shadow:none;
}
.construction-rule{display:flex;align-items:center;gap:14px;margin:24px auto;color:#8b5a2b;font-size:.8rem}
.construction-rule::before,.construction-rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(108,69,33,.55))}
.construction-rule::after{background:linear-gradient(90deg,rgba(108,69,33,.55),transparent)}
.construction-copy{max-width:535px;margin:0 auto;color:#594536;font-size:clamp(1rem,2.1vw,1.17rem);line-height:1.65}
.construction-note{margin:18px auto 0;color:#694c39;font-size:.92rem;font-style:italic}
.construction-login{margin-top:28px;min-width:min(310px,100%)}
.construction-fine{margin:18px auto 0;color:#806a58;font-size:.76rem;line-height:1.45}
@media(max-width:560px){
  .construction-shell{padding-top:82px}
  .construction-letter{padding-top:72px}
  .construction-seal{width:112px;height:112px}
  .construction-login{padding-left:19px;padding-right:19px}
}