:root { --chalk:#F8F8F7; --white:#fff; --sage:#7A9E7E; --bordeaux:#B03045; --slate:#4A5585; --inkwell:#2B2B2B; --cream:#FFF5EC; --line:rgba(43,43,43,.08); --shadow:0 14px 34px rgba(43,43,43,.075); --radius:28px; --max:1220px; --product-inch:11px; --label-readability-multiplier:1.22; }
* { box-sizing:border-box; }
html { overflow-x:clip; }
body { margin:0; background:linear-gradient(180deg,#fff 0%,var(--chalk) 58%); color:var(--inkwell); font-family:Figtree,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.possibilities-page { width:min(calc(100% - 48px),var(--max)); margin:auto; }
.hero { display:grid; grid-template-columns:minmax(0,390px) minmax(0,1fr); align-items:end; column-gap:28px; min-height:0; position:relative; padding:42px 2px 60px; }
.hero-copy { position:relative; z-index:2; max-width:390px; }
.brand { display:block; width:185px; height:147px; overflow:hidden; position:relative; margin-bottom:25px; }
.brand img { position:absolute; width:248px; height:auto; top:-25px; left:-31px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:22px; font-size:clamp(3.25rem,6vw,5.5rem); letter-spacing:-.07em; line-height:.94; } h2 { margin-bottom:8px; font-size:clamp(1.3rem,2vw,1.65rem); letter-spacing:-.04em; line-height:1.1; } h3 { margin:0; font-size:.9rem; font-weight:700; }
.hero-lede { max-width:290px; margin-bottom:13px; font-size:1.12rem; font-weight:600; line-height:1.45; }.hero-support { max-width:330px; color:rgba(43,43,43,.75); font-size:.96rem; line-height:1.6; }.hero-before-area { width:170px; margin:34px 0 0 65px; }.hero-transformation-area { position:relative; min-width:0; }.hero-after-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; }
.classroom-slot,.theme-slot,.product-slot,.use-slot,.lion-slot { display:grid; place-items:center; position:relative; overflow:hidden; color:rgba(43,43,43,.48); background:linear-gradient(135deg,#e9e5de,#faf8f4 48%,#dfe7df); border:1px dashed rgba(43,43,43,.2); border-radius:8px; text-align:center; }
.classroom-slot::before,.theme-slot::before,.product-slot::before,.use-slot::before,.lion-slot::before { content:"Replaceable visual"; position:absolute; color:rgba(43,43,43,.22); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-18deg); }.classroom-slot span,.theme-slot span,.product-slot span,.use-slot span,.lion-slot span { z-index:1; padding:8px; font-size:.66rem; font-weight:700; }
.classroom-slot--image { background:var(--white); border:0; }.classroom-slot--image::before { content:none; }.classroom-slot--image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.classroom-slot--before { aspect-ratio:.7; transform:scale(.96); transform-origin:left bottom; }.classroom-slot--finished { aspect-ratio:.62; min-height:0; }.hero-arrow { position:absolute; width:180px; height:130px; left:-192px; top:30%; color:var(--bordeaux); overflow:visible; pointer-events:none; z-index:3; }.hero-arrow__tail,.hero-arrow__head { fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.panel { margin-bottom:18px; padding:26px 30px; background:rgba(255,255,255,.94); border-radius:var(--radius); box-shadow:var(--shadow); }.benefits { display:flex; align-items:center; justify-content:space-between; gap:28px; }.benefits-intro { display:flex; align-items:center; gap:18px; min-width:420px; }.benefits h2 { font-size:1.06rem; }.benefits p { margin:0; font-size:.82rem; line-height:1.45; }.heart-badge { display:grid; place-items:center; flex:0 0 60px; width:60px; height:60px; color:var(--bordeaux); border-radius:50%; box-shadow:0 4px 12px rgba(43,43,43,.12); font-size:2.25rem; }.benefit-list { display:flex; justify-content:space-between; gap:18px; flex:1; }.benefit { display:flex; align-items:center; gap:10px; }.idea-icon { display:block; width:34px; height:34px; object-fit:contain; }.benefit p { white-space:nowrap; font-size:.7rem; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }.section-heading p { margin:0; color:rgba(43,43,43,.68); font-size:.84rem; }.theme-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) .7fr; gap:16px; align-items:start; }.theme-card { text-align:center; }.theme-slot { aspect-ratio:125 / 193; margin-bottom:9px; border-radius:17px; }.theme-slot--image { overflow:visible; background:var(--white); border:0; }.theme-slot--image::before { content:none; }.theme-slot--image img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }.many-more { align-self:center; margin:0; color:var(--slate); font-size:.8rem; line-height:1.7; text-align:center; }.many-more:first-letter { color:var(--sage); font-size:1.6rem; }
.coordinates { padding-right:0; padding-bottom:15px; }
.coordinates-showcase { display:grid; grid-template-columns:230px minmax(0,1fr); gap:65px; align-items:start; }
.coordinates .section-heading { position:relative; z-index:1; width:auto; align-items:flex-start; margin:0; }
.coordinates .section-heading h2 { white-space:nowrap; }
.coordinates-composite-area { min-width:0; }
.coordinates-composite { display:block; width:110.7%; height:auto; margin-left:-10.7%; object-fit:contain; }
.coordinates-composite-labels { display:grid; grid-template-columns:20.5fr 17.5fr 19.5fr 18fr 24.5fr; width:110.7%; margin-top:6px; margin-left:-10.7%; font-size:.9rem; font-weight:700; text-align:center; }
.coordinates-label-nameplates { transform:translateX(24px); }
.coordinates-label-borders { transform:translateX(-25px); }
.product-row { display:none; }
.coordinates-callout-spacer { grid-column:2; justify-self:start; width:295px; height:21px; margin:12px 0 0; }
.product { display:grid; gap:6px; align-items:center; align-content:start; justify-items:center; min-width:0; text-align:center; }
.product h3 { margin-top:1px; }
.coordinates-product-visual { display:grid; align-items:start; justify-items:center; }
.nameplate-stack,.label-stack,.poster-stack,.header-stack,.border-stack { display:grid; gap:8px; align-self:center; justify-self:center; }
.nameplate-stack { width:calc(var(--product-inch) * 9.5); }
.label-stack { width:calc(var(--product-inch) * 3.5 * var(--label-readability-multiplier)); }
.poster-stack { width:calc((var(--product-inch) * 11 * 2) + 10px); grid-template-columns:repeat(2,calc(var(--product-inch) * 11)); column-gap:10px; align-items:start; }
.header-stack { width:calc(var(--product-inch) * 20); }
.border-stack { width:calc(var(--product-inch) * 24); }
.nameplate-stack img { width:100%; height:calc(var(--product-inch) * 3); }
.label-stack img { width:100%; height:calc(var(--product-inch) * 2.5 * var(--label-readability-multiplier)); }
.poster-stack img { width:100%; height:calc(var(--product-inch) * 14); }
.poster-stack img:nth-child(2) { margin-top:28px; }
.header-stack img { width:100%; height:calc(var(--product-inch) * 3); }
.border-stack img { width:100%; height:calc(var(--product-inch) * 2.75); }
.nameplate-stack img,.label-stack img,.poster-stack img,.header-stack img,.border-stack img { display:block; object-fit:contain; object-position:center; }
.product-slot { height:28px; border-radius:3px; }.product-slot span { font-size:.52rem; }.product-slot--poster { height:103px; width:76%; margin:auto; }.product-slot--header { height:21px; }.product-slot--border { height:25px; border-radius:2px; background:repeating-linear-gradient(90deg,#e9e5de 0 12px,#f0bf59 12px 18px,#b03045 18px 24px); }
.use-row { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; }.use-row article { display:grid; justify-items:center; text-align:center; }.use-slot { width:165px; height:110px; margin-bottom:9px; border-radius:10px; }.use-slot--image { background:var(--white); border:0; }.use-slot--image::before { content:none; }.use-slot--image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.use-slot span { font-size:.6rem; }.final-cta { display:grid; grid-template-columns:minmax(0,1fr) auto; position:relative; align-items:center; gap:30px; min-height:128px; margin-top:20px; padding:16px 72px 16px 32px; overflow:visible; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); }.cta-happy-place-lion { position:absolute; z-index:2; left:120px; top:50%; width:250px; transform:translateY(-50%); }.cta-happy-place-lion img { display:block; width:100%; height:auto; object-fit:contain; }.cta-happy-place-content { padding-left:410px; }.final-cta h2 { margin-bottom:8px; }.final-cta p { max-width:440px; margin:0; color:rgba(43,43,43,.76); line-height:1.45; }.create-button { display:inline-flex; min-height:42px; padding:10px 18px; align-items:center; justify-content:center; color:#fff; background:var(--bordeaux); border-radius:999px; box-shadow:0 8px 18px rgba(176,48,69,.18); font-family:Figtree,system-ui,sans-serif; font-size:.95rem; font-weight:700; white-space:nowrap; }.page-footer { display:flex; justify-content:center; gap:16px; padding:18px 24px 28px; }.page-footer a { display:grid; place-items:center; width:56px; height:56px; background:#fff; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.10); }.page-footer img { display:block; width:26px; height:26px; }.page-footer a[aria-label="Pinterest"] img { width:25px; height:25px; }.page-footer a[aria-label="Facebook"] img { width:24px; height:24px; }
@media (min-width:1001px) { .brand { width:189px; height:143px; translate:0 3px; }.coordinates { padding-top:20px; padding-bottom:8px; }.coordinates-composite-area { width:990px; height:264px; translate:-163px 59px; } }
@media (max-width:1000px) { :root { --product-inch:clamp(7px, .75vw, 9px); }.benefits { align-items:flex-start; flex-direction:column; }.benefits-intro { min-width:0; }.benefit-list { width:100%; }.coordinates { padding-right:30px; }.coordinates-showcase { display:block; }.coordinates .section-heading { margin-bottom:20px; }.coordinates-composite-area { display:none; }.product-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding-left:0; }.product { gap:10px; }.coordinates-product-visual { height:auto; }.poster-stack { width:calc((var(--product-inch) * 11 * 2) + 10px); }.final-cta { grid-template-columns:1fr; justify-items:center; min-height:0; padding:20px 32px; text-align:center; }.cta-happy-place-lion { position:static; width:min(250px,70%); transform:none; }.cta-happy-place-content { padding-left:0; }.final-cta p { margin-inline:auto; } }
@media (min-width:721px) and (max-width:1000px) { :root { --label-readability-multiplier:1.9; }.benefits { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:24px; }.benefit-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }.benefit p { white-space:normal; }.product-row { display:flex; flex-wrap:wrap; justify-content:center; gap:28px; }.product { flex:0 1 calc((100% - 56px) / 3); }.header-stack,.border-stack { width:auto; }.header-stack img { width:auto; height:calc(var(--product-inch) * 4.5); }.border-stack img { width:auto; height:calc(var(--product-inch) * 4.25); } }
@media (max-width:720px) { :root { --product-inch:5px; }.possibilities-page { width:min(calc(100% - 32px),var(--max)); }.hero { display:flex; min-height:0; align-items:flex-start; padding:28px 0 38px; flex-direction:column; }.brand { margin-bottom:15px; }.hero-before-area { display:none; }.hero-transformation-area { width:100%; margin-top:34px; }.hero-after-group { width:100%; }.classroom-slot--before { display:none; }.classroom-slot--finished { min-height:200px; }.hero-arrow { display:none; }.panel { padding:22px 18px; border-radius:22px; }.benefit-list { display:grid; grid-template-columns:1fr 1fr; }.benefit p { white-space:normal; }.theme-row { grid-template-columns:repeat(3,1fr); gap:21px 12px; }.many-more { grid-column:2; }.section-heading { align-items:flex-start; flex-direction:column; gap:4px; }.product-row { grid-template-columns:repeat(2,1fr); }.product--posters { grid-column:span 2; justify-self:center; }.use-row { grid-template-columns:repeat(2,1fr); }.use-slot { width:100%; height:auto; aspect-ratio:3 / 2; }.use-row article:last-child { grid-column:span 2; width:50%; justify-self:center; }.final-cta { grid-template-columns:1fr; gap:16px; padding:20px; text-align:center; }.lion-slot { height:100px; }.create-button { justify-self:center; }.page-footer { padding-bottom:20px; } }