@charset "UTF-8";
:root{--ink:#0d1d3e;--ink-2:#294067;--muted:#60708c;--blue:#0868ed;--blue-dark:#0741c4;--line:#dfE8f4;--pale:#f4f8ff;--card:#fff;--shadow:0 8px 30px rgba(18,52,104,.075);--radius:18px;--max:1320px;font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#fff;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;min-width:320px;line-height:1.72}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}img,svg{max-width:100%;vertical-align:middle}img{display:block}h1,h2,h3,h4,p{margin:0}h1,h2,h3{line-height:1.44;letter-spacing:-.035em}h1{font-size:clamp(2.25rem,4.05vw,4.2rem);font-weight:900}h2{font-size:clamp(1.55rem,2.5vw,2.35rem);font-weight:850}h3{font-size:1.13rem;font-weight:850}p{font-size:.95rem}small{font-size:.76rem}.muted{color:var(--muted)}.wrap{max-width:var(--max);margin:0 auto;padding-left:clamp(20px,4vw,42px);padding-right:clamp(20px,4vw,42px)}.icon{width:22px;height:22px;display:inline-block;flex:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}.icon--xs{width:16px;height:16px}.icon--sm{width:19px;height:19px}.icon--lg{width:31px;height:31px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:3px solid #52A5FF;outline-offset:3px}
/* Site chrome */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(17px);border-bottom:1px solid #e6edf7}.header-inner{min-height:76px;display:flex;align-items:center;gap:28px;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-mark{width:43px;height:43px;border-radius:13px;background:linear-gradient(140deg,#268FFF,#0441CC);display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,105,235,.22);flex:none}.brand-mark svg{width:25px;height:25px;fill:#fff;transform:translateX(1px)}.brand strong{display:block;font-size:.88rem;line-height:1.27;letter-spacing:-.035em;font-weight:900}.brand small{font-size:.66rem;display:block;font-weight:650;color:#587297;letter-spacing:.015em;line-height:1.4;margin-top:3px}.main-nav{display:flex;align-items:center;gap:25px;margin-left:auto}.nav-link{font-size:.83rem;font-weight:750;color:#30415e;padding:27px 1px 24px;border-bottom:3px solid transparent;line-height:1.2}.nav-link.active,.nav-link:hover{border-color:var(--blue);color:var(--blue)}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;min-height:48px;border-radius:11px;background:linear-gradient(180deg,#157cf8,#0748d3);box-shadow:0 6px 15px rgba(5,82,206,.16);color:#fff;font-weight:850;padding:12px 24px;font-size:.91rem;line-height:1.35;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(5,82,206,.23)}.button:active{transform:translateY(0)}.button.secondary{background:#fff;border-color:#a6c9ff;color:#0759dc;box-shadow:none}.button.ghost{background:transparent;border-color:#d5e2f4;color:#233c63;box-shadow:none}.button.small{font-size:.79rem;min-height:40px;padding:9px 16px}.button.full{width:100%}.button:disabled{opacity:.46;cursor:not-allowed;box-shadow:none;transform:none}.button .icon{width:18px;height:18px}.header-cta{min-height:40px;font-size:.8rem;padding:10px 16px;border-radius:10px}.menu-toggle{display:none;border:1px solid #e1e9f5;background:#f5f8fd;border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center;color:#1a3563}.mobile-menu{display:none}.mobile-dock{display:none}.footer{background:#0e2143;color:#dce8ff;margin-top:85px;padding:40px 0 20px}.footer-top{display:flex;gap:28px;justify-content:space-between;align-items:start}.footer .brand strong{color:white}.footer .brand small{color:#b3c9e8}.footer .brand-mark{background:linear-gradient(140deg,#2f9cff,#0047cf)}.footer-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}.footer-links a{font-size:.8rem;color:#dce8ff}.footer-links a:hover{color:#fff;text-decoration:underline}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:17px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;color:#a9c0de;font-size:.72rem}.footer-note{max-width:630px}
/* Hero */
.hero{overflow:hidden;position:relative;background:linear-gradient(112deg,#fff 0%,#fff 39%,#f3f9ff 72%,#ebf4ff 100%);border-bottom:1px solid #e6f0fd}.hero:before{content:"";position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,#dcecff 0,rgba(221,238,255,0) 69%);right:-80px;top:-120px}.hero-grid{min-height:485px;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:20px;position:relative;padding-top:38px;padding-bottom:30px}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:850;color:#0067e8;letter-spacing:.03em}.eyebrow:before{content:"";height:6px;width:6px;background:#0877ff;border-radius:50%;box-shadow:0 0 0 4px #e5f1ff}.hero-copy{position:relative;z-index:2}.hero h1{margin:17px 0 17px;line-height:1.36}.hero h1 .blue{color:#0767e9;position:relative;white-space:nowrap}.hero h1 .blue:after{content:"";position:absolute;height:6px;left:1%;bottom:-3px;background:#2c9bff;transform:rotate(-2deg);border-radius:50%;width:94%}.hero-lead{font-size:clamp(.92rem,1.3vw,1.08rem);line-height:1.95;font-weight:550;color:#2a3e5b;max-width:560px}.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.hero-actions .button{min-width:206px}.hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:23px}.hero-trust span{display:inline-flex;align-items:center;gap:6px;color:#406085;font-size:.73rem;font-weight:750}.hero-trust .icon{color:#1175ec;width:16px;height:16px}.hero-visual{position:relative;display:grid;place-items:center;height:470px}.hero-visual img{width:100%;max-width:605px;height:100%;object-fit:contain;filter:drop-shadow(0 20px 32px rgba(0,71,171,.03))}.hero-bubble{position:absolute;background:white;box-shadow:0 11px 34px rgba(20,72,143,.12);border:1px solid #dbe9fa;border-radius:14px;padding:11px 16px;display:flex;align-items:center;gap:9px;font-size:.75rem;font-weight:850;color:#1953a9}.hero-bubble.one{top:57px;right:9px}.hero-bubble.two{bottom:57px;left:6px}.hero-bubble .icon{color:#006df0}
/* General layouts */
.section{padding:68px 0 0}.section-title-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:25px}.section-eyebrow{font-size:.7rem;text-transform:uppercase;color:#0b6be9;font-weight:850;letter-spacing:.085em;margin-bottom:8px;display:flex;align-items:center;gap:7px}.section-eyebrow:before{content:"";width:23px;height:3px;border-radius:3px;background:#0569e9}.section-desc{color:#5b6c85;margin-top:8px;line-height:1.8}.text-link{display:inline-flex;gap:7px;align-items:center;color:#075ddc;font-weight:850;font-size:.82rem;white-space:nowrap}.text-link:hover{text-decoration:underline}.text-link .icon{width:16px;height:16px}.section-surface{background:#f5f9ff;padding:58px 0 66px;margin-top:66px;border-top:1px solid #e5effa;border-bottom:1px solid #e5effa}.section-surface .section{padding-top:0}
/* Purpose cards */
.goal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.goal-card{position:relative;overflow:hidden;text-align:left;background:linear-gradient(135deg,#fff,#f1f7ff);border:1px solid #dfe9f7;box-shadow:0 4px 13px rgba(21,74,132,.045);border-radius:16px;padding:23px 19px;min-height:177px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:transform .2s,box-shadow .2s,border .2s;width:100%}.goal-card:hover{transform:translateY(-4px);border-color:#89bafa;box-shadow:0 15px 30px rgba(27,87,164,.11)}.goal-card .goal-icon{height:50px;width:50px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#fff1f0,#ffe6e3);color:#fa6276}.goal-card.goal-save .goal-icon{background:#e5fbf6;color:#00a68b}.goal-card.goal-trust .goal-icon{background:#e8f0ff;color:#1165e5}.goal-card.goal-social .goal-icon{background:#f1eaff;color:#7b4bdd}.goal-card strong{font-size:.96rem;line-height:1.4}.goal-card span{color:#66768b;font-size:.72rem;line-height:1.7}.goal-card:after{content:"↗";position:absolute;right:17px;bottom:16px;color:#0874ee;font-size:19px}
/* Pattern cards */
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.chips{display:flex;flex-wrap:wrap;gap:9px}.chip{border:1px solid #dce7f5;background:#fff;color:#416184;border-radius:999px;padding:9px 15px;font-size:.75rem;font-weight:750;transition:all .18s;line-height:1.3}.chip:hover,.chip.is-active{background:#0966e8;color:#fff;border-color:#0966e8}.search-field{display:flex;align-items:center;gap:8px;border:1px solid #dfe8f4;background:#fff;border-radius:10px;padding:8px 12px;max-width:100%;min-height:42px}.search-field .icon{width:18px;height:18px;color:#667a97}.search-field input{min-width:0;width:195px;border:0;background:none;outline:none;color:#122948;font-size:.8rem}.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.pattern-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;border:1px solid #e1e9f4;box-shadow:var(--shadow);overflow:hidden;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}.pattern-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(16,58,117,.15);border-color:#9bc4f5}.pattern-card>a{display:flex;flex-direction:column;flex:1}.pattern-image{position:relative;overflow:hidden;aspect-ratio:720 / 420;background:#164b8b}.pattern-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.pattern-card:hover .pattern-image img{transform:scale(1.055)}.pattern-card .pattern-body{padding:17px 18px 18px;flex:1;display:flex;flex-direction:column}.pattern-topline{display:flex;align-items:center;gap:8px;margin-bottom:7px}.pattern-number{font-size:.78rem;font-weight:900;color:#fff;background:#0759dc;padding:3px 8px;border-radius:7px;line-height:1.4}.pattern-category{font-size:.7rem;color:#557195;font-weight:700}.pattern-body h3{font-size:1.05rem;letter-spacing:-.025em;margin-bottom:5px}.pattern-body p{font-size:.78rem;color:#5b6e89;line-height:1.76;flex:1}.pattern-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px}.pattern-aim{font-size:.66rem;color:#0066d5;background:#ecf5ff;border-radius:99px;padding:4px 9px;font-weight:800}.pattern-go{height:30px;width:30px;border-radius:50%;background:#eef5ff;color:#0a62da;display:grid;place-items:center}.pattern-go .icon{width:17px;height:17px}.empty-results{display:none;text-align:center;padding:50px;color:var(--muted);background:var(--pale);border-radius:15px}.patterns-cta{display:flex;justify-content:center;margin-top:28px}
/* steps and CTA */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.step{background:white;border:1px solid #dfe8f5;padding:22px;border-radius:16px;position:relative}.step-num{display:inline-grid;place-items:center;border-radius:12px;background:#086cec;color:#fff;font-weight:900;width:34px;height:34px;font-size:.85rem}.step h3{font-size:.96rem;margin:13px 0 6px}.step p{font-size:.77rem;color:#60728b;line-height:1.75}.cta-banner{background:linear-gradient(110deg,#0a234d,#064aaa 63%,#087bfa);color:#fff;border-radius:23px;margin-top:65px;padding:36px 42px;display:flex;justify-content:space-between;align-items:center;gap:28px;overflow:hidden;position:relative}.cta-banner:before{content:"";border:1px solid rgba(255,255,255,.14);height:350px;width:350px;border-radius:50%;position:absolute;right:210px;top:-150px}.cta-banner h2{font-size:clamp(1.35rem,2vw,2rem);position:relative}.cta-banner p{color:#d3e4ff;margin-top:8px;font-size:.86rem;max-width:700px;position:relative}.cta-banner .button{background:#fff;color:#0758d7;min-width:210px;position:relative;box-shadow:none}
/* Pattern detail */
.breadcrumb{font-size:.74rem;color:#607a9a;display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:26px 0}.breadcrumb a{color:#0864e4}.detail-hero{background:linear-gradient(125deg,#f9fcff,#eef6ff);border:1px solid #e0edfa;border-radius:24px;padding:30px;display:grid;grid-template-columns:1fr .86fr;align-items:center;gap:30px}.detail-hero h1{font-size:clamp(2rem,3.5vw,3.1rem);margin:12px 0 10px}.detail-hero .detail-lead{font-size:1rem;color:#526a88;max-width:630px}.detail-hero img{border-radius:17px;width:100%;box-shadow:0 16px 24px rgba(12,59,125,.14)}.meta-pills{display:flex;flex-wrap:wrap;gap:9px;margin:19px 0 25px}.meta-pill{display:flex;align-items:center;gap:7px;border:1px solid #d1e3fa;background:white;border-radius:11px;padding:8px 12px;color:#2f578b;font-size:.73rem;font-weight:800}.meta-pill .icon{color:#086cea;width:17px;height:17px}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:36px;align-items:start}.content-panel{border:1px solid #e0e9f5;border-radius:18px;background:#fff;padding:26px;margin-top:25px;box-shadow:0 6px 22px rgba(20,64,118,.035)}.content-panel h2{font-size:1.38rem;margin-bottom:15px}.content-panel h2:before{content:"";display:inline-block;width:5px;height:22px;background:#096be9;border-radius:4px;vertical-align:-4px;margin-right:10px}.flow-steps{display:grid;gap:9px}.flow-step{display:flex;gap:14px;align-items:center;border-radius:11px;background:#f5f9ff;padding:14px 15px}.flow-step b{height:30px;width:30px;display:grid;place-items:center;color:white;border-radius:9px;background:#126ae4;font-size:.77rem;flex:none}.flow-step strong{font-size:.88rem}.example-card{background:#0f244a;border-radius:15px;color:#fff;padding:23px;line-height:1.8}.example-card .quote{font-size:1.18rem;font-weight:900}.example-card .example-sub{font-size:.77rem;color:#b6d0f1;margin-top:8px}.check-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}.check-list li{position:relative;padding-left:27px;color:#344e71;font-size:.85rem}.check-list li:before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;height:19px;width:19px;border-radius:50%;background:#e8f5ff;color:#096de8;font-weight:900;font-size:.71rem}.detail-aside{position:sticky;top:101px}.aside-card{border:1px solid #dce8f7;border-radius:18px;background:#f6faff;padding:23px}.aside-card h3{margin-bottom:10px}.aside-card p{font-size:.82rem;color:#62738d;margin-bottom:17px}.mini-patterns{display:grid;gap:10px}.mini-patterns a{display:flex;align-items:center;gap:11px;padding:8px;border:1px solid #dfe9f6;border-radius:11px;background:#fff;font-size:.78rem;font-weight:750}.mini-patterns img{width:64px;aspect-ratio:720/420;object-fit:cover;border-radius:6px}
/* Listing */
.listing-intro{padding:59px 0 20px;background:linear-gradient(125deg,#f2f8ff,#fff);border-bottom:1px solid #e6effb}.listing-intro h1,.guide-intro h1{font-size:clamp(1.9rem,3.3vw,3.25rem);margin:12px 0 10px}.listing-intro p{max-width:700px;color:#536e90}.listing-cat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}.listing-cat a{display:flex;align-items:center;gap:9px;padding:14px;background:#fff;border:1px solid #e0e9f6;border-radius:12px;font-size:.8rem;font-weight:800}.listing-cat a:hover{color:#0567ee;border-color:#70aafa}.listing-cat .icon{color:#0d6cec;width:20px;height:20px}
/* Builder layout */
.builder-head{background:linear-gradient(115deg,#f3f9ff,#fff);border-bottom:1px solid #e4edf9;padding:34px 0 26px}.builder-head h1{font-size:clamp(1.8rem,3vw,2.8rem);margin:7px 0}.builder-head p{color:#59708f;font-size:.89rem}.builder-shell{display:grid;grid-template-columns:248px minmax(0,1fr) minmax(330px,.97fr);gap:16px;align-items:start;margin-top:27px}.builder-side,.builder-form,.builder-output{background:#fff;border:1px solid #dfe8f5;border-radius:16px;box-shadow:0 5px 20px rgba(23,60,115,.05)}.builder-side{padding:14px;position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;scrollbar-width:thin}.side-title{font-size:.82rem;font-weight:850;padding:8px 7px 13px}.side-group-label{font-size:.7rem;font-weight:850;color:#617b9b;background:#f1f6fd;border-radius:8px;padding:8px 10px;margin:6px 0}.pattern-picker{width:100%;border:1px solid transparent;background:none;display:flex;align-items:center;gap:9px;padding:7px;border-radius:11px;text-align:left;color:#264466;font-size:.77rem;font-weight:750;line-height:1.45}.pattern-picker:hover{background:#f3f8ff}.pattern-picker.is-selected{background:#e9f3ff;border-color:#9cc9ff;color:#0750b8}.pattern-picker img{height:44px;width:65px;object-fit:cover;border-radius:7px;flex:none}.pattern-picker b{display:block;font-size:.67rem;color:#2373df}.builder-form{padding:25px}.builder-output{position:sticky;top:97px;overflow:hidden}.panel-title{font-size:1.02rem;font-weight:900;margin-bottom:3px}.panel-intro{color:#6b7f99;font-size:.76rem;margin-bottom:22px}.form-group{margin:0 0 17px}.form-label{font-size:.78rem;font-weight:850;display:block;margin-bottom:7px}.required{font-size:.65rem;color:#f2415a;background:#fff0f2;border-radius:5px;margin-left:7px;padding:1px 5px}.optional{font-weight:550;color:#8191a7;font-size:.69rem;margin-left:5px}.form-control{background:#fff;border:1px solid #ccd9ea;width:100%;border-radius:10px;padding:12px 13px;outline:0;font-size:.85rem;color:#183254;min-height:45px;transition:border .2s,box-shadow .2s}.form-control::placeholder{color:#9aa9ba}.form-control:focus{border-color:#2079f0;box-shadow:0 0 0 3px rgba(37,124,242,.12)}textarea.form-control{min-height:90px;resize:vertical;line-height:1.8}.form-note{font-size:.7rem;color:#8091a8;margin-top:5px}.duration-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.duration-pills label{display:grid;place-items:center;border:1px solid #d3e2f4;border-radius:9px;min-height:41px;cursor:pointer;color:#546e8f;background:#fff;font-weight:800;font-size:.8rem}.duration-pills input{position:absolute;opacity:0;width:0;height:0}.duration-pills label:has(input:checked){background:#0a67ed;color:#fff;border-color:#0a67ed}.duration-pills label:has(input:focus-visible){outline:3px solid #67a9ff;outline-offset:2px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.advanced-toggle{border:0;background:#f3f8fe;border-radius:10px;display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;font-size:.82rem;font-weight:850;color:#28517e}.advanced-panel{padding:16px 0 0}.builder-submit{margin-top:19px}.builder-output-head{padding:18px 20px;background:#f7faff;border-bottom:1px solid #e5edf8;display:flex;align-items:center;gap:9px}.builder-output-head .icon{color:#0b6cea}.builder-output-head strong{font-size:.9rem}.builder-output-head span{font-size:.69rem;color:#6c839d;margin-left:auto}.output-placeholder{padding:34px 25px;text-align:center;color:#6d7e96}.output-placeholder .placeholder-icon{width:65px;height:65px;border-radius:19px;background:#eaf3ff;display:grid;place-items:center;margin:0 auto 13px;color:#0c69ed}.output-placeholder .placeholder-icon .icon{width:32px;height:32px}.output-placeholder h3{font-size:.9rem}.output-placeholder p{font-size:.77rem;margin-top:9px}.output-content{padding:18px}.output-snippet{font-size:.72rem;line-height:1.75;color:#234166;white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f8fe;border:1px solid #e1e9f5;border-radius:9px;max-height:490px;overflow:auto;padding:14px;font-family:inherit;margin-bottom:13px}.output-tools{display:flex;gap:8px;flex-wrap:wrap}.output-tools .button{flex:1}.output-help{padding:14px 18px 18px;color:#7789a2;font-size:.71rem;border-top:1px solid #e9eef7}.builder-hint{border:1px solid #cfe4ff;background:#f1f8ff;padding:13px 15px;border-radius:10px;color:#2d5a8d;font-size:.74rem;margin:12px 0 2px}.builder-hint strong{display:block;margin-bottom:2px;color:#0e5ab8}.builder-pattern-summary{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dce8f7;background:#f4f9ff;border-radius:12px;margin-bottom:20px}.builder-pattern-summary img{width:110px;aspect-ratio:720 / 420;object-fit:cover;border-radius:9px}.builder-pattern-summary strong{font-size:.86rem}.builder-pattern-summary p{font-size:.72rem;color:#607894;line-height:1.55;margin-top:3px}.builder-mobile-select{display:none}.status{color:#08763f;font-weight:750;font-size:.78rem;margin:8px 0}.toast{position:fixed;right:22px;bottom:22px;z-index:300;background:#0f2548;color:white;padding:12px 17px;border-radius:12px;box-shadow:0 10px 30px rgba(5,26,67,.24);font-size:.82rem;font-weight:800;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.is-open{opacity:1;transform:translateY(0)}
/* Guide and FAQ */
.guide-intro{background:linear-gradient(125deg,#f3f9ff,#fff);padding:55px 0;border-bottom:1px solid #e7edf7}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.guide-panel{padding:25px;background:white;border:1px solid #dfe8f4;border-radius:17px}.guide-panel h3{margin:10px 0}.guide-panel p{font-size:.84rem;color:#5a708c}.guide-panel .icon{color:#0967e7;width:30px;height:30px}.faq-list{display:grid;gap:11px}.faq-list details{border:1px solid #e0e9f4;border-radius:11px;padding:16px 19px;background:#fff}.faq-list summary{font-size:.9rem;font-weight:800;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:13px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";font-size:1.35rem;color:#0869eb;line-height:1}.faq-list details[open] summary:after{content:"−"}.faq-list p{font-size:.83rem;color:#60738c;margin-top:11px;line-height:1.85}
@media(max-width:1150px){.builder-shell{grid-template-columns:218px minmax(0,1fr)}.builder-output{position:static;grid-column:2}.main-nav{gap:17px}.header-inner{gap:16px}.hero-grid{min-height:460px}.hero-visual{height:400px}.hero-bubble.one{right:-8px}.hero-bubble.two{left:0}.pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.header-inner{min-height:68px}.brand strong{font-size:.77rem}.brand-mark{height:38px;width:38px}.main-nav{display:none}.header-cta{margin-left:auto}.menu-toggle{display:flex}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #dfe9f6;box-shadow:0 20px 30px rgba(14,42,89,.08);padding:12px 24px 22px}.mobile-menu.is-open{display:grid}.mobile-menu a{display:flex;align-items:center;gap:10px;font-size:.89rem;font-weight:800;padding:12px 10px;border-bottom:1px solid #edf2fa}.mobile-menu a:last-child{border:0}.hero-grid{min-height:0;grid-template-columns:1fr .85fr;padding-top:50px;padding-bottom:40px}.hero h1{font-size:clamp(2.15rem,4.6vw,3.2rem)}.hero-visual{height:350px}.hero-bubble{display:none}.goal-grid,.listing-cat{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:1fr}.detail-aside{position:static;display:none}.builder-shell{grid-template-columns:1fr 1fr}.builder-side{display:none}.builder-output{grid-column:auto}.builder-mobile-select{display:block}.builder-output{position:static}.builder-form{padding:22px}.footer-top{flex-direction:column}.cta-banner{padding:30px}.cta-banner .button{min-width:0}}
@media(max-width:720px){:root{--radius:14px}.wrap{padding-left:17px;padding-right:17px}.header-inner{min-height:64px}.brand{gap:9px}.brand-mark{width:35px;height:35px;border-radius:10px}.brand-mark svg{width:20px;height:20px}.brand strong{font-size:.76rem;line-height:1.22}.brand small{font-size:.56rem}.header-cta{display:none}.menu-toggle{width:39px;height:39px}.hero{background:linear-gradient(165deg,#fff 0,#fff 20%,#eff7ff 100%)}.hero-grid{display:flex;flex-direction:column;align-items:stretch;padding-top:33px;padding-bottom:10px;gap:0}.eyebrow{font-size:.65rem}.hero h1{font-size:clamp(2.1rem,8.45vw,3rem);margin:12px 0 12px}.hero-lead{font-size:.84rem;line-height:1.88}.hero-lead br{display:none}.hero-actions{margin-top:20px;display:grid;grid-template-columns:1fr;gap:9px}.hero-actions .button{min-width:0}.hero-actions .button.secondary{display:none}.hero-trust{gap:10px 16px;margin-top:16px}.hero-trust span{font-size:.67rem}.hero-visual{height:252px;width:100%;margin-top:-4px}.hero-visual img{max-width:430px}.hero-bubble{display:none}.section{padding-top:49px}.section-title-row{align-items:start;flex-direction:column;gap:8px;margin-bottom:17px}.section-title-row h2{font-size:1.5rem}.section-desc{font-size:.79rem;margin-top:5px}.section-eyebrow{font-size:.66rem}.goal-grid{gap:10px}.goal-card{padding:15px 13px;min-height:149px;gap:6px;border-radius:13px}.goal-card .goal-icon{width:43px;height:43px;border-radius:13px}.goal-card .goal-icon .icon{width:24px;height:24px}.goal-card strong{font-size:.81rem}.goal-card span{font-size:.66rem}.goal-card:after{bottom:7px;right:11px}.pattern-grid{grid-template-columns:1fr;gap:11px}.pattern-card>a{flex-direction:row;align-items:stretch;min-height:118px}.pattern-image{width:37.5%;aspect-ratio:auto;flex:none}.pattern-image img{height:100%;min-height:118px}.pattern-card .pattern-body{padding:13px 12px;justify-content:center}.pattern-topline{margin-bottom:4px}.pattern-number{font-size:.67rem;padding:2px 6px;border-radius:5px}.pattern-category{font-size:.64rem}.pattern-body h3{font-size:.9rem;margin-bottom:2px}.pattern-body p{font-size:.71rem;line-height:1.54}.pattern-bottom{margin-top:6px}.pattern-aim{font-size:.59rem;padding:2px 7px}.pattern-go{height:24px;width:24px}.pattern-go .icon{height:14px;width:14px}.filterbar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:17px}.chips{overflow-x:auto;flex-wrap:nowrap;padding:2px 0 7px;scrollbar-width:none;margin-right:-17px}.chips::-webkit-scrollbar{display:none}.chip{white-space:nowrap;flex:none;padding:9px 12px;font-size:.7rem}.search-field{width:100%}.search-field input{width:100%;font-size:.84rem}.section-surface{padding:43px 0;margin-top:48px}.steps{grid-template-columns:1fr;gap:9px}.step{padding:14px 16px;display:grid;grid-template-columns:38px 1fr;gap:4px 13px;align-items:center}.step-num{grid-row:span 2}.step h3{margin:0;font-size:.89rem}.step p{font-size:.73rem}.cta-banner{margin-top:45px;border-radius:17px;padding:24px 20px;flex-direction:column;align-items:stretch;gap:20px}.cta-banner h2{font-size:1.45rem}.cta-banner p{font-size:.78rem}.footer{margin-top:60px;padding:30px 0 85px}.footer-links{gap:12px 15px}.footer-links a{font-size:.75rem}.footer-bottom{font-size:.67rem}.mobile-dock{position:fixed;bottom:0;left:0;right:0;z-index:90;padding:9px 15px max(9px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -6px 25px rgba(13,61,133,.12);border-top:1px solid #dfebfa;display:block}.mobile-dock .button{min-height:47px;border-radius:12px;width:100%;font-size:.86rem}.breadcrumb{font-size:.69rem;margin:19px 0}.detail-hero{padding:19px;grid-template-columns:1fr;gap:18px;border-radius:17px}.detail-hero h1{font-size:1.9rem}.detail-hero .detail-lead{font-size:.85rem}.detail-hero img{order:-1}.meta-pills{gap:6px;margin:14px 0}.meta-pill{font-size:.66rem;padding:7px 9px}.detail-hero .button{width:100%}.content-panel{padding:18px;margin-top:15px}.content-panel h2{font-size:1.18rem}.example-card{padding:16px}.example-card .quote{font-size:.95rem}.flow-step{padding:12px}.flow-step strong{font-size:.8rem}.listing-intro{padding:35px 0 15px}.listing-intro h1,.guide-intro h1{font-size:2rem}.listing-intro p{font-size:.83rem}.listing-cat{gap:9px;margin-top:22px}.listing-cat a{font-size:.7rem;padding:12px 10px}.builder-head{padding:27px 0 22px}.builder-head h1{font-size:1.95rem}.builder-head p{font-size:.8rem}.builder-shell{grid-template-columns:1fr;margin-top:16px;gap:14px}.builder-form{padding:17px;border-radius:13px}.builder-output{grid-column:auto;border-radius:13px}.builder-pattern-summary{padding:10px}.builder-pattern-summary img{width:83px}.builder-mobile-select select{width:100%}.builder-form .panel-title{font-size:.97rem}.form-row{grid-template-columns:1fr}.builder-output-head{padding:15px}.output-snippet{max-height:360px}.guide-intro{padding:34px 0}.guide-grid{grid-template-columns:1fr;gap:10px}.guide-panel{padding:20px}.faq-list summary{font-size:.82rem}.faq-list p{font-size:.78rem}.toast{bottom:82px;left:17px;right:17px;text-align:center}}
@media(min-width:721px) and (max-width:980px){.hero-actions .button{min-width:170px}.hero-visual{max-height:370px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}
@media(max-width:720px){.chips{min-width:0;width:100%;max-width:100%;margin-right:0;overflow-x:auto}.mobile-dock{max-width:100vw}body[data-page="builder"] .mobile-dock{display:none}body[data-page="builder"] .footer{padding-bottom:27px}}
/* ===== PREMIUM VISUAL REBUILD — matched to approved concept, 2026 ===== */
:root{--premium-blue:#0759ff;--premium-navy:#061643;--premium-edge:#d9e5f9}
body{background:#fff;color:#101a35}
.site-header{border-bottom:1px solid #e3ebf9;background:rgba(255,255,255,.98);box-shadow:0 1px 10px rgba(12,51,115,.045)}
.header-inner{min-height:67px}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(142deg,#067cff 5%,#0644ce 94%)}
.brand strong{font-size:.86rem;line-height:1.25;letter-spacing:-.015em}
.main-nav .nav-link{font-weight:780}
.button,.header-cta{background:linear-gradient(125deg,#1388ff 0%,#0758ff 45%,#0235b1 100%);box-shadow:0 6px 14px rgba(12,82,234,.21)}
.button:hover{filter:brightness(1.06)}
.hero{background:radial-gradient(ellipse at 68% 35%,#1447b9 0,rgba(18,55,161,.18) 33%,transparent 67%),linear-gradient(106deg,#020b2c 0%,#051747 49%,#0a2377 83%,#081c59 100%);border-bottom:none;overflow:hidden}
.hero:before{display:none}
.hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);min-height:316px;padding-top:20px;padding-bottom:26px;gap:12px}
.hero-copy{position:relative;z-index:2}
.hero .eyebrow{font-size:.69rem;padding:7px 14px 7px 15px;color:white;background:linear-gradient(90deg,#0b61dc,#0841ad);border:1px solid rgba(191,215,255,.27);border-radius:99px;letter-spacing:.0em;margin-bottom:11px;white-space:nowrap;box-shadow:0 6px 14px rgba(0,37,105,.22)}
.hero .eyebrow:before{display:none}
.hero h1{font-weight:950;font-size:clamp(1.82rem,3.25vw,3.2rem);line-height:1.27;letter-spacing:-.042em;color:#fff;margin:0 0 11px;text-wrap:balance}
.hero-pretitle{font-size:.96em}
.hero-yellow{color:#ffdf35;text-shadow:0 3px 18px rgba(255,209,52,.11);white-space:nowrap;font-size:.9em}
.hero-lead{color:#eef4ff;font-weight:610;line-height:1.58;font-size:clamp(.81rem,1.05vw,1rem);margin:8px 0 0}
.hero-lead strong{color:white;font-weight:900}
.hero-actions{gap:10px;margin-top:18px}
.hero-actions .button{min-width:0;padding:12px 22px;border-radius:11px;font-weight:900;font-size:.86rem;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.hero-actions .button.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.37);box-shadow:none}
.hero-trust{gap:13px;margin-top:15px}
.hero-trust span{color:#d7e5ff;font-size:.67rem;font-weight:750}
.hero-visual{height:310px;position:relative;margin-right:-40px}
.hero-visual:before{content:'';position:absolute;inset:8% 5%;border-radius:100%;background:radial-gradient(ellipse,rgba(40,118,255,.17),transparent 70%);filter:blur(8px)}
.hero-visual img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:center;filter:none;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 96%,transparent 100%)}
/* Rich shortcut cards directly below hero */
.quick-nav-wrap{position:relative;z-index:3;margin-top:-18px;margin-bottom:8px}
.quick-nav-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quick-card{display:flex;align-items:center;min-width:0;gap:13px;background:linear-gradient(155deg,#fff 0%,#f7faff 100%);border:1px solid #dce8f9;border-radius:13px;padding:15px 14px;box-shadow:0 8px 23px rgba(5,59,137,.12);transition:transform .18s,box-shadow .18s}
.quick-card:hover{transform:translateY(-3px);box-shadow:0 11px 25px rgba(5,59,137,.17)}
.quick-card-icon{font-weight:900;color:#0057e5;font-size:29px;line-height:1;width:36px;text-align:center;flex:none}
.quick-card-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.quick-card-copy strong{font-size:.88rem;color:#061739;white-space:nowrap}
.quick-card-copy small{color:#536a87;font-size:.65rem;line-height:1.4}
.quick-arrow{margin-left:auto;color:#0958d9;font-size:24px;font-weight:900}
body[data-page=home] .section{padding-top:34px}
body[data-page=home] .section-title-row{margin-bottom:14px}
body[data-page=home] .section-title-row h2{font-size:clamp(1.3rem,2.1vw,1.8rem)}
.section-eyebrow{font-weight:900}
/* Rich category illustrations */
.goal-grid{gap:12px}
.goal-card{min-height:0;padding:0 0 14px;border-radius:14px;background:#fff;box-shadow:0 6px 16px rgba(17,55,105,.11);gap:5px}
.goal-card .goal-art{width:100%;height:112px;object-fit:cover;object-position:center;display:block;border-radius:12px 12px 0 0}
.goal-card .goal-icon{display:none}
.goal-card strong{font-size:.94rem;color:#0d1e41;padding:6px 15px 0;line-height:1.35}
.goal-card>span:not(.goal-icon){padding:0 15px;color:#536984;font-size:.69rem;line-height:1.55}
.goal-card:after{bottom:16px;right:12px;font-size:16px;background:#0b4db9;color:white;border-radius:50%;height:22px;width:22px;text-align:center;line-height:21px;box-shadow:0 3px 7px rgba(0,75,190,.2)}
.goal-card.goal-interest{border-color:#f0dae0}.goal-card.goal-save{border-color:#d4ebef}.goal-card.goal-trust{border-color:#d8e5f9}.goal-card.goal-social{border-color:#e2dcfa}
/* 15 illustrated tiles, 5x3 as shown in concept */
body[data-page=home] .pattern-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
body[data-page=home] .pattern-card{border-radius:12px;box-shadow:0 4px 10px rgba(24,65,121,.10)}
.pattern-card{border-color:#d7e5fa}
.pattern-card .pattern-image{aspect-ratio:2.25/1;background:#dceeff}
.pattern-card .pattern-image img{display:block;height:100%;width:100%;object-fit:cover;object-position:center}
.pattern-card .pattern-body{padding:11px 11px 12px}
.pattern-card .pattern-topline{margin-bottom:4px;gap:6px}
.pattern-card .pattern-number{font-size:.69rem;border-radius:5px;padding:2px 6px;background:linear-gradient(150deg,#167aff,#0639c8);box-shadow:0 2px 5px rgba(0,66,174,.2)}
.pattern-card .pattern-category{font-size:.58rem;line-height:1.2}
.pattern-card .pattern-body h3{font-size:.89rem;line-height:1.36;margin:2px 0 5px;letter-spacing:-.025em}
.pattern-card .pattern-body p{font-size:.69rem;line-height:1.5;color:#5a6d89;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pattern-card .pattern-bottom{margin-top:10px}
.pattern-card .pattern-aim{font-size:.6rem;padding:3px 6px}
.pattern-card .pattern-go{height:23px;width:23px}
.pattern-card .pattern-go .icon{width:14px;height:14px}
/* Premium steps, CTA panel */
body[data-page=home] .section-surface{margin-top:36px;padding:28px 0 35px;background:linear-gradient(120deg,#ecf5ff,#f7faff)}
.step{box-shadow:0 4px 12px rgba(15,68,140,.05);border-radius:13px;padding:18px}
.cta-banner{margin-top:28px;background:linear-gradient(105deg,#e6f1ff 0%,#d0e4ff 100%);color:#0e2449;box-shadow:0 10px 25px rgba(16,65,135,.09);border:1px solid #c9e0ff;gap:18px;min-height:174px}
.cta-banner>div:first-child{z-index:2;flex:1}
.cta-banner .section-eyebrow{color:#0759e8!important}
.cta-banner p{color:#35567d!important}
.cta-banner:before{border-color:rgba(17,83,195,.1)}
.cta-banner .cta-illustration{position:relative;z-index:1;width:265px;max-width:28%;height:auto;mix-blend-mode:multiply;border-radius:18px}
.cta-banner .button{position:relative;z-index:3}
.footer{margin-top:55px}
/* Detail + builder image refinement */
.detail-hero img{object-fit:cover;aspect-ratio:2.4/1;border-radius:14px;box-shadow:0 15px 25px rgba(0,53,156,.13)}
.mini-patterns img,.pattern-picker img{object-fit:cover}
.builder-side,.builder-form,.builder-output{border-color:#d4e3fa;box-shadow:0 7px 22px rgba(17,54,113,.07)}
/* Tablet */
@media(max-width:1160px){
 body[data-page=home] .pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .hero h1{font-size:clamp(1.6rem,3.2vw,2.7rem)}
 .hero-yellow{white-space:normal}
 .quick-card-copy small{display:none}
}
@media(max-width:900px){
 .hero-grid{min-height:300px;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:0}
 .hero-visual{height:290px;margin-right:-30px}
 .hero h1{font-size:clamp(1.45rem,3.9vw,2.3rem)}
 .hero-lead{font-size:.82rem}
 .hero-actions .button{font-size:.77rem;padding:11px 15px}
 .quick-nav-grid{gap:8px}.quick-card{padding:12px 8px;gap:7px}.quick-card-icon{font-size:24px;width:27px}.quick-card-copy strong{font-size:.72rem}.quick-arrow{display:none}
 body[data-page=home] .pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .goal-card .goal-art{height:90px}
 .goal-card strong{font-size:.82rem;padding-left:10px;padding-right:10px}
 .goal-card>span:not(.goal-icon){padding-left:10px;padding-right:10px}
}
/* Mobile — real image thumbnails, not desktop card scaling */
@media(max-width:760px){
 .header-inner{min-height:61px}
 .hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:22px;padding-bottom:12px;gap:0}
 .hero .eyebrow{font-size:.58rem;letter-spacing:-.02em;white-space:normal;max-width:100%;padding:6px 10px}
 .hero h1{font-size:clamp(1.6rem,6.2vw,2.32rem);line-height:1.28;margin:10px 0 8px}
 .hero-yellow{font-size:.95em;white-space:normal}
 .hero-lead{font-size:.83rem;line-height:1.6}
 .hero-lead br{display:none}
 .hero-actions{margin-top:15px}
 .hero-actions .button{width:100%;font-size:.83rem;min-height:45px}
 .hero-actions .button.secondary{display:none}
 .hero-trust{display:none}
 .hero-visual{height:172px;width:100%;margin:7px 0 -6px;order:0;overflow:hidden}
 .hero-visual img{width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 90%,transparent 100%)}
 .quick-nav-wrap{margin-top:0;margin-bottom:3px;padding-top:11px}
 .quick-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .quick-card{min-height:69px;padding:11px 10px;border-radius:12px;gap:9px}
 .quick-card-icon{font-size:23px;width:27px}
 .quick-card-copy strong{font-size:.8rem;white-space:normal}
 .quick-card-copy small{display:none}
 .quick-arrow{font-size:17px}
 body[data-page=home] .section{padding-top:27px}
 body[data-page=home] .section-title-row{margin-bottom:12px}
 body[data-page=home] .section-title-row h2{font-size:1.25rem}
 .goal-grid{grid-template-columns:1fr;gap:9px}
 .goal-card{display:flex;flex-direction:row;align-items:center;gap:10px;min-height:75px;padding:0;border-radius:12px}
 .goal-card .goal-art{width:112px;height:74px;flex:none;border-radius:11px 0 0 11px}
 .goal-card strong{padding:0 25px 0 0;font-size:.85rem}
 .goal-card>span:not(.goal-icon){display:none}
 .goal-card:after{bottom:auto;top:50%;transform:translateY(-50%);right:9px;height:20px;width:20px;font-size:14px;line-height:19px}
 .filterbar{margin-bottom:12px;gap:11px}
 .chips{display:flex;max-width:100%;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
 .chips::-webkit-scrollbar{display:none}
 .chip{white-space:nowrap}
 body[data-page=home] .pattern-grid,.pattern-grid{grid-template-columns:1fr;gap:9px}
 .pattern-card{border-radius:11px}
 .pattern-card>a{display:flex;flex-direction:row;align-items:stretch;min-height:90px}
 .pattern-card .pattern-image{width:119px;min-width:119px;aspect-ratio:auto;min-height:91px;flex:none;border-radius:9px 0 0 9px}
 .pattern-card .pattern-image img{object-fit:cover;object-position:center}
 .pattern-card .pattern-body{padding:9px 9px 8px 12px;justify-content:center}
 .pattern-card .pattern-topline{margin:0 0 4px}
 .pattern-card .pattern-category{display:none}
 .pattern-card .pattern-number{font-size:.64rem;padding:2px 5px}
 .pattern-card .pattern-body h3{font-size:.87rem;line-height:1.28;margin:0 0 4px}
 .pattern-card .pattern-body p{font-size:.68rem;line-height:1.3;-webkit-line-clamp:2;margin:0}
 .pattern-card .pattern-bottom{margin-top:4px}
 .pattern-card .pattern-aim{display:none}
 .pattern-card .pattern-go{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:23px;height:23px}
 .pattern-card .pattern-body{padding-right:31px}
 body[data-page=home] .section-surface{margin-top:25px;padding:28px 0}
 .steps{gap:8px}
 .step{padding:12px 9px}
 .step h3{font-size:.76rem}
 .step p{font-size:.66rem}
 .cta-banner{padding:24px 18px;flex-direction:column;align-items:flex-start;gap:12px}
 .cta-banner .cta-illustration{max-width:none;width:220px;align-self:center}
 .cta-banner .button{width:100%}
 .detail-hero img{aspect-ratio:2.25/1}
 .mobile-dock{z-index:70}
}
@media(max-width:390px){
 .hero h1{font-size:1.51rem}
 .hero-visual{height:145px}
 .hero .eyebrow{font-size:.53rem}
 .pattern-card .pattern-image{width:107px;min-width:107px}
 .goal-card .goal-art{width:104px}
 .quick-card-copy strong{font-size:.75rem}
}
/* Polished visual integration / corrected crops */
.hero-visual img{mask-image:radial-gradient(ellipse at 52% 50%,#000 45%,rgba(0,0,0,.92) 57%,transparent 82%)}
.goal-card .goal-art{height:112px}
@media(max-width:900px){.goal-card .goal-art{height:90px}}
@media(max-width:760px){.goal-card .goal-art{height:74px}}