/* v4 */
:root{--section-wash:#e9f3e8;--edge:#a9c7ae}
.comparison-frame{padding:0 0 18px;border-bottom:1px solid #bacfbe}
.ticks .sub{margin-top:20px;padding-top:16px;border-top:1px dashed #a9c7ae;font-size:16px!important;font-weight:400;color:var(--ink);line-height:2}
.comparison-caption{width:fit-content;max-width:100%;margin:20px auto 0;padding:8px 18px;background:#f1f5ee;border-radius:6px;text-align:center;color:var(--sub)}
.comparison-frame+.ba-note{margin-top:18px}
main>section.products-section{position:relative;border:0;background:#fffefa;padding-block:60px 64px!important;isolation:isolate}
.products-section:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:425px;background:var(--section-wash);border-radius:0 96px 0 0}
main>section.products-section>.wrap{padding-top:0}
main>section.products-section>.wrap:before{display:none}
.products-section .label{color:var(--main-deep);background:#fffefa;border:1px solid #bed2bf!important;border-radius:30px;padding:5px 16px!important;margin-bottom:18px;letter-spacing:.04em}
.products-section h2{max-width:18em}
.products-section .items{position:relative;border:0;padding:0 30px;background:#fffefa;gap:0 42px;margin-top:32px;border-radius:0 44px 0 0;box-shadow:0 0 0 1px #d0dfcf}
.products-section .items li{border-color:#d5e2d1;padding-block:28px}
.products-section .items li.main{margin:0 -30px;padding:36px 34px;background:#dcebd9;border:0;border-radius:0 44px 0 0;position:relative}
.products-section .items li.main b{font-size:24px;line-height:1.7;max-width:30em}
.products-section .items li.main .how{max-width:40em}
.products-section .items li.main+li,.products-section .items li.main+li+li{border-top:0}
main>section.process-section{background:#fffefa;padding-top:64px!important;position:relative}
main>section.process-section>.wrap>.label{border-left:3px solid var(--main)!important;padding-left:12px!important}
main>section.process-section>.wrap>h2{border:0;padding-bottom:0;margin-bottom:34px}
.process-section .steps{position:relative;border:0;border-radius:42px 0 0 0;background:linear-gradient(180deg,#e9f3e8 0 92px,#fffefa 92px);padding:26px 30px 0;gap:64px}
.process-section .step{position:relative;padding:0;border:0}
.process-section .step .no{width:48px;height:48px;margin-bottom:34px;border:3px solid #fffefa;outline:1px solid #bbd0bd;background:var(--main);font-size:23px}
.process-section .step:first-child:after{content:"";position:absolute;left:64px;right:-40px;top:24px;height:1px;background:#a4c2a9}
.process-section .step h3{font-size:23px;margin-bottom:18px}
.process-section .step p{max-width:29em}
.process-section .guidance{margin-top:28px;background:#edf5e9;border:0;border-left:4px solid var(--main);padding:24px 28px;border-radius:0 26px 26px 0}
#terms{background:#e9f3e8;border-top:0;border-radius:72px 0 0 0;padding-top:52px!important}
.conditions-sheet{position:relative;border:0;border-top:0;border-radius:28px 28px 0 0;background:#fffefa;padding:0 44px 36px;box-shadow:0 0 0 1px #c6d9c7}
.terms h2{margin:0 -44px 0;padding:28px 44px 24px;background:var(--main-deep);color:#fffefa;border:0;border-radius:28px 28px 0 0}
.terms .sum{padding-top:26px;margin-bottom:6px;max-width:47em}
.trow,.trow.key{grid-template-columns:9em minmax(0,1fr);gap:32px;padding:34px 0}
.trow dt{font-size:18px;line-height:1.8;font-weight:900;color:var(--main-deep);padding-top:2px}
.trow dd{max-width:43em}
.trow dd .answer{font-weight:700;line-height:2}
.trow:first-child dd>.answer:first-child{font-size:26px}
.trow:nth-child(-n+4) dt:before{content:"";display:block;width:26px;height:4px;margin-bottom:10px;border-radius:2px;background:#98bea3}
.trow dd small{font-size:16px!important;line-height:2;color:var(--ink);margin-top:18px}
.paragraph-gap{display:block;height:14px}
.trow.notice{grid-template-columns:9em minmax(0,1fr);gap:32px;background:#e4f0df;border:0;margin:12px -24px;padding:32px 24px;box-shadow:inset 4px 0 var(--main)}
.trow.notice dt{font-size:18px}
.trow.notice dd>.answer:first-child{font-size:18px;font-weight:900}
.trow small .d{border:0;padding:0;margin:26px 0 10px;font-size:16px!important;font-weight:700;color:var(--ink)}
@media(max-width:859px){
 .comparison-caption{padding:10px 12px;text-align:left;margin-top:18px}
 main>section.products-section{padding-block:48px 44px!important}
 .products-section:before{height:430px;border-radius:0 58px 0 0}
 .products-section .label{font-size:12px}
 .products-section .items{padding-inline:20px;border-radius:0 32px 0 0;margin-top:28px}
 .products-section .items li{padding-block:24px}
 .products-section .items li.main{margin-inline:-20px;padding:28px 20px;border-radius:0 32px 0 0}
 .products-section .items li.main b{font-size:20px;line-height:1.85}
 .products-section .items li.main+li+li{border-top:1px solid #d5e2d1}
 main>section.process-section{padding-top:48px!important}
 main>section.process-section>.wrap>h2{margin-bottom:28px}
 .process-section .steps{display:block;padding:24px 0 0;background:linear-gradient(90deg,#e9f3e8 0 54px,#fffefa 54px);border-radius:28px 0 0 0}
 .process-section .step{padding:0 0 28px 72px;min-height:82px}
 .process-section .step+.step{padding-top:12px;border-top:0}
 .process-section .step .no{position:absolute;left:6px;top:0;width:42px;height:42px;font-size:20px;margin:0}
 .process-section .step+.step .no{top:12px}
 .process-section .step:first-child:after{left:27px;right:auto;top:52px;bottom:0;height:auto;width:1px}
 .process-section .step h3{font-size:21px;margin-bottom:14px;line-height:1.65}
 .process-section .guidance{margin-top:0;padding:22px 20px;border-radius:0 24px 24px 0}
 #terms{border-radius:46px 0 0 0;padding-top:36px!important}
 .conditions-sheet{padding:0 20px 28px;border-radius:20px 20px 0 0}
 .terms h2{margin-inline:-20px;padding:24px 20px 20px;border-radius:20px 20px 0 0;line-height:1.55}
 .terms .sum{padding-top:24px;margin-bottom:0}
 .trow,.trow.key,.trow.notice{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:28px}
 .trow dt{font-size:18px;line-height:1.7;padding-top:0}
 .trow:nth-child(-n+4) dt:before{display:inline-block;vertical-align:middle;margin:0 10px 3px 0;width:18px;height:3px}
 .trow dd small{margin-top:16px}
 .trow.notice{margin:12px -12px;padding:28px 12px}
}
@media(max-width:359px){
 .products-section .items{padding-inline:16px}
 .products-section .items li.main{margin-inline:-16px;padding-inline:16px}
 .products-section .items li.main b{font-size:19px}
 .process-section .step{padding-left:62px}
 .process-section .steps{background:linear-gradient(90deg,#e9f3e8 0 48px,#fffefa 48px)}
 .process-section .step .no{left:4px;width:38px;height:38px}
 .process-section .step:first-child:after{left:23px}
 .process-section .step h3{font-size:20px}
 .conditions-sheet{padding-inline:16px}
 .terms h2{margin-inline:-16px;padding-inline:16px;font-size:24px}
 .trow.notice{margin-inline:-8px;padding-inline:8px}
}

/* v5: content-following surfaces and typographic hierarchy */
.products-section:before{inset:0;height:auto;border-radius:0 88px 0 0}
.products-section .items{overflow:hidden;box-shadow:none;border:1px solid #b8d0bc;border-radius:0 40px 0 0}
.products-section .items li.main{border-radius:0 40px 0 0}
.products-section .items li:not(.main) b{font-weight:700;font-size:19px;line-height:1.85}
.products-section .items .capacity{font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;font-size:16px;font-weight:400;white-space:nowrap;color:var(--ink)}
.products-section .items li:not(.main) .how{margin-top:12px!important}
.products-section .items li:last-child{grid-column:1/-1;border-top:1px solid #bed3c1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;align-items:start}
.products-section .items li:last-child .how{margin-top:0!important}
.ticks .sub>.example-label{display:block;font-weight:700;margin-bottom:10px}
.ticks .sub>br{display:none}
.ticks .sub>.rice-condition{display:block;font-size:16px;font-weight:400;color:var(--ink);line-height:2}
#terms{padding-top:72px!important}
@media(min-width:860px){
 .hero-art:before{inset:4% 0 14% 0}
 .hero-art>.cap{position:relative;margin-top:16px;text-align:right;width:100%;padding:0}
}
@media(max-width:859px){
 .products-section:before{border-radius:0 48px 0 0}
 .products-section .items{border-radius:0 30px 0 0}
 .products-section .items li.main{border-radius:0 30px 0 0}
 .products-section .items li:not(.main) b{font-size:18px}
 .products-section .items li:last-child{display:block;grid-column:auto}
 .products-section .items li:last-child .how{margin-top:12px!important}
 .process-section .steps{padding:0;background:none;border-radius:0}
 .process-section .step,.process-section .step+.step{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:18px;padding:0 0 30px;min-height:0;margin:0}
 .process-section .step+.step{border-top:1px solid #b8cdbb;padding-top:26px}
 .process-section .step .no,.process-section .step+.step .no{position:static;width:42px;height:42px;grid-column:1;grid-row:1;margin:0;align-self:center}
 .process-section .step h3{grid-column:2;grid-row:1;margin:0;align-self:center;font-size:21px}
 .process-section .step p{grid-column:1/-1;max-width:none;margin:0}
 .process-section .step:first-child:after{display:none}
 .process-section .guidance{margin-top:0}
 #terms{padding-top:54px!important}
}
@media(max-width:359px){
 .products-section .items li:not(.main) b{font-size:17px}
 .process-section .step,.process-section .step+.step{grid-template-columns:38px minmax(0,1fr);column-gap:12px}
 .process-section .step .no,.process-section .step+.step .no{width:38px;height:38px}
 .process-section .step h3{font-size:20px}
}
/* v6: finished scene art and section-owned paper frames */
.hero{background:#f2f7ed url("assets/frame-desktop.png") center top/cover no-repeat}
.hero-art:before{display:none}
.hero-art>.scene-art{display:block;position:relative;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:48px 8px 48px 8px;border:1px solid #c4d4bf}
.hero-art>.cap{margin-top:16px}
.ba-card{grid-template-rows:auto auto auto}
.ba-card>.scene-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;margin:22px auto;align-self:start;border-radius:4px}
.ba-card.before>.scene-art{filter:saturate(.55)}
main>section.products-section{background:#edf3e7;isolation:isolate}
.products-section:before{background:url("assets/frame-desktop.png") center top/100% auto no-repeat;border-radius:0}
.products-section>.wrap{position:relative}
.products-section .items{border-color:#a9c1a8;border-radius:0 40px 0 0}
.products-section .items li.main{background:#e0ecd9}
.products-section .pl{background:#fffefa;padding:20px 24px;margin-top:0;max-width:none;border-inline:1px solid #c2d3bd}
.products-section .pl+.pl{padding-top:0}
.products-section .pl:last-child{padding-bottom:28px;border-bottom:1px solid #c2d3bd}
main>section.process-section{background:#fffefa url("assets/frame-desktop.png") center top/100% auto no-repeat}
.process-section .steps{border-radius:36px 0 0 0;background:#fffefa;border:1px solid #bfceb7;border-top:6px solid #a4b995;padding:28px 30px;gap:64px}
.process-section .step .no{outline-color:#8aab83;margin-bottom:26px}
.process-section .step:first-child:after{background:#a4b995;top:24px}
.process-section .guidance{border:1px solid #bbcfb3;border-left:4px solid var(--main);border-radius:0;background:#edf3e7}
.process-section .step-source{background:#fffefa}
#terms{border-radius:0;background:#edf3e7 url("assets/frame-desktop.png") center top/100% 1000px no-repeat;padding-top:64px!important}
.conditions-sheet{padding-top:28px;border-radius:0;box-shadow:none;border:1px solid #adbea6;background:#fffefa}
.conditions-sheet>.label{display:block;width:fit-content;margin:0 0 24px;padding:0 0 0 12px;border-left:3px solid var(--main);background:none;line-height:1.9}
.terms h2{border-radius:0;margin-top:0;padding-top:28px;padding-bottom:28px}
.terms .sum{padding-top:32px;padding-bottom:10px}
.trow,.trow.key{border-top:1px solid #c3d2bb;gap:32px;padding-block:36px}
.trow dt{font-weight:900;font-size:18px;line-height:1.8}
.trow:nth-child(-n+4) dt:before{display:none}
.trow dd small{font-size:16px!important;line-height:2;color:var(--ink);font-weight:400;margin-top:20px}
.decision-row dd>.answer{font-size:18px;font-weight:700;line-height:1.9}
.trow.notice{margin-block:16px;padding-block:32px}
.trow.notice dd>.answer:first-child{font-size:19px}
.allergen-row small .d{display:block;width:fit-content;border-bottom:1px solid #96b08c;padding:0 0 8px;margin-top:32px;margin-bottom:16px;font-weight:700}
.allergen-row small .d+span{display:block;padding-left:16px;border-left:2px solid #c5d6bc}
.cond>.ln:nth-child(2)>.nb,.cond>.ln:nth-child(3)>.nb,.cond strong{font-weight:700}
.cond .ln{line-height:2}
.ref-name,.card-name{white-space:nowrap!important}
@media(min-width:860px){
 .hero-art{margin-top:68px}
 .hero-grid{align-items:start}
 .ba{align-items:start}
 .ba-card{padding-inline:24px}
 .ba-card>.scene-art{margin-block:22px 24px}
 .products-section .items{margin-top:36px}
 .conditions-sheet{padding-inline:44px}
}
@media(max-width:859px){
 .hero{background-image:url("assets/frame-mobile.png");background-size:100% auto}
 .hero-art>.scene-art{grid-row:3;justify-self:center;width:100%;height:auto;max-width:440px;margin:14px auto 0;border-radius:32px 4px 32px 4px;object-fit:contain}
 .hero-art>.cap{grid-row:4;text-align:left;margin:10px 0 22px}
 .ba-card>.scene-art{height:auto;margin:20px auto;max-width:440px;border-radius:4px}
 .products-section:before{background-image:url("assets/frame-mobile.png");background-size:100% auto}
 .products-section .pl{padding-inline:20px}
 main>section.process-section{background-image:url("assets/frame-mobile.png");background-size:100% auto}
 .process-section .steps{display:grid;grid-template-columns:1fr;padding:24px 20px 0;background:#fffefa;gap:0;border-radius:28px 0 0 0}
 .process-section .step,.process-section .step+.step{column-gap:14px;padding-bottom:28px;row-gap:18px}
 .process-section .step+.step{padding-top:28px}
 .process-section .step .no,.process-section .step+.step .no{margin:0}
 .process-section .guidance{margin-top:24px;padding:24px 20px}
 #terms{background-image:url("assets/frame-mobile.png");background-size:100% auto;padding-top:44px!important}
 .conditions-sheet{padding-top:24px;padding-inline:20px}
 .conditions-sheet>.label{margin-bottom:24px}
 .terms h2{padding-block:24px}
 .trow,.trow.key,.trow.notice{gap:16px;padding-block:30px}
 .trow dt{font-size:18px;line-height:1.8}
 .trow dt>span{border-bottom:2px solid #aec3a5;padding-bottom:6px;display:inline-block}
 .trow dd small{margin-top:20px}
 .decision-row dd>.answer{font-size:17px}
 .trow.notice dt>span{border-bottom-color:#7d9c73}
 .allergen-row small .d+span{padding-left:12px}
}
@media(max-width:359px){
 .hero-art>.scene-art{margin-top:12px}
 .products-section .pl{padding-inline:16px}
 .process-section .steps{padding-inline:16px}
 .process-section .guidance{padding-inline:16px}
 .process-section .step,.process-section .step+.step{grid-template-columns:38px minmax(0,1fr);column-gap:12px}
 .process-section .step .no,.process-section .step+.step .no{width:38px;height:38px}
 .conditions-sheet{padding-inline:16px}
}
/* Keep each generated frame continuous through its own section. */
.hero,main>section.process-section,#terms{background-size:100% 100%}
.products-section:before{background-size:100% 100%}
.products-section .wrap>.pl{border:0;background:transparent;padding:0;max-width:none!important}
.products-section .items~.pl{background:#fffefa;border-inline:1px solid #b8d0bc;padding:24px 30px 0;margin-top:0!important;max-width:none!important}
.products-section .items~.pl:last-child{border-bottom:1px solid #b8d0bc;padding-bottom:28px}
@media(max-width:859px){.products-section .items~.pl{padding-inline:20px}}
@media(max-width:359px){.products-section .items~.pl{padding-inline:16px}}
/* Native background proportions; a soft edge joins the section paper. */
.hero{isolation:isolate;background:#f2f7ed}
main>section.process-section{isolation:isolate;background:#fffefa}
#terms{position:relative;isolation:isolate;background:#edf3e7}
.hero:before,.products-section:before,.process-section:before,#terms:before{
 content:"";position:absolute;inset:0 0 auto;height:auto;aspect-ratio:3/2;z-index:-1;pointer-events:none;
 background:url("assets/frame-desktop.png") center top/100% 100% no-repeat;
 mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
}
.hero:before{z-index:0}
@media(max-width:859px){
 .hero:before,.products-section:before,.process-section:before,#terms:before{
  aspect-ratio:2/3;background-image:url("assets/frame-mobile.png");
 }
}

/* v7: quiet reading surfaces inside the existing generated paper frames. */
.hero .pr,.hero .cond,.hero-art>.cap{
 position:relative;background:#fffefa;box-shadow:0 0 0 10px #fffefa;
}
.hero .pr{padding-block:14px;margin-top:10px}
.hero .cond{padding-block:4px}
.hero-art>.cap{padding-block:4px}
.products-section>.wrap>.label,.products-section>.wrap>h2{
 position:relative;background:#edf3e7;box-shadow:0 0 0 10px #edf3e7;
}
.products-section .wrap>.pl{position:relative;background:#edf3e7;box-shadow:0 0 0 10px #edf3e7}
.products-section .items~.pl{background:#fffefa;box-shadow:none}
.process-section>.wrap>.label,.process-section>.wrap>h2,
.process-section .step-source,.process-section .final .cond{
 position:relative;background:#fffefa;box-shadow:0 0 0 10px #fffefa;
}
.comparison-caption{width:auto;margin:20px 0 0;padding:12px 16px;text-align:left;font-size:14px!important}
.hero .pr,.hero-art>.cap{font-size:13px!important;line-height:1.9}
.products-section .items .capacity{
 display:block;width:fit-content;margin-top:10px;padding:2px 10px;
 border-left:2px solid #a5bda0;background:#f0f5eb;
 font-size:16px;font-weight:400;line-height:1.8;
}
.products-section .items li.main .capacity{background:#f1f6ed}
.products-section .items li:last-child{display:block}
.products-section .items li:last-child .how{margin-top:12px!important}
.trow dt>span{
 display:inline-block;padding:5px 10px;background:#edf3e7;
 border-left:3px solid #a0b696;border-bottom:0;
}
.trow:not(:first-child):not(.notice) dd>.answer{font-weight:400}
.trow.decision-row:not(:nth-child(3)) dd>.answer:first-child{font-weight:700}
.trow.notice dt>span{background:#d6e6cf;border-left-color:var(--main)}
.ref-ending{white-space:nowrap}
@media(min-width:860px){
 .final{width:640px;max-width:100%;margin-inline:auto;align-items:flex-start;text-align:left}
 .final .cta{margin-inline:0}
 .final .cond{max-width:none;margin-inline:0}
 .hero-art{margin-top:60px}
 .hero-art>.scene-art{max-width:100%}
 .hero-art>.cap{text-align:left}
}
@media(max-width:859px){
 .hero .pr{margin-top:0;padding-block:14px}
 .trow dt>span{padding:5px 10px;border-bottom:0}
 .trow.notice dt>span{border-bottom:0}
}

/* Keep the short closing reference on one line, including its punctuation. */
.ref-ending wbr{display:none}