@font-face{font-family:Penny Serif;src:url("./penny-serif-roman.woff") format("woff");font-display:swap}
@font-face{font-family:Penny Serif;src:url("./penny-serif-italic.woff") format("woff");font-style:italic;font-display:swap}

:root {
  --ink:#24392c;
  --muted:#505b4d;
  --green:#315441;
  --sage:#dce5d7;
  --cream:#faf8f1;
  --paper:#fffdf8;
  --line:#e6e0d3;
  --serif:"Penny Serif",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
body:has(dialog[open]){overflow:hidden}
a{color:inherit}
button,input{font:inherit}
button{color:inherit}
button:not(:disabled){cursor:pointer}
:focus-visible{outline:2px solid #6d6037;outline-offset:4px}
p,h1,h2,h3,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02}
h2{font-size:clamp(2.4rem,4.2vw,4rem);letter-spacing:-.045em}
em{color:#4f694f;font-weight:400}
.wrap{width:min(100% - 88px,1200px);margin-inline:auto}
.icon,.brand-mark svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}
.symbol-bank{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:absolute;left:1rem;top:1rem;z-index:5;transform:translateY(-200%);background:var(--paper);padding:.65rem 1rem}
.skip-link:focus{transform:none}

.site-header{border-bottom:1px solid var(--line)}
.header-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.header-inner{min-height:81px}
.brand{display:inline-flex;align-items:center;gap:.65rem;font:1.54rem/1 var(--serif);letter-spacing:-.035em;text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:37px;height:37px;flex:none;border-radius:50%;border:1px solid #c1b590;background:#eee8d5;color:var(--green)}
.brand-mark svg{width:20px;height:20px}
.brand-period{color:#836d3d}
.main-nav{display:flex;align-items:center;gap:clamp(1.3rem,3vw,2.7rem);font-size:.91rem;font-weight:600}
.main-nav a,.site-footer a:not(.brand){text-decoration:none}
.main-nav a:hover,.site-footer a:not(.brand):hover{text-decoration:underline;text-underline-offset:.23em}
.header-shop{display:inline-flex;white-space:nowrap;gap:.4rem;align-items:center;padding:.55rem .9rem;border:1px solid #aeb9a7;border-radius:7px}

.hero{padding:clamp(3.35rem,6vw,6.1rem) 0 clamp(3.7rem,6.3vw,5.65rem)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4.1vw,4.4rem);align-items:center}
.hero-copy{padding-bottom:.7rem}
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.69rem;font-weight:750;letter-spacing:.16em;color:#4d644e;line-height:1.35}
.eyebrow-line{display:inline-block;height:1px;width:23px;background:#899677}
h1{font-size:clamp(3.4rem,6.2vw,6.05rem);letter-spacing:-.058em;margin:1.15rem 0 1.35rem}
h1 em{white-space:nowrap}
.hero-intro{max-width:470px;color:var(--muted);font-size:clamp(1.04rem,1.5vw,1.17rem);line-height:1.65}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.25rem;margin:1.9rem 0 1.35rem}
.button,.text-link{display:inline-flex;align-items:center;justify-content:center;gap:.63rem;font-size:.92rem;font-weight:680;text-decoration:none}
.button{min-height:48px;padding:.58rem 1rem;border:1px solid transparent;border-radius:7px;transition:background-color .18s,border-color .18s}
.primary{background:var(--green);color:#fffdf8}
.primary:hover{background:#213d2e}
.secondary{background:var(--paper);border-color:#adb9a8}
.secondary:hover{background:#edf1e8;border-color:#7a907b}
.text-link{min-height:42px;color:var(--green);text-underline-offset:.25em}
.text-link:hover{text-decoration:underline}
.platforms,.platforms span{display:flex;align-items:center;gap:.43rem}
.platforms{gap:.78rem;flex-wrap:wrap;color:#56624f;font-size:.82rem;font-weight:600}
.platforms .icon{width:1rem;height:1rem}
.platform-dot{width:3px;height:3px;border-radius:50%;background:#9aa58f}

.hero-figure{min-width:0}
.figure-art{isolation:isolate;position:relative;aspect-ratio:1.25;min-height:280px;overflow:hidden;border-radius:20px;background:#e6eadb;background-image:radial-gradient(ellipse at 10% 95%,#eee7d3,transparent 54%),radial-gradient(ellipse at 90% 12%,#f2eddb,transparent 55%);border:1px solid #dfe4d5;container-type:inline-size}
.figure-orbit{position:absolute;z-index:-1;top:9%;left:12%;width:76%;height:87%;border:1px solid #b2b99f;border-radius:49% 46% 48% 48%;transform:rotate(-24deg)}
.botanical{position:absolute;right:-1%;top:1%;width:28%;height:63%;color:#7c916f;transform:rotate(8deg)}
.figure-sparkle{position:absolute;fill:#a18b59;width:4.1%;height:6%}
.figure-sparkle.first{left:8%;top:18%}
.figure-sparkle.second{right:8%;bottom:26%;width:3.2%}
.paper-backing{position:absolute;top:18%;left:17%;width:67%;height:64%;border:1px solid #d5c7a9;border-radius:9px;background:#f3ead3;transform:rotate(-10deg);box-shadow:0 8px 20px #58684a21}
.dashboard{position:absolute;top:16%;left:13%;width:74%;border:1px solid #c3cebf;border-radius:10px;background:#fdfdf8;box-shadow:0 13px 35px #40574234;overflow:hidden;transform:rotate(4deg);font-size:clamp(7px,1.9cqw,11px)}
.dash-bar,.dash-bar>span,.dash-tabs{display:flex;align-items:center}
.dash-bar{justify-content:space-between;padding:2.3% 4.1%;background:#375845;color:#f8f8f0;letter-spacing:.12em;font-size:.85em;font-weight:700}
.dash-bar>span{gap:.5em}
.dash-dots i{width:.44em;height:.44em;border-radius:50%;background:#d6dfcb}
.dash-body{padding:4.3% 4.5% 2.5%}
.dash-kicker{font-size:.73em;letter-spacing:.15em;font-weight:750;color:#66765b}
.dash-title{font:2.15em/1.08 var(--serif);margin:.24em 0 .56em;letter-spacing:-.025em}
.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.3%}
.dash-stats div{background:#e7ecdf;border-radius:5px;padding:6% 8%;white-space:nowrap}
.dash-stats div:nth-child(2){background:#f1e6d8}
.dash-stats div:nth-child(3){background:#dbe7d9}
.dash-stats span,.dash-stats strong{display:block}
.dash-stats span{font-size:.84em;color:#4e5b4a}
.dash-stats strong{font:1.73em/1.2 var(--serif);margin-top:.16em}
.dash-chart{margin-top:3.5%;padding:2% 3%;border:1px solid #e5e9de;border-radius:5px}
.dash-chart-label,.dash-chart-label span{display:flex;justify-content:space-between;align-items:center;gap:.34em}
.dash-chart-label{font-weight:700;font-size:.84em}
.dash-chart-label span{font-weight:400;font-size:.9em}
.dash-chart-label i{width:.55em;height:.55em;border-radius:50%;background:#718c6e}
.dash-chart-label i:last-of-type{margin-left:.4em;background:#c4a67d}
.dash-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:5%;margin-top:.4em}
.dash-bars div{min-width:0;text-align:center}
.dash-bars i{position:relative;display:block;height:clamp(25px,11cqw,58px);background:repeating-linear-gradient(to top,#e8ede2 0 1px,transparent 1px 33.33%)}
.dash-bars i::before,.dash-bars i::after{position:absolute;bottom:0;width:24%;border-radius:2px 2px 0 0;content:""}
.dash-bars i::before{height:var(--income);left:23%;background:#718c6e}
.dash-bars i::after{height:var(--expense);right:23%;background:#c4a67d}
.dash-bars small{color:#54644f;font-size:.74em}
.dash-tabs{gap:1.1em;margin-top:.8em;font-size:.76em;color:#5b6958}
.dash-tabs b{background:#e1e8d9;padding:.18em .65em;border-radius:4px;color:#304c38}
.art-stamp{position:absolute;right:8%;bottom:8%;display:grid;align-content:center;justify-items:center;gap:.28em;aspect-ratio:1;width:17%;border:1px solid #a58c56;outline:3px solid #eadfbe;outline-offset:-5px;border-radius:50%;background:#eadfbe;color:#526344;transform:rotate(-9deg);box-shadow:0 4px 8px #5a5e3c2a;font-size:clamp(5px,1.38cqw,9px);font-weight:750;text-align:center;line-height:1.2;letter-spacing:.12em}
.art-stamp .icon{width:2.45em;height:2.45em}
.hero-figure figcaption{margin-top:.5rem;text-align:right;color:#5b6653;font-size:.73rem}

.catalog{padding:clamp(3.7rem,6.8vw,6rem) 0 clamp(3.8rem,6vw,6rem);background:#f2f1e8;border-block:1px solid #e7e7d9;scroll-margin-top:1rem}
.section-intro h2,.about h2{margin:.72rem 0 .78rem}
.section-intro>p:last-child,.about-copy>p:not(.eyebrow){color:var(--muted)}
.filter-panel{margin-top:1.75rem;padding:1rem 1.1rem;background:var(--paper);border:1px solid #e1e3d5;border-radius:12px}
.filter-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.8rem;margin-bottom:.78rem;border-bottom:1px solid #e9e7dc}
.segmented{display:flex;gap:.16rem;padding:.2rem;border-radius:8px;background:#eeeee4}
.segmented button,.chip{background:transparent;border:1px solid transparent;font-size:.85rem;font-weight:650}
.segmented button{min-height:39px;padding:.4rem .78rem;border-radius:6px}
.segmented button[aria-pressed=true]{background:var(--green);color:white}
.segmented button[aria-pressed=false]:hover{background:#e0e6d9}
.language-toggle{display:flex;gap:.48rem;align-items:center;min-height:44px;padding-inline:.25rem;cursor:pointer;font-size:.86rem;font-weight:650;color:#435744}
.language-toggle input{width:17px;height:17px;margin:0;accent-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.35rem .75rem;min-height:36px;border-color:#dedfd2;border-radius:25px;color:#465a45}
.chip:hover,.chip[aria-pressed=true]{background:#e0e8da;border-color:#92a58d;color:#284934}
.result-count{margin:1rem 0 .65rem;color:#56624f;font-size:.84rem;font-weight:600}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.2rem 1.25rem 1.1rem;border:1px solid #e0dfd2;border-radius:13px;background:var(--paper);transition:border-color .18s}
.card:hover{border-color:#a7b59e}
.card-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.94rem}
.product-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;background:#e5ebdf;color:#42634b;flex:none}
.product-icon .icon{width:23px;height:23px;stroke-width:1.5}
.tone-peach{background:#f3e4d9;color:#775143}
.tone-wheat{background:#f0e8d2;color:#6a5b32}
.tone-lilac{background:#ede5ee;color:#67506b}
.tone-blue{background:#e1ebe9;color:#3f6261}
.card-label{color:#4f634d;font-size:.71rem;font-weight:720;letter-spacing:.09em;text-transform:uppercase;text-align:right}
.card-label[lang=es]{color:#66506b}
.card h3{font-size:clamp(1.55rem,2.55vw,2.2rem);letter-spacing:-.025em;margin-bottom:.49rem}
.card p{color:var(--muted);font-size:.92rem;line-height:1.53;margin-bottom:.62rem}
.card .text-link{justify-content:flex-start;border:0;background:none;padding:0;margin-top:auto}
.empty{grid-column:1/-1;background:var(--paper);border:1px dashed #b9c2b2;padding:1.4rem;border-radius:11px}
.empty h3{font-size:1.85rem;margin-bottom:.45rem}
.empty p{color:var(--muted);margin-bottom:.85rem}
.show-more-area{text-align:center}
.show-more-area button{margin-top:1.3rem}

.about{padding:clamp(3.6rem,7.4vw,6.5rem) 0}
.about-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,8vw,7rem);align-items:center}
.about h2{font-size:clamp(2.4rem,4.15vw,3.85rem)}
.about-copy .text-link{margin-top:.8rem}
.faq{border-top:1px solid #dedfd3}
.faq details{border-bottom:1px solid #dedfd3}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;padding:.83rem 0;font-weight:650;font-size:.95rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq details p{padding:0 1.25rem .9rem 0;color:var(--muted);font-size:.91rem}
.faq details p a{color:var(--green);text-underline-offset:.18em}
.site-footer{background:#e9ede1;border-top:1px solid #dce3d4;padding:1.3rem 0}
.footer-inner>a:not(.brand){font-size:.88rem;font-weight:650}
.footer-inner .brand{margin-right:auto}

dialog{width:min(560px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:1px solid #c6cdbb;border-radius:16px;color:var(--ink);background:var(--paper);box-shadow:0 22px 70px #26372854;overscroll-behavior:contain}
dialog::backdrop{background:#24382c80}
.dialog-inner{position:relative;padding:clamp(1.2rem,5vw,2.1rem)}
.close-dialog{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;width:43px;height:43px;border:1px solid #dedfd2;border-radius:50%;background:#f4f3eb}
.close-dialog:hover{background:#e6ebdf}
.dialog-content .eyebrow{margin:.8rem 0 .55rem}
.dialog-content h2{font-size:clamp(2.1rem,7.5vw,3.15rem);margin-bottom:.65rem}
.dialog-content>p:not(.eyebrow){color:var(--muted);font-size:.95rem}
.dialog-content h3{font:750 .75rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-top:1.2rem}
.dialog-content ul{list-style:none;padding:0;margin:.55rem 0 1rem}
.dialog-content li{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.28rem;font-size:.94rem}
.dialog-content li svg{color:#4a6b50;transform:translateY(3px)}
.dialog-content .button{margin-top:.7rem}
.dialog-content .platforms{font-size:.81rem;margin:.85rem 0 .15rem}
.dialog-content .shop-note{font-size:.81rem!important;margin-top:.55rem}

@media(max-width:1000px){
  .wrap{width:calc(100% - 64px)}
  .hero-grid{gap:1.55rem}
}
@media(max-width:800px){
  .hero-break{display:none}
  .hero-grid{grid-template-columns:1fr;gap:1.55rem}
  .hero-copy{padding:0;max-width:590px}
  .hero-figure{width:min(100%,555px);justify-self:center}
  h1{font-size:clamp(3.45rem,10vw,5.25rem)}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid{grid-template-columns:1fr;gap:1.7rem}
  .about-copy{max-width:560px}
}
@media(max-width:530px){
  .wrap{width:calc(100% - 36px)}
  .header-inner{min-height:67px;gap:.35rem}
  .brand{font-size:1.2rem;gap:.42rem}
  .brand-mark{width:29px;height:29px}
  .brand-mark svg{width:16px;height:16px}
  .main-nav{gap:.6rem;font-size:.76rem}
  .main-nav a[href="#about"]{display:none}
  .header-shop{padding:.45rem .55rem;min-height:44px;gap:.19rem}
  .hero{padding:2.8rem 0 2.55rem}
  h1{font-size:clamp(3rem,12vw,4.4rem);margin:.9rem 0 .95rem}
  .hero-intro{font-size:1.01rem}
  .hero-actions{margin:1.2rem 0 .85rem;gap:.38rem .82rem}
  .figure-art{border-radius:14px;min-height:0}
  .filter-panel{padding:.7rem}
  .filter-top{flex-wrap:wrap;gap:.2rem;padding-bottom:.4rem}
  .segmented{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .segmented button{padding:.35rem .28rem}
  .language-toggle{min-height:36px}
  .chips{gap:.35rem}
  .chip{min-height:40px;padding:.27rem .59rem;font-size:.8rem}
  .card-grid{grid-template-columns:1fr;gap:.7rem}
  .card{padding:.94rem 1rem .8rem}
  .card-top{margin-bottom:.65rem}
  .card h3{font-size:1.82rem}
  .catalog,.about{padding:3rem 0}
  .footer-inner{flex-wrap:wrap;column-gap:.85rem;row-gap:.75rem}
  .footer-inner .brand{width:100%}
}
@media(max-width:410px){
  .main-nav a[href="#workbooks"]{display:none}
}
@media(max-width:355px){
  .brand{font-size:1.05rem}
  .brand-mark{width:26px;height:26px}
  .header-shop{padding-inline:.45rem;font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}

/* Blog pages */
.main-nav [aria-current=page]{text-decoration:underline;text-underline-offset:.25em}
.blog-hero{padding:clamp(3.2rem,8vw,6.8rem) 0 clamp(2.5rem,6vw,4.7rem)}
.blog-hero h1{font-size:clamp(3rem,7vw,5.6rem);max-width:880px;margin:.92rem 0 .75rem}
.blog-hero h1 em{white-space:normal}
.blog-hero .hero-intro{max-width:600px}
.blog-list{background:#f2f1e8;border-block:1px solid #e7e7d9;padding:clamp(2.35rem,6vw,4.2rem) 0}
.blog-list h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:1.15rem}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:1rem}
.blog-grid .card{max-width:625px}
.blog-grid h3 a{text-decoration:none}
.blog-grid h3 a:hover{text-decoration:underline;text-underline-offset:.13em}
.blog-grid .card .text-link{font-size:.9rem}
.post-wrap{width:min(100% - 88px,740px);margin-inline:auto;padding:clamp(2.65rem,6.6vw,5.6rem) 0}
.post-wrap .back-link{display:inline-block;margin-bottom:1.7rem;color:var(--green);font-weight:650;text-underline-offset:.23em}
.post-wrap h1{font-size:clamp(2.85rem,7vw,5.1rem);margin:.72rem 0 .9rem;text-wrap:balance}
.post-deck{font-size:clamp(1.08rem,2vw,1.25rem);color:var(--muted);line-height:1.55}
.post-copy{margin-top:1.65rem;border-top:1px solid var(--line);padding-top:1.5rem}
.post-copy>p,.post-copy li{font-size:1.04rem;color:var(--muted)}
.post-copy h2{font-size:clamp(1.75rem,4vw,2.65rem);margin:1.95rem 0 .55rem;letter-spacing:-.032em}
.post-copy ol,.post-copy ul{padding-left:1.3rem;margin:0 0 1.2rem}
.post-copy li+li{margin-top:.57rem}
.post-copy p+p{margin-top:.75rem}
.post-example{margin:1rem 0 1.25rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.post-example table{width:100%;border-collapse:collapse;font-size:.93rem}
.post-example caption{text-align:left;font-weight:700;padding:.65rem .8rem;background:#e5ebdf}
.post-example th,.post-example td{text-align:left;padding:.47rem .8rem}
.post-example thead,.post-example tbody tr+tr{border-top:1px solid var(--line)}
.post-example th:last-child,.post-example td:last-child{text-align:right}
.post-cta{border:1px solid #dce3d4;background:#e9eee3;border-radius:13px;margin-top:2rem;padding:1.05rem 1.2rem}
.post-cta h2{margin:0 0 .43rem;font-size:clamp(1.55rem,4vw,2.2rem)}
.post-cta p{margin:0 0 .75rem;color:var(--muted)}
@media(max-width:530px){
  .post-wrap{width:calc(100% - 36px)}
}
@media(max-width:410px){
  .main-nav .nav-workbooks{display:none}
}
@media(max-width:355px){
  .main-nav .header-shop{display:none}
}