/* pairing_id: TP-060 | site: 60 */
:root {
 --primary-color:#374181; --primary-light:#B9BCD3; --secondary-color:#B441AA;
 --accent-color:#C4A497; --dark-color:#264B3E; --text-color:#264B3E;
 --muted-color:#A9B2B2; --bg-color:#F9F1F9;
 --surface-color:#F1DFDA; --surface-alt-color:#FDFEFB; --border-color:#263419;
 --radius-sm:8px; --radius-md:16px; --radius-lg:24px;
 --shadow-soft:0 8px 24px rgba(0,0,0,.08); --shadow-strong:0 20px 50px rgba(0,0,0,.13); --content-width:46rem;
 --text-column-width:54rem; --section-space:5.0rem;
 --heading-weight:500; --body-weight:300; --body-line-height:1.45;
 --heading-font:"Segoe UI", Calibri, Arial, sans-serif; --body-font:"Arial Narrow", Arial, Helvetica, sans-serif;
 --grid-columns:4; --copy-span:2; --component-gap:1.7rem; --hero-title-size:clamp(2rem,4vw,4rem);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--body-font);font-weight:var(--body-weight);line-height:var(--body-line-height);color:var(--text-color);background:linear-gradient(180deg, var(--bg-color), var(--surface-alt-color));background-size:auto;}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.2em} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent-color);outline-offset:4px}
