:root{
  color-scheme:dark;
  --iphone-outline:polygon(19.444% 0.000%,80.556% 0.000%,80.556% 0.815%,84.722% 1.087%,88.194% 1.630%,90.278% 2.174%,91.944% 2.717%,93.056% 3.261%,94.583% 4.076%,95.556% 4.891%,96.667% 5.978%,97.361% 7.065%,97.917% 8.696%,98.056% 10.870%,100.000% 13.587%,100.000% 86.413%,98.056% 88.315%,98.056% 90.353%,97.778% 91.712%,97.222% 93.071%,96.528% 94.090%,95.556% 95.109%,94.167% 96.128%,92.361% 97.011%,90.000% 97.826%,87.778% 98.370%,85.278% 98.777%,75.000% 100.000%,25.000% 100.000%,14.722% 98.777%,12.222% 98.370%,10.000% 97.826%,7.639% 97.011%,5.833% 96.128%,4.444% 95.109%,3.472% 94.090%,2.778% 93.071%,2.222% 91.712%,1.944% 90.353%,1.944% 88.315%,0.000% 86.413%,0.000% 13.587%,1.944% 10.870%,2.083% 8.696%,2.639% 7.065%,3.333% 5.978%,4.444% 4.891%,5.417% 4.076%,6.944% 3.261%,8.056% 2.717%,9.722% 2.174%,11.806% 1.630%,15.278% 1.087%,19.444% 0.815%);
  --paper:#08090b;--card:#131519;--raised:#1c1f25;--ink:#f5f6f8;--muted:#a9aeb9;
  --line:#30343c;--blue:#c4d8fa;--focus:#c4d8fa;--accent:#b9c9ed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;
  background:var(--paper);color:var(--ink);font-synthesis:none;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html{scroll-padding-top:112px;scrollbar-gutter:stable}
body{margin:0}
::selection{color:#08090b;background:#c4d8fa;}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{letter-spacing:-.045em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(3.2rem,7.5vw,6.4rem);font-weight:650;letter-spacing:-.062em}
h1 span{display:block;color:var(--muted)}
h2{font-size:clamp(2rem,4.4vw,3.65rem);font-weight:600}
h3{font-size:1.4rem;font-weight:600;line-height:1.17}
p{color:var(--muted)}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:5px}
main,header,footer{max-width:1180px;margin:auto;padding-inline:28px}
section{padding-block:88px}
.eyebrow{display:block;font-size:.65rem;font-weight:650;letter-spacing:.12em;line-height:1.5;color:var(--muted);text-transform:uppercase}
.section-heading{margin-bottom:34px}
.section-heading h2{margin-top:14px}
.section-heading p{max-width:53ch;margin-top:20px;font-size:1.04rem;line-height:1.65}
.note,.fine-print{font-size:.76rem;line-height:1.65}
.muted{color:var(--muted)}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;border-radius:999px;padding:13px 24px;background:var(--ink);color:var(--paper);font-size:.84rem;font-weight:600;border:1px solid transparent;transition:background .18s,transform .18s,border-color .18s}
.btn:hover{background:#dce5f5;transform:translateY(-2px)}
.btn.quiet{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.quiet:hover{background:var(--raised);border-color:#69717d}
.text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:.82rem;font-weight:550}
.plus{display:inline-flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#2a2e36;color:var(--ink);font-size:1.25rem;font-weight:400;line-height:1;transition:background .18s,transform .18s}
a:hover .plus{background:#485264;transform:rotate(90deg)}
.skip{position:fixed;top:10px;left:20px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:12px;transform:translateY(-160%)}
.skip:focus{transform:none}
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid #ffffff12;background:#08090bf2;backdrop-filter:blur(24px)}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.brand{display:flex;align-items:center;gap:9px;min-height:44px;flex:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font-size:1.18rem;line-height:1.1;font-weight:650;letter-spacing:-.04em}
.brand small{display:block;font-size:.49rem;color:var(--muted);font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-top:3px;white-space:nowrap}
header nav{display:flex;align-items:center;gap:26px}
header nav a,.header-tools a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;white-space:nowrap;color:var(--muted)}
header nav a:hover,.language:hover{color:var(--ink)}
.header-tools{display:flex;align-items:center;gap:18px}
.header-tools .language{min-width:44px}
.header-tools .cta{background:var(--ink);color:var(--paper);border-radius:999px;padding:8px 19px;font-weight:600}
.header-tools .cta:hover{background:#dce5f5}
.hero{text-align:center;padding-top:56px;isolation:isolate;position:relative}
.hero::before{content:"";position:absolute;inset:150px -28px 0;background:radial-gradient(ellipse at 50% 70%,#27324a65,transparent 64%);z-index:-1;pointer-events:none}
.pilot-note{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:999px;color:#c7cbd3;font-size:.68rem;min-height:38px}
.status-dot{width:6px;height:6px;background:#a7c8b9;border-radius:50%}
.hero h1{margin:25px auto 20px;max-width:15ch}
.hero .lede{max-width:43ch;margin:auto;font-size:clamp(1rem,1.6vw,1.16rem)}
.hero .actions{margin-top:28px}
.hero-note{font-size:.7rem;margin-top:16px}
.hero-stage{max-width:850px;height:clamp(240px,40vw,500px);position:relative;margin:44px auto 0;display:flex;align-items:center;justify-content:center}
/* One composite preserves the real hardware surround. The app fills the display
   below the camera strip, down to the physical bottom chin. */
.hero-mac{position:relative;flex-shrink:0;width:84%;aspect-ratio:1500/987;margin-right:10%;filter:drop-shadow(0 28px 36px #0008)}
.mac-hardware{width:100%;height:auto}
.hero-phone{clip-path:var(--iphone-outline);position:absolute;height:88%;width:auto;right:3%;bottom:0;filter:drop-shadow(-20px 14px 28px #0009)}
.image-caption{font-size:.66rem;text-align:center;margin-top:18px}
.audience-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:42px;padding:30px 0;border-block:1px solid #ffffff12;text-align:left}
.audience-benefits>div{display:flex;flex-direction:column;align-items:flex-start}
.audience-benefits>div+div{border-left:1px solid var(--line);padding-left:30px}
.audience-benefits h2{font-size:1.35rem;line-height:1.25;margin:12px 0;letter-spacing:-.025em;text-wrap:initial}
.audience-benefits .text-link{margin-top:auto;padding-top:14px;font-size:.75rem;color:var(--blue);gap:10px}
.audience-benefits .text-link:hover{text-decoration:underline;text-underline-offset:4px}
.audience-benefits p{font-size:.81rem;line-height:1.65;max-width:32ch}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feature-card{background:var(--card);border:1px solid #ffffff0d;border-radius:28px;min-height:348px;display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden;position:relative;transition:transform .25s,border-color .25s}
.feature-card:hover{transform:translateY(-4px);border-color:#657187}
.feature-copy{padding:30px 8px 26px 28px;display:flex;align-items:flex-start;flex-direction:column;min-width:0;z-index:1}
.feature-copy h3{font-size:clamp(1.4rem,2.1vw,1.9rem);margin:14px 0}
.feature-copy p{font-size:.82rem;line-height:1.6}
.card-action{font-size:.75rem;display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:25px;line-height:1.4}
.feature-visual{position:relative;margin:48px 22px 0 8px;align-self:stretch;min-width:0;background:linear-gradient(160deg,#34415740,transparent);border-radius:23px 23px 0 0}
.feature-visual>.iphone-shot{position:absolute;top:0;left:0;width:100%;filter:drop-shadow(0 15px 20px #0006)}
.feature-homework{background:linear-gradient(145deg,#131519,#191820)}
.feature-grades{background:linear-gradient(145deg,#131519,#151c20)}
.feature-tutor{background:linear-gradient(145deg,#131519,#1a1922)}
.demo-note{font-size:.72rem;margin-top:24px}
.demo-note a{text-decoration:underline}
.school-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.school-card{border:1px solid #ffffff14;background:var(--card);border-radius:24px;overflow:hidden;transition:border-color .2s,transform .2s}
.school-card:hover{border-color:#657187;transform:translateY(-3px)}
.school-image{background:#252831;padding:20px 20px 0;overflow:hidden;aspect-ratio:1.9}
.school-image img{width:100%;border-radius:8px 8px 0 0;box-shadow:0 0 30px #0005}
.school-card-caption{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:24px}
.school-card-caption h3{font-size:1.14rem;margin-top:9px;max-width:25ch;line-height:1.3}
.style-studio{overflow-anchor:none;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--card)}
.style-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px;border-bottom:1px solid var(--line);background:#0e1013}
.style-tabs button{border:1px solid transparent;background:transparent;color:var(--muted);padding:10px 6px;min-height:48px;border-radius:13px;font-size:.82rem;transition:background .18s,color .18s}
.style-tabs button:hover{background:#24272e;color:var(--ink)}
.style-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.style-tabs button:focus-visible{outline-offset:-4px}
.style-panel{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:48px 64px;min-height:430px;align-items:center}
.style-copy h3{font-size:2.8rem;margin:16px 0}
.style-copy>p{max-width:31ch;font-size:.95rem}
.style-copy .text-link{margin-top:24px}
.style-copy .style-disclaimer{margin-top:30px;font-size:.65rem}
.style-preview{max-width:330px;justify-self:center;width:100%;filter:drop-shadow(0 25px 24px #0005);aspect-ratio:720/736}
.style-preview>.iphone-shot{width:100%}
.style-bottom{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;font-size:.72rem;color:var(--muted)}
.accent-dots{display:flex;gap:6px;flex:none}
.accent-dots i{width:11px;height:11px;border-radius:50%;background:#b89968}
.accent-dots i:nth-child(2){background:#ad7091}.accent-dots i:nth-child(3){background:#6d9fd0}.accent-dots i:nth-child(4){background:#6da892}.accent-dots i:nth-child(5){background:#a392c4}
.style-benefits{padding:0;list-style:none;display:flex;justify-content:center;gap:14px 30px;flex-wrap:wrap;margin:24px 0 0;font-size:.74rem;color:var(--muted)}
.devices{text-align:center}
.devices h2{margin:16px 0 20px}
.devices>p{max-width:58ch;margin-inline:auto}
.device-lineup{display:flex;align-items:flex-end;justify-content:center;gap:5%;max-width:720px;margin:42px auto 24px}
.device-lineup img:nth-child(1){width:48%}.device-lineup img:nth-child(2){width:24%;clip-path:var(--iphone-outline)}.device-lineup img:nth-child(3){width:14%;margin-bottom:7%}
.devices .note{max-width:65ch}
.trust{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:34px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(120deg,#171b23,#101115)}
.trust h2{font-size:1.8rem;margin-top:8px}
.trust .btn{flex:none}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.price-card{padding:28px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.price-card h3{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:-.02em}
.price-value{font-size:2.7rem;font-weight:600;letter-spacing:-.05em;color:var(--ink);line-height:1.2;margin:26px 0}
.price-value span{display:block;margin-top:6px;font-size:.73rem;letter-spacing:0;font-weight:400;color:var(--muted)}
.price-card>p:last-child{font-size:.82rem}
.price-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:20px}
.price-bottom .text-link{flex:none}
.question-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.question{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:22px 0;font-size:.9rem;line-height:1.5;min-height:94px}
.question .plus{width:28px;height:28px;font-size:1.1rem}
.question:hover{color:var(--blue)}
.contact-section{border-radius:32px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% -20%,#39466065,transparent 70%),var(--card);padding:64px 32px;text-align:center;margin:40px 0 80px}
.contact-section h2{margin:18px 0 22px}
.contact-section>p{max-width:49ch;margin-inline:auto}
.contact-action{margin-top:30px!important}
.contact-address{font-size:.76rem;margin-top:20px!important}
.contact-address a{text-decoration:underline;text-underline-offset:4px}
.contact-section>.note{margin-top:20px}
footer{padding-bottom:40px;border-top:1px solid var(--line)}
.footer-main{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 0;font-size:.78rem}
.footer-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:20px;font-size:.74rem}
footer .plus{display:none}footer .text-link{font-size:inherit}
footer>p{font-size:.7rem;margin:10px 0}
footer a:hover{text-decoration:underline;text-underline-offset:4px}
.fine-print{color:#969daa;max-width:100ch}
/* One device surround for every iPhone capture. Keep screenshot pixels separate from the frame. */
.iphone-shot{display:block;position:relative;width:100%;aspect-ratio:720/1472;isolation:isolate}
.iphone-shot::before{content:"";position:absolute;inset:0;background:url('/shots/iphone-frame.png?v=20260927d') center top / 100% 100% no-repeat;clip-path:var(--iphone-outline);z-index:-1}
.iphone-screen{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;-webkit-mask:url('/shots/iphone-screen-mask.svg?v=20260927d') center / 100% 100% no-repeat;mask:url('/shots/iphone-screen-mask.svg?v=20260927d') center / 100% 100% no-repeat}
.iphone-screen>img{position:absolute;left:5.4167%;top:2.5136%;width:89.1667%;height:94.9728%;max-width:none;object-fit:contain;border:0;border-radius:0}
.iphone-shot::after{content:"";position:absolute;left:36.15%;top:4.08%;width:27.7%;height:3.88%;border-radius:999px;background:#030303;pointer-events:none}
/* Inline style previews crop the top of the same full capture opened in the dialog. */
.iphone-detail{aspect-ratio:720/736;overflow:hidden}
.iphone-detail::before{inset:0 0 auto;height:200%}
.iphone-detail .iphone-screen{top:0;height:200%}

.iphone-detail::after{top:8.15%;height:7.745%}
.modal-shot>.iphone-shot{width:min(100%,303px);margin-inline:auto}

/* Native top-layer dialogs keep the page stationary, inert and outside the focus cycle. */
html:has(dialog[open],dialog:target){overflow:hidden}
.detail-dialog{position:fixed;inset:0;width:min(1000px,calc(100% - 48px));max-height:calc(100dvh - 64px);padding:0;margin:auto;background:#14161b;color:var(--ink);border:1px solid #444a56;border-radius:26px;box-shadow:0 35px 120px #000a;overscroll-behavior:contain;scrollbar-gutter:stable}
.detail-dialog::backdrop{background:#030407cb;backdrop-filter:blur(12px)}
.detail-dialog:target:not([open]){display:block;z-index:80;box-shadow:0 0 0 100vmax #030407ed}
.dialog-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 14px 32px;background:#14161bf5;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff12}
.dialog-top>span{font-size:.6rem;color:var(--muted);letter-spacing:.1em}
.dialog-close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;font-size:1.8rem;font-weight:300;line-height:1;border-radius:50%;background:#2b2f37;color:var(--ink)}
.dialog-close:hover{background:#485264}
.dialog-body{padding:34px;display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:start}
.dialog-copy{min-width:0}
.dialog-copy h2{font-size:clamp(1.65rem,3vw,2.4rem);line-height:1.15;margin-bottom:23px;outline:none}
.dialog-copy p{margin:15px 0;font-size:.91rem;line-height:1.7}
.dialog-copy ul,.dialog-details ul{padding-left:20px;color:var(--muted);font-size:.86rem;line-height:1.7}
.dialog-copy li,.dialog-details li{margin:12px 0}
.dialog-copy li::marker,.dialog-details li::marker{color:var(--accent)}
.has-details .dialog-body{grid-template-rows:auto 1fr;row-gap:0}
.has-details .modal-shot{grid-column:2;grid-row:1 / 3}
.has-details .dialog-details{grid-column:1}
.modal-shot{min-width:0;text-align:center}
.modal-shot>img{max-height:620px;max-width:100%;width:auto;margin:auto;border-radius:16px;object-fit:contain}
.modal-shot figcaption{margin-top:16px;font-size:.65rem;line-height:1.7;color:var(--muted)}
.modal-shot figcaption a{display:block;text-decoration:underline;margin-top:6px;min-height:32px}
.wide .dialog-body{display:flex;flex-direction:column;gap:12px}
.wide .modal-shot{width:100%}
.wide .modal-shot>img{width:100%;max-height:none;border-radius:10px}
.text-dialog{max-width:750px}
.text-dialog .dialog-body{display:block;padding:40px}
.text-dialog .card{margin-top:28px}
.stamp{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:650}
/* School forms and legal pages still use this same shell when platform mode is available. */
.legal{padding-top:55px;padding-bottom:80px;max-width:850px}
.legal h1{font-size:2.7rem}.legal h2{font-size:1.7rem;margin:32px 0 18px}.legal p{margin:18px 0}.legal a,.note a{color:var(--blue);text-decoration:underline}
.legal li{color:var(--muted)}
.table-scroll{overflow:auto}.legal table{border-collapse:collapse;font-size:.8rem}.legal th,.legal td{padding:12px;border:1px solid var(--line)}
form{text-align:left}form label{display:block;font-size:.82rem;color:var(--muted);margin-top:16px}
input,textarea,select{width:100%;min-height:48px;padding:12px;border:1px solid #7c8492;background:#08090b;color:var(--ink);border-radius:10px;margin-top:6px}
form button{min-height:48px;border:0;border-radius:999px;padding:12px 24px;background:var(--ink);color:var(--paper);font-weight:600}
form .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.row{display:flex;gap:20px;align-items:end}.row label{flex:1}.hp{display:none!important}.error{color:#ffb9b9}.results{list-style:none;padding:0}.results li{padding:20px;border:1px solid var(--line)}
.not-found{padding-top:15vh;max-width:760px}.not-found h1{font-size:3.2rem}.not-found .lede{margin:22px 0}.not-found .actions{justify-content:flex-start}
@media(max-width:1000px){header{gap:14px}header nav{gap:16px}.header-tools{gap:12px}.style-panel{gap:32px;padding:34px}.feature-copy{padding:25px 6px 24px 24px}.feature-visual{margin-right:14px}.footer-main{flex-wrap:wrap}}
@media(max-width:760px){
  main,header,footer{padding-inline:20px}section{padding-block:60px}html{scroll-padding-top:140px}
  header{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding-top:8px;padding-bottom:6px}
  header nav{grid-row:2;grid-column:1/-1;justify-content:space-between;gap:10px}header nav a{font-size:.73rem}
  .header-tools .cta{padding:8px 14px;font-size:.73rem}
  .hero{padding-top:34px}.hero h1{margin-top:22px}.hero .lede{max-width:34ch;font-size:1rem}.hero-stage{margin-top:34px;height:clamp(235px,52vw,390px)}
  .hero-mac{width:88%;margin-right:10%}.hero-phone{right:0;height:87%}.hero::before{inset:140px -20px 0}
  .audience-benefits{gap:20px}.audience-benefits>div+div{padding-left:20px}.audience-benefits h2{font-size:1.14rem}.audience-benefits p{font-size:.75rem}
  .feature-grid{gap:14px}.feature-card{grid-template-columns:1fr;min-height:380px}.feature-copy{padding:22px 20px 0}.feature-copy h3{font-size:1.42rem}.feature-copy p{font-size:.77rem}.card-action{padding-top:18px;margin-top:0;justify-content:space-between;width:100%}.feature-visual{height:220px;margin:22px 26px 0}
  .school-grid{gap:18px}.school-image{padding:12px 12px 0}.school-card-caption{padding:18px;gap:10px}.school-card-caption h3{font-size:1rem}
  .style-panel{gap:30px;padding:30px;grid-template-columns:1fr 1fr;min-height:370px}.style-copy h3{font-size:2.1rem}.style-copy>p{font-size:.85rem}.style-copy .style-disclaimer{margin-top:18px}
  .trust{padding:28px;align-items:flex-start;flex-direction:column}.trust .btn{font-size:.78rem}
  .price-grid{grid-template-columns:1fr}.price-card{display:grid;grid-template-columns:1fr auto;column-gap:24px;padding:26px}.price-value{grid-column:2;grid-row:1/3;margin:0;font-size:2.15rem;text-align:right}.price-card>p:last-child{grid-column:1;max-width:35ch;margin-top:14px;font-size:.76rem}.price-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .question-grid{gap:0 25px}.question{font-size:.8rem}.contact-section{padding:44px 24px;margin-bottom:50px}
  .detail-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 28px);border-radius:22px}.dialog-body{padding:26px;gap:28px}.dialog-copy p{font-size:.86rem}.dialog-copy ul,.dialog-details ul{font-size:.82rem}.dialog-top{padding:10px 14px 10px 26px}.text-dialog .dialog-body{padding:28px}
}
@media(max-width:520px){
  .audience-benefits{grid-template-columns:1fr;gap:24px;padding-block:28px}.audience-benefits>div+div{border-left:0;padding-left:0}.audience-benefits h2{margin:6px 0;font-size:1.2rem}.audience-benefits p{max-width:42ch}
  h1{font-size:3.4rem}h2{font-size:2.05rem;letter-spacing:-.045em}.section-heading p{font-size:.9rem}
  .actions{gap:10px}.hero .btn{width:100%;font-size:.83rem}.hero-note{font-size:.68rem}
  .feature-grid,.school-grid{grid-template-columns:1fr}.feature-card{grid-template-columns:1.2fr 1fr;min-height:325px}.feature-copy{padding:26px 2px 24px 22px}.feature-copy h3{font-size:1.5rem}.card-action{margin-top:auto;gap:6px;font-size:.68rem}.card-action .plus{width:28px;height:28px}.feature-visual{height:auto;margin:44px 16px 0 12px}
  .style-tabs{gap:3px;padding:8px}.style-tabs button{font-size:.66rem;padding:10px 2px;min-height:44px;border-radius:10px}.style-panel{grid-template-columns:1fr;padding:28px;gap:25px;min-height:680px}.style-copy{min-height:245px}.style-copy h3{margin:12px 0;font-size:2.25rem}.style-copy>p{max-width:none}.style-copy .text-link{margin-top:18px}.style-copy .style-disclaimer{margin-top:12px}.style-preview{max-width:280px}.style-bottom{padding:18px 22px;align-items:flex-start}.style-bottom>span:first-child{font-size:.68rem}.accent-dots{gap:4px;margin-top:5px}.accent-dots i{width:8px;height:8px}.style-benefits{justify-content:flex-start;gap:8px 18px;font-size:.7rem}
  .device-lineup{gap:4%}.device-lineup img:nth-child(1){width:49%}.device-lineup img:nth-child(2){width:27%}.device-lineup img:nth-child(3){width:16%}.devices>p{font-size:.9rem}.devices>.note{font-size:.7rem}
  .trust h2{font-size:1.6rem}.trust .btn{width:100%;padding:12px 14px;gap:10px;font-size:.71rem}
  .price-card{padding:24px 20px;column-gap:12px}.price-card h3{font-size:.86rem}.price-value{font-size:1.9rem}.price-value span{font-size:.63rem}.price-card>p:last-child{font-size:.74rem}
  .question-grid{grid-template-columns:1fr}.question{min-height:78px;font-size:.86rem}.footer-main{gap:18px;align-items:flex-start;flex-direction:column}.footer-links{gap:14px 24px}
  .dialog-body{display:flex;flex-direction:column;gap:24px;padding:24px}.dialog-copy h2{font-size:1.8rem}.modal-shot{width:100%}.modal-shot>img{max-height:none;width:min(100%,340px)}.wide .modal-shot>img{width:100%}.dialog-top{padding:10px 12px 10px 24px}.text-dialog .dialog-body{padding:24px}
  form .grid{grid-template-columns:1fr}.row{flex-direction:column;align-items:stretch}
}
@media(max-width:360px){.hero::before{left:-16px;right:-16px}main,header,footer{padding-inline:16px}header nav{gap:8px}header nav a{font-size:.66rem}.header-tools{gap:8px}.header-tools .cta{padding:8px 10px;font-size:.68rem}.brand small{font-size:.43rem}h1{font-size:2.9rem}.feature-copy h3{font-size:1.33rem}.feature-copy{padding-left:18px}.feature-visual{margin-left:10px;margin-right:12px}.style-panel{padding:24px;min-height:680px}.style-tabs button{font-size:.59rem}.trust{padding:24px 20px}.price-value{font-size:1.7rem}}
@media(prefers-reduced-motion:no-preference){
  .detail-dialog[open]{animation:dialog-in .2s ease-out}.detail-dialog[open]::backdrop{animation:backdrop-in .2s ease-out}.style-panel:not([hidden]){animation:panel-in .2s ease-out}
  @keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes backdrop-in{from{opacity:0}to{opacity:1}}
  @keyframes panel-in{from{opacity:.5}to{opacity:1}}
}
/* A few fun touches within the Apple look (Leonard, 4 October 2026): a slow gradient on the
   headline's second line, a live bell chip that rings, sections that rise in, a tilting hero. */
.hero h1 span{background:linear-gradient(100deg,#c4d8fa 0%,#e3c58c 34%,#f1b3c9 66%,#c4d8fa 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.bell-chip{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 15px 7px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.78rem;color:#c7cbd3;min-height:38px;cursor:default}
.bell-chip[hidden]{display:none}
.bell-time{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.bell-time:empty{display:none}
.bell-icon{width:17px;height:17px;fill:none;stroke:#e3c58c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 12%}
.hero-stage{perspective:1600px}
.hero-mac{transform:rotateY(calc(var(--tx,0) * 5deg)) rotateX(calc(var(--ty,0) * -3deg))}
.hero-phone{transform:translate(calc(var(--tx,0) * 16px),calc(var(--ty,0) * 10px)) rotateY(calc(var(--tx,0) * 8deg))}
@media(prefers-reduced-motion:no-preference){
  .hero h1 span{animation:headline-shimmer 10s ease-in-out infinite alternate}
  @keyframes headline-shimmer{to{background-position:100% 0}}
  .bell-chip.ringing .bell-icon{animation:bell-ring .6s ease-in-out}
  @keyframes bell-ring{0%,100%{transform:none}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}75%{transform:rotate(3deg)}}
  .hero-mac,.hero-phone{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
  .reveal.in{opacity:1;transform:none}
}
@media(forced-colors:active){.hero h1 span{background:none;color:CanvasText}.bell-icon{stroke:CanvasText}}
/* Colour only in key places, each with colours of its own (Leonard, 4 October 2026: "in key places
   and not just one colour"): the front page's "to learn.", each topic page's title, the prices and
   the closing invitation. Cards glow under the pointer, the header shows how far down the page you
   are, and the Bell icon swings like a ringing bell under the pointer. */
@property --glow{syntax:"<color>";inherits:false;initial-value:#c4d8fa00}
.audience-hero #students-title{--hue:linear-gradient(100deg,#a6f0cf,#8fd0ff,#a6f0cf)}
.audience-hero #teachers-title{--hue:linear-gradient(100deg,#ffd27a,#ff9f80,#ffd27a)}
.audience-hero #integration-title{--hue:linear-gradient(100deg,#cdb8ff,#8ec5ff,#cdb8ff)}
.audience-hero #pricing-title{--hue:linear-gradient(100deg,#f3d58a,#f2a7c3,#f3d58a)}
.releases h1{--hue:linear-gradient(100deg,#ff9ecf,#b79cff,#ff9ecf)}
#request-title{--hue:linear-gradient(100deg,#d4b8ff,#ffc2a8,#d4b8ff)}
.price-value{--hue:linear-gradient(100deg,#f7e7c4,#e3b778,#f7e7c4)}
:is(.audience-hero #students-title,.audience-hero #teachers-title,.audience-hero #integration-title,.audience-hero #pricing-title,.releases h1,#request-title,.price-value){background-image:var(--hue);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.price-value span{color:var(--muted)}
.feature-card,.school-card,.info-card,.price-card{position:relative;background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 65%)}
.feature-card,.school-card{transition:transform .25s,border-color .25s,--glow .35s}
.info-card,.price-card{transition:border-color .25s,--glow .35s}
.feature-card:hover,.school-card:hover,.info-card:hover,.price-card:hover{--glow:#c4d8fa1f}
.info-card:hover,.price-card:hover{border-color:#ffffff26}
.btn:not(.quiet):hover{box-shadow:0 10px 32px -10px #e3c58c80}
@supports (animation-timeline:scroll()){
  .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#c4d8fa,#e3c58c,#f1b3c9);transform-origin:0 50%;transform:scaleX(0);animation:read-progress linear both;animation-timeline:scroll(root)}
  @keyframes read-progress{to{transform:scaleX(1)}}
}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  :is(.audience-hero #students-title,.audience-hero #teachers-title,.audience-hero #integration-title,.audience-hero #pricing-title,.releases h1,#request-title){animation:title-drift 9s ease-in-out infinite alternate}
  @keyframes title-drift{to{background-position:100% 0}}
  .brand img{transform-origin:50% 6%}
  .brand:hover img{animation:brand-ring .6s ease-in-out}
  @keyframes brand-ring{0%,100%{transform:none}12%{transform:rotate(14deg)}28%{transform:rotate(-12deg)}44%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}76%{transform:rotate(2deg)}}
}
@media(forced-colors:active){:is(.audience-hero #students-title,.audience-hero #teachers-title,.audience-hero #integration-title,.audience-hero #pricing-title,.releases h1,#request-title,.price-value){background:none;color:CanvasText}.site-header::after{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.btn,.cta,.plus,.dialog-close,.style-tabs button{border:1px solid ButtonText}.feature-card,.school-card,.style-studio{overflow-anchor:none;border:1px solid CanvasText}}

/* Styles open as a focused, full-handset viewer. Only the inline preview is cropped. */
.detail-dialog.style-dialog{width:min(560px,calc(100% - 24px))}
.style-dialog .dialog-top h2{margin:0;font-size:1.1rem;line-height:1.3;outline:none}
.style-dialog .dialog-body{display:block;padding:20px 24px 14px}
.style-dialog .modal-shot>.iphone-shot{width:min(100%,320px,max(160px,calc((100dvh - 240px) * 720 / 1472)))}
.style-dialog .iphone-screen>img{object-fit:contain}
.style-dialog .modal-shot figcaption{margin-top:12px}
/* Audience pages (/<lang>/students, /<lang>/teachers, 4 October 2026): a page each for what Bell does
   for that reader, rather than one long scroll for everyone. A hero, three values, then one row per
   job, its screen beside it, alternating sides. */
.audience-hero{padding-top:72px;padding-bottom:24px}
.audience-hero h1{font-size:clamp(2.8rem,6vw,5.2rem);max-width:13ch;margin:18px 0 22px}
.audience-hero .lede{max-width:52ch;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.65}
.audience-hero .actions{justify-content:flex-start;margin-top:30px}
.value-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-block:32px 56px}
.value{background:var(--card);border:1px solid #ffffff0d;border-radius:22px;padding:24px 24px 26px}
.value h3{font-size:1.12rem;margin:10px 0 8px}
.value p{font-size:.86rem;line-height:1.6}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:72px;border-top:1px solid var(--line)}
.story.reverse .story-copy{order:2}
.story-copy h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:12px 0 18px}
.story-copy>p{font-size:1rem;line-height:1.65;max-width:46ch}
.story-copy ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.story-copy li{position:relative;padding-left:26px;color:var(--muted);font-size:.9rem;line-height:1.55}
.story-copy li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.story-copy li strong{color:var(--ink);font-weight:600}
.story-visual .iphone-shot{max-width:300px;margin:auto;filter:drop-shadow(0 24px 34px #0008)}
.story-visual.web{background:#252831;border-radius:24px;padding:22px 22px 0;overflow:hidden}
.story-visual.web img{border-radius:8px 8px 0 0;box-shadow:0 0 30px #0005}
.audience-cta{text-align:center;border-top:1px solid var(--line)}
.audience-cta h2{max-width:18ch;margin:14px auto 18px}
.audience-cta p{max-width:50ch;margin:0 auto 28px}
.audience-other{display:inline-block;margin-top:22px;font-size:.84rem;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){.story{grid-template-columns:1fr;gap:34px;padding-block:56px}.story.reverse .story-copy{order:0}.value-strip{grid-template-columns:1fr}}
.story.solo{grid-template-columns:1fr}.story.solo .story-copy>p{max-width:60ch}.story.solo ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}@media(max-width:860px){.story.solo ul{grid-template-columns:1fr}}
/* The page you are on, in the header (each audience and topic page sets aria-current). */
header nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
/* Page sections below a story: a heading, then cards, steps, styles or questions. */
.page-section{padding-block:72px;border-top:1px solid var(--line)}
.page-section>.section-heading h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.info-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-card{background:var(--card);border:1px solid #ffffff0d;border-radius:22px;padding:24px 24px 26px}
.info-card h3{font-size:1.1rem;margin:10px 0 8px}
.info-card p{font-size:.88rem;line-height:1.6}
.info-card ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:.86rem;line-height:1.55;display:grid;gap:6px}
.info-card code{font-size:.8rem;color:var(--ink);background:var(--raised);border-radius:6px;padding:1px 6px}
/* The five styles side by side. */
.style-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.style-row figure{display:grid;gap:12px}
.style-row img{border-radius:18px;border:1px solid #ffffff14;width:100%}
.style-row figcaption strong{display:block;color:var(--ink);font-size:.95rem}
.style-row figcaption{color:var(--muted);font-size:.8rem;line-height:1.5}
/* A real sequence, so its steps are numbered. */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:step}
.steps li{counter-increment:step;background:var(--card);border:1px solid #ffffff0d;border-radius:22px;padding:22px}
.steps li::before{content:counter(step);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--raised);color:var(--ink);font-weight:650;font-size:.85rem;margin-bottom:12px}
.steps h3{font-size:1rem;margin-bottom:6px}
.steps p{font-size:.84rem;line-height:1.55}
/* Prices. */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.price-card{background:var(--card);border:1px solid #ffffff0d;border-radius:24px;padding:28px}
.price-card .amount{display:block;font-size:clamp(2.2rem,4vw,3rem);font-weight:650;letter-spacing:-.04em;color:var(--ink);margin:14px 0 2px}
.price-card .per{font-size:.85rem;color:var(--muted)}
.price-card p:not(.price-value){font-size:.86rem;line-height:1.6;margin-top:14px}
.fine{font-size:.8rem;line-height:1.6;margin-top:22px;max-width:80ch}
/* Questions. */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--card);border:1px solid #ffffff0d;border-radius:18px;padding:18px 22px}
.faq summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:12px;font-size:.9rem;line-height:1.65}
/* Links inside a card or an answer (the support page) read as links, as they do in .legal. */
.info-card p a,.faq p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.style-row{grid-template-columns:repeat(3,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.info-grid,.info-grid.two,.price-grid{grid-template-columns:1fr}.style-row{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:1fr}}
.download-action{margin-top:18px}