/* Packet Perfect front door and Teacher's Desk (owner-approved visual direction, 2026-10-06).
   Product pages keep app.css; this file adds the navy/pink brand layer, the public site and the desk. */
@font-face{font-family:'Nunito';src:url('fonts/nunito/Nunito-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/nunito/Nunito-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/nunito/Nunito-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Patrick Hand';src:url('fonts/patrickhand/PatrickHand-Regular.ttf') format('truetype');font-display:swap}
:root{--navy:#14294b;--navy-2:#1d3a66;--pink:#ec2d7a;--pink-dark:#c91c64;--cream:#fbf6ec;--paper-cal:#f7f5ef}

/* Signed-in shell: navy menu with the heart logo. */
.signed-in .sidebar{background:linear-gradient(180deg,#172b45,#132334 70%);border-right:6px solid #6e3d1e;box-shadow:inset -1px 0 0 #a8683a66;color:#e9eef7}
.signed-in .brand{padding:6px 6px 26px}
.signed-in .brand img{width:200px;height:auto;max-width:100%}
.signed-in .sidebar nav a{color:#dfe6f3;font-size:15px;padding:10px 14px}
.signed-in .sidebar nav a:hover{background:#ffffff1a;color:#fff}
.signed-in .sidebar nav a.active{background:#f4b63f1f;color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #f4b63f}
.signed-in .sidebar nav hr{border:0;border-top:1px solid #ffffff26;margin:14px 10px}
.signed-in .sidebar .account{border-top-color:#ffffff26}
.signed-in .sidebar .account a,.signed-in .sidebar .account .link{color:#dfe6f3}
.signed-in .sidebar .account{flex-direction:column;align-items:flex-start;gap:9px;font-size:14px}

/* Public header. */
.public{background:var(--cream);font-family:'Nunito','Segoe UI',Arial,sans-serif}
.site-header{display:flex;align-items:center;gap:28px;padding:14px 36px;background:var(--navy);position:sticky;top:0;z-index:5}
.site-brand img{height:54px;width:auto;display:block}
.site-header nav{display:flex;gap:30px;margin-left:auto}
.site-header nav a{color:#fff;font-weight:600}
.site-actions{display:flex;gap:12px}
.button.outline{border:2px solid #fff;color:#fff;border-radius:999px;padding:9px 22px}
.button.outline:hover{background:#ffffff1a;text-decoration:none}
.button.pink{background:var(--pink);color:#fff;border-radius:999px;padding:11px 24px}
.button.pink:hover{background:var(--pink-dark);text-decoration:none}
.button.large{font-size:19px;padding:13px 34px}
.button.wide{width:100%}
.handwritten{font-family:'Patrick Hand','Nunito',cursive;font-weight:400}
.underline{display:inline-block;border-bottom:4px solid var(--pink);padding-bottom:2px}
.placeholder{border:2px dashed #c9bfae;border-radius:10px;padding:14px 18px;color:#7a6f60;background:#fffdf7;max-width:720px;margin:14px auto}

/* Homepage (owner direction 2026-10-06). The hero is the cream workspace art: headline and sentence on the plain sunlit
   wall, real PP pages lying on the open desk clear of the laptop and mug (positions are percentages of the art, like the
   calendar). Below, the same room continues: Sue's video hangs on the wall in a frame like the calendar's; How It Works
   is a sheet of PP notebook paper; the walkthrough hangs on the wall below the letter; examples lie on the desk. */
.site{padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{background:#eadfcb}
.hero-scene{position:relative;width:100%;aspect-ratio:3/2;max-height:calc(100vh - 82px);min-height:520px;overflow:hidden;container-type:size}
.hero-scene .scene-stage{width:max(100cqw,150cqh);left:calc((100cqw - max(100cqw,150cqh))*.35);top:calc((100cqh - max(100cqw,150cqh)/1.5)*.18)}
.hero-copy{position:absolute;left:20.5%;top:6.5%;width:41%;color:var(--navy)}
.hero h1{font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:5.4cqw;line-height:1;margin:0 0 1.1cqw}
.hero h1>span{display:block}
.hero h1 em{font-style:normal;color:var(--pink)}
.more-words{display:inline-grid;vertical-align:top}
.more-word{grid-area:1/1;opacity:0;transition:opacity .4s ease;white-space:nowrap}
.more-word.on{opacity:1}
@media(prefers-reduced-motion:reduce){.more-word{transition:none;opacity:0}.more-word.you{opacity:1}}
/* The sentence sits on the plain wall at a readable measure; a soft wall-coloured glow, not a box. */
.hero p{font-size:max(17px,1.42cqw);line-height:1.45;max-width:max(29cqw,360px);color:#26303b;font-weight:600;margin:0 0 1.6cqw;text-shadow:0 0 .9cqw #f6ead6,0 0 .3cqw #f6ead6}
.hero .button.large{font-size:max(17px,1.3cqw);padding:.8cqw 2.2cqw}
.hero-pages{position:absolute;left:23%;top:43%;width:44.5%;height:56%}
/* A thin white printer margin keeps full-bleed design pages from blending into the busy desk. */
.pp-page{position:absolute;width:45%;padding:.32cqw;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #2a12061f,.25cqw .35cqw .4cqw #2a12068a,.9cqw 1.2cqw 1.8cqw #2a120666}
.pp-page-1{left:0;top:11%;transform:rotate(-6deg)}
.pp-page-2{left:27.5%;top:0;transform:rotate(1.5deg);z-index:2}
.pp-page-3{left:55%;top:9%;transform:rotate(5.5deg)}

/* Founder: the sunlit wall continues below the hero; the video hangs in a walnut frame. */
.founder{padding:96px 6vw 90px;box-shadow:inset 0 16px 18px -14px #2b130659;background:linear-gradient(112deg,transparent 18%,#fff6e266 28%,transparent 40%,transparent 55%,#fff6e24d 63%,transparent 74%),radial-gradient(ellipse at 30% 40%,#f5ebd9,#eadbc2 70%,#e2cfb2)}
.founder-wall{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:60px;align-items:center;max-width:1180px;margin:0 auto}
.wall-frame{position:relative;margin:0;padding:11px;background:linear-gradient(135deg,#8a4f25,#6e3d1e 45%,#7d4520);border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff2e,4px 12px 22px #3d230f59,1px 2px 3px #3d230f66}
.wall-frame::before{content:'';position:absolute;left:50%;top:-38px;width:56%;height:38px;transform:translateX(-50%);
  background:linear-gradient(to top right,transparent calc(50% - 1px),#6b4a2e calc(50% - .6px),#6b4a2e calc(50% + .6px),transparent calc(50% + .6px)) left/50% 100% no-repeat,
  linear-gradient(to top left,transparent calc(50% - 1px),#6b4a2e calc(50% - .6px),#6b4a2e calc(50% + .6px),transparent calc(50% + .6px)) right/50% 100% no-repeat}
.wall-frame::after{content:'';position:absolute;left:50%;top:-44px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#b98a5a,#6e4a2a)}
.wall-frame video,.wall-frame .video-placeholder{width:100%;aspect-ratio:16/9;background:#efe6d6;border:34px solid #faf6ee;box-shadow:inset 0 0 0 1px #d8cbb2,inset 2px 3px 6px #5a3a1433}
.wall-frame video{display:block;background:#000}
.video-placeholder{display:grid;place-items:center;align-content:center;gap:12px;color:#6d6455;font-weight:700}
.play{width:64px;height:64px;border-radius:50%;background:var(--pink);position:relative;box-shadow:0 6px 14px #ec2d7a40}
.play::after{content:'';position:absolute;left:26px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.founder-note h2{font-size:clamp(46px,4.4vw,66px);color:var(--navy);margin:0;line-height:1;display:flex;align-items:flex-start;gap:10px}
.founder-heart{width:34px;height:auto;margin-top:6px;transform:rotate(10deg)}
.founder-swoosh{display:block;width:230px;height:auto;margin:6px 0 26px}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.checklist li{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--navy)}
.checklist svg{width:26px;flex:none}

/* How It Works: one sheet of PP notebook paper lying on the desk wood. */
.steps{background:#8a5532 url('scenes/workspace-cream.webp') 29% 88%/400% auto no-repeat;padding:64px 6vw 70px}
.steps-sheet{max-width:1080px;margin:0 auto;padding:34px 48px 38px 90px;transform:rotate(-.6deg);border-radius:4px;color:var(--navy);
  background:linear-gradient(90deg,transparent 58px,#ec2d7a55 58px,#ec2d7a55 60px,transparent 60px),repeating-linear-gradient(transparent 0 33px,#c8d3e266 33px 34px),linear-gradient(100deg,#fffaf0,#f4ead8);
  box-shadow:.3vw .5vw .6vw #2a12068c,1.2vw 1.8vw 2.6vw #2a120666}
.steps-sheet h2{font-size:48px;margin:0 0 22px}
.steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin:0 0 30px;position:relative}
.steps ol::before{content:'';position:absolute;left:6%;right:6%;top:28px;border-top:3px dashed #14294b40}
.steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:19px;font-weight:800}
.pen-circle{position:relative;width:60px;height:56px;display:grid;place-items:center;background:#fdf8ee}
.pen-circle svg{position:absolute;inset:0;width:100%;height:100%}
.pen-circle b{font-family:'Patrick Hand',cursive;font-weight:400;font-size:30px;color:var(--navy)}

/* See It in Action: the walkthrough hangs below the letter on the same sunlit wall, in a walnut frame. */
.founder-walkthrough{grid-column:1/-1;width:100%;max-width:900px;justify-self:center;margin-top:10px;text-align:center;color:var(--navy)}
.founder-walkthrough h2{font-size:52px;margin:0}
.founder-walkthrough p{font-size:19px;margin:6px 0 64px}
.founder-walkthrough .wall-frame video{aspect-ratio:auto;height:auto}
.video-play{position:absolute;inset:11px;display:grid;place-items:center;padding:0;border:0;background:#0000001f;cursor:pointer}.video-play[hidden]{display:none}
.video-play .play{width:88px;height:88px;transition:transform .15s}.video-play .play::after{left:35px;top:27px;border-left-width:26px;border-top-width:17px;border-bottom-width:17px}
.video-play:hover .play,.video-play:focus-visible .play{transform:scale(1.08)}.video-play:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
/* Meet Sue: her short (portrait) introduction hangs beside the letter, under her checklist, in the same walnut frame. */
.founder-intro{margin-top:34px;max-width:300px}
.founder-intro h3{font-size:30px;line-height:1.1;color:var(--navy);margin:0 0 58px}
.founder-intro .wall-frame video{aspect-ratio:9/16;height:auto;border-width:14px}
@media(max-width:900px){.founder-walkthrough{order:-1;margin-top:0}.founder-intro{margin:40px auto 0;text-align:center}}
@media(max-width:560px){.founder-intro{max-width:260px}.founder-intro h3{font-size:26px;margin-bottom:54px}.founder-intro .wall-frame{padding:7px}.founder-intro .wall-frame video{border-width:10px}}
@media(max-width:560px){.founder-walkthrough p{margin-bottom:54px}.founder-walkthrough .wall-frame{padding:7px}.video-play{inset:7px}.video-play .play{width:64px;height:64px}.video-play .play::after{left:26px;top:20px;border-left-width:18px;border-top-width:12px;border-bottom-width:12px}.founder-walkthrough .wall-frame video{border-width:10px}}

/* Examples: real pages lying on the desk. */
.examples{background:#8a5532 url('scenes/workspace-cream.webp') 29% 88%/400% auto no-repeat;padding:56px 6vw 70px;text-align:center;color:#fff}
.examples h2{font-size:52px;margin:0;text-shadow:0 2px 10px #2a1206}
.staging-note{font-size:14px;font-style:italic;opacity:.85;margin:6px 0 22px}
.example-desk{display:flex;justify-content:center;flex-wrap:wrap;gap:34px 30px;max-width:1180px;margin:0 auto}
.example-desk figure{margin:0;width:min(230px,42vw)}
.example-desk figure:nth-child(odd){transform:rotate(-2.5deg)}.example-desk figure:nth-child(even){transform:rotate(2deg) translateY(10px)}
.example-desk img{width:100%;display:block;border-radius:3px;box-shadow:.3vw .5vw .6vw #2a12069e,1vw 1.5vw 2vw #2a120666}
.example-desk figcaption{margin-top:12px;font-size:14px;font-weight:700;color:#fff7ea;text-shadow:0 1px 6px #2a1206}
.samples-note{font-size:17px;margin:8px 0 10px;color:#fff7ea;text-shadow:0 1px 6px #2a1206}
.samples-kind{font-size:40px;margin:34px 0 4px;text-shadow:0 2px 10px #2a1206}
.sample-set{margin:18px auto 30px}
.sample-name{font-size:18px;font-weight:700;margin:0 0 20px;color:#fff7ea;text-shadow:0 1px 6px #2a1206}.sample-name cite{font-style:italic}
.sample-set .example-desk{gap:30px 22px;max-width:1240px}.sample-set .example-desk figure{width:min(170px,40vw)}.sample-set .example-desk img{height:auto}

/* Pricing and FAQ: two index cards on warm paper. */
.cards-row{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1080px;margin:0 auto;padding:60px 6vw 70px}
.index-card{background:linear-gradient(#e0687f 0 4px,transparent 4px),repeating-linear-gradient(transparent 0 31px,#b9cde080 31px 32px) 0 52px/100% calc(100% - 52px) no-repeat,#fffdf8;
  padding:20px 30px 28px;border-radius:3px;color:var(--navy);box-shadow:0 3px 10px #5a3a1424}
.index-card:first-child{transform:rotate(-1deg)}.index-card:last-child{transform:rotate(.8deg)}
.index-card h2{font-size:28px;font-weight:800;margin:0 0 18px}
.final-cta{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;padding:50px 6vw;background:var(--navy);color:#fff}
.final-cta h2{font-size:46px;margin:0;display:flex;gap:10px;align-items:flex-start}

/* Portrait tablets: a taller crop of the same room keeps the headline on the wall and the pages on the desk. */
@media(max-width:900px){.hero-scene{aspect-ratio:4/5;max-height:none;min-height:0}
  .hero-scene .scene-stage{left:calc((100cqw - max(100cqw,150cqh))*.36)}
  .hero p{max-width:31cqw}
  .founder-wall{grid-template-columns:1fr;gap:70px}.steps ol{grid-template-columns:1fr 1fr}.steps ol::before{display:none}.steps-sheet{padding:28px 24px 30px 76px}.cards-row{grid-template-columns:1fr}}
/* Phones: the headline moves above the picture; the pages stay on the desk. */
@media(max-width:560px){.hero-scene{display:flex;flex-direction:column;aspect-ratio:auto;container-type:normal;overflow:visible}
  .hero-scene .scene-stage{position:relative;left:0;top:0;width:100%;aspect-ratio:3/2;order:2;overflow:hidden}
  .hero-scene .copy-layer{position:static;aspect-ratio:auto;order:1;container-type:normal;width:auto}
  .hero-copy{position:static;width:auto;padding:28px 20px 22px}.hero h1{font-size:46px;margin-bottom:12px}.hero p{max-width:none;font-size:17px;margin-bottom:16px;text-shadow:none}
  .hero .button.large{font-size:17px;padding:12px 28px}.hero-pages{left:14%;width:72%;top:30%;height:68%}.checklist{grid-template-columns:1fr}.steps ol{grid-template-columns:1fr}.founder-note h2,.founder-walkthrough h2,.examples h2,.final-cta h2{font-size:40px}.steps-sheet h2{font-size:40px}}

/* Create Account / Sign In: the cream workspace art beside the panel. */
.entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,500px);min-height:calc(100vh - 82px);padding:0}
.entry-scene{position:sticky;top:82px;height:calc(100vh - 82px);overflow:hidden;container-type:size;background:#e9dcc7}
.scene-stage{position:absolute;aspect-ratio:3/2;container-type:inline-size}
.entry-scene .scene-stage{width:max(100cqw,150cqh);top:50%;left:calc((100cqw - max(100cqw,150cqh))*.75);transform:translateY(-50%)}
.scene-stage>img{display:block;width:100%;height:100%;object-fit:cover}
.entry-panel{background:#fffdf8;padding:40px 44px;box-shadow:-10px 0 30px #3d2a1018}
.entry-panel h1{font-family:Georgia,'Times New Roman',serif;font-size:38px;color:var(--navy);margin:0 0 6px;line-height:1.15}
.entry-lead{font-size:17px;margin:0 0 20px}
.entry-panel .field{margin:0 0 14px}
.entry-panel .field label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.entry-panel .field input:not([type=checkbox]){width:100%;padding:11px 12px;border:1px solid #d3d6dc;border-radius:7px;background:#fff}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-error{display:block;color:#a3302f;font-size:13px;margin-top:4px}
.payment-slot{display:flex;flex-direction:column;gap:3px;border:2px dashed #c6cfdd;border-radius:10px;padding:12px 15px;margin:4px 0 16px;background:#f2f6fb;font-size:14px;color:#47546a}
.accept label{display:flex;gap:9px;align-items:flex-start;font-weight:400 !important}
.entry-forgot{text-align:right;margin:-4px 0 18px;font-size:14px}
.entry-switch{text-align:center;font-size:14px;margin-top:16px}

/* The wall calendar: paper inside the art's empty frame (same place in the cream and navy art). */
.wall-calendar{position:absolute;left:69.1%;top:10.5%;width:16%;height:28.2%;background:var(--paper-cal);padding:2.2% 1.4% 1.2%;display:flex;flex-direction:column;color:#3b3a36;pointer-events:none}
.cal-title{font-family:'Patrick Hand',cursive;font-size:1.75cqw;text-align:center;margin:0 0 .4cqw;line-height:1}
.cal-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;border-top:1px solid #d5cfc3;border-left:1px solid #d5cfc3}
.cal-grid span{border-right:1px solid #d5cfc3;border-bottom:1px solid #d5cfc3;font-size:.62cqw;padding:.12cqw .2cqw;line-height:1}
.cal-grid .cal-dow{font-weight:700;text-align:center;color:#6c675d;border-bottom-width:2px}

/* Teacher's Desk (owner direction 2026-10-06): the navy workspace art takes part in the composition. Positions are
   percentages of the art (1536×1024). The greeting sits on the open wall; the four primary actions are written on one
   sheet of paper lying on the clear part of the desk, between the pencil cup and the laptop, the way the live
   calendar fills the frame on the wall. No icons, colored blocks or extra text. */
.desk-page{padding-top:0;max-width:none}
.desk{position:relative;margin:0 -48px 30px}
.desk-scene{position:relative;width:100%;aspect-ratio:3/2;max-height:calc(100vh - 16px);overflow:hidden;container-type:size;background:#132334}
.desk-scene .scene-stage{width:max(100cqw,150cqh);left:calc((100cqw - max(100cqw,150cqh))*.5);top:calc((100cqh - max(100cqw,150cqh)/1.5)*.62)}
.desk-greeting{position:absolute;left:41.5%;top:30.5%;width:26%;margin:0;color:#fff;font-size:clamp(28px,3.5cqw,58px);line-height:1.02;text-shadow:0 2px 14px #0a1522,0 0 3px #0a1522}
/* The primary actions: one Packet Perfect packet lying on the desk. Create a Packet is the top sheet (layered pages
   beneath, a hand-drawn pink underline, the PP heart, a pen arrow); the other three destinations are divider tabs
   standing out from between the pages. Sizes use the packet's own width (cqw), so the same design scales on the
   desk and in the tablet/phone layout. */
.desk-packet{position:relative;container-type:inline-size;aspect-ratio:3.3/1;isolation:isolate}
.packet-main{position:absolute;left:0;top:0;width:66%;height:100%;z-index:2;color:var(--navy)}
.packet-main:hover,.packet-main:focus-visible{text-decoration:none}
.sheet{position:absolute;inset:0;border-radius:1.2cqw;background:#f4ecdc}
.sheet.under-2{transform:rotate(-3.2deg) translate(-1.2cqw,1.4cqw);background:#e6dac4;box-shadow:.8cqw 1.1cqw 1.8cqw #2a12069e}
.sheet.under-1{transform:rotate(1.6deg) translate(.6cqw,.5cqw);background:#efe5d2;box-shadow:.3cqw .5cqw .9cqw #2a120659}
.sheet.face{display:flex;flex-direction:column;justify-content:center;padding:0 6% 0 13%;transition:transform .18s;
  background:linear-gradient(90deg,transparent 8.4%,#ec2d7a55 8.4%,#ec2d7a55 8.9%,transparent 8.9%),
    repeating-linear-gradient(transparent 0 calc(16.6% - 1px),#c8d3e266 calc(16.6% - 1px) 16.6%),linear-gradient(100deg,#fffaf0,#f5ecdb 70%,#ebdfc8);
  box-shadow:.2cqw .3cqw .5cqw #2a120640}
.packet-title{font-weight:800;font-size:5.6cqw;line-height:1.05;letter-spacing:-.1cqw}
.swoosh{width:62%;height:auto;margin-top:.6cqw}
.pen-arrow{position:absolute;right:6%;bottom:16%;width:10%;height:auto;transition:transform .18s}
.heart{position:absolute;right:7.5%;top:13%;width:5.6%;height:auto;transform:rotate(9deg)}
.packet-main:hover .face,.packet-main:focus-visible .face{transform:translateY(-.8cqw) rotate(-.4deg)}
.packet-main:hover .pen-arrow,.packet-main:focus-visible .pen-arrow{transform:translateX(1cqw)}
.packet-main:hover .heart path,.packet-main:focus-visible .heart path{fill:#ec2d7a33}
/* The other three destinations are separate pieces of stationery tucked under the top sheet and fanned to the right:
   a lined index card, a sheet of graph paper and a kraft folder. Each shows its own edges, angle and shadow. */
.paper{position:absolute;display:flex;align-items:center;justify-content:flex-start;padding:0 2cqw 0 var(--pl);color:var(--navy);font-weight:800;
  font-size:2.6cqw;white-space:nowrap;border-radius:.5cqw;transition:transform .18s;
  box-shadow:.15cqw .2cqw .25cqw #2a12068c,.7cqw 1cqw 1.4cqw #2a120659}
.paper span::after{content:' ›';color:#14294b99}
.paper:hover,.paper:focus-visible{text-decoration:none}
.card-reading{--pl:18.5cqw;left:50%;top:1%;width:52%;height:33%;z-index:1;transform:rotate(3.5deg);
  background:linear-gradient(#5aaeb0 0 6%,transparent 6%),repeating-linear-gradient(transparent 0 calc(24% - 1px),#b9cde0 calc(24% - 1px) 24%) 0 6%/100% 100% no-repeat,linear-gradient(100deg,#fffdf8,#f4efe4)}
.graph-monitoring{--pl:14.5cqw;left:54%;top:31%;width:52%;height:36%;z-index:0;transform:rotate(-2.6deg);
  background:repeating-linear-gradient(90deg,transparent 0 calc(2.2cqw - 1px),#b8a9df66 calc(2.2cqw - 1px) 2.2cqw),repeating-linear-gradient(transparent 0 calc(2.2cqw - 1px),#b8a9df66 calc(2.2cqw - 1px) 2.2cqw),linear-gradient(100deg,#fbf9ff,#efeaf8)}
.folder-library{--pl:20.5cqw;left:48%;top:64%;width:42%;height:37%;z-index:-1;transform:rotate(1.8deg);border-radius:.4cqw .6cqw .6cqw .6cqw;
  background:linear-gradient(100deg,#ead39d,#dcc07f)}
.folder-library::before{content:'';position:absolute;right:9%;bottom:100%;width:30%;height:16%;background:#e2c98e;border-radius:.6cqw .6cqw 0 0}
.card-reading:hover,.card-reading:focus-visible{transform:rotate(3.5deg) translate(1.2cqw,-.4cqw)}
.graph-monitoring:hover,.graph-monitoring:focus-visible{transform:rotate(-2.6deg) translateX(1.4cqw)}
.folder-library:hover,.folder-library:focus-visible{transform:rotate(1.8deg) translate(1.2cqw,.4cqw)}
.clip{position:absolute;left:15%;top:-9%;width:4.2%;height:auto;z-index:3;transform:rotate(-8deg)}
/* Grounding: a soft contact shadow where the stack meets the wood. */
.desk-contact{position:absolute;left:2%;top:10%;width:94%;height:95%;z-index:-2;border-radius:3cqw;background:#1e0c0373;filter:blur(1.6cqw);transform:translate(1.2cqw,1.6cqw)}
/* On the desk (wide screens): placed on the clear wood between the pencil cup and the laptop, slightly turned. */
.scene-stage .desk-packet{position:absolute;left:19.5%;top:68.5%;width:44%;transform:perspective(80cqw) rotateX(15deg) rotate(-2deg);transform-origin:50% 100%}
.desk-edge{height:12px;background:linear-gradient(#4a2510,#2b1306)}
.desk-packet-flow{display:none}

/* Teacher's Desk, below the desk: the working content continues the paper language (owner, 2026-10-06).
   Same information and links as before; only this page. */
.desk-page{background:#f6f0e4;min-height:100vh}
.desk-edge{box-shadow:0 10px 20px #2b130640}
.desk-page .stats article{position:relative;background:#fffdf8;border:1px solid #e8dcc6;border-radius:4px;box-shadow:0 3px 9px #5a3a1417;border-top:4px solid #5aaeb0}
.desk-page .stats article:nth-child(2){border-top-color:#a493d8}
.desk-page .stats article:nth-child(3){border-top-color:#d9b862}
.desk-page .stats strong{color:var(--navy);font-weight:800}
.desk-page .section-heading h2{position:relative;color:var(--navy);font-weight:800;padding-bottom:6px}
.desk-page .section-heading h2::after{content:'';position:absolute;left:0;bottom:0;width:58px;height:3px;border-radius:3px;background:var(--pink);transform:rotate(-1deg)}
.desk-page .section-heading a,.desk-page .card a{color:var(--navy);font-weight:700}
.desk-page .card,.desk-page .packet-row{background:#fffdf8;border:1px solid #e8dcc6;border-radius:5px;box-shadow:0 3px 9px #5a3a1414}
.desk-page .card:hover,.desk-page .packet-row:hover{box-shadow:0 6px 16px #5a3a1424;text-decoration:none}
.desk-page .badge{background:#f1e8d8;color:#6b5434}
.desk-page .badge.green{background:#e3efe6;color:#2f6a4a}
/* Send Feedback (owner, 2026-10-12): a quiet row under the counts, in the same paper language. */
.desk-help{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.desk-help .button.secondary{background:#fffdf8;color:var(--navy);border:1px solid #cdbfa6;border-radius:999px;font-weight:700;padding:8px 18px}
.desk-help .button.secondary:hover{box-shadow:0 3px 9px #5a3a1424;text-decoration:none}
.privacy-warning{background:#fff4e6;border-left:4px solid var(--pink);padding:10px 14px;border-radius:4px;margin:0 0 16px}
.drive-hint{font-size:14px;color:#5d6574;margin:6px 0 14px}
.inline-form{display:inline-block;margin-left:8px}
.email-tip{margin:-6px 0 12px;font-size:14px;color:#5d6574}

/* One-time phone message. */
.phone-notice{position:fixed;inset:0;background:#14294bcc;display:grid;place-items:center;z-index:20;padding:20px}
.phone-notice[hidden]{display:none}
.phone-notice-card{background:#fffdf8;border-radius:16px;padding:26px;max-width:360px;text-align:center}
.phone-notice-card h2{font-family:'Patrick Hand',cursive;font-weight:400;font-size:32px;margin:0 0 8px;color:var(--navy)}

@media(max-width:1100px){.desk{margin:0 -25px 24px}.desk-scene{aspect-ratio:5/4;max-height:none}.desk-scene .scene-stage{left:calc((100cqw - max(100cqw,150cqh))*.72)}.scene-stage .desk-packet{left:17.5%;top:68%;width:48.5%}}
@media(max-width:900px){.signed-in .sidebar nav hr{display:none}.signed-in .sidebar{border-right:0;border-bottom:5px solid #6e3d1e;box-shadow:none}.signed-in .sidebar .account{flex-direction:row;align-items:center;gap:18px}.signed-in .brand img{width:150px}.site-header{flex-wrap:wrap;gap:12px 20px;padding:12px 18px;position:static}.site-header nav{order:3;width:100%;margin:0;gap:18px;overflow:auto}.site-actions{margin-left:auto}
.entry{grid-template-columns:1fr;min-height:0}.entry-scene{position:relative;top:0;height:300px}.entry-panel{box-shadow:none;padding:28px 22px}
.desk{margin:0 -17px 22px}}
@media(max-width:560px){.scene-stage .desk-packet{display:none}.desk-packet-flow{display:block;width:76%;margin:22px 17px 10px;aspect-ratio:2.4/1}.desk-packet-flow .paper{font-size:3cqw}.site-actions .button{padding:8px 14px;font-size:14px}.site-brand img{height:42px}.field-pair{grid-template-columns:1fr}.entry-scene{height:210px}.desk-scene{aspect-ratio:4/3}}
/* Phones (beta tester, 2026-10-13: the small tabs were hard to find): the same stationery, stacked under the top sheet
   so Targeted Reading, Progress Monitoring and My Library each read as a large, bold, tappable piece of paper. */
@media(max-width:560px){
  .desk-packet-flow{width:auto;margin:22px 16px 10px;aspect-ratio:auto;display:flex;flex-direction:column;gap:14px}
  .desk-packet-flow .desk-contact{display:none}
  .desk-packet-flow .packet-main{position:relative;width:100%;height:auto;aspect-ratio:2.3/1}
  .desk-packet-flow .paper{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:54px;padding:14px 20px;z-index:auto;
    font-size:18px;white-space:normal}
  .desk-packet-flow .paper span::after{color:var(--navy)}
  .desk-packet-flow .card-reading,.desk-packet-flow .card-reading:hover,.desk-packet-flow .card-reading:focus-visible{transform:rotate(.7deg)}
  .desk-packet-flow .graph-monitoring,.desk-packet-flow .graph-monitoring:hover,.desk-packet-flow .graph-monitoring:focus-visible{transform:rotate(-.6deg)}
  .desk-packet-flow .folder-library{margin-top:6px}
  .desk-packet-flow .folder-library,.desk-packet-flow .folder-library:hover,.desk-packet-flow .folder-library:focus-visible{transform:rotate(.4deg)}
}

/* Students (owner direction 2026-10-07: visual integration only; same information, links, forms and behavior).
   Continues the lower Teacher's Desk: warm paper, navy type, the pink pen swoosh once under the title. The two lists
   are divider tabs on the search sheet; each grade is one roster sheet (accent edge like the desk stats) with one
   scannable row per student. Handwriting is used only for the grade labels. */
.students-page .page-heading{margin-bottom:22px}
.students-page .tabs{display:flex;align-items:flex-end;gap:6px;margin:0;padding-left:12px}
.students-page .tabs a{position:relative;top:1px;padding:9px 18px 8px;border:1px solid #e1d4bc;border-bottom:0;border-radius:9px 9px 0 0;background:#ece3d2;color:#4f5a6c;font-weight:700;font-size:15px}
.students-page .tabs a:hover{color:var(--navy);text-decoration:none}
.students-page .tabs a.current{z-index:1;background:#fffdf8;color:var(--navy);box-shadow:inset 0 3px 0 #5aaeb0}
.students-page .tabs a.export{top:0;margin-left:auto;padding:9px 2px;border:0;background:none;color:var(--navy);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#14294b55}
.roster-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:34px;padding:18px 22px;background:#fffdf8;border:1px solid #e1d4bc;border-radius:0 8px 8px 8px;box-shadow:0 3px 9px #5a3a1414}
.roster-search label{font-weight:700;color:var(--navy)}
.students-page #student-search{margin:0;width:min(100%,380px);border-color:#d8ccb6;background:#fff}
.roster-search .secondary{color:var(--navy);border-color:#cdbfa6}
.roster-search a{color:var(--navy);font-weight:600}
.students-page .roster-section{margin:0 0 30px}
.students-page .roster-section summary{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;list-style:none}
.students-page .roster-section summary::-webkit-details-marker{display:none}
.students-page .roster-section summary::before{content:'';align-self:center;width:8px;height:8px;margin:0 6px 4px 4px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg);transition:transform .15s}
.students-page .roster-section:not([open]) summary::before{margin-bottom:0;transform:rotate(-45deg)}
.students-page .roster-section summary h2{margin:0;font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:32px;line-height:1;color:var(--navy)}
.students-page .roster-section summary .muted{font-size:15px}
/* Each grade keeps its own accent (tone = the grade's place in the grade list), so a search never recolors it. */
.roster-section{--accent:#5aaeb0;--accent-soft:#5aaeb02e}
.roster-section.tone-3{--accent:#a493d8;--accent-soft:#a493d833}
.roster-section.tone-0{--accent:#d9b862;--accent-soft:#d9b86240}
.roster-section.tone-1{--accent:#e0687f;--accent-soft:#e0687f29}
.roster-sheet{padding:4px 0;background:#fffdf8;border:1px solid #e8dcc6;border-top:4px solid var(--accent);border-radius:5px;box-shadow:0 3px 9px #5a3a1414}
.roster-row{display:grid;grid-template-columns:42px minmax(0,1fr) 100px auto;align-items:center;gap:18px;padding:13px 24px;border-top:1px solid #efe5d3}
.roster-row:first-child{border-top:0}
.roster-row:hover{background:#fbf5ea}
.roster-row .avatar{width:40px;height:40px;background:var(--accent-soft);color:var(--navy);font-weight:800}
.roster-row h3{margin:0;font-size:17px;line-height:1.3;color:var(--navy);font-weight:800}
.roster-row .who p{margin:2px 0 0;font-size:14px}
.roster-row .goals{margin:0;font-size:14px;font-weight:600;color:#3d4757}
.roster-row .actions{margin:0;gap:22px;justify-content:flex-end;flex-wrap:nowrap;font-size:14px}
.roster-row .actions a{color:var(--navy);font-weight:600}
.roster-row .actions a.open{font-weight:800}
.students-page .card.empty{background:#fffdf8;border:1px solid #e8dcc6;border-radius:5px;box-shadow:0 3px 9px #5a3a1414}
.students-page .card.empty h2{color:var(--navy);margin-top:0}
@media(max-width:700px){.students-page .tabs{padding-left:6px;flex-wrap:wrap}.students-page .tabs a{padding:8px 13px 7px;font-size:14px}.students-page .tabs a.export{flex-basis:100%;order:-1;text-align:right;padding:0 0 8px}
  .roster-row{grid-template-columns:40px minmax(0,1fr);gap:4px 14px;padding:13px 16px}.roster-row .avatar{grid-row:span 3;align-self:start}.roster-row .actions{justify-content:flex-start;flex-wrap:wrap;margin-top:6px}}

/* Signed-in workspace baseline (owner approved 2026-10-07 on Students; owner: use it on every landing page). The page is
   the Teacher's Desk wood (scenes/desk-top.webp = the same desk from the navy art, seen from above); the navy sidebar
   stays; every working part sits on clean warm paper. Only the page title (and short section titles) read on the wood,
   with a little shade behind them, like the desk greeting on the wall. Never put working text or data directly on the
   wood; keep the paper plain. Pages opt in with main class "on-desk". */
.on-desk{--paper:#fbf2e1;--paper-edge:#e6d8bf;--paper-shadow:.15vw .25vw .4vw #2a12068c,.6vw .9vw 1.4vw #2a120659;
  background:linear-gradient(#1a0a0270,#1a0a0200) top/100% 300px no-repeat scroll,#7a4521 url('scenes/desk-top.webp') center/cover fixed;
  box-shadow:inset 0 14px 18px -12px #1a0a0299;min-height:100vh;max-width:none}
.on-desk>*{max-width:1180px}
.on-desk .page-heading .eyebrow{color:#fff3e2;text-shadow:0 1px 3px #2a1206,0 0 8px #2a1206}
.on-desk .page-heading h1{color:#fff;font-weight:800;letter-spacing:-.5px;text-shadow:0 2px 12px #2a1206,0 0 3px #2a1206}
.on-desk .page-heading h1::after{content:'';display:block;width:150px;height:14px;margin-top:4px;filter:drop-shadow(0 1px 3px #2a120699);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18'%3E%3Cpath d='M3 13C48 5 104 3 197 9' fill='none' stroke='%23ec2d7a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left center/150px auto no-repeat}
.on-desk .page-heading p:not(.eyebrow){color:#fff7ea;font-weight:600;text-shadow:0 1px 3px #2a1206,0 0 10px #2a1206;max-width:640px}
.on-desk>h2{color:#fff;font-weight:800;text-shadow:0 2px 10px #2a1206,0 0 3px #2a1206;margin:34px 0 14px}
/* Paper: every box, list row, filter, table and loose sentence. */
.on-desk :is(.card,.form-card,.packet-row,.filter,.table-wrap,.notice),.on-desk>p:not(:empty),.on-desk :is(.goal-list,.cards,.packet-list)>p{background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;box-shadow:var(--paper-shadow)}
.on-desk .notice{background:#f3f1e4}.on-desk .notice.error{background:#fff0e8}
.on-desk>p:not(:empty),.on-desk :is(.goal-list,.cards,.packet-list)>p{padding:14px 20px;margin:0 0 18px}
.on-desk .filter{padding:16px 20px}
.on-desk .packet-row:hover{box-shadow:0 6px 16px #2a12067a;text-decoration:none}
.on-desk :is(.card,.form-card) :is(h2,h3){color:var(--navy)}
.on-desk :is(.card,.form-card,.packet-row,.filter,.table-wrap) a:not(.button),.on-desk .packet-row strong{color:var(--navy);font-weight:700}
.on-desk .badge{background:#f1e8d8;color:#6b5434}.on-desk .badge.green{background:#e3efe6;color:#2f6a4a}
.on-desk .primary{background:var(--navy);color:#fff;border-radius:999px;padding-left:24px;padding-right:24px}
.on-desk .primary:hover{background:var(--navy-2)}
.on-desk .secondary{color:var(--navy);border-color:#cdbfa6;background:#fff}
.on-desk .page-heading .button:not(.primary):not(.danger){background:var(--paper);color:var(--navy);border:1px solid var(--paper-edge);border-radius:999px;box-shadow:0 2px 6px #2a120666}
.on-desk .roster li{background:#f8f2e6;border-color:#ecdfc8}
/* Active / Archived: paper tabs; the current list is marked. */
.on-desk:not(.students-page) .tabs{gap:8px}
.on-desk:not(.students-page) .tabs a{padding:8px 18px;border:1px solid var(--paper-edge);border-radius:999px;background:#efe6d4;color:#3f4757;font-weight:700;font-size:15px}
.on-desk:not(.students-page) .tabs a:hover{color:var(--navy);text-decoration:none}
.on-desk:not(.students-page) .tabs a.current{background:var(--paper);color:var(--navy);box-shadow:inset 0 -3px 0 #5aaeb0}

/* Students on the desk: tabs attach to the search sheet; each grade is one sheet with its label on the sheet's header. */
.on-desk .tabs a.export{color:#fff7ea;text-decoration-color:#fff7ea99;text-shadow:0 1px 4px #2a1206}
.on-desk.students-page .tabs a:not(.current):not(.export){background:#efe6d4;color:#3f4757}
.on-desk .roster-search,.on-desk.students-page .tabs a.current,.on-desk .card.empty{background:var(--paper)}
.on-desk .roster-search{box-shadow:var(--paper-shadow);border-color:var(--paper-edge)}
.on-desk .roster-row:hover{background:#00000008}
.on-desk .roster-section{background:var(--paper);border-top:5px solid var(--accent);border-radius:5px;box-shadow:var(--paper-shadow)}
.on-desk .roster-section summary{margin:0;padding:14px 22px 10px;border-bottom:1px solid #efe5d3}
.on-desk .roster-section:not([open]) summary{border-bottom:0}
.on-desk .roster-sheet{border:0;box-shadow:none;border-radius:0 0 5px 5px;background:none}

/* Create a packet / Full Week: numbered steps in two columns so the whole form fits one laptop screen.
   Step titles are handwritten (Patrick Hand) like a teacher's note; everything else stays Nunito. */
.on-desk .create-steps{max-width:1180px;padding:22px 30px 20px;counter-reset:step}
.create-steps .step-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 44px}
.create-steps .step{margin:0 0 16px}
.create-steps .step-title,.create-steps .print-style legend{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0;font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:27px;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--navy)}
.create-steps .step-title::before,.create-steps .print-style legend::before{counter-increment:step;content:counter(step);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#d9447a;color:#fff;font:800 16px/1 'Nunito',sans-serif;box-shadow:0 1px 2px #7a2a4a66}
.create-steps form>p,.create-steps .step p{margin:0 0 10px}
.create-steps label{font-size:14px;margin-bottom:4px}
.create-steps .step-groups #id_groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:8px;margin:0}
.create-steps .step-groups #id_groups label{margin:0;padding:9px 12px;border:1px solid #ddd2bd;border-radius:8px;background:#fff;font-weight:600;font-size:15px;color:var(--navy);cursor:pointer}
.create-steps .step-groups #id_groups label:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#f7f9fd}
.create-steps .step-groups #id_groups input{accent-color:var(--navy);width:auto}
.create-steps .step-days input{max-width:110px}
.create-steps details{margin:2px 0 0}
.create-steps summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:15px}
.create-steps details[open]>summary{margin-bottom:10px}
.create-steps .print-style{border:0;border-radius:0;padding:0;margin:0 0 6px;background:none;max-width:none}
.create-steps .print-style.needs-choice{padding:8px 10px;border-radius:10px}
.create-steps .print-option{padding:8px 12px}
.create-steps .more-options{border-top:1px solid #e8dcc5;margin-top:8px;padding-top:12px}
.create-steps .more-options textarea{min-height:0}
.create-steps .goal-group{border:0;margin:8px 0 0;padding:0}.create-steps .goal-group legend{font-weight:700;font-size:14px;padding:0}.create-steps .goal-group .check-row{display:block;font-size:13px;margin:4px 0}
.create-steps .create-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.create-steps .create-actions p{margin:0}
@media(max-width:900px){.create-steps .step-columns{grid-template-columns:1fr}.on-desk .create-steps{padding:18px 18px 16px}}
/* Targeted Reading / SLP Space: students as tiles under each grade. */
.create-steps .step-students #id_students{display:block;margin:0}
.create-steps .step-students #id_students>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:8px;margin:0 0 12px}
.create-steps .step-students #id_students>div>label{grid-column:1/-1;margin:0;font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:21px;line-height:1;color:#5b4a35}
.create-steps .step-students #id_students>div>div label{margin:0;padding:8px 12px;border:1px solid #ddd2bd;border-radius:8px;background:#fff;font-weight:600;font-size:15px;color:var(--navy);cursor:pointer}
.create-steps .step-students #id_students>div>div label:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#f7f9fd}
.create-steps .step-students #id_students input{accent-color:var(--navy);width:auto}
.create-steps .check-row label{display:flex;align-items:center;gap:9px;font-weight:600;cursor:pointer}
.create-steps .check-row input{width:auto;margin:0;accent-color:var(--navy)}
.create-steps .choice-search{position:relative;margin:0 0 12px}
.create-steps .choice-search label{display:block}
.create-steps .choice-search input{width:100%}
.choice-search-results{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;max-height:min(280px,50vh);overflow-y:auto;background:#fff;border:1px solid #ddd2bd;border-radius:8px;box-shadow:0 6px 18px #1c2b4a26}
.choice-search-results li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer}
.choice-search-results li:hover,.choice-search-results li[aria-selected="true"]{background:#f7f9fd;box-shadow:inset 3px 0 0 var(--navy)}
.choice-search-results .choice-kind{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a7266}
.choice-search-results .choice-none{font-weight:400;color:#5f5a52;cursor:default;box-shadow:none;background:none}
/* Groups: short cards. Members as chips, the long group instructions behind a click, a subject stripe on top. */
.groups-page .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.groups-page .card.group{padding:16px 20px 14px;border-top:5px solid var(--subject,#c9b994)}
.groups-page .subject-reading{--subject:#5aaeb0}.groups-page .subject-math{--subject:#e0894a}.groups-page .subject-communication{--subject:#9b7cc0}
.groups-page .group .section-heading{margin:0 0 10px;align-items:baseline}
.groups-page .group h2{font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:28px;line-height:1.05}
.groups-page .group-count{flex:none;font-size:13px;font-weight:700;color:#7a6a52}
.groups-page .roster{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.groups-page .roster li{margin:0;padding:4px 10px 4px 4px;gap:7px;border-radius:999px;font-size:14px;cursor:grab}
.groups-page .roster li.muted{padding:4px 10px;cursor:default}
.groups-page .roster .avatar.small{width:24px;height:24px;font-size:11px}
.groups-page .drag-handle{display:none}
.groups-page .group-notes{margin:0 0 8px;font-size:13px}
.groups-page .group-notes summary{cursor:pointer;font-weight:700;color:var(--navy)}
.groups-page .group-notes p{margin:8px 0 0;max-height:220px;overflow:auto;color:#55606a;line-height:1.45}
.groups-page .group-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ecdfc8;padding-top:9px;font-size:14px}
.groups-page .group-actions form{margin:0}
.groups-page .more-members{margin:-4px 0 10px}
.groups-page .more-members summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--navy)}
.groups-page .more-members[open] summary{margin-bottom:6px}
/* My Library: compact rows (two columns on wide screens), each with its book's art and a status stamp. */
.library-page .library-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:10px}
.library-page .library-row{display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;box-shadow:var(--paper-shadow);color:inherit;text-decoration:none}
.library-page .library-row:hover{box-shadow:0 6px 16px #2a12067a;text-decoration:none}
.library-page .library-thumb{flex:none;width:48px;height:62px;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px #2a120655}
.library-page span.library-thumb{display:grid;place-items:center;background:#e8eef0;color:var(--navy);font-family:'Patrick Hand','Nunito',cursive;font-size:19px}
.library-page .workspace-monitoring{background:#e6efe6}.library-page .workspace-reading{background:#e3f0f0}.library-page .workspace-slp{background:#ede6f4}
.library-page .library-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.library-page .library-text strong{color:var(--navy);font-size:15px;line-height:1.3}
.library-page .library-text span{font-size:13px;color:#6b6152}
:is(.library-page,.books-page,.weeks-page) .stamp{flex:none;padding:3px 10px;border:1.5px solid currentColor;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;transform:rotate(-3deg);background:#fffdf7;white-space:nowrap}
:is(.library-page,.books-page,.weeks-page) :is(.stamp-accepted,.stamp-verified){color:#2f7a4f}:is(.library-page,.books-page,.weeks-page) :is(.stamp-draft,.stamp-unchecked){color:#b4641a}:is(.library-page,.books-page,.weeks-page) :is(.stamp-generating,.stamp-queued,.stamp-running){color:#2f5d9a}
:is(.library-page,.books-page,.weeks-page) .stamp-failed{color:#b3322f}:is(.library-page,.books-page,.weeks-page) :is(.stamp-archived,.stamp-cancelled){color:#7a7266}
@media(max-width:560px){.library-page .library-list{grid-template-columns:1fr}}

/* Progress Monitoring: compact measure cards; students by grade, goals two lines long, each probe form behind a click. */
.pm-page>h2{margin:26px 0 12px}
.pm-page .pm-intro{max-width:760px;font-size:14px}
.pm-page .pm-measures{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:10px}
.pm-page .pm-measure{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;box-shadow:var(--paper-shadow);color:inherit;text-decoration:none}
.pm-page .pm-measure:hover{box-shadow:0 6px 16px #2a12067a;text-decoration:none}
.pm-page .pm-measure-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-page .pm-measure-text strong{color:var(--navy)}
.pm-page .pm-measure-text small{color:#6b6152}
.pm-page .pm-goal-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.4;color:#3f4757;margin:0}
.pm-page .pm-open{flex:none;font-weight:700;color:var(--navy)}
.pm-page .pm-grade{margin:0 0 18px}
.pm-page .pm-grade-label{margin:0 0 8px;font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:28px;color:#fff;text-shadow:0 2px 8px #2a1206,0 0 3px #2a1206}
.pm-page .pm-students{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px;align-items:start}
.pm-page .pm-student{background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;box-shadow:var(--paper-shadow)}
.pm-page .pm-student>summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none}
.pm-page .pm-student>summary::-webkit-details-marker{display:none}
.pm-page .pm-student>summary::after{content:'';margin-left:8px;width:7px;height:7px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg) translateY(-3px)}
.pm-page .pm-student[open]>summary::after{transform:rotate(-135deg)}
.pm-page .pm-student strong{color:var(--navy);font-size:16px}
.pm-page .pm-count{margin-left:auto;font-size:13px;font-weight:700;color:#7a6a52}
.pm-page .pm-goal{margin:0 12px 12px;padding:10px 12px;border:1px solid #ecdfc8;border-radius:6px;background:#fffdf8}
.pm-page .pm-setup{margin-top:8px}
.pm-page .pm-setup>summary,.pm-page .pm-observe{font-size:14px;font-weight:700;color:var(--navy);cursor:pointer}
.pm-page .pm-observe{display:inline-block;margin-top:6px;font-weight:600;font-size:13px}
.pm-page .pm-observe-help{margin:2px 0 0;font-size:12px;line-height:1.35}
.pm-page .pm-full-goal{font-size:13px;color:#55606a;line-height:1.45}
.pm-page .pm-setup form p{margin:8px 0;font-size:14px}
.pm-page .pm-setup .print-style{max-width:none}
@media(max-width:560px){.pm-page .pm-measures,.pm-page .pm-students{grid-template-columns:1fr}}
.pm-page .pm-goal:has(.pm-setup[open])>.pm-goal-text{display:none}
.week-steps{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Book Library and Full Week list: the same compact paper rows as My Library. */
:is(.books-page .book-list,.weeks-page .week-list){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:10px;margin-bottom:8px}
:is(.books-page .book-row,.weeks-page .week-row){display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;box-shadow:var(--paper-shadow);color:inherit;text-decoration:none}
:is(.books-page .book-row,.weeks-page .week-row):hover{box-shadow:0 6px 16px #2a12067a;text-decoration:none}
.books-page .book-thumb{flex:none;width:48px;height:62px;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px #2a120655}
.books-page span.book-thumb{display:grid;place-items:center;background:#e8eef0;color:var(--navy);font-family:'Patrick Hand','Nunito',cursive;font-size:26px}
:is(.book-text,.week-text){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:is(.book-text,.week-text) strong{color:var(--navy);font-size:15px;line-height:1.3}
:is(.book-text,.week-text) span{font-size:13px;color:#6b6152}
.books-page .book-setting{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.weeks-page .week-leaf{flex:none;width:54px;padding:0 0 4px;border-radius:5px;background:#fff;box-shadow:0 1px 3px #2a120655;text-align:center;font-family:'Patrick Hand','Nunito',cursive;font-size:28px;line-height:1.05;color:var(--navy);overflow:hidden}
.weeks-page .week-leaf small{display:block;margin-bottom:3px;padding:2px 0;background:#5aaeb0;color:#fff;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.weeks-page .week-stamps{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
@media(max-width:560px){:is(.books-page .book-list,.weeks-page .week-list){grid-template-columns:1fr}}
/* My Account: four short paper cards, two across on wide screens. */
.account-page .account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px;align-items:start}
.account-page .account-grid>section{margin:0;padding:18px 22px}
.account-page h2{margin:0 0 10px;font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:28px;line-height:1.05}
.account-page .account-name form{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;align-items:end}
.account-page .account-name form p{margin:0}.account-page .account-name form button{grid-column:1/-1;justify-self:start;margin-top:8px}
.account-page .account-big{margin:0 0 10px;font-family:'Patrick Hand','Nunito',cursive;font-size:26px;line-height:1.1;color:var(--navy)}
.account-page .actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.account-page .account-more summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--navy)}
.account-page .account-more p{margin:6px 0 0;font-size:13px}
.account-page .account-remove{border-top:4px solid #c9534f}
@media(max-width:560px){.account-page .account-grid{grid-template-columns:1fr}.account-page .account-name form{grid-template-columns:1fr}}
/* Homepage pricing and contact cards, and the policy footer. */
.index-card .price-plans{display:flex;gap:14px;margin:0 0 14px}
.index-card .price-plan{flex:1;margin:0;padding:10px 12px;border:2px solid #14294b22;border-radius:8px;background:#fff;text-align:center;display:flex;flex-direction:column;line-height:1.2}
.index-card .price-plan.best{border-color:var(--pink)}
.index-card .price{font-family:'Patrick Hand','Nunito',cursive;font-size:38px;color:var(--navy);line-height:1.05}
.index-card .price-plan small{margin-top:4px;color:var(--pink-dark);font-weight:800}
.index-card .price-note,.index-card #contact p{line-height:32px;margin:0}
.index-card .contact-line{font-size:20px;font-weight:800}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;padding:22px 6vw;background:var(--navy);color:#dfe6f2;font-size:15px}
.site-footer p{margin:0}.site-footer a{color:#fff;font-weight:700}.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}.site-footer .copyright{opacity:.7}
/* Billing: the allowance note under the desk numbers, and the plan/card pages on cream paper (2026-10-09). */
.allowance-note{margin:-14px 0 30px;padding:12px 20px;background:var(--paper,#fffdf8);border:1px solid #e8dcc6;border-left:5px solid #ec2d7a;border-radius:5px;box-shadow:0 3px 9px #5a3a1414;font-size:14px}
.allowance-note p{margin:4px 0;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.allowance-note strong{color:var(--navy);font-size:17px}
.allowance-note .allowance-label{font-family:'Patrick Hand','Nunito',cursive;font-size:22px;color:var(--navy);margin-right:4px}
.allowance-note>a,.allowance-note p a{color:var(--navy);font-weight:700}
.allowance-note p.allowance-tip,.allowance-tip{display:block;color:#5a3a14}.allowance-warn{color:#8c3e3e;font-weight:700}
.account-page .allowance-note{margin:6px 0 12px;box-shadow:none}
.billing-sheet{max-width:720px;padding:22px 28px}
.billing-sheet h2{margin:0 0 8px;font-family:'Patrick Hand','Nunito',cursive;font-weight:400;font-size:28px;color:var(--navy)}
.billing-sheet p{font-size:15px;color:#3b3328}
.billing-page .allowance-note{max-width:720px;margin:0 0 18px}
.allowance-list{margin:0 0 6px;padding-left:20px;font-size:16px}.allowance-list strong{color:var(--navy);font-size:19px}
.billing-promise{background:#f3f1e4;border-radius:6px;padding:10px 14px}
.saved-card strong{color:var(--navy)}
.plan-choice{border:0;margin:0 0 6px;padding:0;display:grid;gap:10px}.plan-choice legend{font-weight:700;margin-bottom:8px}
.plan-option{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #e8dcc6;border-radius:6px;background:#fff;cursor:pointer}
.plan-option:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 2px #14294b22}
.plan-option input{margin-top:5px}.plan-option span{display:flex;flex-direction:column;font-size:14px}.plan-option strong{color:var(--navy);font-size:16px}
.billing-sheet .accept label{display:flex;gap:10px;align-items:flex-start;font-size:14px}.billing-sheet .accept input{margin-top:4px}
.billing-sheet .actions form{margin:0}
.legal-page{width:min(100%,760px)}.legal-page h2{font-size:22px;color:var(--navy);margin:24px 0 6px}.legal-page p{font-size:15px}
.legal-document h3{font-size:17px;color:var(--navy);margin:16px 0 4px}.legal-document ul{margin:4px 0 12px;padding-left:22px}.legal-document li{font-size:15px;margin:3px 0}.legal-document .legal-date{color:var(--muted,#5b6475);font-weight:600}.legal-document h2{scroll-margin-top:16px}

/* Owner-only Business Overview and the Teacher's Desk new-signup note */
.desk-help .owner-signups{align-self:center;color:var(--navy);font-weight:700;font-size:14px;background:#fff6d8;border:1px solid #e6cf8a;border-radius:999px;padding:6px 14px}
.owner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;margin-bottom:22px}
.owner-grid .form-card{padding:20px 22px}.owner-grid h2{margin:0 0 12px;color:var(--navy)}.owner-grid h3{margin:18px 0 8px;font-size:15px;color:#3f4757}
.owner-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.owner-figures.owner-revenue{grid-template-columns:repeat(2,1fr)}
.owner-figures p{margin:0;display:flex;flex-direction:column;border-top:3px solid #5aaeb0;padding-top:6px}
.owner-figures strong{font-size:26px;font-weight:800;color:var(--navy);line-height:1.1}.owner-figures span{font-size:13px;color:#5b6475}
.owner-page .hint{font-size:13px;color:#5b6475;margin:10px 0 0}
.owner-trend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:130px;align-items:end;border-bottom:1px solid #d8cbb2}
.owner-trend li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;padding-bottom:20px}
.owner-trend-bar{display:block;width:60%;max-width:34px;height:80px;fill:#5aaeb0}
.owner-trend li:hover .owner-trend-bar{fill:#3f8f91}
.owner-trend-count{font-size:12px;font-weight:700;color:#3f4757;margin-bottom:3px}
.owner-trend-day{position:absolute;bottom:0;font-size:12px;color:#5b6475}
.owner-page .badge.owner-new{background:#fff1c4;color:#7a5a00;font-size:11px;margin-left:4px}
@media (max-width:560px){.owner-figures{grid-template-columns:repeat(2,1fr)}.owner-page .page-heading{flex-wrap:wrap;gap:10px}}
.owner-site-card{padding:20px 22px;margin-bottom:22px}.owner-site-card h2{margin:0 0 12px;color:var(--navy)}.owner-site-card h3{margin:18px 0 8px;font-size:15px;color:#3f4757}
.owner-site-card .owner-figures{grid-template-columns:repeat(3,1fr)}
.owner-site-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px}
.owner-site-lists table{width:100%;border-collapse:collapse;font-size:14px}.owner-site-lists td{padding:5px 0;border-bottom:1px solid #eadfca}.owner-site-lists td+td{text-align:right;font-weight:700;color:var(--navy)}

/* Founder: Sue's handwritten welcome letter (her photograph, shown whole and unaltered) until her video is ready. */
.founder-letter{margin:0;justify-self:center;width:100%;max-width:430px;text-align:center}
.letter-open{display:block;width:100%;padding:0;border:0;border-radius:3px;background:none;cursor:zoom-in;box-shadow:0 16px 28px #3d230f4d,0 3px 7px #3d230f40}
.letter-open img{display:block;width:100%;height:auto;border-radius:3px}
.letter-open:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.letter-hint{display:block;margin-top:16px;font-family:'Patrick Hand','Nunito',cursive;font-size:25px;color:var(--navy)}
.letter-text{margin-top:6px;font-size:14px;color:#5b5446}
.letter-text summary{cursor:pointer;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.letter-text[open]{text-align:left;background:#fffdf8;border:1px solid #e6d8bf;border-radius:6px;padding:4px 20px 8px;margin-top:12px;font-size:16px;color:var(--navy)}
.letter-text[open] summary{margin:10px 0 4px;color:#5b5446;font-size:14px}
.letter-viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#1f150df5}
.letter-viewer[open]{display:flex;flex-direction:column}
.letter-viewer::backdrop{background:#000b}
.letter-tools{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px}
.letter-tools .button{min-width:48px;min-height:44px;font-size:18px}
.letter-tools .button:disabled{opacity:.45;cursor:default}
.letter-scroll{flex:1;min-height:0;overflow:auto;display:flex;padding:0 16px 16px;outline:none}
.letter-scroll img{display:block;margin:auto;max-width:none;width:min(100%,(100dvh - 100px)*.75);height:auto;cursor:zoom-in}
.letter-scroll.zoomed img{cursor:grab}
.owner-browser{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;padding-top:12px;border-top:1px solid #eadfca}.owner-browser .hint{margin:0;flex:1 1 280px}