img,svg{max-width:100%;height:auto} h1,h2,h3{font-family:var(--heading-font);font-weight:var(--heading-weight);line-height:1.03;margin:0 0 .8em;text-transform:none;letter-spacing:-0.025em}
h1{font-size:var(--hero-title-size);max-width:6.2ch} h2{font-size:clamp(2rem,5vw,4.8rem)} h3{font-size:clamp(1.05rem,2vw,1.45rem)} p{max-width:70ch} .lead{font-size:clamp(1.05rem,1.5vw,1.35rem)}
.site-header{position:relative;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,4rem);border-bottom:1px solid color-mix(in srgb,var(--border-color) 20%,transparent);background:color-mix(in srgb,var(--bg-color) 88%,transparent);backdrop-filter:blur(14px)}
.brand-link{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-weight:700} .brand-link img{width:2.5rem;height:2.5rem} #site-nav{display:flex;justify-content:flex-end;gap:clamp(.7rem,2vw,1.6rem);flex-wrap:wrap} #site-nav a{text-decoration:none;padding:.45rem .15rem;border-bottom:1px solid transparent} #site-nav a:hover{border-color:var(--primary-color)} .nav-toggle{display:none;background:none;border:1px solid var(--border-color);padding:.65rem 1rem;border-radius:var(--radius-sm)}
main{overflow:clip} .home-section{min-height:var(--section-min,auto);background:var(--section-bg,var(--surface-alt-color));color:var(--section-fg,var(--text-color));position:relative;padding:var(--section-space) max(1rem,calc((100vw - var(--content-width))/2));border-bottom:1px solid color-mix(in srgb,var(--border-color) 18%,transparent)}
.section-inner{max-width:var(--section-max,var(--content-width));margin-inline:auto;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:clamp(1rem,3vw,3rem);align-items:center;justify-content:var(--section-justify,start)} .section-copy{grid-column:span var(--copy-span)} .component-set{grid-column:1/-1;gap:var(--component-gap)} .visual-anchor{grid-column:span var(--copy-span);position:relative} .visual-anchor img{width:100%;filter:saturate(.86);border-radius:var(--radius-lg);box-shadow:var(--shadow-strong)}
[data-image-treatment="typography-led-no-images"] .first-screen .visual-anchor,[data-image-treatment="icon-led-no-images"] .first-screen .visual-anchor{max-width:15rem;justify-self:end;opacity:.72} [data-image-treatment="no-photography"] .visual-anchor img{filter:none} .first-screen{min-height:max(42rem,85vh)} .first-screen .section-inner{align-items:end} .eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;font-weight:700;opacity:.72} .content-angle{border-left:3px solid var(--accent-color);padding-left:1rem} .hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:2rem 0} .button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.15rem;border-radius:var(--radius-sm);text-decoration:none;border:1px solid var(--border-color);font-weight:700} .button.primary{background:var(--primary-color);color:var(--surface-alt-color);border-color:var(--primary-color)} .button.secondary{background:transparent}
.statistics{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem} .metric{min-width:8.5rem;padding:1rem;border:1px solid color-mix(in srgb,var(--border-color) 30%,transparent);background:color-mix(in srgb,var(--surface-alt-color) 72%,transparent);border-radius:var(--radius-sm)} .metric strong{display:block;font-family:var(--heading-font);font-size:2rem} .metric span{font-size:.82rem}
.component-set{display:grid} .component-item{position:relative} .pattern-text-cards,.pattern-note-cards,.pattern-outlined-panels,.pattern-borderless-panels,.pattern-stat-tiles,.pattern-mini-dashboard,.pattern-stacked-sheets,.pattern-callout-stack{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.pattern-text-cards .component-item,.pattern-note-cards .component-item,.pattern-outlined-panels .component-item,.pattern-stat-tiles .component-item,.pattern-mini-dashboard .component-item{padding:clamp(1rem,2.5vw,2rem);background:var(--surface-alt-color);color:var(--text-color);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);border:1px solid color-mix(in srgb,var(--border-color) 25%,transparent)} .pattern-borderless-panels .component-item{padding:1.2rem 0;border-top:2px solid var(--accent-color)} .pattern-note-cards .component-item:nth-child(even){transform:translateY(1.5rem)}
.pattern-stacked-sheets .component-item{padding:2rem;background:var(--surface-alt-color);color:var(--text-color);border:1px solid var(--border-color);box-shadow:8px 8px 0 var(--primary-light);transform:rotate(calc((var(--i,1) - 2)*.3deg))} .sheet-tab{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}
.pattern-numbered-list,.pattern-stepper,.pattern-timeline,.pattern-checklist,.pattern-icon-list,.pattern-badge-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))} .pattern-numbered-list li,.pattern-stepper li,.pattern-timeline li,.pattern-checklist li,.pattern-icon-list li,.pattern-badge-list li{display:flex;gap:1rem;padding:1.25rem;border-bottom:1px solid color-mix(in srgb,var(--border-color) 30%,transparent)} .item-mark,.check-mark,.badge-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;border:1px solid currentColor;border-radius:var(--radius-sm);font-size:.75rem} .item-icon{width:2.5rem;height:2.5rem;flex:0 0 auto}
.pattern-timeline{position:relative} .pattern-timeline:before{content:"";position:absolute;inset:1.2rem auto 1.2rem 1.2rem;border-left:2px solid var(--accent-color)} .pattern-timeline li{padding-left:3.3rem} .pattern-stepper li{counter-increment:step} .pattern-stepper .item-mark{background:var(--primary-color);color:var(--surface-alt-color)}
.pattern-accordion details,.faq-item{border-top:1px solid var(--border-color);padding:1rem 0} summary{cursor:pointer;font-weight:700} .pattern-tabs{display:block} .tab-list{display:flex;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--border-color);padding-bottom:.8rem} .tab-button{border:1px solid var(--border-color);background:var(--surface-alt-color);padding:.75rem 1rem;border-radius:var(--radius-sm);font:inherit} .tab-button[aria-selected="true"]{background:var(--primary-color);color:var(--surface-alt-color)} .tab-panel{padding:2rem 0}
.pattern-link-directory,.pattern-anchor-menu,.pattern-document-index,.pattern-navigation-map{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))} .directory-link{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;padding:1.25rem;text-decoration:none;border-top:1px solid var(--border-color)} .directory-link small{grid-column:2}
.table-scroll{overflow:auto} table{border-collapse:collapse;width:100%;min-width:42rem;background:var(--surface-alt-color);color:var(--text-color)} th,td{padding:1rem;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--border-color) 28%,transparent);vertical-align:top}
.pattern-definition-list{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))} .pattern-definition-list>div{padding:1rem;border-left:3px solid var(--primary-color)} dt{font-weight:700} dd{margin:.5rem 0 0} .pattern-tag-cloud{display:flex;flex-wrap:wrap} .tag{padding:.7rem 1rem;border:1px solid var(--border-color);border-radius:999px;text-decoration:none;background:var(--surface-alt-color);color:var(--text-color)}
.pattern-editorial-columns{columns:3;column-gap:3rem;display:block} .pattern-editorial-columns .component-item{break-inside:avoid;padding:0 0 2rem} .drop-number{font-size:3rem;font-family:var(--heading-font);float:left;margin-right:.6rem}
.dashboard-line{display:flex;justify-content:space-between;font-size:.72rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem} .stat-number{font-family:var(--heading-font);font-size:3rem;display:block} blockquote{margin:0;padding:1.25rem;border-left:5px solid var(--accent-color);background:var(--surface-alt-color);color:var(--text-color)}
.section-symbol{grid-column:span 2;align-self:start;justify-self:end;font:700 clamp(4rem,9vw,9rem)/1 var(--heading-font);opacity:.14} .mechanic-emphasis:before{content:"";position:absolute;width:clamp(5rem,14vw,13rem);height:clamp(5rem,14vw,13rem);border:1px solid color-mix(in srgb,var(--accent-color) 65%,transparent);border-radius:var(--radius-lg);right:3vw;top:2vw;transform:rotate(3deg);pointer-events:none}
.layout-split-3-9 .section-copy{grid-column:span 3} .layout-split-3-9 .component-set{grid-column:span 9} .layout-split-4-8 .section-copy{grid-column:span 4} .layout-split-4-8 .component-set{grid-column:span 8} .layout-split-5-7 .section-copy{grid-column:span 5} .layout-split-5-7 .component-set{grid-column:span 7} .layout-split-6-6 .section-copy{grid-column:span 6} .layout-split-6-6 .component-set{grid-column:span 6} .layout-split-7-5 .section-copy{grid-column:span 7} .layout-split-7-5 .component-set{grid-column:span 5} .layout-split-8-4 .section-copy{grid-column:span 8} .layout-split-8-4 .component-set{grid-column:span 4}
.layout-centered-stack .section-inner{display:flex;flex-direction:column;align-items:center;text-align:center} .layout-horizontal-strip .component-set{display:flex;overflow:auto;scroll-snap-type:x mandatory} .layout-horizontal-strip .component-item{min-width:min(78vw,22rem);scroll-snap-align:start} .layout-masonry-grid .component-set{columns:3;display:block} .layout-masonry-grid .component-item{break-inside:avoid;margin-bottom:var(--component-gap)} .layout-overlapping-surfaces .component-item:nth-child(even){transform:translateY(1.5rem)} .layout-layered-panels .component-set{perspective:1000px} .layout-layered-panels .component-item:nth-child(odd){transform:rotate(-.7deg)} .layout-stepped-grid .component-item:nth-child(3n+2){transform:translateY(2rem)} .layout-asymmetric-mosaic .component-set{grid-template-columns:2fr 1fr 1fr} .layout-asymmetric-mosaic .component-item:first-child{grid-row:span 2} .layout-sticky-left-aside .section-copy,.layout-sticky-right-aside .section-copy{position:sticky;top:6rem;align-self:start} .layout-sticky-right-aside .section-copy{grid-column:7/-1} .layout-sticky-right-aside .component-set{grid-column:1/7;grid-row:1} .layout-cardless-editorial .component-item{box-shadow:none!important;background:transparent!important} .layout-framed-canvas{margin:clamp(1rem,3vw,3rem);border:1px solid var(--border-color)} .layout-narrow-document .section-inner{max-width:58rem} .layout-indexed-columns .component-set{grid-template-columns:repeat(var(--grid-columns),1fr)} .layout-alternating-row .component-item:nth-child(even){margin-left:10%} .layout-offset-right-grid .section-inner{padding-left:clamp(0rem,8vw,9rem)} .layout-offset-left-grid .section-inner{padding-right:clamp(0rem,8vw,9rem)}
.divider-color-band{border-bottom:1rem solid var(--accent-color)} .divider-vertical-rule .section-inner{border-left:3px solid var(--accent-color);padding-left:clamp(1rem,4vw,4rem)} .divider-dotted-rule{border-bottom:3px dotted var(--border-color)} .divider-framed-gap{margin-bottom:2rem} .divider-stepped-offset{clip-path:polygon(0 0,100% 0,100% 94%,70% 94%,70% 100%,0 100%)} .divider-label-divider:after{content:"60";position:absolute;right:1rem;bottom:.5rem;font:700 1rem var(--heading-font);opacity:.35}
.faq-full,.trust-block{grid-column:1/-1;margin-top:clamp(3rem,8vw,8rem);padding:clamp(1.2rem,4vw,3rem);background:var(--surface-alt-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--radius-md)} .trust-block ul{columns:2} .site-footer{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;padding:clamp(2rem,6vw,6rem);background:var(--dark-color);color:var(--surface-alt-color)} .site-footer nav{display:flex;flex-wrap:wrap;gap:1rem;align-content:start} .footer-note{grid-column:1/-1;opacity:.75}
.subpage-main{max-width:var(--content-width);margin:auto;padding:clamp(2rem,6vw,6rem) clamp(1rem,4vw,4rem)} .page-intro{min-height:35vh;display:flex;flex-direction:column;justify-content:end;padding-bottom:3rem;border-bottom:1px solid var(--border-color)} .page-intro h1{font-size:clamp(2.8rem,8vw,8rem)} .content-sheet,.step-page,.contact-layout{padding:clamp(2rem,6vw,6rem) 0;max-width:var(--text-column-width)} .contact-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:3rem} form{display:grid;gap:1rem} label{display:grid;gap:.35rem;font-weight:700} input,textarea{width:100%;font:inherit;padding:.85rem;border:1px solid var(--border-color);background:var(--surface-alt-color);border-radius:var(--radius-sm)} .notice{padding:1.25rem;border:1px solid var(--border-color);background:var(--primary-light);border-radius:var(--radius-md)}
.spatial-1{--section-min:18rem;--section-max:54rem;--section-justify:space-around;--section-bg:var(--bg-color);--section-fg:var(--text-color);}
.spatial-2{--section-min:42rem;--section-max:84rem;--section-justify:start;--section-bg:var(--surface-alt-color);--section-fg:var(--text-color);}
.spatial-3{--section-min:auto;--section-max:100%;--section-justify:space-between;--section-bg:var(--primary-light);--section-fg:var(--text-color);}
.spatial-4{--section-min:30rem;--section-max:54rem;--section-justify:end;--section-bg:transparent;--section-fg:var(--text-color);}
.spatial-5{--section-min:90vh;--section-max:84rem;--section-justify:end;--section-bg:var(--dark-color);--section-fg:var(--surface-alt-color);}