/* Approved ONEL Figma screens; shared account colors, type and controls. */
@font-face{font-family:'Noto Sans KR';src:url('/fonts/NotoSansKR.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.6;font-synthesis:none;color:#182439;background:#fff;--blue:#315bf4;--blue-soft:#edf1ff;--navy:#172a4b;--cream:#f4f2ec;--lime:#daefab;--canvas:#f6f7f9;--ink:#182439;--muted:#697386;--line:#e1e5ed;--paper:#fff;--violet:#6957ba;--violet-soft:#f0ecfb;--green:#16765b;--green-soft:#e7f3eb;--orange:#b75c28;--orange-soft:#fbeee2}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px}
body.menu-open{overflow:hidden}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{font-weight:700}
p{overflow-wrap:break-word}
button,input,textarea,select{font:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,summary{cursor:pointer}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #91a8ff;outline-offset:4px}
img{display:block;max-width:100%}
section[id],footer[id]{scroll-margin-top:104px}
::selection{color:var(--navy);background:var(--lime)}
[hidden]{display:none!important}
.container{width:calc(100% - 160px);max-width:1280px;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:20px;z-index:100;padding:12px 20px;color:#fff;background:var(--navy);border-radius:12px}
.skip-link:focus{top:12px;color:#fff}
.mobile-only{display:none}
.eyebrow{color:var(--blue);font-size:12px;font-weight:400;line-height:20px;letter-spacing:1.2px}
.muted{color:var(--muted)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:12px 28px;border:1px solid transparent;border-radius:12px;font-size:14px;font-weight:500;line-height:22px;text-align:center;white-space:nowrap;transition:background-color .18s,border-color .18s}
.button.primary{background:var(--blue);color:#fff}
.button.primary:hover{background:#2349d9}
.button.secondary{border-color:var(--line);background:#fff;color:var(--ink)}
.button.secondary:hover{border-color:#bcc9fa;background:#f9faff}
.button.lime{background:var(--lime);color:var(--navy)}
.button.lime:hover{background:#cce596}
.button.plain{background:transparent;color:var(--ink)}
.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:12px;line-height:20px;white-space:nowrap}

/* Source logo crop follows the approved symbol geometry. */
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;font-size:24px;font-weight:700;line-height:36px;letter-spacing:.4px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-symbol{display:block;position:relative;flex:none;width:30px;height:30px;overflow:hidden}
.brand-symbol img{position:absolute;width:196.08%;height:211.86%;max-width:none;left:-48.04%;top:-42.37%}
.site-header{position:sticky;top:0;z-index:50;background:#fff}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:32px;height:88px}
.header-nav{display:flex;align-items:center;gap:32px;margin-left:auto;font-size:14px;font-weight:500;line-height:22px;color:var(--muted)}
.header-nav>a{white-space:nowrap}
.header-account{display:flex;align-items:center;gap:24px;padding-left:24px;color:var(--ink)}
.header-account>a{white-space:nowrap}
.header-account .button{min-width:128px}
.service-menu>summary{display:flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);list-style:none}
.service-menu>summary::-webkit-details-marker{display:none}
.service-menu>summary::marker{content:''}
.service-menu[open]>summary,.service-menu>summary:hover{color:var(--blue)}
.service-menu .chevron{display:inline-block;transition:transform .18s}
.service-menu[open] .chevron{transform:rotate(180deg)}
.menu-icon{display:none}
.service-panel{position:absolute;z-index:1;top:88px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 28px -28px rgba(23,42,75,.3);max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
.service-panel>.container{display:flex;flex-direction:column;gap:32px;padding-block:32px}
.menu-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.menu-heading>div{display:flex;flex-direction:column;gap:8px}
.menu-heading h2{font-size:24px;line-height:36px}
.menu-heading>a{color:var(--blue);font-size:14px;font-weight:500;line-height:22px;white-space:nowrap}
.menu-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.menu-service{display:flex;align-items:center;gap:16px;min-width:0;padding:16px;border-radius:12px;color:var(--ink)}
.menu-service:hover{background:var(--canvas);color:var(--ink)}
.menu-service>span:not(.service-logo):not(.menu-arrow){display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.menu-service strong{font-size:14px;font-weight:500;line-height:22px}
.menu-service small{font-size:13px;font-weight:400;line-height:22px;color:var(--muted)}
.menu-arrow{flex:none;margin-left:auto;color:var(--muted);font-size:18px;line-height:22px}
.menu-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:500;line-height:22px}
.menu-bottom>a:first-child{color:var(--blue)}
.mobile-menu-bottom{display:none}
.menu-section-label{color:var(--blue);font-size:12px;font-weight:400;line-height:20px;letter-spacing:1.2px}

.home-hero{padding-block:64px;background:var(--cream)}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,616fr) minmax(0,584fr);align-items:center;gap:80px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.hero-copy h1{font-size:56px;line-height:72px;letter-spacing:0}
.hero-description{color:var(--muted);font-size:16px;line-height:26px}
.hero-actions{display:flex;gap:12px;align-items:center}
.hero-actions .primary{min-width:200px}
.hero-actions .secondary{min-width:164px}
.hero-tags{font-size:13px;line-height:22px;color:var(--muted)}
.service-collection{display:flex;flex-direction:column;gap:24px;padding:24px;border-radius:24px;color:#fff;background:var(--navy);min-width:0}
.collection-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;line-height:20px}
.collection-label .eyebrow{color:var(--lime)}
.collection-label>span{white-space:nowrap}
.service-collection h2{font-size:32px;line-height:44px}
.hero-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;row-gap:24px}
.hero-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:16px;border-radius:16px;color:var(--ink);background:#fff}
.hero-tile:hover{color:var(--ink);background:#f6f8ff}
.hero-tile>span:not(.service-logo){font-size:14px;font-weight:500;line-height:22px}
.hero-tile small{color:var(--muted);font-size:12px;line-height:20px}
.hero-chips{display:none}
.collection-footnote{font-size:12px;line-height:20px}
.home-services{padding-block:80px}
.services-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}
.services-heading>div{display:flex;flex-direction:column;gap:12px;min-width:0}
.services-heading h2{font-size:32px;line-height:44px}
.services-heading>p{width:312px;flex:none;font-size:13px;line-height:22px;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.service-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:20px;transition:border-color .18s,box-shadow .18s}
.service-card:hover{color:var(--ink);border-color:#bcc9fa;box-shadow:0 6px 20px rgba(23,42,75,.05)}
.card-identity{display:flex;align-items:center;gap:16px;padding:24px;background:var(--soft,var(--service-soft,var(--blue-soft)))}
.card-identity>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.card-identity p{font-size:12px;line-height:20px;font-weight:400;color:var(--tone,var(--service-tone,var(--blue)))}
.card-identity h3{font-size:24px;line-height:36px}
.card-number{color:var(--muted);font-size:12px;font-weight:400;line-height:20px;flex:none}
.card-content{display:flex;flex:1;flex-direction:column;gap:20px;padding:24px}
.card-title{font-size:20px;font-weight:700;line-height:30px}
.card-meta{color:var(--muted);font-size:13px;line-height:22px}
.card-action{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:20px;margin-top:auto;border-top:1px solid var(--line);color:var(--tone,var(--service-tone,var(--blue)));font-size:14px;font-weight:500;line-height:22px}
.card-action>span:last-child{color:var(--blue);font-size:22px;line-height:22px}
.home-account{padding-bottom:80px}
.account-panel{display:grid;grid-template-columns:minmax(0,680fr) minmax(0,448fr);gap:56px;align-items:center;padding:48px;border-radius:24px;color:#fff;background:var(--navy)}
.account-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.account-copy .eyebrow{color:var(--lime)}
.account-copy h2{font-size:32px;line-height:44px}
.account-copy>p:not(.eyebrow){font-size:16px;line-height:26px}
.account-copy .button{min-width:210px}
.account-functions{display:flex;flex-direction:column;gap:20px;min-width:0}
.account-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:20px;letter-spacing:1.2px}
.account-label .badge{background:var(--lime);color:var(--navy);letter-spacing:0}
.account-functions>a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--muted);color:#fff;font-size:14px;font-weight:500;line-height:22px}
.account-functions>a:hover{color:var(--lime)}
.account-functions>a>span:last-child{color:var(--lime)}
.home-about{padding-block:80px;background:var(--canvas)}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
.about-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.about-copy h2{font-size:32px;line-height:44px}
.about-copy>p:not(.eyebrow){font-size:16px;line-height:26px;color:var(--muted)}
.capabilities{display:flex;flex-direction:column;gap:24px}
.capability{display:flex;align-items:flex-start;gap:20px;min-width:0}
.capability>span{flex:none;color:var(--blue);font-size:14px;font-weight:500;line-height:22px}
.capability>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.capability h3{font-size:20px;line-height:30px}
.capability p{color:var(--muted);font-size:13px;line-height:22px}
.home-footer{padding-block:80px}
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.contact-row>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.contact-row h2{font-size:32px;line-height:44px}
.contact-row p{color:var(--muted);font-size:16px;line-height:26px}
.contact-row .button{min-width:184px}
.footer-rule{height:0;border:0;border-top:1px solid var(--line);margin:32px 0}
.footer-links{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.footer-links nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;color:var(--muted);font-size:13px;line-height:22px}
.company-details{display:flex;flex-direction:column;gap:32px;margin-top:32px;color:var(--muted);font-size:12px;line-height:20px}
.company-details address{font:inherit;font-style:normal}
.company-details a:hover{text-decoration:underline}
.compact-footer{padding-block:32px}
.compact-footer .footer-rule{margin:0 0 24px}
.compact-footer .footer-links{align-items:center}
.compact-footer .footer-links nav a:first-child{color:var(--blue)}
.compact-footer .copyright{color:var(--muted);font-size:12px;line-height:20px;margin-top:24px}
.not-found{min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding-block:80px}
.not-found h1{font-size:44px;line-height:60px}
.not-found>p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:26px}

/* Intermediate widths keep every service and the navigation usable. */
@media(max-width:1199px){
 .container{width:calc(100% - 80px)}
 .header-nav{gap:24px}.header-account{gap:20px;padding-left:8px}
 .home-hero-grid{gap:40px}.hero-copy h1{font-size:44px;line-height:60px}.hero-actions{flex-wrap:wrap}
 .hero-actions .primary,.hero-actions .secondary{min-width:0;padding-inline:20px}
 .service-collection h2{font-size:28px;line-height:40px}.hero-tile{padding:12px}.hero-tile>span:not(.service-logo){font-size:13px}.hero-tile small{font-size:11px}
 .card-identity{padding:20px;gap:12px}.card-identity h3{font-size:22px;line-height:32px}.card-identity p{font-size:10px;line-height:18px}
 .card-content{padding:20px}.card-title{font-size:18px;line-height:28px}
 .account-panel{padding:40px;gap:40px}.account-copy h2,.about-copy h2{font-size:28px;line-height:40px}.about-grid{gap:40px}
}
@media(min-width:768px) and (max-width:1023px){
 .header-row{gap:20px}.header-nav{gap:16px;font-size:13px}.header-account{gap:16px;padding-left:0}.header-account .button{min-width:104px;padding-inline:16px;font-size:13px}
 .home-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}.hero-copy{max-width:640px}.hero-copy h1{font-size:48px;line-height:64px}
 .service-collection{padding:32px}.hero-tile{padding:16px}.hero-tile>span:not(.service-logo){font-size:14px}.hero-tile small{font-size:12px}
 .services-heading{align-items:flex-start;flex-direction:column;gap:16px}.services-heading>p{width:auto;font-size:14px}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-identity{padding:24px;gap:16px}.card-identity h3{font-size:24px;line-height:36px}.card-identity p{font-size:11px;line-height:20px}.card-content{padding:24px}
 .menu-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .account-panel{grid-template-columns:minmax(0,1fr);gap:32px}.about-grid{grid-template-columns:minmax(0,1fr);gap:40px}.contact-row h2{font-size:28px;line-height:40px}
}
@media(max-width:767px){
 .container{width:calc(100% - 40px)}.desktop-only{display:none!important}.mobile-only{display:block}
 section[id],footer[id]{scroll-margin-top:88px}
 .header-row{height:72px;gap:20px}.header-nav{gap:20px;font-size:14px}.header-nav>a:not(.mobile-only){display:none}
 .header-account{order:1;padding:0;gap:0}.header-account .button{display:none}.service-menu{order:2}
 .service-menu>summary{width:44px;height:44px;justify-content:center}.desktop-menu-label,.service-menu .chevron{display:none}
 .menu-icon{position:relative;display:flex;width:24px;height:24px;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink)}
 .menu-icon i{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .18s,opacity .18s}
 .service-menu[open] .menu-icon i:first-child{transform:translateY(5.5px) rotate(45deg)}.service-menu[open] .menu-icon i:nth-child(2){opacity:0}.service-menu[open] .menu-icon i:last-child{transform:translateY(-5.5px) rotate(-45deg)}
 .service-panel{position:fixed;top:72px;bottom:0;left:0;right:0;max-height:none;border:0;box-shadow:none}
 .service-panel>.container{gap:12px;padding-top:20px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .menu-heading{display:block}.menu-heading h2,.menu-heading>a{display:none}.menu-services{grid-template-columns:minmax(0,1fr);gap:12px}.menu-service{padding:16px}.menu-bottom{display:none}
 .mobile-menu-bottom{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
 .mobile-menu-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;font-size:14px;font-weight:500;line-height:22px}
 .mobile-menu-bottom>p{font-size:12px;font-weight:400;line-height:20px;color:var(--muted)}.mobile-menu-bottom .button{width:100%}
 .home-hero{padding-block:40px}.home-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}.hero-copy{gap:24px}.hero-copy h1{font-size:32px;line-height:44px}.hero-description{font-size:16px;line-height:26px}
 .hero-actions{width:100%;flex-wrap:nowrap}.hero-actions .button{flex:1;min-width:0;padding-inline:12px}.hero-actions .primary{flex:1.12}.hero-tags{display:none}
 .service-collection{gap:16px;padding:24px}.service-collection h2{font-size:24px;line-height:36px}.hero-tiles,.collection-footnote{display:none}
 .hero-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.service-chip{display:flex;align-items:center;gap:8px;min-width:0;color:#fff;font-size:13px;line-height:22px}.service-chip:hover{color:var(--lime)}
 .home-services{padding-block:48px}.services-heading{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:20px}.services-heading>div{gap:20px}.services-heading h2{font-size:24px;line-height:36px}.services-heading>p{width:auto;font-size:16px;line-height:26px}
 .service-grid{grid-template-columns:minmax(0,1fr);gap:24px}.card-identity{padding:24px;gap:16px}.card-identity p{font-size:12px;line-height:20px}.card-identity h3{font-size:24px;line-height:36px}.card-content{padding:24px;gap:20px}.card-title{font-size:16px;font-weight:400;line-height:26px}
 .home-account{padding-bottom:48px}.account-panel{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px}.account-copy h2{font-size:24px;line-height:36px}.account-label{display:none}.account-functions{gap:20px}
 .home-about{padding-block:48px}.about-grid{grid-template-columns:minmax(0,1fr);gap:32px}.about-copy h2{font-size:24px;line-height:36px}.capability{gap:20px}
 .home-footer{padding-block:48px}.contact-row{flex-direction:column;align-items:flex-start;gap:16px}.contact-row h2{font-size:24px;line-height:36px}.footer-links{flex-direction:column;gap:24px}.footer-links nav{gap:12px 24px;font-size:12px;line-height:20px}
 .company-details{font-size:12px;line-height:20px}.compact-footer .footer-links{align-items:flex-start;gap:12px}.compact-footer .copyright{font-size:11px}
 .not-found{padding-block:48px}.not-found h1{font-size:32px;line-height:44px}
}
@media(max-width:374px){
 .header-row,.header-nav{gap:12px}.hero-copy>.eyebrow{font-size:10px;letter-spacing:.7px}.hero-actions .button{font-size:12px;padding-inline:8px}
 .card-identity{padding:20px;gap:12px}.card-identity h3{font-size:22px}.card-identity p{font-size:10px}.card-content{padding:20px}
 .service-collection{padding:20px}.collection-label{font-size:10px}.collection-label .eyebrow{font-size:10px;letter-spacing:.8px}.hero-chips{gap:12px 8px}.service-chip{font-size:11px;gap:6px}.account-panel{padding:20px}.mobile-menu-links{gap:12px 20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important}}

/* Native HTML translation of approved ONEL guide desktop and mobile frames. */
.guide-page { color: var(--ink); }
.guide-page p, .guide-page h1, .guide-page h2, .guide-page h3, .guide-page dl, .guide-page dd { margin: 0; }
.guide-page section[id] { scroll-margin-top: 104px; }
.guide-page .eyebrow { color: var(--guide-tone); font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 1.2px; }
.guide-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The Figma logo slots are 40px; transforms preserve the source proportions. */
.service-logo.guide-logo { position: relative; display: inline-flex; flex: none; width: var(--guide-logo-size); height: var(--guide-logo-size); padding: 0; background: none; }
.guide-logo-art { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%) scale(var(--guide-logo-scale)); }
.guide-logo-art img { display: block; flex: none; max-width: none; }
.guide-logo-talkdocu { width: 40px; height: 40px; object-fit: contain; }
.guide-logo-daybook { width: 28px; height: 28px; object-fit: contain; }
.guide-logo-vector { width: 40px; height: 40px; }
.guide-logo-coes { color: #b75c28; font-size: 24px; font-weight: 700; line-height: normal; }
.guide-logo-fact-crop { display: block; position: relative; width: 40px; height: 24.74px; overflow: hidden; }
.guide-logo-fact-crop img { position: absolute; left: -17.38%; top: 0; width: 139.95%; height: 110.58%; }

.guide-breadcrumb { display: flex; gap: 12px; padding-top: 16px; padding-bottom: 16px; font-size: 13px; line-height: 22px; }
.guide-breadcrumb a, .guide-breadcrumb > span:not([aria-current]) { color: var(--muted); }
.guide-breadcrumb a { text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--blue); }
.guide-hero { background: var(--cream); padding-block: 56px; }
.guide-hero-inner { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 576fr); gap: 64px; align-items: center; }
.guide-story { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.guide-product { display: flex; align-items: center; gap: 12px; }
.guide-product > p { font-size: 24px; line-height: 36px; font-weight: 700; }
.guide-story h1 { width: 100%; font-size: 44px; line-height: 60px; font-weight: 700; letter-spacing: 0; word-break: keep-all; overflow-wrap: break-word; }
.guide-headline-mobile { display: none; }
.guide-intro { color: var(--muted); font-size: 16px; line-height: 26px; word-break: keep-all; overflow-wrap: break-word; }
.guide-actions { display: flex; gap: 12px; width: 100%; }
.guide-actions .primary { width: 232px; }
.guide-actions .secondary { width: 190px; }
.guide-audience { max-width: 610px; color: var(--muted); font-size: 13px; line-height: 22px; }

.guide-preview { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px; background: var(--guide-soft); border-radius: 20px; }
.guide-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-preview-identity { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 22px; font-weight: 500; }
.guide-preview-caption { flex: none; color: var(--muted); font-size: 12px; line-height: 20px; }
.guide-preview-title { font-size: 20px; font-weight: 700; line-height: 30px; }
.guide-document { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; }
.guide-document-row { display: flex; gap: 12px; align-items: flex-start; }
.guide-file-tag { flex: none; width: 48px; padding: 8px; background: var(--guide-soft); color: var(--guide-tone); border-radius: 8px; font-size: 12px; line-height: 20px; text-align: center; }
.guide-document-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-document-copy p { font-size: 14px; line-height: 22px; font-weight: 500; overflow-wrap: anywhere; }
.guide-document-copy > span { color: var(--muted); font-size: 12px; line-height: 20px; }
.guide-plan { position: relative; width: 100%; aspect-ratio: 496 / 115.733; }
.guide-plan-art { position: absolute; left: 1.4624%; top: 9.823%; width: 93.7365%; }
.guide-plan-art img { display: block; max-width: 100%; height: auto; }
.guide-question { padding: 16px; border-radius: 20px; background: var(--navy); color: #fff; font-size: 14px; line-height: 22px; font-weight: 500; }
.guide-answer { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px; background: #fff; border-radius: 20px; }
.guide-answer-text { font-size: 20px; line-height: 30px; font-weight: 700; }
.guide-result { background: var(--guide-soft); color: var(--guide-tone); border-radius: 999px; font-size: 12px; line-height: 20px; padding: 4px 12px; }

.guide-tabs { padding-top: 8px; padding-bottom: 8px; }
.guide-tabs-row { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.guide-tabs a { padding: 12px; color: var(--muted); font-size: 14px; line-height: 22px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.guide-tabs a[aria-current], .guide-tabs a:hover { color: var(--guide-tone); }
.guide-section { padding-block: 80px; }
.guide-section-inner { display: flex; flex-direction: column; gap: 32px; }
.guide-section h2, .guide-start h2 { font-size: 32px; line-height: 44px; font-weight: 700; }
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.guide-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--canvas); min-width: 0; }
.guide-card-number { color: var(--blue); font-size: 12px; line-height: 20px; }
.guide-card h3 { font-size: 20px; line-height: 30px; font-weight: 700; }
.guide-card-body { color: var(--muted); font-size: 16px; line-height: 26px; overflow-wrap: break-word; }
.guide-how { background: var(--canvas); }
.guide-steps-cards .guide-card { background: #fff; }
.guide-start { padding-block: 80px; }
.guide-start-panel { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 656fr); gap: 64px; padding: 40px; border-radius: 20px; background: var(--navy); color: #fff; }
.guide-start-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.guide-start .eyebrow, .guide-requirements dt { color: var(--lime); }
.guide-start-copy > p:not(.eyebrow), .guide-requirements dd { font-size: 16px; line-height: 26px; }
.guide-start-copy .button { width: 248px; max-width: 100%; }
.guide-requirements { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.guide-requirements > div { display: flex; flex-direction: column; gap: 8px; }
.guide-requirements dt { font-size: 14px; line-height: 22px; font-weight: 500; }

@media (max-width: 1100px) and (min-width: 768px) {
  .guide-hero-inner { gap: 32px; }
  .guide-story h1 { font-size: 36px; line-height: 50px; }
  .guide-actions { flex-wrap: wrap; }
  .guide-actions .button { width: auto; min-width: 180px; }
  .guide-start-panel { gap: 32px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (max-width: 767px) {
  .guide-page section[id] { scroll-margin-top: 88px; }
  .guide-hero { padding-top: 32px; padding-bottom: 40px; }
  .guide-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .guide-story h1 { font-size: 32px; line-height: 44px; }
  .guide-adaptive-headline .guide-headline-desktop { display: none; }
  .guide-headline-mobile { display: inline; }
  .guide-actions { flex-direction: column; }
  .guide-actions .button { width: 100%; }
  .guide-preview-title, .guide-answer-text { font-size: 16px; line-height: 26px; font-weight: 400; }
  .guide-tabs-row { gap: 8px; }
  .guide-tabs a { padding-inline: 4px; }
  .guide-section, .guide-start { padding-block: 48px; }
  .guide-section h2, .guide-start h2 { font-size: 24px; line-height: 36px; }
  .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .guide-start-panel { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 28px; }
  .guide-start-copy .button { width: 100%; }
}

@media (max-width: 359px) {
  .guide-story h1 { font-size: 28px; line-height: 40px; }
  .guide-preview { padding: 20px; }
  .guide-preview-top { flex-wrap: wrap; }
  .guide-tabs a { padding-inline: 2px; font-size: 13px; }
  .guide-tabs-row { justify-content: space-between; gap: 0; }
}