/* The self-hosted Yomogi subset contains only the two Japanese sketch labels. */
@font-face {
    font-family:"MemoPatch Sketch";
    src:url("/assets/fonts/yomogi-connect-ja.ttf") format("truetype");
    font-style:normal;
    font-weight:400;
    font-display:swap
}

:root {
    --paper:#f8f9f3;
    --white:#fff;
    --ink:#293b2d;
    --muted:#687267;
    --green:#365844;
    --mint:#e7eddf;
    --line:#dfe5d8;
    --yellow:#f8e7a4;
    --pink:#f0d9d5;
    --blue:#dce8ed;
    --font:"Avenir Next","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    font-size:15px;
    line-height:1.9;
    -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,figure {
    margin:0
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit
}

img,svg {
    vertical-align:middle
}

button,a {
    -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #517244;
    outline-offset:5px
}

button {
    cursor:pointer
}

::selection {
    background:#c8d9bb;
    color:#23392a
}

[hidden] {
    display:none!important
}

.container {
    width:min(1200px,calc(100% - 96px));
    margin-inline:auto
}

.lp-icon {
    width:22px;
    height:22px;
    flex-shrink:0
}

.skip-link {
    position:fixed;
    left:20px;
    top:-100px;
    z-index:100;
    background:var(--white);
    border:1px solid var(--green);
    padding:10px 20px
}

.skip-link:focus {
    top:12px
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgb(248 249 243 / 96%);
    border-bottom:1px solid rgb(223 229 216 / 70%)
}

.header-inner {
    height:88px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:9px;
    white-space:nowrap;
    font-size:25px;
    font-weight:750;
    letter-spacing:-1.2px;
    line-height:1
}

.brand-dot {
    color:#90a884
}

.site-nav {
    display:flex;
    align-items:center;
    gap:31px;
    font-size:13px;
    font-weight:600
}

.site-nav>a:not(.button) {
    padding-block:12px
}

.site-nav>a:not(.button):hover {
    color:#658554
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-height:58px;
    padding:14px 23px;
    background:var(--green);
    border:1px solid var(--green);
    border-radius:7px;
    color:white;
    font-weight:650;
    font-size:14px;
    line-height:1.5;
    transition:background .2s,box-shadow .2s,transform .2s
}

.button:hover {
    background:#274733;
    box-shadow:0 6px 18px rgb(41 70 45 / 12%);
    transform:translateY(-2px)
}

.button-small {
    min-height:44px;
    padding:10px 17px;
    gap:20px;
    font-size:12px
}

.button-small .lp-icon {
    width:18px
}

.nav-toggle {
    display:none;
    border:1px solid var(--line);
    border-radius:5px;
    background:transparent;
    width:44px;
    height:44px;
    padding:12px
}

.nav-toggle span {
    display:block;
    height:1.5px;
    background:var(--green);
    margin:5px 0;
    transition:transform .2s
}

.hero {
    overflow:hidden;
    background:radial-gradient(ellipse at 80% 60%,#edf1e7 0,transparent 58%)
}

.hero-layout {
    display:grid;
    grid-template-columns:.9fr 1.25fr;
    align-items:center;
    gap:40px;
    min-height:680px;
    padding-top:44px;
    padding-bottom:55px
}

.hero-copy {
    position:relative;
    z-index:2
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    color:#5e7051;
    letter-spacing:2.1px;
    font-size:10px;
    font-weight:700;
    line-height:1.6
}

.eyebrow-dot {
    width:6px;
    height:6px;
    background:#8ca27d;
    border-radius:50%
}

.hero h1 {
    font-size:clamp(46px,4.8vw,66px);
    font-weight:650;
    letter-spacing:-4px;
    line-height:1.3;
    margin:27px 0 23px;
    white-space:nowrap
}

.hero-highlight {
    position:relative;
    z-index:0
}

.hero-highlight:after {
    content:"";
    position:absolute;
    left:0;
    right:-9px;
    bottom:5px;
    height:19px;
    background:url("/assets/crayon-underline.svg") center / 100% 100% no-repeat;
    z-index:-1;
    transform:rotate(-2deg)
}

.hero h1 small {
    display:block;
    font-size:16px;
    font-weight:600;
    letter-spacing:.5px;
    margin-top:21px;
    line-height:1.8;
    white-space:normal
}

.hero-description {
    font-size:14px;
    line-height:2.25;
    color:#667260;
    margin-bottom:28px
}

.cta-note {
    font-size:11px;
    color:#5e7051;
    margin:9px 0 28px
}

.hero-benefits {
    display:flex;
    gap:20px;
    list-style:none;
    padding:0;
    margin:0;
    font-size:10px;
    color:#5e7051
}

.hero-benefits li {
    display:flex;
    align-items:center;
    gap:5px
}

.hero-benefits .lp-icon {
    width:14px;
    height:14px;
    color:#739465
}

.hero-visual {
    position:relative;
    width:100%;
    min-width:0;
    align-self:center;
    margin:0;
    padding:0 7px
}

.hero-demo-label {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    margin:0 12px 18px 0;
    font-size:12px;
    font-weight:600;
    color:#5e7051
}
.hero-demo-label>span { font-size:26px; line-height:1; color:#a9b898 }
.hero-demo-board {
    border:1px solid #dde3d5;
    border-radius:10px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 22px 55px rgb(68 82 49 / 9%),0 3px 6px rgb(53 71 41 / 3%);
    transform:rotate(-1deg)
}
.hero-demo-scene { display:block; width:100%; height:auto; aspect-ratio:640/500 }
.hero-demo-scene foreignObject { overflow:visible }
.hero-demo-brand,.hero-demo-board-name {
    display:flex;
    align-items:center;
    height:100%;
    font-size:11px;
    line-height:1.3;
    color:#65735c
}
.hero-demo-brand { gap:6px; font-weight:700; color:#465b3e }
.hero-demo-board-name { justify-content:center; font-size:10px }
.hero-demo-heading { font-size:16px; color:#68845c; line-height:35px; letter-spacing:1px }
.hero-demo-paper { filter:drop-shadow(2px 4px 4px rgb(66 74 35 / 10%)) }
.hero-demo-note-label { font-size:10px; line-height:1.45; color:#68745d }
.hero-demo-note-text { font-size:14px; font-weight:550; line-height:1.6; color:#536344 }
.hero-demo-blue .hero-demo-note-text { color:#51646c }
.hero-demo-tag {
    display:table;
    padding:1px 5px;
    border:1px solid rgb(70 90 40 / 15%);
    border-radius:3px;
    font-size:8px;
    line-height:1.5;
    letter-spacing:1px;
    color:#65735c
}
.hero-demo-cursor { opacity:0; pointer-events:none }
.hero-demo-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:54px;
    margin-top:20px
}
.hero-demo-steps {
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
    font-size:12px;
    font-weight:600;
    color:#7c8774;
    line-height:1.4
}
.hero-demo-steps li { display:flex; align-items:center; gap:6px; transition:color .2s }
.hero-demo-steps li>span { font-size:9px; font-weight:500; letter-spacing:1px; opacity:.65 }
.hero-demo-steps .is-active { color:#365844 }
.hero-demo-steps .is-complete { color:#5e7051 }
.hero-demo-steps .is-active>span { opacity:1; color:#365844 }
.hero-demo-toggle {
    display:grid;
    place-items:center;
    flex:0 0 40px;
    height:40px;
    padding:9px;
    border:1px solid #d8e0d0;
    border-radius:50%;
    background:rgb(255 255 255 / 70%);
    color:#536c48
}
.hero-demo-toggle:hover { background:#e7eddf }
.hero-demo-toggle svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.hero-demo-toggle-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.hero-demo-play-icon { display:none }
[data-demo-state="paused"] .hero-demo-pause-icon,[data-demo-state="finished"] .hero-demo-pause-icon { display:none }
[data-demo-state="paused"] .hero-demo-play-icon,[data-demo-state="finished"] .hero-demo-play-icon { display:block }
.hero-demo-progress-track { height:2px; background:#e4e9dc; border-radius:2px; overflow:hidden }
[data-demo-progress] { display:block; height:100%; background:#91a77d; transform-origin:left; transform:scaleX(1) }
.hero-visual figcaption { margin:12px 0 0; text-align:center; font-size:11px; color:#5e7051; line-height:1.8 }
.hero-visual figcaption>span { display:block; margin-top:3px; font-size:9px; color:#637358 }

/* One shared 12-second timeline: write (0–4s), arrange (4–8s), connect (8–12s). */
[data-demo-ready] :is(.hero-demo-note,.hero-demo-writing,.hero-demo-arrow,.hero-demo-sparkles,.hero-demo-cursor,[data-demo-progress]) {
    animation-duration:12s;
    animation-fill-mode:both;
    animation-timing-function:linear;
    animation-play-state:var(--demo-play-state,paused)
}
[data-demo-ready] [data-demo-progress] { animation-name:hero-demo-progress }
[data-demo-ready] .hero-demo-yellow { animation-name:hero-demo-yellow }
[data-demo-ready] .hero-demo-writing { animation-name:hero-demo-writing }
[data-demo-ready] .hero-demo-green { animation-name:hero-demo-green }
[data-demo-ready] .hero-demo-pink { animation-name:hero-demo-pink }
[data-demo-ready] .hero-demo-blue { animation-name:hero-demo-blue }
[data-demo-ready] .hero-demo-arrow { stroke-dasharray:1; stroke-dashoffset:0 }
[data-demo-ready] .hero-demo-arrow-one { animation-name:hero-demo-arrow-one }
[data-demo-ready] .hero-demo-arrow-two { animation-name:hero-demo-arrow-two }
[data-demo-ready] .hero-demo-arrow-three { animation-name:hero-demo-arrow-three }
[data-demo-ready] .hero-demo-sparkles { animation-name:hero-demo-sparkles; transform-origin:580px 36px }
[data-demo-ready] .hero-demo-cursor { animation-name:hero-demo-cursor }
@keyframes hero-demo-progress { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes hero-demo-yellow {
    0% { opacity:0; transform:translate(45px,39px) }
    7%,33% { opacity:1; transform:translate(25px,17px) }
    43%,100% { opacity:1; transform:translate(0,0) }
}
@keyframes hero-demo-writing {
    0%,10% { clip-path:inset(0 100% 0 0) fill-box; animation-timing-function:steps(18,end) }
    28%,100% { clip-path:inset(0 0 0 0) fill-box }
}
@keyframes hero-demo-green {
    0%,34% { opacity:0; transform:translate(16px,24px) }
    43%,100% { opacity:1; transform:translate(0,0) }
}
@keyframes hero-demo-pink {
    0%,43% { opacity:0; transform:translate(-20px,12px) }
    52%,100% { opacity:1; transform:translate(0,0) }
}
@keyframes hero-demo-blue {
    0%,51% { opacity:0; transform:translate(20px,12px) }
    61%,100% { opacity:1; transform:translate(0,0) }
}
@keyframes hero-demo-arrow-one { 0%,67% { stroke-dashoffset:1 } 77%,100% { stroke-dashoffset:0 } }
@keyframes hero-demo-arrow-two { 0%,78% { stroke-dashoffset:1 } 85%,100% { stroke-dashoffset:0 } }
@keyframes hero-demo-arrow-three { 0%,85% { stroke-dashoffset:1 } 94%,100% { stroke-dashoffset:0 } }
@keyframes hero-demo-sparkles { 0%,89% { opacity:0; transform:scale(.7) } 96%,100% { opacity:1; transform:scale(1) } }
@keyframes hero-demo-cursor {
    0%,5% { opacity:0; transform:translate(121px,139px) }
    10% { opacity:1; transform:translate(121px,139px) }
    28% { opacity:1; transform:translate(234px,157px) }
    33% { opacity:1; transform:translate(222px,106px) }
    43% { opacity:1; transform:translate(197px,89px) }
    49% { opacity:1; transform:translate(418px,116px) }
    61% { opacity:1; transform:translate(460px,296px) }
    67% { opacity:1; transform:translate(271px,134px) }
    72% { opacity:1; transform:translate(316px,117px) }
    77% { opacity:1; transform:translate(360px,135px) }
    78% { opacity:0; transform:translate(481px,226px) }
    80% { opacity:1; transform:translate(481px,226px) }
    85% { opacity:1; transform:translate(477px,249px) }
    87% { opacity:0; transform:translate(354px,325px) }
    88% { opacity:1; transform:translate(354px,325px) }
    94% { opacity:1; transform:translate(283px,328px) }
    98%,100% { opacity:0; transform:translate(301px,359px) }
}

.hero-bottom {
    border-top:1px solid var(--line);
    height:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:9px;
    letter-spacing:1.8px;
    color:#637358
}

.hero-bottom a {
    font-size:11px;
    letter-spacing:.3px
}

.hero-bottom a span {
    display:inline-block;
    margin-left:21px;
    font-size:18px
}

.section {
    padding:106px 0
}

.section-kicker {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:9px;
    letter-spacing:2px;
    font-weight:650;
    color:#617354;
    margin-bottom:28px;
    line-height:1.7
}

.section-kicker>span {
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    border:1px solid #d9e2d0;
    border-radius:50%;
    font-size:9px;
    letter-spacing:0
}

.section h2,.sharing-section h2 {
    font-size:36px;
    letter-spacing:-1.7px;
    line-height:1.6;
    font-weight:600
}

.section-intro {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    margin-bottom:58px
}

.section-intro>p {
    width:35%;
    font-size:13px;
    color:var(--muted);
    line-height:2.2
}

.features-section {
    background:#fff
}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px
}

.feature-art {
    position:relative;
    display:grid;
    place-items:center;
    height:218px;
    overflow:hidden;
    border-radius:6px;
    margin-bottom:25px
}

.art-notes {
    background:#f5f6ec
}

.mini-note {
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:46%;
    height:61%;
    padding:20px 16px;
    font-size:11px;
    box-shadow:1px 5px 8px rgb(64 71 38 / 7%)
}

.mini-note span {
    font-size:7px;
    letter-spacing:1.5px
}

.mini-green {
    background:#dde6c9;
    left:14%;
    top:14%;
    transform:rotate(-9deg)
}

.mini-yellow {
    background:#f7e9ac;
    right:12%;
    bottom:13%;
    transform:rotate(9deg)
}

.art-mark {
    position:absolute;
    top:20px;
    right:26px;
    font-size:29px;
    color:#a7b78e
}

.art-drawing {
    background:#eff3ea
}

.drawing-word {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:20px;
    line-height:1.35;
    text-align:center;
    color:#5d7b54;
    overflow-wrap:break-word
}

html:lang(ja) .drawing-word {
    font-family:"MemoPatch Sketch",var(--font);
    font-weight:400
}

.art-drawing .connect-sketch {
    display:block;
    width:100%;
    height:100%;
    max-width:380px
}

.art-list {
    background:#f2f1ec
}

.mini-list {
    width:80%;
    background:white;
    border:1px solid #e6e5dc;
    box-shadow:1px 5px 9px rgb(56 68 49 / 4%);
    border-radius:6px;
    transform:rotate(-3deg);
    padding:13px 14px;
    font-size:9px
}

.mini-list>span {
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 0;
    border-bottom:1px solid #edf0e7
}

.mini-list>span:last-child {
    border:0
}

.mini-list .mini-list-label {
    font-weight:600;
    color:#587548;
    padding:0 0 10px
}

.mini-list .lp-icon {
    width:13px;
    height:13px
}

.mini-list small {
    font-size:6px;
    letter-spacing:.7px;
    margin-left:auto;
    color:#617354
}

.list-dot {
    width:10px;
    height:10px;
    border:1px solid rgb(90 105 60 / 10%);
    border-radius:2px;
    flex-shrink:0
}

.yellow-dot {
    background:#f7e7a7
}

.green-dot {
    background:#d6e1bf
}

.pink-dot {
    background:#ecd7d1
}

.feature-number {
    font-size:8px;
    color:#65745a;
    letter-spacing:1.6px;
    margin-bottom:10px
}

.feature-item h3 {
    font-size:17px;
    letter-spacing:-.6px;
    font-weight:600;
    line-height:1.7;
    margin-bottom:12px
}

.feature-item>p:last-child {
    font-size:13px;
    color:#707967;
    line-height:2.2
}

.usecases-section {
    background:#f1f4ea;
    padding-block:112px
}

.usecases-layout {
    display:grid;
    grid-template-columns:.9fr 1.3fr;
    gap:85px;
    align-items:center
}

.usecases-copy h2 {
    margin-bottom:23px
}

.usecases-copy>p:not(.section-kicker) {
    font-size:12px;
    color:#5d7051;
    line-height:2.2
}

.usecase-tabs {
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:4px;
    max-width:320px
}

.usecase-tabs button {
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    min-height:50px;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    padding:10px 14px;
    color:#596e4e;
    font-size:12px
}

.usecase-tabs button>span {
    font-size:9px;
    color:#627554
}

.usecase-tabs button .lp-icon {
    width:17px;
    height:17px;
    margin-left:auto;
    opacity:0
}

.usecase-tabs button[aria-selected=true] {
    background:#fff;
    border-color:#dce4d2;
    color:#365844;
    box-shadow:0 2px 4px rgb(53 65 43 / 2%);
    font-weight:600
}

.usecase-tabs button[aria-selected=true] .lp-icon {
    opacity:1
}

.usecase-tabs button:hover {
    border-color:#dce4d2
}

.usecases-fallback {
    font-size:12px;
    padding-left:20px
}

.usecase-panel {
    min-width:0
}

.usecase-board {
    background:#fbfcf7;
    border:1px solid #dce4d2;
    border-radius:8px;
    box-shadow:0 12px 28px rgb(49 74 40 / 5%);
    overflow:hidden;
    transform:rotate(1.5deg)
}

.usecase-board-header {
    display:flex;
    align-items:center;
    gap:10px;
    padding:21px 22px;
    border-bottom:1px solid #e5eadd;
    background:#fff;
    font-size:12px
}

.usecase-board-icon {
    color:#779367
}

.usecase-board-icon .lp-icon {
    width:18px;
    height:18px
}

.usecase-board-header strong {
    font-size:12px;
    font-weight:600
}

.example-badge {
    margin-left:auto;
    font-size:8px;
    white-space:nowrap;
    padding:3px 8px;
    border:1px solid #e1e7d7;
    border-radius:4px;
    color:#60774e
}

.usecase-columns {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    padding:31px 23px 26px;
    background-image:radial-gradient(#d6dfcc .7px,transparent .7px);
    background-size:15px 15px
}

.column-label {
    display:block;
    text-align:center;
    font-size:9px;
    color:#637358;
    margin-bottom:19px;
    white-space:nowrap
}

.usecase-note {
    position:relative;
    min-height:163px;
    aspect-ratio:1/.98;
    padding:14px 13px 24px;
    box-shadow:2px 5px 7px rgb(72 81 42 / 6%);
    border-radius:1px;
    color:#526342
}

.case-yellow {
    background:var(--yellow);
    transform:rotate(-4deg)
}

.case-green {
    background:#dce6c7;
    transform:rotate(2deg)
}

.case-pink {
    background:var(--pink);
    transform:rotate(-2deg)
}

.usecase-note>small {
    font-size:7px;
    letter-spacing:1px;
    line-height:1.4;
    display:block;
    margin-bottom:16px
}

.usecase-note p {
    font-size:11px;
    line-height:2;
    white-space:pre-line
}

.usecase-note>span {
    position:absolute;
    bottom:10px;
    right:14px;
    font-size:23px;
    line-height:1;
    color:rgb(95 112 70 / 50%)
}

.usecase-board-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 25px 22px;
    font-size:11px;
    color:#60754f
}

.handwriting {
    font-family:cursive,var(--font);
    letter-spacing:.5px;
    transform:rotate(-2deg)
}

.usecase-board-footer>span:last-child {
    font-size:25px
}

.usecase-description {
    min-height:56px;
    font-size:11px;
    line-height:2.1;
    color:#5e7051;
    margin:23px 5px 0
}

.steps-section {
    background:#fff
}

.steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:50px;
    list-style:none;
    padding:0;
    margin:0
}

.steps li {
    position:relative;
    border-top:1px solid var(--line);
    padding:30px 0 0
}

.step-number {
    display:block;
    color:#7b916c;
    font-size:42px;
    font-weight:500;
    letter-spacing:-2px;
    line-height:1;
    margin-bottom:22px
}

.steps h3 {
    font-size:17px;
    font-weight:600;
    letter-spacing:-.3px;
    margin-bottom:12px
}

.steps p {
    font-size:13px;
    color:#67755e;
    line-height:2.2
}

.steps a {
    display:inline-flex;
    align-items:center;
    gap:15px;
    font-size:11px;
    font-weight:600;
    margin-top:16px;
    color:#527148
}

.steps a .lp-icon {
    width:16px;
    height:16px
}

.sharing-section {
    background:#365844;
    color:#fff;
    padding:100px 0 105px
}

.sharing-layout {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:85px;
    align-items:center
}

.sharing-section .section-kicker {
    color:#b7caaa
}

.sharing-section .section-kicker>span {
    border-color:#6e8a69
}

.sharing-copy h2 {
    margin-bottom:23px;
    letter-spacing:-1.3px
}

.sharing-copy>p:not(.section-kicker) {
    font-size:12px;
    line-height:2.3;
    color:#d2dec9
}

.sharing-benefits {
    list-style:none;
    padding:0;
    margin:28px 0 29px;
    display:flex;
    flex-direction:column;
    gap:15px;
    font-size:12px;
    color:#d9e3d1
}

.sharing-benefits li {
    display:flex;
    align-items:center;
    gap:12px
}

.sharing-benefits .lp-icon {
    width:18px;
    height:18px;
    color:#afcba0
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:20px;
    font-size:12px;
    font-weight:600;
    color:#527447;
    line-height:1.7;
    border-bottom:1px solid #b7c7a8;
    padding-bottom:7px
}

.text-link .lp-icon {
    width:16px;
    height:16px
}

.light-link {
    color:#edf3e7;
    border-color:#829d78
}

.saving-comparison {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px
}

.saving-comparison article {
    background:#44634d;
    border:1px solid #5b785d;
    border-radius:7px;
    padding:26px 22px 23px;
    position:relative;
    min-width:0
}

.saving-comparison article:last-child {
    background:#e9efdf;
    color:#34543b;
    border-color:#e9efdf;
    transform:translateY(29px)
}

.saving-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid #71896d;
    border-radius:8px;
    color:#c3d5b3;
    margin-bottom:35px
}

.saving-comparison article:last-child .saving-icon {
    border-color:#cbd7bf;
    color:#6d8a5c
}

.saving-label {
    display:block;
    font-size:10px;
    color:#d1dfc7;
    margin-bottom:7px
}

.saving-comparison article:last-child .saving-label {
    color:#5b714e
}

.saving-comparison h3 {
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    letter-spacing:-.4px;
    margin-bottom:19px
}

.saving-comparison p {
    font-size:10px;
    line-height:2.2;
    color:#d0dfc5
}

.saving-comparison article:last-child p {
    color:#566d48
}

.saving-caption {
    display:block;
    font-size:7px;
    letter-spacing:1.3px;
    color:#d1dfc7;
    border-top:1px solid #64805f;
    padding-top:17px;
    margin-top:25px
}

.saving-comparison article:last-child .saving-caption {
    color:#5b714e;
    border-color:#cddabf
}

.faq-section {
    background:var(--paper);
    padding-block:109px
}

.faq-layout {
    display:grid;
    grid-template-columns:.8fr 1.5fr;
    gap:83px
}

.faq-section h2 {
    font-size:30px;
    margin-bottom:14px
}

.faq-intro {
    font-size:12px;
    color:#5e7051;
    margin-bottom:25px
}

.faq-list {
    border-top:1px solid #d9e2cf
}

.faq-list details {
    border-bottom:1px solid #d9e2cf
}

.faq-list summary {
    list-style:none;
    position:relative;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    min-height:79px;
    padding:22px 2px;
    font-size:13px;
    font-weight:550;
    line-height:1.9
}

.faq-list summary::-webkit-details-marker {
    display:none
}

.faq-plus {
    position:relative;
    display:block;
    width:16px;
    height:16px;
    flex-shrink:0
}

.faq-plus:before,.faq-plus:after {
    content:"";
    position:absolute;
    top:7px;
    left:1px;
    width:14px;
    height:1px;
    background:#6f8861
}

.faq-plus:after {
    transform:rotate(90deg);
    transition:transform .15s
}

details[open] .faq-plus:after {
    transform:rotate(0)
}

.faq-list details>p {
    font-size:13px;
    color:#5e7051;
    line-height:2.25;
    padding:0 34px 25px 2px
}

.final-section {
    padding-bottom:85px
}

.final-panel {
    position:relative;
    text-align:center;
    background:#e9efdf;
    border:1px solid #dce5d0;
    border-radius:8px;
    overflow:hidden;
    padding:60px 25px 63px
}

.final-panel .eyebrow {
    justify-content:center;
    color:#5b714e;
    font-size:8px;
    letter-spacing:1.9px;
    position:relative
}

.final-panel h2 {
    font-size:41px;
    font-weight:600;
    letter-spacing:-2px;
    line-height:1.6;
    margin:22px 0 15px;
    position:relative
}

.final-panel>p:not(.eyebrow) {
    font-size:12px;
    color:#5b714e;
    margin-bottom:24px
}

.final-panel .button {
    position:relative;
    min-width:275px
}

.final-note {
    display:block;
    font-size:9px;
    color:#5b714e;
    margin-top:13px;
    position:relative
}

.final-decoration {
    position:absolute;
    top:41%;
    left:13%;
    font-size:105px;
    line-height:1;
    color:#c8d7b7;
    transform:rotate(-8deg)
}

.final-sticky {
    position:absolute;
    right:7%;
    bottom:20%;
    display:flex;
    flex-direction:column;
    gap:19px;
    text-align:left;
    background:#f7e6a5;
    box-shadow:1px 5px 9px rgb(83 91 48 / 7%);
    padding:21px 23px;
    width:145px;
    font-size:10px;
    color:#808359;
    line-height:2.1;
    transform:rotate(10deg)
}

.final-sticky>span {
    font-size:25px;
    line-height:1;
    align-self:flex-end
}

.site-footer {
    background:#fff;
    border-top:1px solid #e2e7da;
    padding:37px 0 24px
}

.footer-top {
    display:flex;
    align-items:center;
    gap:40px;
    padding-bottom:30px;
    border-bottom:1px solid #edf0e7
}

.footer-top .brand {
    font-size:21px
}

.footer-top nav {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:29px;
    margin-left:auto;
    font-size:11px;
    color:#647457
}

.footer-top nav a {
    padding:10px 0
}

.back-to-top {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid #dfe7d5;
    border-radius:50%;
    color:#5e7051;
    line-height:1;
    font-size:18px
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:9px;
    color:#637358;
    padding-top:20px
}

.footer-bottom>span:last-child {
    letter-spacing:1px
}

@media(min-width:1400px) {
    .hero-layout {
        min-height:720px
    }
}

@media(max-width:1100px) {
    .container {
        width:calc(100% - 64px)
    }
    .hero-layout {
        gap:25px;
        min-height:615px
    }
    .hero h1 {
        font-size:55px
    }
    .hero h1 small {
        font-size:14px;
        letter-spacing:0
    }
    .hero-description {
        font-size:12px
    }
    .site-nav {
        gap:23px
    }
    .feature-grid {
        gap:24px
    }
    .feature-item h3 {
        font-size:15px
    }
    .section h2,.sharing-section h2 {
        font-size:31px
    }
    .usecases-layout {
        gap:44px
    }
    .usecase-columns {
        padding:28px 17px;
        gap:11px
    }
    .usecase-note {
        min-height:150px;
        padding:12px 10px 25px
    }
    .usecase-note p {
        font-size:10px
    }
    .sharing-layout {
        gap:38px
    }
    .saving-comparison {
        gap:12px
    }
    .saving-comparison article {
        padding:24px 16px 20px
    }
    .saving-comparison p br {
        display:none
    }
    .saving-comparison h3 {
        font-size:12px
    }
    .faq-layout {
        gap:48px
    }
    .final-decoration {
        left:9%
    }
    .final-sticky {
        right:5%;
        width:128px;
        padding:20px 17px
    }
    .steps {
        gap:35px
    }
}

@media(max-width:860px) {
    .header-inner {
        height:74px;
        flex-wrap:wrap;
        position:relative
    }
    .brand {
        font-size:23px
    }
    .nav-toggle:not([hidden]) {
        display:block
    }
    .site-nav {
        width:100%;
        flex-wrap:wrap;
        gap:8px 22px
    }
    .js .site-nav {
        display:none
    }
    html:not(.js) .header-inner {
        height:auto;
        min-height:74px;
        padding-block:18px
    }
    .js .site-nav.is-open {
        display:flex;
        position:absolute;
        top:74px;
        left:-32px;
        right:-32px;
        width:auto;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        padding:17px 32px 24px;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        box-shadow:0 8px 12px rgb(47 65 35 / 4%)
    }
    .site-nav.is-open>a {
        min-height:44px;
        padding:12px 4px
    }
    .site-nav.is-open>.button {
        padding:13px 17px;
        margin-top:8px
    }
    .nav-toggle[aria-expanded=true] span:first-child {
        transform:translateY(3.25px) rotate(45deg)
    }
    .nav-toggle[aria-expanded=true] span:last-child {
        transform:translateY(-3.25px) rotate(-45deg)
    }
    .hero-layout {
        grid-template-columns:1fr 1fr;
        gap:27px;
        min-height:590px;
        padding-block:50px
    }
    .hero h1 {
        font-size:48px;
        letter-spacing:-3px;
        margin-top:24px
    }
    .hero h1 small {
        font-size:13px;
        max-width:260px
    }
    .hero-description {
        font-size:11px
    }
    .desktop-break {
        display:none
    }
    .hero-copy .button {
        font-size:12px;
        padding-inline:17px;
        gap:17px;
        min-height:52px
    }
    .hero-benefits {
        gap:11px;
        font-size:9px;
        flex-wrap:wrap
    }
    .section {
        padding:80px 0
    }
    .section-intro {
        margin-bottom:40px
    }
    .section h2,.sharing-section h2 {
        font-size:29px
    }
    .section-intro>p {
        width:40%;
        font-size:12px
    }
    .feature-grid {
        gap:19px
    }
    .feature-art {
        height:165px
    }
    .mini-note {
        font-size:8px;
        padding:12px
    }
    .feature-item h3 {
        font-size:13px
    }
    .feature-item>p:last-child {
        font-size:11px
    }
    .mini-list {
        padding:10px 8px;
        font-size:7px;
        width:85%
    }
    .mini-list>span {
        gap:5px;
        padding:9px 0
    }
    .mini-list small {
        display:none
    }
    .usecases-layout {
        grid-template-columns:1fr;
        gap:36px
    }
    .usecases-copy {
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:30px
    }
    .usecases-copy .section-kicker,.usecases-copy>p {
        grid-column:1
    }
    .usecases-copy h2 {
        grid-column:1;
        grid-row:2
    }
    .usecase-tabs {
        grid-column:2;
        grid-row:2 / 4;
        align-self:center;
        margin:0;
        max-width:none
    }
    .usecase-panel {
        max-width:660px;
        width:100%;
        margin-inline:auto
    }
    .usecase-columns {
        padding:34px 29px;
        gap:22px
    }
    .usecase-note {
        min-height:165px;
        padding:17px 18px
    }
    .usecase-note p {
        font-size:12px
    }
    .usecase-board-header strong {
        font-size:13px
    }
    .usecase-note>small {
        font-size:8px
    }
    .column-label {
        font-size:10px
    }
    .usecase-description {
        font-size:12px;
        min-height:0
    }
    .sharing-section {
        padding:80px 0 92px
    }
    .sharing-layout {
        grid-template-columns:1fr;
        gap:37px
    }
    .sharing-copy {
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:35px
    }
    .sharing-copy .section-kicker,.sharing-copy h2,.sharing-copy>p {
        grid-column:1
    }
    .sharing-copy h2 {
        grid-row:2
    }
    .sharing-copy .sharing-benefits {
        grid-column:2;
        grid-row:2 / 4;
        align-self:center;
        margin:0;
        gap:20px
    }
    .sharing-copy .text-link {
        grid-column:1;
        width:max-content;
        margin-top:22px
    }
    .saving-comparison {
        max-width:640px;
        gap:23px
    }
    .saving-comparison article {
        padding:26px
    }
    .saving-comparison h3 {
        font-size:16px
    }
    .saving-comparison p {
        font-size:12px
    }
    .saving-icon {
        margin-bottom:23px
    }
    .saving-comparison article:last-child {
        transform:translateY(17px)
    }
    .faq-layout {
        grid-template-columns:1fr;
        gap:32px
    }
    .faq-section .text-link {
        margin-top:0
    }
    .faq-intro {
        margin-bottom:17px
    }
    .faq-list summary {
        font-size:13px
    }
    .final-decoration {
        left:4%;
        font-size:77px
    }
    .final-sticky {
        right:3%;
        width:104px;
        font-size:8px;
        padding:16px 13px
    }
    .final-panel h2 {
        font-size:35px
    }
    .footer-top {
        gap:20px
    }
    .footer-top nav {
        gap:18px;
        font-size:10px
    }
}

@media(max-width:600px) {
    html {
        scroll-padding-top:82px
    }
    .container {
        width:calc(100% - 40px)
    }
    .header-inner {
        height:70px
    }
    .brand {
        font-size:23px
    }
    .brand>img {
        width:31px;
        height:31px
    }
    .js .site-nav.is-open {
        top:70px;
        left:-20px;
        right:-20px;
        padding-inline:20px
    }
    .hero-layout {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:34px;
        padding:42px 0 18px
    }
    .hero-copy {
        padding:0 6px
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.6px
    }
    .hero h1 {
        font-size:58px;
        letter-spacing:-4px;
        margin:23px 0 21px;
        line-height:1.3
    }
    .hero h1 small {
        font-size:14px;
        max-width:none;
        margin-top:16px;
        letter-spacing:0
    }
    .hero-description {
        font-size:13px;
        line-height:2.2;
        max-width:380px;
        margin-bottom:24px
    }
    .hero-copy .button {
        min-height:55px;
        font-size:13px;
        padding:15px 19px;
        gap:28px
    }
    .cta-note {
        font-size:10px;
        margin-bottom:17px
    }
    .hero-benefits {
        gap:19px;
        font-size:10px
    }
    .hero-bottom {
        height:59px;
        margin-top:14px
    }
    .hero-bottom>span {
        font-size:7px;
        letter-spacing:1px;
        max-width:52%
    }
    .hero-bottom>a {
        font-size:10px;
        white-space:nowrap
    }
    .hero-bottom a span {
        margin-left:10px;
        font-size:16px
    }
    .section {
        padding:65px 0
    }
    .section-kicker {
        font-size:8px;
        letter-spacing:1.5px;
        margin-bottom:21px
    }
    .section h2,.sharing-section h2 {
        font-size:28px;
        letter-spacing:-1.2px;
        line-height:1.65
    }
    .section-intro {
        display:block;
        margin-bottom:35px
    }
    .section-intro>p {
        width:auto;
        font-size:12px;
        margin-top:21px
    }
    .section-intro>p br {
        display:none
    }
    .feature-grid {
        grid-template-columns:1fr;
        gap:37px
    }
    .feature-art {
        height:220px;
        margin-bottom:21px
    }
    .mini-note {
        font-size:12px;
        padding:18px;
        max-width:170px
    }
    .mini-green {
        left:16%
    }
    .mini-yellow {
        right:15%
    }
    .mini-note span {
        font-size:8px
    }
    .art-mark {
        right:15%;
        top:22px
    }
    .mini-list {
        font-size:10px;
        padding:14px;
        width:76%;
        max-width:300px
    }
    .mini-list>span {
        padding:12px 0;
        gap:9px
    }
    .mini-list small {
        display:block;
        font-size:7px
    }
    .mini-list .lp-icon {
        width:15px;
        height:15px
    }
    .feature-number {
        font-size:8px;
        margin-bottom:7px
    }
    .feature-item h3 {
        font-size:17px;
        margin-bottom:9px
    }
    .feature-item>p:last-child {
        font-size:13px;
        line-height:2.2
    }
    .usecases-layout {
        gap:29px
    }
    .usecases-copy {
        display:block
    }
    .usecases-copy h2 br:nth-of-type(1) {
        display:none
    }
    .usecases-copy h2 {
        margin-bottom:18px
    }
    .usecases-copy>p:not(.section-kicker) {
        font-size:12px
    }
    .usecase-tabs {
        margin-top:22px;
        gap:4px
    }
    .usecase-tabs button {
        font-size:12px;
        min-height:49px;
        padding-inline:14px
    }
    .usecase-board {
        transform:rotate(1deg)
    }
    .usecase-board-header {
        padding:16px 14px;
        gap:8px
    }
    .usecase-board-header strong {
        font-size:11px
    }
    .example-badge {
        font-size:7px;
        padding:2px 6px
    }
    .usecase-columns {
        padding:26px 13px 22px;
        gap:9px
    }
    .column-label {
        font-size:8px;
        margin-bottom:13px;
        letter-spacing:-.5px
    }
    .usecase-note {
        min-height:175px;
        padding:12px 9px 26px;
        aspect-ratio:auto
    }
    .usecase-note p {
        font-size:11px;
        line-height:2
    }
    .usecase-note>small {
        font-size:6px;
        letter-spacing:.5px;
        margin-bottom:13px
    }
    .usecase-note>span {
        font-size:19px;
        right:10px
    }
    .usecase-board-footer {
        font-size:9px;
        padding:4px 15px 18px
    }
    .usecase-description {
        font-size:11px;
        line-height:2.1;
        margin:20px 0 0
    }
    .steps {
        grid-template-columns:1fr;
        gap:29px
    }
    .steps li {
        padding:23px 0 0;
        display:grid;
        grid-template-columns:49px 1fr;
        column-gap:14px
    }
    .step-number {
        grid-column:1;
        grid-row:1 / 4;
        font-size:34px;
        letter-spacing:-1px;
        margin:5px 0 0
    }
    .steps h3,.steps p,.steps a {
        grid-column:2
    }
    .steps h3 {
        font-size:16px;
        margin-bottom:9px
    }
    .steps p {
        font-size:12px
    }
    .steps a {
        margin-top:10px;
        justify-self:start
    }
    .sharing-section {
        padding:64px 0 69px
    }
    .sharing-layout {
        gap:31px
    }
    .sharing-copy {
        display:block
    }
    .sharing-copy h2 {
        margin-bottom:20px
    }
    .sharing-copy>p:not(.section-kicker) {
        font-size:12px
    }
    .sharing-copy .sharing-benefits {
        margin:24px 0;
        gap:17px;
        font-size:11px
    }
    .sharing-copy .text-link {
        margin:0;
        font-size:11px
    }
    .saving-comparison {
        gap:12px
    }
    .saving-comparison article {
        padding:20px 13px 17px
    }
    .saving-comparison article:last-child {
        transform:translateY(14px)
    }
    .saving-label {
        font-size:9px;
        letter-spacing:-.3px
    }
    .saving-comparison h3 {
        font-size:11px;
        letter-spacing:-.3px;
        white-space:normal;
        margin-bottom:15px
    }
    .saving-comparison p {
        font-size:10px;
        line-height:2.15
    }
    .saving-icon {
        margin-bottom:23px;
        width:33px;
        height:33px
    }
    .saving-caption {
        font-size:6px;
        letter-spacing:.7px;
        margin-top:19px;
        padding-top:13px
    }
    .faq-layout {
        gap:25px
    }
    .faq-section h2 {
        font-size:27px;
        margin-bottom:10px
    }
    .faq-intro {
        font-size:11px
    }
    .faq-list summary {
        font-size:13px;
        min-height:73px;
        padding-block:20px;
        gap:18px
    }
    .faq-list details>p {
        font-size:13px;
        padding-right:12px;
        padding-bottom:23px
    }
    .final-section {
        padding-bottom:55px
    }
    .final-panel {
        padding:46px 18px 49px;
        border-radius:6px
    }
    .final-panel .eyebrow {
        font-size:7px;
        letter-spacing:1.2px
    }
    .final-panel h2 {
        font-size:32px;
        letter-spacing:-1.7px;
        line-height:1.6;
        margin-top:19px
    }
    .final-panel>p:not(.eyebrow) {
        font-size:11px;
        margin-bottom:22px
    }
    .final-panel .button {
        min-width:0;
        font-size:12px;
        min-height:54px;
        gap:27px;
        padding:14px 18px
    }
    .final-decoration {
        top:30%;
        left:-13px;
        font-size:74px;
        opacity:.6
    }
    .final-sticky {
        right:-20px;
        bottom:auto;
        top:35%;
        font-size:0;
        width:73px;
        height:76px;
        gap:0;
        padding:13px;
        opacity:.45;
        transform:rotate(16deg);
        pointer-events:none
    }
    .final-sticky>span {
        font-size:25px;
        margin-top:auto
    }
    .final-note {
        font-size:8px
    }
    .site-footer {
        padding:30px 0 20px
    }
    .footer-top {
        flex-wrap:wrap;
        gap:20px;
        padding-bottom:22px
    }
    .footer-top .brand {
        font-size:22px
    }
    .footer-top nav {
        order:3;
        width:100%;
        justify-content:flex-start;
        gap:19px;
        font-size:10px;
        margin:0;
        flex-wrap:wrap
    }
    .back-to-top {
        margin-left:auto
    }
    .footer-bottom {
        font-size:8px;
        padding-top:17px
    }
}

@media(max-width:360px) {
    .container {
        width:calc(100% - 32px)
    }
    .hero-copy {
        padding-inline:1px
    }
    .hero h1 {
        font-size:52px
    }
    .hero h1 small {
        font-size:12px
    }
    .hero-copy .button {
        font-size:12px;
        gap:20px
    }
    .feature-item h3 {
        font-size:15px
    }
    .usecase-note {
        padding:10px 7px 25px;
        min-height:135px
    }
    .usecase-note p {
        font-size:8px
    }
    .column-label {
        font-size:7px
    }
    .saving-comparison article {
        padding-inline:11px
    }
    .saving-comparison h3 {
        font-size:10px
    }
    .saving-comparison p {
        font-size:9px
    }
    .saving-caption {
        font-size:5px
    }
    .final-panel h2 {
        font-size:29px
    }
    .footer-top nav {
        gap:14px
    }
    .js .site-nav.is-open {
        left:-16px;
        right:-16px;
        padding-inline:16px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
    .button:hover {
        transform:none
    }
}

@media(prefers-contrast:more) {
    :root {
        --muted:#455342
    }
.eyebrow,.section-kicker,.feature-number,.hero-description,.cta-note,.hero-benefits,.hero-bottom,.feature-item>p:last-child,.usecases-copy>p,.usecase-description,.steps p,.faq-intro,.faq-list details>p,.footer-top nav,.footer-bottom {
        color:#47583d
    }
    .saving-comparison p,.saving-label {
        color:#e7efdf
    }
    .saving-comparison article:last-child p,.saving-comparison article:last-child .saving-label {
        color:#4d6341
    }
}

@media print {
    .site-header,.nav-toggle,.site-footer,.button,.final-section,.usecase-tabs {
        display:none!important
    }
    .container {
        width:100%
    }
    .hero-layout {
        min-height:0;
        grid-template-columns:1fr 1fr
    }
    .section,.sharing-section {
        padding:30px 0;
        break-inside:avoid
    }
    .hero h1 {
        font-size:40px
    }
    .sharing-section {
        background:#fff;
        color:#293b2d
    }
    .sharing-copy>p:not(.section-kicker),.sharing-benefits {
        color:#293b2d
    }
    .faq-list details>p {
        display:block
    }
    details {
        break-inside:avoid
    }
}

@media(max-width:600px) {
    .saving-comparison {
        grid-template-columns:1fr;
        gap:16px
    }
    .saving-comparison article {
        padding:24px
    }
    .saving-comparison article:last-child {
        transform:none
    }
    .saving-comparison h3 {
        font-size:17px
    }
    .saving-comparison p {
        font-size:13px
    }
    .saving-label {
        font-size:11px
    }
    .saving-caption {
        font-size:9px
    }
    .saving-icon {
        margin-bottom:21px
    }
    .saving-comparison p br {
        display:none
    }
}

/* Japanese subject line inside each section heading; the English kicker above it is decoration. */
.heading-label {
    display:block;
    margin-bottom:10px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.6px;
    line-height:1.6;
    color:#5e7051
}

.sharing-section .heading-label {
    color:#c5d6b9
}

/* Every use case is in the page; with scripting only the selected one is shown. */
.js .usecase-panel {
    overflow:hidden;
    width:calc(100% + 28px);
    padding:14px;
    margin:-14px;
    isolation:isolate
}
.js .usecase-example:not(.is-active) {
    display:none
}

html:not(.js) .usecase-example+.usecase-example {
    margin-top:28px
}

.footer-operator {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 26px;
    padding-top:20px;
    font-size:11px;
    color:#5e7051
}

.footer-operator a {
    padding:6px 0;
    text-decoration:underline;
    text-underline-offset:3px
}

/* Phone text stays readable: Japanese copy, including the use-case examples, is at least 11px.
   The English kickers and the miniature board in the hero are decoration and keep their size. */
@media(max-width:600px) {
    .column-label,.usecase-note p,.usecase-board-footer .handwriting {
        font-size:11px
    }
    .example-badge {
        font-size:10px
    }
    .heading-label {
        font-size:12px;
        margin-bottom:8px
    }
    .cta-note,.hero-benefits,.faq-intro {
        font-size:12px
    }
    .usecase-description,.sharing-copy .sharing-benefits,.sharing-copy .text-link,.final-panel>p:not(.eyebrow) {
        font-size:13px
    }
    .footer-top nav,.footer-operator {
        font-size:12px
    }
    .footer-bottom {
        font-size:11px
    }
    .steps a,.text-link {
        min-height:44px
    }
    .steps a {
        font-size:13px
    }
    .hero-bottom>a,.saving-comparison .saving-label {
        font-size:12px
    }
    .final-panel .final-note {
        font-size:11px
    }
}

/* The selector is a native disclosure: language links also work without scripts. */
.language-menu {
    position:relative;
    flex-shrink:0
}
.language-menu summary {
    min-height:44px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid var(--line);
    border-radius:7px;
    cursor:pointer;
    list-style:none
}
.language-menu summary::-webkit-details-marker {
    display:none
}
.language-menu summary:after {
    content:"";
    flex:0 0 6px;
    width:6px;
    height:6px;
    margin-left:3px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg)
}
.language-options {
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:30;
    min-width:180px;
    max-height:360px;
    overflow-y:auto;
    padding:7px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--paper);
    box-shadow:0 8px 25px rgb(41 59 45 / 12%)
}
.language-options a {
    display:block;
    min-height:40px;
    padding:6px 12px;
    border-radius:5px
}
.language-options a:hover,.language-options a[aria-current] {
    background:var(--mint)
}
.text-asterisk { width:1em; height:1em; vertical-align:-.12em }
.footer-bottom { align-items:center; flex-wrap:wrap }
.site-footer .language-menu { margin-left:auto; font-size:12px }
.site-footer .language-options { left:auto; right:0; top:auto; bottom:calc(100% + 8px) }
.site-nav {
    gap:20px
}
.hero-copy,.feature-item,.usecases-copy,.usecase-panel,.sharing-copy {
    min-width:0
}
html:not(:lang(ja)) .hero h1 {
    letter-spacing:-.035em;
    white-space:normal;
    font-size:clamp(38px,4.5vw,64px)
}
html:not(:lang(ja)) .hero h1 small {
    letter-spacing:0
}
html:not(:lang(ja)) h2 {
    letter-spacing:-.025em;
    overflow-wrap:break-word
}
html:not(:lang(ja)) .hero-description br {
    display:none
}
html:not(:lang(ja)) .column-label {
    white-space:normal;
    min-height:3em;
    line-height:1.5;
    overflow-wrap:break-word
}
html:not(:lang(ja)) .usecase-note {
    aspect-ratio:auto;
    min-height:180px;
    height:calc(100% - 4.5em)
}
html:not(:lang(ja)) .usecase-note p {
    line-height:1.6;
    overflow-wrap:anywhere
}
html:not(:lang(ja)) .usecase-note small {
    overflow-wrap:anywhere;
    letter-spacing:0
}
html:not(:lang(ja)) .saving-comparison h3 {
    white-space:normal
}
html:not(:lang(ja)) .mini-list>span {
    overflow-wrap:anywhere
}
html:not(:lang(ja)) .drawing-word {
    font-size:16px
}
@media (min-width:861px) and (max-width:1150px) {
    .header-inner { gap:16px }
    .site-nav { gap:12px; font-size:11px }
    .site-nav .button-small { padding:9px 12px; gap:10px }
    .language-menu summary { padding-inline:7px }
}
@media (max-width:860px) {
    .language-options { left:0; right:auto; max-height:280px }
    .language-menu { align-self:flex-start; margin-block:5px }
    html:not(:lang(ja)) .hero h1 { font-size:42px }
}
@media (max-width:600px) {
    html:not(:lang(ja)) .hero h1 { font-size:clamp(38px,10.5vw,54px) }
    html:not(:lang(ja)) .usecase-note { min-height:185px }
    html:not(:lang(ja)) .usecase-note p { font-size:11px }
    html:not(:lang(ja)) .final-panel h2 { font-size:29px }
    .hero-benefits { flex-wrap:wrap; gap:9px 18px }
}

/* Stack the hero before the illustrative board becomes too small to read. */
@media (max-width:960px) {
    .hero-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; min-height:0; padding-block:42px 30px }
    .hero-copy { width:100%; max-width:640px; margin-inline:auto }
    .hero-visual { max-width:680px; margin-inline:auto }
}
@media (max-width:600px) {
    .hero-layout { gap:34px; padding-block:36px 20px }
    .hero-demo-label { font-size:11px; margin-bottom:15px }
    .hero-demo-controls { margin-top:14px; gap:8px }
    .hero-demo-steps { font-size:11px; gap:12px }
    .hero-demo-steps li { gap:4px }
}
@media (prefers-reduced-motion:reduce), print {
    .hero-demo-cursor,.hero-demo-toggle { display:none }
    [data-demo-ready] :is(.hero-demo-note,.hero-demo-writing,.hero-demo-arrow,.hero-demo-sparkles,[data-demo-progress]) { animation:none!important }
}

/* Each example has its own board layout: SWOT, an idea map, and a task board. */
.usecase-canvas {
    min-height:352px;
    padding:22px;
    background-image:radial-gradient(#d6dfcc .7px,transparent .7px);
    background-size:15px 15px
}
.usecase-board .usecase-canvas .usecase-note {
    min-height:0;
    height:auto;
    aspect-ratio:auto;
    padding:12px 14px;
    border-radius:2px
}
.usecase-board .usecase-canvas .usecase-note>small {
    margin-bottom:8px;
    font-size:7px;
    line-height:1.5;
    letter-spacing:.7px;
    overflow-wrap:anywhere
}
.usecase-board .usecase-canvas .usecase-note p {
    font-size:11px;
    line-height:1.75;
    white-space:normal;
    overflow-wrap:anywhere
}
.case-blue {
    background:var(--blue);
    transform:rotate(2deg)
}
.usecase-board-business { transform:rotate(-1deg) }
.usecase-board-ideas { transform:rotate(1deg) }
.usecase-board-project { transform:rotate(-.5deg) }
.analysis-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    min-height:308px
}
.analysis-quadrant {
    min-width:0;
    padding:10px 14px 12px;
    border:1px dashed #cfdac5;
    border-radius:5px;
    background:rgb(255 255 255 / 45%)
}
.analysis-label {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
    color:#60754f
}
.analysis-label>span {
    font-size:18px;
    font-weight:600;
    line-height:1
}
.analysis-label strong {
    font-size:10px;
    font-weight:500
}
.analysis-quadrant .usecase-note { margin-inline:4px }
.idea-map {
    position:relative;
    height:308px
}
.idea-connections {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    color:#82996e
}
.idea-hub {
    position:absolute;
    left:38%;
    top:43%;
    width:26%;
    min-height:67px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    padding:10px 8px;
    border:1.5px solid #95ab82;
    border-radius:45% 48% 44% 49%;
    background:#edf2e6;
    transform:rotate(-4deg);
    text-align:center
}
.idea-hub>span {
    color:#799367;
    font-size:18px;
    line-height:1
}
.idea-hub strong {
    font-size:11px;
    line-height:1.5;
    font-weight:500
}
.idea-node {
    position:absolute;
    width:34%
}
.idea-node-0 { top:0; left:2% }
.idea-node-1 { top:2%; right:2% }
.idea-node-2 { bottom:0; right:7% }
.idea-node .column-label {
    margin-bottom:7px;
    white-space:normal;
    font-size:9px;
    line-height:1.5
}
.usecase-board .idea-node .usecase-note { min-height:112px }
.project-columns {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    min-height:308px
}
.project-column {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:15px
}
.project-label {
    display:flex;
    align-items:center;
    gap:6px;
    min-height:30px;
    padding-bottom:9px;
    border-bottom:1px solid #dce4d2;
    color:#637358
}
.project-label i {
    flex:0 0 5px;
    height:5px;
    border-radius:50%;
    background:#c6a643
}
.project-column:nth-child(2) .project-label i { background:#809765 }
.project-column:nth-child(3) .project-label i { background:#be918b }
.project-label strong {
    font-size:9px;
    line-height:1.5;
    font-weight:500
}
.project-label>span {
    margin-left:auto;
    font-size:8px;
    color:#819374
}
.usecase-board .project-column .usecase-note {
    min-height:114px;
    padding:12px 11px 9px;
    transform:rotate(-2deg)
}
.project-column .usecase-note:nth-child(3) { transform:rotate(2deg) }
.project-note-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
    color:#7e906c
}
.project-assignee {
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border:1px solid rgb(83 104 66 / 16%);
    border-radius:50%;
    background:rgb(255 255 255 / 45%);
    font-size:8px
}
.project-note-footer .lp-icon { width:14px; height:14px }
.usecase-board .usecase-board-footer {
    min-height:52px;
    padding:8px 22px 16px;
    gap:12px
}
@media (max-width:860px) {
    .js .usecase-panel {
        max-width:688px;
        width:100%;
        margin:-14px auto
    }
}
@media (max-width:600px) {
    .js .usecase-panel { width:calc(100% + 28px); margin:-14px }
    .usecase-canvas { padding:20px 14px; min-height:352px }
    .analysis-grid { gap:10px }
    .analysis-quadrant { padding:10px 8px 12px }
    .analysis-label { gap:6px }
    .analysis-label strong { font-size:9px }
    .analysis-quadrant .usecase-note { margin-inline:1px }
    .usecase-board .usecase-canvas .usecase-note { padding:10px 9px }
    .usecase-board .usecase-canvas .usecase-note>small { font-size:6px; letter-spacing:.3px }
    .usecase-board .usecase-canvas .usecase-note p { font-size:10px; line-height:1.7 }
    .idea-map {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:26px 20px;
        height:auto;
        min-height:380px;
        align-items:start
    }
    .idea-hub {
        position:relative;
        grid-column:1 / -1;
        grid-row:2;
        justify-self:center;
        left:auto;
        top:auto;
        width:38%;
        padding:10px 5px
    }
    .idea-hub strong { font-size:10px }
    .idea-node { position:relative; inset:auto; width:100% }
    .idea-node-0 { grid-column:1; grid-row:1 }
    .idea-node-1 { grid-column:2; grid-row:1 }
    .idea-node-2 { grid-column:2; grid-row:3 }
    .idea-node .column-label { font-size:9px; letter-spacing:0 }
    .usecase-board .idea-node .usecase-note { min-height:121px }
    .project-columns { gap:10px }
    .project-column { gap:14px }
    .project-label { gap:4px }
    .project-label strong { font-size:8px }
    .usecase-board .project-column .usecase-note { padding:10px 8px 8px }
    .usecase-board .usecase-board-footer { padding:8px 14px 16px; font-size:9px }
}

.templates-section { background:#edf1e6 }
.template-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px }
.template-preview-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s,box-shadow .2s }
.template-preview-card:hover { border-color:#96ad86; box-shadow:0 8px 24px #36584412 }
.template-preview-art { display:block; padding:14px; background:#f8faf4; border-bottom:1px solid var(--line) }
.template-preview-art img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:contain; background:#fff; border-radius:4px }
.template-preview-copy { display:flex; flex-direction:column; flex:1; padding:24px; gap:12px }
.template-preview-copy h3 { font-size:18px; line-height:1.6; font-weight:600; overflow-wrap:anywhere }
.template-preview-copy p { flex:1; font-size:12px; line-height:2; color:var(--muted); overflow-wrap:anywhere }
.template-preview-action { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; font-size:12px; font-weight:600; color:var(--green) }
.templates-browse { display:flex; justify-content:center; margin-top:42px }
.templates-browse .button { text-align:center }
@media (max-width:960px) {
    .template-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px }
}
@media (max-width:600px) {
    .template-preview-grid { grid-template-columns:minmax(0,1fr); gap:24px }
    .template-preview-copy { padding:22px }
    .templates-browse .button { max-width:100%; padding-inline:20px; font-size:12px }
}
@media (prefers-reduced-motion:reduce), print {
    .template-preview-card { transition:none }
}