/* Feature showcase: editorial imagery, a creative preview and a compact toolkit. */
.asuka-page-main--features { padding: 36px 0 80px; background: #fff; }
.asuka-page-main--features .asuka-content-container { width: min(calc(100% - 64px),1320px); max-width: none; }
.is-features .asuka-prose > .asuka-features-v2 { max-width: none; }
.asuka-features-v2 { --feature-blue:#2457f5; --feature-ink:#172e55; --feature-muted:#5a6c86; color:var(--feature-ink); font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.7; }
.asuka-features-v2 * { box-sizing:border-box; }
.asuka-features-v2 :is(h1,h2,h3,p,figure) { margin:0; }
.asuka-features-v2 :is(h1,h2,h3) { font-family:'Outfit',sans-serif; font-weight:550; letter-spacing:-.04em; line-height:1.1; color:var(--feature-ink); }
.asuka-features-v2 h2 { font-size:clamp(32px,3.5vw,48px); }
.asuka-features-v2 h3 { font-size:22px; }
.asuka-features-v2 :is(a,button,input,summary):focus-visible { outline:3px solid #2457f5; outline-offset:5px; }
.asuka-features-v2 [hidden] { display:none !important; }
.asuka-features-v2 [id] { scroll-margin-top:110px; }
.asuka-features-v2 .feature-kicker { margin-bottom:20px; color:var(--feature-blue); font-size:11px; font-weight:750; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.feature-hero { display:grid; grid-template-columns:.83fr 1.17fr; align-items:center; gap:36px; min-height:550px; }
.feature-hero-copy { position:relative; z-index:1; padding:36px 0; }
.feature-hero h1 { font-size:clamp(48px,5.5vw,76px); line-height:1.04; letter-spacing:-.055em; font-weight:580; }
.feature-hero h1 span { display:block; color:var(--feature-blue); }
.feature-hero .feature-lead { max-width:440px; margin-top:28px; color:var(--feature-muted); font-size:18px; line-height:1.75; }
.feature-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:30px; }
.asuka-features-v2 .feature-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:14px 23px; border:1px solid var(--feature-blue); border-radius:9px; color:#fff; background:var(--feature-blue); font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 7px 20px #2457f517; transition:background .2s,transform .2s; }
.feature-button:hover { background:#1741c8; transform:translateY(-2px); }
.asuka-features-v2 .feature-text-link { display:inline-flex; align-items:center; gap:12px; color:#244cc4; font-weight:700; font-size:14px; text-decoration:none; line-height:1.5; }
.feature-text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.feature-hero .feature-free-note { margin-top:22px; font-size:12px; color:var(--feature-muted); }
.feature-free-note span { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:5px; color:var(--feature-blue); background:#edf3ff; border-radius:50%; }
.feature-hero-art { position:relative; min-width:0; }
.feature-hero-art > img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:24px; }
.feature-hero-art figcaption { position:absolute; bottom:15px; right:18px; padding:4px 10px; background:#ffffffce; border-radius:20px; font-size:10px; color:#3f5270; }
.feature-seal { position:absolute; left:-24px; bottom:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:125px; height:125px; border-radius:50%; background:#2457f5; color:#fff; font-size:10px; font-weight:600; line-height:1.6; text-align:center; transform:rotate(-10deg); box-shadow:0 10px 35px #152f7617; }
.feature-seal > span { font-size:32px; line-height:1.1; margin-bottom:8px; }
.feature-ribbon { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:28px 0; margin-top:18px; border-top:1px solid #e7edf5; border-bottom:1px solid #e7edf5; font-size:14px; font-weight:650; }
.feature-ribbon > span { display:flex; align-items:center; gap:13px; }
.feature-ribbon i { font-size:22px; font-style:normal; font-weight:400; color:var(--feature-blue); }
.feature-create { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:80px; padding:110px 40px 105px; }
.feature-editorial-copy > p:not(.feature-kicker) { margin-top:24px; color:var(--feature-muted); line-height:1.8; }
.feature-editorial-copy > .feature-text-link { margin-top:28px; }
.feature-mini-list { padding:0; margin:30px 0 0; list-style:none; display:flex; flex-direction:column; gap:12px; font-size:15px; }
.feature-mini-list li { display:flex; align-items:center; gap:12px; }
.feature-mini-list li > span { display:grid; place-items:center; width:25px; height:25px; background:#edf3ff; color:var(--feature-blue); border-radius:50%; font-weight:600; }
.feature-studio { min-width:0; background:#f1f5ff; border-radius:22px; box-shadow:0 20px 55px #274b8712; overflow:hidden; transform:rotate(1.5deg); }
.feature-studio-top { display:flex; align-items:center; justify-content:space-between; padding:17px 23px; background:#fff; border:1px solid #e9eef8; border-radius:22px 22px 0 0; font-size:12px; font-weight:650; }
.feature-studio-top > span:first-child { display:flex; align-items:center; gap:9px; }
.feature-studio-top i { width:7px; height:7px; background:var(--feature-blue); border-radius:50%; }
.feature-studio-top > span:last-child { font-size:21px; color:var(--feature-blue); }
.feature-studio-stage { position:relative; min-height:290px; background:radial-gradient(ellipse at 50% 30%,#fff 0%,#e5eeff 77%); padding:15px 20px 8px; }
.feature-studio-scribble { position:absolute; bottom:18px; right:18px; font:italic 16px Georgia,serif; color:#607aaa; transform:rotate(-8deg); z-index:1; }
.feature-studio-product { position:relative; width:min(100%,450px); aspect-ratio:4/3; margin:0 auto; transform:rotate(-6deg); }
.feature-studio-product > img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 8px #36557e1a); }
.feature-studio-print { position:absolute; left:35%; top:23%; width:30%; height:52%; color:var(--studio-ink); display:flex; flex-direction:column; align-items:center; font:650 30px/1 'Outfit',sans-serif; transform:rotate(1deg); mix-blend-mode:multiply; }
.feature-print-small { font-size:.21em; letter-spacing:.18em; margin:5px 0; }
.feature-print-art { display:block; width:85%; height:66%; flex-shrink:1; }
.feature-studio-print strong { display:block; max-width:100%; font-size:1em; font-weight:650; line-height:1; white-space:nowrap; letter-spacing:-.015em; }
.feature-art-leaf,.feature-art-type { display:none; }
[data-pattern="leaf"] .feature-art-sun,[data-pattern="type"] .feature-art-sun { display:none; }
[data-pattern="leaf"] .feature-art-leaf,[data-pattern="type"] .feature-art-type { display:block; }
[data-pattern="leaf"] .feature-studio-print strong { font-family:Georgia,serif; font-style:italic; font-weight:500; }
[data-pattern="type"] .feature-studio-print strong { font-family:'Courier New',monospace; font-weight:700; }
.feature-studio-controls { padding:22px 25px 0; background:#fff; }
.feature-studio-options { display:grid; grid-template-columns:1fr auto; align-items:end; gap:22px; }
.feature-studio-options label,.feature-studio-options legend { display:block; font-size:11px; line-height:1.5; color:#536786; font-weight:650; }
.feature-studio-options input { display:block; width:100%; min-height:43px; padding:8px 13px; margin-top:7px; border:1px solid #dce4f3; background:#f8faff; border-radius:7px; color:#172e55; font:600 14px 'DM Sans',sans-serif; }
.feature-studio-options fieldset { margin:0; padding:0; border:0; }
.feature-color-options { display:flex; gap:9px; padding:8px 0 6px; }
.feature-color-options button { display:grid; place-items:center; width:30px; height:30px; border:3px solid #fff; border-radius:50%; padding:0; background:var(--swatch); color:white; cursor:pointer; outline:1px solid transparent; }
.feature-color-options button[aria-pressed="true"] { outline-color:var(--swatch); }
.feature-color-options button span { visibility:hidden; font-size:12px; }
.feature-color-options button[aria-pressed="true"] span { visibility:visible; }
.feature-pattern-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:16px; }
.feature-pattern-options button { padding:9px 5px; min-height:40px; border:1px solid #e2e8f4; background:#fff; color:#617089; border-radius:7px; font:600 12px 'DM Sans',sans-serif; cursor:pointer; }
.feature-pattern-options button[aria-pressed="true"] { background:#edf2ff; border-color:#c3d2fd; color:#2457f5; }
.feature-studio .feature-studio-note { margin:0; padding:15px 22px 18px; background:#fff; font-size:10px; line-height:1.6; color:#71809b; text-align:center; }
.feature-spotlights { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.feature-spotlights > section { min-width:0; border-radius:24px; overflow:hidden; }
.feature-dimension { background:#eaf1ff; }
.feature-control { position:relative; background:#faf5ef; }
.feature-spotlight-copy { padding:44px 44px 0; }
.feature-spotlight-copy h2 { font-size:clamp(32px,3.1vw,43px); }
.feature-spotlight-copy > p:not(.feature-kicker) { margin-top:22px; color:var(--feature-muted); font-size:15px; line-height:1.75; }
.feature-spotlight-copy > .feature-text-link { margin-top:24px; }
.feature-shoe { position:relative; height:355px; display:flex; align-items:center; justify-content:center; padding:15px 30px 35px; }
.feature-shoe img { width:90%; height:100%; object-fit:contain; position:relative; z-index:1; transform:rotate(-14deg); transition:transform .6s cubic-bezier(.2,.7,.1,1); filter:drop-shadow(0 18px 11px #44679a25); }
.feature-dimension:hover .feature-shoe img { transform:rotate(-5deg) translateY(-8px); }
.feature-dimension-type { position:absolute; top:26px; right:35px; font:650 125px/1 'Outfit',sans-serif; color:#cedbf6; letter-spacing:-.06em; }
.feature-orbit { position:absolute; width:78%; height:33%; border:1px solid #bfcfee; border-radius:50%; bottom:37px; transform:rotate(-12deg); }
.feature-shoe figcaption { position:absolute; bottom:17px; left:0; width:100%; text-align:center; color:#6b80a4; font-size:10px; }
.feature-card-art { height:313px; position:relative; max-width:500px; margin:0 auto; }
.feature-namecard,.feature-namecard-back { position:absolute; width:65%; height:165px; top:69px; left:17%; border-radius:4px; box-shadow:0 15px 30px #74564119; }
.feature-namecard-back { background:#f0aa82; transform:rotate(-15deg) translate(-12px,-8px); }
.feature-namecard-back > span { display:block; color:#fff3df; font-size:100px; position:absolute; left:12px; top:9px; }
.feature-namecard { display:flex; flex-direction:column; justify-content:center; padding:26px; color:#fff; background:#3159dd; transform:rotate(8deg); overflow:hidden; }
.feature-namecard > strong { position:relative; font:500 47px/1.1 'Outfit',sans-serif; letter-spacing:-.06em; z-index:1; }
.feature-namecard > small { position:relative; z-index:1; margin-top:12px; letter-spacing:.13em; font-size:6px; }
.feature-namecard-star { position:absolute; right:-2px; bottom:-38px; font:160px/1 'Outfit',sans-serif; color:#a9c3ff; }
.feature-field-line { position:absolute; width:67%; height:60px; top:41px; left:17px; border:1px dashed #cedfff; border-radius:3px; }
.feature-card-tag { position:absolute; z-index:2; bottom:42px; right:25px; display:flex; align-items:center; gap:15px; padding:9px 14px; border-radius:5px; background:white; box-shadow:0 5px 15px #74564116; font-size:11px; font-weight:650; color:#3652a0; transform:rotate(-5deg); }
.feature-card-tag i { font-size:22px; font-style:normal; }
.feature-control .feature-art-caption { text-align:center; color:#8f7e72; font-size:10px; margin:0 0 18px; }
.feature-workflow { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; padding:112px 0 100px; }
.feature-workflow > figure { position:relative; border-radius:20px; overflow:hidden; }
.feature-workflow > figure img { display:block; width:100%; height:auto; }
.feature-workflow figcaption { position:absolute; bottom:12px; right:15px; font-size:10px; padding:3px 9px; border-radius:20px; background:#ffffffe0; color:#6b7192; }
.feature-workflow .feature-editorial-copy { padding-right:24px; }
.feature-journey { margin:28px 0 0; padding:0; list-style:none; font-size:13px; font-weight:600; }
.feature-journey li { display:flex; gap:15px; align-items:center; position:relative; padding:0 0 18px; }
.feature-journey li:not(:last-child)::after { content:''; position:absolute; width:1px; height:16px; background:#cad9f6; top:33px; left:16px; }
.feature-journey li span { display:grid; place-items:center; flex-shrink:0; width:33px; height:33px; border-radius:50%; background:#eef3ff; color:#2457f5; font-size:10px; }
.feature-toolkit { padding:75px 60px; border-radius:25px; background:#f6f8fc; }
.feature-section-heading { max-width:760px; margin-bottom:40px; }
.feature-section-heading > p:last-child { margin-top:22px; max-width:590px; color:var(--feature-muted); font-size:15px; }
.feature-groups { border-top:1px solid #dce4f1; }
.feature-group { border-bottom:1px solid #dce4f1; }
.feature-group summary { display:flex; align-items:center; gap:24px; padding:24px 0; cursor:pointer; list-style:none; }
.feature-group summary::-webkit-details-marker { display:none; }
.feature-group-title { font:500 26px/1.2 'Outfit',sans-serif; letter-spacing:-.03em; }
.feature-group-count { color:#7c8ba3; font-size:12px; margin-left:auto; }
.feature-group-toggle { display:grid; place-items:center; width:32px; height:32px; background:#e9effc; color:#2457f5; border-radius:50%; font-size:22px; transition:transform .2s; }
.feature-group[open] .feature-group-toggle { transform:rotate(45deg); }
.feature-group-body > p { max-width:670px; color:var(--feature-muted); font-size:14px; padding-bottom:20px; }
.feature-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 38px; padding-bottom:18px; }
.asuka-features-v2 .asuka-feature-card { padding:22px 0; border-top:1px solid #e0e6f0; }
.asuka-feature-card h3 { font-size:20px; font-weight:550; letter-spacing:-.025em; }
.asuka-feature-card .asuka-feature-tier { color:#52678c; font-size:10px; margin:8px 0 14px; letter-spacing:.035em; font-weight:650; text-transform:uppercase; }
.asuka-feature-card > p:not(.asuka-feature-tier) { color:var(--feature-muted); font-size:13px; }
.asuka-feature-card > a { margin-top:17px; font-size:12px; }
.feature-editions { display:grid; grid-template-columns:.9fr 1.1fr; gap:75px; padding:110px 35px; }
.feature-plan-list article { padding:0 0 25px; margin-bottom:25px; border-bottom:1px solid #e2e9f4; }
.feature-plan-list article:last-child { border:0; margin:0; padding:0; }
.feature-plan-list h3 { font-size:25px; }
.feature-plan-list p { font-size:14px; color:var(--feature-muted); margin:15px 0; }
.feature-final { position:relative; overflow:hidden; padding:76px 70px; border-radius:24px; background:#edf3ff; }
.feature-final h2 { font-size:clamp(42px,5vw,68px); position:relative; }
.feature-final > p:not(.feature-kicker) { max-width:600px; color:var(--feature-muted); margin-top:23px; position:relative; }
.feature-final .feature-actions { position:relative; }
.feature-final-flower { position:absolute; right:28px; top:-25px; font:440px/1 'Outfit',sans-serif; color:#d7e4ff; transform:rotate(12deg); }
@media (max-width:1100px) {
 .feature-hero { gap:25px; grid-template-columns:.9fr 1.1fr; min-height:500px; }
 .feature-hero h1 { font-size:58px; }
 .feature-seal { width:100px; height:100px; left:-10px; font-size:8px; }
 .feature-create { gap:45px; padding-inline:0; }
 .feature-workflow { gap:40px; }
 .feature-spotlight-copy { padding:32px 30px 0; }
 .feature-namecard > strong { font-size:38px; }
}
@media (max-width:850px) {
 .asuka-page-main--features .asuka-content-container { width:min(calc(100% - 40px),1320px); }
 .feature-hero { grid-template-columns:1fr; gap:15px; }
 .feature-hero-copy { padding:25px 8px 20px; }
 .feature-hero h1 { font-size:clamp(48px,8vw,72px); }
 .feature-hero .feature-lead { max-width:540px; }
 .feature-hero-art > img { aspect-ratio:3/2; }
 .feature-seal { left:22px; bottom:25px; width:120px; height:120px; font-size:10px; }
 .feature-ribbon { justify-content:flex-start; gap:16px 30px; font-size:12px; }
 .feature-create { grid-template-columns:1fr; gap:36px; padding:70px 10px; }
 .feature-create .feature-editorial-copy { max-width:580px; }
 .feature-mini-list { flex-direction:row; flex-wrap:wrap; gap:10px 20px; font-size:12px; }
 .feature-studio { width:100%; max-width:560px; justify-self:center; transform:none; }
 .feature-spotlights { gap:16px; }
 .feature-spotlight-copy { padding:28px 24px 0; }
 .feature-spotlight-copy h2 { font-size:31px; }
 .feature-shoe { height:270px; padding-inline:12px; }
 .feature-dimension-type { font-size:100px; }
 .feature-card-art { height:260px; }
 .feature-namecard,.feature-namecard-back { width:75%; left:11%; height:140px; }
 .feature-namecard { padding:19px; }
 .feature-namecard > strong { font-size:34px; }
 .feature-namecard-star { font-size:130px; }
 .feature-card-tag { right:8px; bottom:14px; font-size:9px; }
 .feature-workflow { grid-template-columns:1fr; padding:75px 0; gap:35px; }
 .feature-workflow > figure img { max-height:440px; object-fit:cover; }
 .feature-workflow .feature-editorial-copy { max-width:660px; padding:0 10px; }
 .feature-toolkit { padding:48px 28px; }
 .feature-editions { padding:75px 10px; gap:40px; }
 .feature-final { padding:55px 35px; }
 .feature-final-flower { right:-150px; opacity:.65; }
}
@media (max-width:560px) {
 .asuka-page-main--features { padding:20px 0 50px; }
 .asuka-page-main--features .asuka-content-container { width:calc(100% - 28px); }
 .feature-hero-copy { padding:20px 5px; }
 .asuka-features-v2 .feature-kicker { font-size:9px; letter-spacing:.1em; margin-bottom:17px; }
 .feature-hero h1 { font-size:clamp(43px,11.7vw,62px); }
 .feature-hero .feature-lead { margin-top:22px; font-size:16px; }
 .feature-actions { gap:20px; margin-top:25px; }
 .asuka-features-v2 .feature-button { padding:13px 17px; gap:18px; font-size:12px; }
 .asuka-features-v2 .feature-text-link { font-size:12px; }
 .feature-hero .feature-free-note { font-size:10px; }
 .feature-hero-art > img { border-radius:16px; }
 .feature-seal { width:87px; height:87px; left:10px; bottom:12px; font-size:7px; }
 .feature-seal > span { font-size:23px; margin-bottom:3px; }
 .feature-hero-art figcaption { bottom:10px; right:10px; font-size:8px; }
 .feature-ribbon { display:grid; gap:13px; padding:22px 9px; margin-top:25px; }
 .feature-ribbon i { font-size:19px; }
 .feature-create { padding:60px 3px; gap:30px; }
 .asuka-features-v2 h2 { font-size:34px; }
 .feature-editorial-copy > p:not(.feature-kicker) { font-size:15px; }
 .feature-mini-list { flex-direction:column; gap:10px; }
 .feature-studio-stage { min-height:0; padding:15px 8px 18px; }
 .feature-studio-print { font-size:24px; }
 .feature-studio-scribble { font-size:12px; bottom:12px; }
 .feature-studio-controls { padding:18px 18px 0; }
 .feature-studio-options { gap:12px; }
 .feature-color-options { gap:5px; }
 .feature-color-options button { width:27px; height:27px; }
 .feature-studio-options input { font-size:16px; }
 .feature-pattern-options button { font-size:11px; }
 .feature-spotlights { grid-template-columns:1fr; gap:20px; }
 .feature-spotlight-copy { padding:33px 26px 0; }
 .feature-shoe { height:305px; }
 .feature-namecard,.feature-namecard-back { width:68%; left:16%; height:155px; }
 .feature-namecard > strong { font-size:43px; }
 .feature-card-art { height:290px; }
 .feature-card-tag { right:17px; bottom:30px; font-size:10px; }
 .feature-toolkit { padding:38px 21px; border-radius:18px; }
 .feature-section-heading h2 { font-size:31px; }
 .feature-section-heading > p:last-child { font-size:13px; }
 .feature-group summary { gap:10px; padding:22px 0; }
 .feature-group-title { font-size:23px; }
 .feature-group-count { font-size:9px; }
 .feature-group-toggle { width:25px; height:25px; font-size:18px; flex-shrink:0; }
 .feature-detail-grid { grid-template-columns:1fr; }
 .feature-editions { grid-template-columns:1fr; padding:65px 12px; gap:35px; }
 .feature-final { padding:45px 25px; border-radius:18px; }
 .feature-final h2 { font-size:44px; }
 .feature-final > p:not(.feature-kicker) { font-size:14px; }
 .feature-final-flower { font-size:310px; right:-190px; top:20px; }
 .feature-final .feature-actions { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
 .asuka-features-v2 *, .asuka-features-v2 *::before, .asuka-features-v2 *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}