/* Deeper notebook colours, a graphic-led opening and genuine appearance previews */
:root{--deep:#124f56;--deepest:#103a42;--light-ink:#f3f8f5;--citron:#d9ef73;--pool:#b9deda}
.button{background:var(--citron);color:var(--deepest);font-weight:500}
.button:hover{color:var(--deepest)}
.homepage .header{width:100%;padding-inline:max(var(--gap),calc((100vw - 1392px)/2));background:var(--deep);color:var(--light-ink)}
.homepage .header a:hover{color:var(--citron)}
.homepage .header :focus-visible,.hero :focus-visible{outline-color:var(--citron)}
.homepage .header .nav-status{background:transparent;text-decoration:underline;text-underline-offset:.3em}
.hero.frame{width:100%;padding-inline:max(var(--gap),calc((100vw - 1392px)/2));padding-top:65px;min-height:830px;background:var(--deep);color:var(--light-ink);overflow:hidden}
.hero-copy{width:44%}.hero-copy h1{font-weight:500;letter-spacing:-.045em;max-width:none}
.hero-copy .lead{max-width:25ch}.hero-copy .availability{color:var(--light-ink)}.hero-copy a:hover{color:var(--citron)}.hero-copy .button:hover{color:var(--deepest)}
.hero-product{left:45%;right:-1%;top:180px;max-width:1100px}
.hero-stage{padding:40px 0 22px 28px;background:var(--pool);clip-path:polygon(0 28px,68% 28px,68% 0,100% 0,100% 100%,0 100%)}
.hero-stage picture{width:108%}.hero-stage img{width:100%;min-height:0;object-fit:cover;object-position:left top}
.hero-product figcaption{color:var(--light-ink);padding:16px 28px 0}
.section-intro h2{max-width:12ch}.inside .tour-pages{background:var(--pool)}
.tour-choices button[aria-pressed=true]{background:var(--deep);color:var(--light-ink)}
.tour-choices button[aria-pressed=true] span{color:var(--light-ink)}
.personalise{background:var(--deepest);color:var(--light-ink)}
.personalise .feature-band{background:var(--deep);color:var(--light-ink)}
.personalise summary:hover{background:var(--deep)}
.personalise a:hover{color:var(--citron)}
.personalise :is(button,a,summary):focus-visible{outline-color:var(--citron)}
.personalise .feature-content img{width:100%}
.theme-showcase{margin-top:62px}.theme-top{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start;margin-bottom:28px}
.theme-top h3{font-size:var(--head);line-height:1.07;max-width:14ch}.theme-top p{margin-top:24px}
.theme-buttons{display:flex;gap:8px;justify-content:flex-end;align-self:start}
.theme-buttons button{border:0;background:var(--deep);color:var(--light-ink);padding:15px 22px;min-height:52px;font:inherit;cursor:pointer}
.theme-buttons button[aria-pressed=true]{background:var(--citron);color:var(--deepest)}
.theme-buttons button:hover{transform:translateY(-3px)}
.theme-images{background:var(--pool);padding:26px 26px 0;overflow:hidden}
.theme-images figure{margin:0}.theme-images figure[hidden]{display:none}.theme-images img{width:100%;height:auto}
.theme-images figcaption{background:var(--pool);color:var(--deepest);padding:18px 0 22px}
.appearance-controls{margin-top:22px}.appearance-controls summary{padding:12px 0;width:max-content;font-size:var(--body)}
.appearance-controls figure{margin-top:18px;max-width:900px}.appearance-controls img{width:100%}
.files{align-items:start}.file-specimen{background:var(--pool);transform:rotate(1deg)}
.file-paper{background:var(--paper)}
.file-specimen figcaption{color:var(--ink)}
.closing.frame{width:100%;padding:85px max(var(--gap),calc((100vw - 1392px)/2));background:var(--citron);margin-top:110px}
.closing h2{font-size:clamp(34px,5.4vw,76px);max-width:13ch}.closing .button{background:var(--deepest);color:var(--light-ink)}
.footer{grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-block:65px 45px}
.footer .wordmark{font-size:clamp(26px,3.3vw,48px);line-height:1.05;letter-spacing:-.035em;white-space:normal;max-width:12ch;align-items:start}
.footer .wordmark img{width:32px;height:32px;margin-top:4px}.footer nav{grid-template-columns:1fr}
@media(min-width:1600px){.hero-product{left:44%;right:0;top:165px}.hero.frame{min-height:1000px}}
@media(max-width:1050px) and (min-width:761px){.hero.frame{min-height:830px}.hero-copy{width:52%}.hero-copy h1{font-size:clamp(60px,6.4vw,78px)}.hero-copy .lead{max-width:23ch}.hero-product{left:48%;top:215px;right:-1%}.hero-stage picture{width:100%}.hero-stage{padding-left:20px}.hero-stage img{max-height:560px;object-position:top}.hero-product figcaption{padding-left:20px}.footer{grid-template-columns:1.4fr 1fr}.footer>p{grid-column:1/-1}}
@media(max-width:760px){.homepage .header{padding-inline:var(--gap)}.hero.frame{padding:42px var(--gap) 35px;min-height:0}.hero-copy{width:100%}.hero-copy h1{font-size:clamp(58px,9.5vw,76px)}.hero-copy .lead{max-width:30ch}.hero-product{left:auto;right:auto;top:auto;margin:32px calc(-1*var(--gap)) 0;max-width:none}.hero-stage{padding:34px var(--gap) 22px;clip-path:polygon(0 20px,68% 20px,68% 0,100% 0,100% 100%,0 100%)}.hero-stage picture{width:100%;max-height:510px}.hero-stage img{height:auto;max-height:none;object-fit:contain}.hero-product figcaption{padding:14px var(--gap) 0}.section-intro h2{max-width:16ch}.theme-top{grid-template-columns:1fr;gap:24px}.theme-top h3{font-size:var(--head);max-width:16ch}.theme-buttons{justify-content:flex-start}.theme-images{padding:18px 18px 0}.theme-images figcaption{font-size:var(--small)}.personalise .feature-content img{width:100%;max-width:100%}.appearance-controls summary{max-width:100%}.closing.frame{padding:55px var(--gap);margin-top:90px}.closing h2{font-size:var(--head)}.footer{grid-template-columns:1fr;gap:32px}.footer .wordmark{font-size:36px;max-width:none}.footer nav{grid-template-columns:1fr 1fr}.file-specimen{transform:none}}
@media(prefers-reduced-motion:reduce){.file-specimen{transform:none}.theme-buttons button:hover{transform:none}}

.header .wordmark img{width:28px;height:28px;flex-shrink:0}
@media(max-width:1050px) and (min-width:761px){.hero-stage picture{max-width:374px}}
@media(max-width:760px){.personalise .feature-content figure{margin-inline:-25px}}
@media(max-width:350px){.homepage .hero-copy h1{font-size:52px}.header nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}}