/* Scoped LP template. Independent mode avoids theme layout; theme mode supports THE THOR and other standard WordPress headers/footers. */ body.twlps-page,body.twlps-page .twlps-main{margin:0;padding:0;width:100%;max-width:none;background:#fff} .twlps-main,.twlps-main *{box-sizing:border-box} .twlps-main .twlps-section{position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--twlps-height);width:var(--twlps-width);margin:0 auto;background:var(--twlps-bg);color:var(--twlps-fg);border-radius:var(--twlps-radius);overflow:hidden} .twlps-main .twlps-shell{width:100%;max-width:1440px;margin:0 auto;padding:var(--twlps-effective-pad);display:flex;align-items:center;gap:5%;position:relative;z-index:1;min-width:0} .twlps-main .twlps-content{min-width:0;flex:0 1 var(--twlps-ratio)} .twlps-main .twlps-media{min-width:0;flex:1 1 0;display:flex;align-items:center;justify-content:center;transform:translate(var(--twlps-x),var(--twlps-y))} .twlps-main .twlps-media img{display:block;max-width:100%;height:auto;max-height:700px;object-fit:contain;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-heading{font-size:clamp(20.0px,var(--twlps-font),90.0px)!important;line-height:1.22!important;font-weight:750!important;letter-spacing:-.025em!important;color:inherit!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 .5em!important;position:static!important;text-transform:none!important} .twlps-main .twlps-heading:before,.twlps-main .twlps-heading:after{content:none!important;display:none!important} .twlps-main .twlps-heading-line{border-left:5px solid var(--twlps-accent)!important;padding-left:.35em!important} .twlps-main .twlps-heading-underline{border-bottom:3px solid var(--twlps-accent)!important;padding-bottom:.28em!important} .twlps-main .twlps-heading-box{background:var(--twlps-accent)!important;color:var(--twlps-bg)!important;padding:.24em .42em!important;border-radius:6px} .twlps-main .twlps-eyebrow{color:inherit;opacity:.85;letter-spacing:.1em;font-size:clamp(15px,1.2vw,17.0px);font-weight:700;margin:0 0 1em} .twlps-main .twlps-body{font-size:var(--twlps-body-font,15px);line-height:1.9;margin:0 0 1.5em;color:inherit} .twlps-main .twlps-buttons{display:flex;flex-wrap:wrap;gap:12px} .twlps-main .twlps-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 25px;text-decoration:none!important;border-radius:8px;background:var(--twlps-accent);color:var(--twlps-bg)!important;font-weight:700;border:2px solid var(--twlps-accent);transition:opacity .15s} .twlps-main .twlps-button:hover{opacity:.8} .twlps-main .twlps-button-secondary{background:transparent;color:var(--twlps-fg)!important} .twlps-main .twlps-bg-image{position:absolute;inset:0;background-position:calc(50% + var(--twlps-x)) calc(50% + var(--twlps-y));background-size:cover;opacity:.28;z-index:0} .twlps-main .twlps-full .twlps-content,.twlps-main .twlps-center .twlps-content{flex-basis:100%;max-width:900px} .twlps-main .twlps-full .twlps-shell,.twlps-main .twlps-center .twlps-shell{justify-content:center} .twlps-main .twlps-center .twlps-shell{flex-direction:column;text-align:center} .twlps-main .twlps-center .twlps-buttons{justify-content:center} .twlps-main .twlps-center .twlps-media{max-width:760px;flex:auto;width:100%;margin-top:20px} .twlps-main .twlps-center .twlps-media img{max-height:480px} .twlps-main .twlps-overlap .twlps-content{background:var(--twlps-bg);padding:26px;position:relative;z-index:2;border-radius:var(--twlps-radius);margin-right:-7%;box-shadow:0 12px 36px #00000012} .twlps-main .twlps-reverse .twlps-shell{flex-direction:row-reverse} .twlps-main .twlps-overlap.twlps-reverse .twlps-content{margin-right:0;margin-left:-7%} .twlps-main .twlps-align-center .twlps-content{text-align:center} .twlps-main .twlps-align-center .twlps-buttons{justify-content:center} .twlps-main .twlps-align-right .twlps-content{text-align:right} .twlps-main .twlps-align-right .twlps-buttons{justify-content:flex-end} @media(max-width:767px){ .twlps-main .twlps-section{width:100%;min-height:var(--twlps-mobile-height)!important;border-radius:0} .twlps-main .twlps-shell,.twlps-main .twlps-reverse .twlps-shell{flex-direction:column!important;gap:22px;padding:clamp(18px,6vw,40px)} .twlps-main .twlps-content,.twlps-main .twlps-media{flex:auto;width:100%;max-width:100%;margin:0!important;transform:none} .twlps-main .twlps-heading{font-size:var(--twlps-mobile-font)!important;overflow-wrap:anywhere} .twlps-main .twlps-body{font-size:var(--twlps-mobile-body-font,15px)} .twlps-main .twlps-media img{max-height:390px} .twlps-main .twlps-overlap .twlps-content{padding:20px} .twlps-main .twlps-buttons{flex-direction:column} .twlps-main .twlps-button{width:100%} } @media(prefers-reduced-motion:reduce){.twlps-main .twlps-button{transition:none}} /* Version 0.2 additions. */ .twlps-page .twlps-global-header{min-height:76px;padding:12px clamp(18px,4vw,65px);display:flex;align-items:center;gap:26px;justify-content:space-between;background:#fff;color:#1e3552;position:relative;z-index:10;box-sizing:border-box} .twlps-page .twlps-brand{font-size:21.0px;font-weight:800;color:inherit;text-decoration:none} .twlps-page .twlps-global-header nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin:0;padding:0} .twlps-page .twlps-global-header nav a{font-size:15px;text-decoration:none;color:inherit} .twlps-page .twlps-header-cta{padding:11px 17px;background:#244568;color:#fff;text-decoration:none;border-radius:8px;font-weight:700;white-space:nowrap} .twlps-page .twlps-nav-toggle{display:none;background:none;border:1px solid #ddd;border-radius:6px;padding:8px 10px} .twlps-main .twlps-section{overflow:visible;isolation:isolate;scroll-margin-top:30px} .twlps-main .twlps-section > .twlps-shell,.twlps-main .twlps-section > .twlps-grid-shell{width:100%;z-index:2} .twlps-main .twlps-grid-shell{display:grid;grid-template-columns:repeat(var(--twlps-columns),minmax(0,1fr));min-height:var(--twlps-height);gap:20px;align-items:stretch;max-width:1440px;margin:0 auto;padding:var(--twlps-effective-pad);box-sizing:border-box} .twlps-main .twlps-area{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:18px;position:relative} .twlps-main .twlps-area-media{width:100%;min-height:170px;display:flex;justify-content:center;align-items:center} .twlps-main .twlps-area-media img{display:block;width:100%;max-height:600px;height:auto;object-fit:contain;object-position:var(--twlps-image-pos);border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-image-cover .twlps-area-media{position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:0;overflow:hidden;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-image-cover .twlps-area-media img{height:100%;max-height:none;object-fit:cover;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-image-cover .twlps-area-copy{position:relative;z-index:1} .twlps-main .twlps-area-copy{min-width:0} .twlps-main .twlps-area-copy .twlps-heading{font-size:clamp(20.0px,calc(var(--twlps-font) * .65),var(--twlps-font))!important;overflow-wrap:anywhere} .twlps-main .twlps-area-copy .twlps-body{overflow-wrap:anywhere;font-size:var(--twlps-area-body-font,var(--twlps-body-font,15px))} .twlps-main .twlps-divider{display:block;position:absolute;left:0;right:0;width:100%;height:var(--twlps-divider-height);color:var(--twlps-bg);z-index:3;pointer-events:none} .twlps-main .twlps-divider-bottom{top:calc(100% - 1px)} .twlps-main .twlps-divider-top{bottom:calc(100% - 1px);transform:rotate(180deg)} .twlps-main .twlps-section{margin-bottom:var(--twlps-overlap)} .twlps-main .twlps-section:last-child{margin-bottom:0} @media(max-width:767px){ .twlps-page .twlps-global-header{flex-wrap:wrap;gap:12px} .twlps-page .twlps-nav-toggle{display:block;margin-left:auto} .twlps-page .twlps-global-header nav{display:none;order:3;width:100%} .twlps-page .twlps-global-header nav.twlps-nav-open{display:block} .twlps-page .twlps-global-header nav ul{flex-direction:column;align-items:stretch;padding:12px 0} .twlps-page .twlps-header-cta{font-size:15px;padding:9px} .twlps-main .twlps-grid-shell{grid-template-columns:1fr!important;gap:24px;min-height:var(--twlps-mobile-height);padding:clamp(18px,6vw,40px)} .twlps-main .twlps-area{min-height:120px} .twlps-main .twlps-image-cover .twlps-area-media{position:relative;height:260px} .twlps-main .twlps-area-copy .twlps-heading{font-size:var(--twlps-mobile-font)!important} .twlps-main .twlps-divider{height:min(var(--twlps-divider-height),45px)} } /* v0.2.1: split full-bleed media and independent per-area frames. */ .twlps-main .twlps-area{border:var(--twlps-area-border,0 solid transparent);border-radius:var(--twlps-area-radius,0px);overflow:hidden} .twlps-main .twlps-area-media{min-width:0} .twlps-main .twlps-split-bleed .twlps-grid-shell{max-width:none;padding:0;gap:0;min-height:var(--twlps-height)} .twlps-main .twlps-split-bleed .twlps-area{min-height:var(--twlps-height)} .twlps-main .twlps-split-bleed .twlps-area:not(.twlps-area-image){padding:var(--twlps-effective-pad)} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover{padding:0;border-radius:var(--twlps-area-radius,0px)} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media{position:absolute;inset:0;height:100%;width:100%} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-has-columns.twlps-reverse .twlps-grid-shell{direction:rtl} .twlps-main .twlps-has-columns.twlps-reverse .twlps-area{direction:ltr} @media(max-width:767px){ .twlps-main .twlps-split-bleed .twlps-grid-shell{min-height:0;padding:0;gap:0} .twlps-main .twlps-split-bleed .twlps-area{min-height:0} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover{height:300px;min-height:300px} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media{position:absolute;inset:0;height:100%} } .twlps-main .twlps-split-bleed.twlps-section{width:100%} /* 0.2.4 common optional header */ .twlps-page .twlps-global-header{background:var(--twlps-header-bg,#fff);color:var(--twlps-header-fg,#1e3552)} .twlps-page .twlps-header-sticky{position:sticky;top:0;z-index:50} .twlps-page.admin-bar .twlps-header-sticky{top:32px} .twlps-page .twlps-header-overlay{position:absolute;top:0;left:0;right:0;background:transparent;color:#fff} .twlps-page .twlps-header-overlay + .twlps-main .twlps-section:first-child{padding-top:76px} .twlps-page .twlps-minimal-nav{display:none} .twlps-page .twlps-minimal-nav.twlps-nav-open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--twlps-header-bg,#fff);color:var(--twlps-header-fg,#1e3552);padding:16px} .twlps-page .twlps-header-minimal .twlps-nav-toggle{display:block;margin-left:auto} .twlps-page .twlps-global-header nav .sub-menu{display:none;position:absolute;background:var(--twlps-header-bg,#fff);color:var(--twlps-header-fg,#1e3552);padding:12px;box-shadow:0 4px 12px #0002;z-index:51} .twlps-page .twlps-global-header nav li{position:relative} .twlps-page .twlps-global-header nav li:hover>.sub-menu,.twlps-page .twlps-global-header nav li:focus-within>.sub-menu{display:block} @media(max-width:782px){.twlps-page.admin-bar .twlps-header-sticky{top:46px}} @media(max-width:767px){.twlps-page .twlps-global-header nav .sub-menu{display:block;position:static;box-shadow:none;padding:6px 16px}} /* v0.3.2: independent crop, zoom and pan controls for every area. */ .twlps-main .twlps-area-media{overflow:hidden;position:relative} .twlps-main .twlps-area-media img{transform:translate(var(--twlps-image-x,0px),var(--twlps-image-y,0px)) scale(var(--twlps-image-scale,1));transform-origin:var(--twlps-image-pos,50% 50%);object-position:var(--twlps-image-pos,50% 50%)} .twlps-main .twlps-image-cover .twlps-area-media{display:block;min-height:0} .twlps-main .twlps-image-cover .twlps-area-media img{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover;position:absolute;inset:0} /* Full bleed only when two columns are selected, without inherited grid gutters. */ .twlps-main .twlps-split-bleed.twlps-section > .twlps-grid-shell{width:100%;max-width:none;margin:0;padding:0;gap:0} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover{min-height:var(--twlps-height);padding:0} @media(max-width:767px){.twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover{min-height:300px}} /* v0.3.3: the image fills its own clipped half, while boundary decoration is behind section content. */ .twlps-main .twlps-has-columns .twlps-grid-shell{position:relative;z-index:2} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover{position:relative;overflow:hidden;isolation:isolate} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media{position:absolute;inset:0;overflow:hidden;clip-path:inset(0);z-index:0} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} .twlps-main .twlps-section>.twlps-divider{z-index:0} .twlps-main .twlps-section>.twlps-divider-bottom{z-index:0} /* v0.3.4: Japanese serif/sans per section and per-area, independent of theme heading skins. */ .twlps-main { --twlps-family-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --twlps-family-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; } .twlps-main .twlps-section .twlps-heading{font-family:var(--twlps-heading-family)!important} .twlps-main .twlps-section .twlps-body{font-size:var(--twlps-body-font)!important;font-family:var(--twlps-body-family)!important} .twlps-main .twlps-area .twlps-heading{font-family:var(--twlps-area-heading-family)!important} .twlps-main .twlps-area .twlps-body{font-size:var(--twlps-area-body-font)!important;font-family:var(--twlps-area-body-family)!important} @media(max-width:767px){ .twlps-main .twlps-section .twlps-body{font-size:var(--twlps-mobile-body-font)!important} .twlps-main .twlps-area .twlps-body{font-size:var(--twlps-area-body-font)!important} } /* v0.3.5: extend full-bleed images behind top/bottom dividers and allow stronger crop adjustments. */ .twlps-main .twlps-grid-shell,.twlps-main .twlps-shell{overflow:visible} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover,.twlps-main .twlps-image-cover .twlps-area-media{overflow:visible} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media{inset:calc(-1 * var(--twlps-divider-extend-top,0px)) 0 calc(-1 * var(--twlps-divider-extend-bottom,0px)) 0} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{height:calc(100% + var(--twlps-divider-extend-top,0px) + var(--twlps-divider-extend-bottom,0px));top:calc(-1 * var(--twlps-divider-extend-top,0px));bottom:auto} @media(max-width:767px){ .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media{inset:0} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{height:100%;top:0} } /* v0.4.2: inherited top-boundary mask keeps split full-bleed images visually inside waves/triangles. */ .twlps-main .twlps-divider-mask{position:absolute;left:0;right:0;top:0;width:100%;height:var(--twlps-divider-height);color:var(--twlps-bg);z-index:1;pointer-events:none;display:block} .twlps-main .twlps-section > .twlps-grid-shell,.twlps-main .twlps-section > .twlps-shell{position:relative;z-index:2} .twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media,.twlps-main .twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{z-index:0} /* v0.4.0: gallery is a normal child of the full-width section, never a special preset. */ .twlps-main .twlps-full-with-gallery .twlps-shell{max-width:none;width:100%} .twlps-main .twlps-full-with-gallery .twlps-content{max-width:none;min-width:0;width:100%;flex:1 1 100%} .twlps-main .twlps-full-gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--twlps-g-gap,16px);width:100%;max-width:100%;margin:30px auto 0;text-align:left;box-sizing:border-box} .twlps-main .twlps-full-gallery-item{box-sizing:border-box;min-width:0;max-width:100%;margin:0!important;flex:0 0 calc((100% - (var(--twlps-g-cols,3) - 1) * var(--twlps-g-gap,16px)) / var(--twlps-g-cols,3))} .twlps-main .twlps-full-gallery-image{position:relative;display:block;width:100%;aspect-ratio:var(--twlps-g-ratio,4/3);overflow:hidden;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-full-gallery-image img{position:absolute!important;inset:0;display:block!important;width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;object-fit:cover;object-position:var(--twlps-g-x,50%) var(--twlps-g-y,50%);transform:scale(var(--twlps-g-scale,1));transform-origin:var(--twlps-g-x,50%) var(--twlps-g-y,50%)} .twlps-main .twlps-full-gallery-item figcaption{margin:.55em 0 0;color:inherit;line-height:1.6;font-size:var(--twlps-body-font);overflow-wrap:anywhere} @media(max-width:1023px){.twlps-main .twlps-full-gallery-item{flex-basis:calc((100% - var(--twlps-g-gap,16px))/2)}} @media(max-width:767px){.twlps-main .twlps-full-gallery{gap:min(var(--twlps-g-gap,16px),14px)}.twlps-main .twlps-full-gallery-item{flex-basis:calc((100% - min(var(--twlps-g-gap,16px),14px))/2)}} /* v0.4.3: selectable three- and four-column card presets. */ .twlps-main .twlps-cards3 .twlps-grid-shell,.twlps-main .twlps-cards4 .twlps-grid-shell{gap:clamp(12px,1.8vw,24px);align-items:stretch} .twlps-main .twlps-cards3 .twlps-area,.twlps-main .twlps-cards4 .twlps-area{background:#fff;color:#1c3553;border-radius:var(--twlps-card-radius,0px);box-shadow:0 6px 24px #0b23331a;justify-content:flex-start;gap:0;overflow:hidden} .twlps-main .twlps-cards3 .twlps-area-media,.twlps-main .twlps-cards4 .twlps-area-media{min-height:0;aspect-ratio:4/3;overflow:hidden} .twlps-main .twlps-cards3 .twlps-area-media img,.twlps-main .twlps-cards4 .twlps-area-media img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-cards3 .twlps-area-copy,.twlps-main .twlps-cards4 .twlps-area-copy{padding:clamp(15px,2vw,28px)} .twlps-main .twlps-cards3 .twlps-area-copy .twlps-heading,.twlps-main .twlps-cards4 .twlps-area-copy .twlps-heading{font-size:clamp(18.0px,calc(var(--twlps-font)*.56),28.0px)!important} @media (min-width:768px) and (max-width:1100px){.twlps-main .twlps-cards4 .twlps-grid-shell{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.twlps-main .twlps-cards3 .twlps-grid-shell,.twlps-main .twlps-cards4 .twlps-grid-shell{grid-template-columns:1fr!important;gap:18px}} /* v0.4.4: shared headline and lead ABOVE multi-column areas. */ .twlps-main .twlps-has-columns.twlps-section{flex-direction:column;justify-content:center;align-items:stretch} .twlps-main .twlps-has-columns>.twlps-section-intro{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;padding:var(--twlps-effective-pad) var(--twlps-effective-pad) 0;color:var(--twlps-fg);font-family:var(--twlps-body-family);box-sizing:border-box} .twlps-main .twlps-section-intro .twlps-heading{max-width:100%;overflow-wrap:anywhere} .twlps-main .twlps-section-intro .twlps-body{margin-bottom:0} .twlps-main .twlps-section-intro .twlps-buttons{margin-top:20px} .twlps-main .twlps-align-center>.twlps-section-intro{text-align:center} .twlps-main .twlps-align-center>.twlps-section-intro .twlps-buttons{justify-content:center} .twlps-main .twlps-align-right>.twlps-section-intro{text-align:right} .twlps-main .twlps-align-right>.twlps-section-intro .twlps-buttons{justify-content:flex-end} /* The section sets the minimum height; the cards need only their intrinsic height. */ .twlps-main .twlps-cards3>.twlps-grid-shell,.twlps-main .twlps-cards4>.twlps-grid-shell{min-height:0;align-self:stretch} .twlps-main .twlps-cards3>.twlps-section-intro,.twlps-main .twlps-cards4>.twlps-section-intro{padding-bottom:clamp(12px,1.8vw,24px)} @media(max-width:767px){ .twlps-main .twlps-has-columns>.twlps-section-intro{padding:clamp(18px,6vw,40px) clamp(18px,6vw,40px) 0} .twlps-main .twlps-section-intro .twlps-heading{font-size:var(--twlps-mobile-font)!important} } /* v0.4.5: unified card layout controls (3/4-card presets only). */ .twlps-main .twlps-cards3 .twlps-grid-shell,.twlps-main .twlps-cards4 .twlps-grid-shell{justify-items:stretch} .twlps-main .twlps-cards3 .twlps-area,.twlps-main .twlps-cards4 .twlps-area{width:var(--twlps-card-width,100%);max-width:100%;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-card-align-left .twlps-area{justify-self:start} .twlps-main .twlps-card-align-center .twlps-area{justify-self:center} .twlps-main .twlps-card-align-right .twlps-area{justify-self:end} .twlps-main .twlps-card-align-left .twlps-area-copy{text-align:left} .twlps-main .twlps-card-align-center .twlps-area-copy{text-align:center} .twlps-main .twlps-card-align-right .twlps-area-copy{text-align:right} .twlps-main .twlps-card-align-left .twlps-area-copy .twlps-buttons{justify-content:flex-start} .twlps-main .twlps-card-align-center .twlps-area-copy .twlps-buttons{justify-content:center} .twlps-main .twlps-card-align-right .twlps-area-copy .twlps-buttons{justify-content:flex-end} @media(max-width:767px){.twlps-main .twlps-cards3 .twlps-area,.twlps-main .twlps-cards4 .twlps-area{width:var(--twlps-card-width,100%)}} /* v0.5.1 — per-section button design settable by bulk style controls. */ .twlps-main .twlps-button{border-radius:var(--twlps-button-radius,8px)} /* 0.5.3: restrained, opt-in scroll motion and a dedicated metrics section. */ .twlps-main .twlps-counter .twlps-shell{display:block;max-width:1360px} .twlps-main .twlps-counter .twlps-content{max-width:none;width:100%;text-align:inherit} .twlps-main .twlps-counters{display:grid;grid-template-columns:repeat(var(--twlps-counter-cols,3),minmax(0,1fr));gap:clamp(14px,2.5vw,32px);margin:36px auto 0;text-align:center} .twlps-main .twlps-counter-item{min-width:0;padding:clamp(12px,2vw,28px);border-top:2px solid var(--twlps-accent)} .twlps-main .twlps-counter-number{margin:0;font-family:var(--twlps-heading-family);font-weight:750;line-height:1.15;font-size:clamp(30.0px,4.8vw,72.0px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .twlps-main .twlps-counter-label{margin:16px 0 0;font-family:var(--twlps-body-family);font-size:var(--twlps-body-font);line-height:1.65} @media(max-width:767px){.twlps-main .twlps-counters{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.twlps-main .twlps-counter-number{font-size:clamp(28.0px,7vw,48.0px)}} /* The .twlps-motion-ready class is added by JS only when an observer is available. If JS is disabled or reduced motion is preferred, content remains visible. */ @media(prefers-reduced-motion:no-preference){ .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-up:not(.twlps-in-view)>.twlps-shell, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-up:not(.twlps-in-view)>.twlps-section-intro, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-up:not(.twlps-in-view)>.twlps-grid-shell{opacity:0;transform:translate3d(0,24px,0)} .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-left:not(.twlps-in-view)>.twlps-shell, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-left:not(.twlps-in-view)>.twlps-section-intro, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-left:not(.twlps-in-view)>.twlps-grid-shell{opacity:0;transform:translate3d(-24px,0,0)} .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-right:not(.twlps-in-view)>.twlps-shell, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-right:not(.twlps-in-view)>.twlps-section-intro, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-right:not(.twlps-in-view)>.twlps-grid-shell{opacity:0;transform:translate3d(24px,0,0)} .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-zoom:not(.twlps-in-view)>.twlps-shell, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-zoom:not(.twlps-in-view)>.twlps-section-intro, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-zoom:not(.twlps-in-view)>.twlps-grid-shell{opacity:0;transform:scale(.97)} .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-up>.twlps-shell,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-left>.twlps-shell,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-right>.twlps-shell,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-zoom>.twlps-shell, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-up>.twlps-section-intro,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-left>.twlps-section-intro,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-right>.twlps-section-intro,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-zoom>.twlps-section-intro, .twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-up>.twlps-grid-shell,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-left>.twlps-grid-shell,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-fade-right>.twlps-grid-shell,.twlps-page.twlps-motion-ready .twlps-section.twlps-motion-zoom>.twlps-grid-shell{transition:opacity var(--twlps-motion-duration,750ms) ease var(--twlps-motion-delay,0ms),transform var(--twlps-motion-duration,750ms) cubic-bezier(.2,.7,.2,1) var(--twlps-motion-delay,0ms)} } /* v0.5.5 — Composable design skins. All decorations sit behind content and respect section stacking. */ .twlps-main .twlps-section[class*="twlps-skin-"]::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:var(--twlps-pattern);opacity:var(--twlps-pattern-opacity,1)} .twlps-main .twlps-section[class*="twlps-skin-"]>.twlps-shell, .twlps-main .twlps-section[class*="twlps-skin-"]>.twlps-grid-shell, .twlps-main .twlps-section[class*="twlps-skin-"]>.twlps-section-intro{position:relative;z-index:2} .twlps-main .twlps-skin-mesh{--twlps-pattern:linear-gradient(to right,color-mix(in srgb,var(--twlps-fg) 7%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--twlps-fg) 7%,transparent) 1px,transparent 1px);} .twlps-main .twlps-skin-mesh::before{background-size:28px 28px!important} .twlps-main .twlps-skin-mesh .twlps-area{box-shadow:0 8px 30px #0000000b} .twlps-main .twlps-skin-bold-frame{outline:6px solid var(--twlps-accent);outline-offset:-6px} .twlps-main .twlps-skin-bold-frame .twlps-area{border:3px solid var(--twlps-accent)!important;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-skin-bold-frame .twlps-button{border-width:3px;box-shadow:5px 5px 0 color-mix(in srgb,var(--twlps-fg) 25%,transparent)} .twlps-main .twlps-skin-dot{--twlps-pattern:radial-gradient(circle,color-mix(in srgb,var(--twlps-fg) 16%,transparent) 1px,transparent 1.3px)} .twlps-main .twlps-skin-dot::before{background-size:19px 19px!important} .twlps-main .twlps-skin-diagonal{--twlps-pattern:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--twlps-fg) 5%,transparent) 12px 13px)} .twlps-main .twlps-skin-diagonal .twlps-area{border-left:4px solid var(--twlps-accent)!important} .twlps-main .twlps-skin-paper{--twlps-pattern:repeating-linear-gradient(0deg,transparent 0 33px,color-mix(in srgb,var(--twlps-fg) 5%,transparent) 33px 34px)} .twlps-main .twlps-skin-paper .twlps-area{border:1px solid color-mix(in srgb,var(--twlps-fg) 20%,transparent)!important} .twlps-main .twlps-skin-gradient{--twlps-pattern:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--twlps-accent) 25%,transparent),transparent 55%),linear-gradient(140deg,transparent 35%,color-mix(in srgb,var(--twlps-accent) 12%,transparent))} .twlps-main .twlps-skin-gradient .twlps-area{box-shadow:0 12px 32px #00000013} .twlps-main .twlps-skin-glass{--twlps-pattern:radial-gradient(circle at 12% 16%,color-mix(in srgb,var(--twlps-accent) 31%,transparent),transparent 54%),radial-gradient(circle at 92% 90%,color-mix(in srgb,var(--twlps-accent) 18%,transparent),transparent 48%)} .twlps-main .twlps-skin-glass .twlps-area{background:color-mix(in srgb,var(--twlps-bg) 77%,white 23%);border:1px solid color-mix(in srgb,var(--twlps-fg) 12%,transparent)!important;box-shadow:0 15px 42px #00000012} .twlps-main .twlps-skin-editorial{--twlps-pattern:linear-gradient(90deg,var(--twlps-accent) 0 7px,transparent 7px)} .twlps-main .twlps-skin-editorial .twlps-section-intro{text-align:left;max-width:1100px} .twlps-main .twlps-skin-editorial .twlps-area{border-bottom:2px solid var(--twlps-accent)!important} .twlps-main .twlps-skin-dark-grid{--twlps-pattern:linear-gradient(to right,#ffffff10 1px,transparent 1px),linear-gradient(to bottom,#ffffff10 1px,transparent 1px)} .twlps-main .twlps-skin-dark-grid::before{background-size:44px 44px!important} .twlps-main .twlps-skin-dark-grid .twlps-area{border:1px solid #ffffff42!important;background:#ffffff0b} @media(max-width:767px){.twlps-main .twlps-skin-bold-frame{outline-width:3px;outline-offset:-3px}.twlps-main .twlps-section[class*="twlps-skin-"]::before{background-size:24px 24px}} /* v0.5.6: preset helpers */ .twlps-main .twlps-has-columns.twlps-full .twlps-bg-image{opacity:.38;} /* v0.5.14: richer preset-specific skins + body typography control */ .twlps-main .twlps-skin-investor-slate .twlps-shell{justify-content:center;text-align:center} .twlps-main .twlps-skin-investor-slate .twlps-content{max-width:860px} .twlps-main .twlps-skin-investor-slate .twlps-heading{font-weight:450!important;letter-spacing:-.035em!important} .twlps-main .twlps-skin-investor-slate .twlps-body{max-width:760px;margin-left:auto;margin-right:auto;opacity:.82} .twlps-main .twlps-skin-investor-slate .twlps-button{min-width:260px;padding:16px 38px;border-radius:12px;background:color-mix(in srgb,var(--twlps-accent) 32%,#30343c 68%);border-color:transparent;color:#fff!important} .twlps-main .twlps-skin-stat-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07101859 0%,#0b10164a 45%,#07090dd4 100%);z-index:1;pointer-events:none} .twlps-main .twlps-skin-stat-overlay .twlps-bg-image{opacity:.72;filter:saturate(.82) contrast(.98)} .twlps-main .twlps-skin-stat-overlay>.twlps-section-intro{max-width:1080px;padding-top:56px;z-index:2} .twlps-main .twlps-skin-stat-overlay>.twlps-grid-shell{align-items:end;padding-top:20px;padding-bottom:96px;z-index:2} .twlps-main .twlps-skin-stat-overlay .twlps-area{background:#0d12164d;border-color:#ffffff66!important;backdrop-filter:blur(4px);padding:26px 28px 20px;min-height:230px} .twlps-main .twlps-skin-stat-overlay .twlps-area-copy .twlps-heading{font-size:clamp(42.0px,4.5vw,82.0px)!important;font-weight:500!important;margin-bottom:.2em!important} .twlps-main .twlps-skin-stat-overlay .twlps-area-copy .twlps-body{font-size:clamp(15px,1.4vw,24.0px)!important;opacity:.92} .twlps-main .twlps-skin-stat-overlay .twlps-section-intro .twlps-button{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);min-width:220px;background:#2e3238d0;color:#fff!important;border-color:transparent} .twlps-main .twlps-skin-ribbon-split .twlps-area{position:relative;min-height:var(--twlps-height);padding:54px 38px;display:flex;justify-content:center} .twlps-main .twlps-skin-ribbon-split .twlps-area::after{content:"";position:absolute;left:-16%;right:-16%;top:54%;height:148px;background:color-mix(in srgb,var(--twlps-accent) 76%,transparent);opacity:.86;transform:translateY(-50%) skewY(-18deg);z-index:1} .twlps-main .twlps-skin-ribbon-split .twlps-area:nth-child(2)::after{top:46%;transform:translateY(-50%) skewY(18deg)} .twlps-main .twlps-skin-ribbon-split .twlps-area-media::before{content:"";position:absolute;inset:0;background:#00000061;z-index:1} .twlps-main .twlps-skin-ribbon-split .twlps-area-media img{filter:brightness(.82) saturate(.88)} .twlps-main .twlps-skin-ribbon-split .twlps-area-copy{position:relative;z-index:2;max-width:420px;text-align:center;margin:auto} .twlps-main .twlps-skin-ribbon-split .twlps-area-copy .twlps-heading{font-size:clamp(38.0px,4.1vw,72.0px)!important} .twlps-main .twlps-skin-ribbon-split .twlps-buttons{justify-content:center} .twlps-main .twlps-skin-ribbon-split .twlps-button{background:#fff;color:#20242a!important;border-color:#fff;border-radius:999px;padding-inline:26px} .twlps-main .twlps-skin-team-panels>.twlps-section-intro{padding-bottom:18px} .twlps-main .twlps-skin-team-panels>.twlps-grid-shell{gap:34px} .twlps-main .twlps-skin-team-panels .twlps-area{background:transparent;border:0!important;overflow:visible;padding:0} .twlps-main .twlps-skin-team-panels .twlps-area-media{background:#eef2f6;border-radius:var(--twlps-image-radius,0px);overflow:hidden;aspect-ratio:4/5;min-height:0;position:relative} .twlps-main .twlps-skin-team-panels .twlps-area-media img{width:100%;height:100%;max-height:none;object-fit:cover} .twlps-main .twlps-skin-team-panels .twlps-area::after{content:"+";position:absolute;right:16px;top:min(72%,430px);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2b2b2d;font-size:34.0px;font-weight:400;box-shadow:0 8px 26px #00000025} .twlps-main .twlps-skin-team-panels .twlps-area-copy{padding:18px 6px 0} .twlps-main .twlps-skin-team-panels .twlps-area-copy .twlps-heading{font-size:clamp(25.0px,2.2vw,38.0px)!important;line-height:1.35!important;margin-bottom:.4em!important} .twlps-main .twlps-skin-team-panels .twlps-area-copy .twlps-body{opacity:.82} .twlps-main .twlps-skin-solid-brand .twlps-shell{justify-content:center} .twlps-main .twlps-skin-solid-brand .twlps-content{max-width:930px} .twlps-main .twlps-skin-solid-brand .twlps-eyebrow{opacity:1;font-weight:800} .twlps-main .twlps-skin-solid-brand .twlps-heading{margin-bottom:.7em!important} .twlps-main .twlps-skin-solid-brand .twlps-body{font-size:calc(var(--twlps-body-font,15px) * 1.35);line-height:2.05;max-width:none} .twlps-main .twlps-skin-panel-float{overflow:visible} .twlps-main .twlps-skin-panel-float>.twlps-section-intro{max-width:1120px;padding-bottom:72px} .twlps-main .twlps-skin-panel-float>.twlps-grid-shell{margin-top:-22px} .twlps-main .twlps-skin-panel-float .twlps-area{background:#f5f5f2;color:#1c2028;box-shadow:0 18px 42px #00000018;padding:30px 24px 28px;border-radius:var(--twlps-card-radius,0px);border:0!important} .twlps-main .twlps-skin-panel-float .twlps-area-media{aspect-ratio:1/1;background:#ececec;min-height:0} .twlps-main .twlps-skin-panel-float .twlps-area-media img{width:100%;height:100%;max-height:none;object-fit:cover} .twlps-main .twlps-skin-panel-float .twlps-area-copy{text-align:center} .twlps-main .twlps-skin-panel-float .twlps-area-copy .twlps-heading{font-size:clamp(24.0px,2vw,34.0px)!important;line-height:1.35!important} .twlps-main .twlps-skin-panel-float .twlps-area-copy .twlps-body{color:#2f3640} .twlps-main .twlps-skin-panel-float .twlps-button{background:transparent;border-color:transparent;color:#1c2028!important;padding:0;min-height:auto;text-decoration:underline!important;text-underline-offset:.18em} .twlps-main .twlps-skin-point-card .twlps-shell{justify-content:center} .twlps-main .twlps-skin-point-card .twlps-content{max-width:920px;background:#fff;padding:42px 54px;border-radius:var(--twlps-card-radius,0px);box-shadow:0 14px 40px #0000000e} .twlps-main .twlps-skin-point-card .twlps-eyebrow{display:inline-block;background:var(--twlps-accent);color:#fff;padding:.55em 1.25em;border-radius:999px;letter-spacing:.03em;opacity:1;margin-bottom:19.2px} .twlps-main .twlps-skin-point-card .twlps-heading{font-size:clamp(32.0px,3vw,56.0px)!important;line-height:1.35!important} .twlps-main .twlps-skin-service-index .twlps-eyebrow{font-size:clamp(18.0px,1.5vw,26.0px);font-weight:800;letter-spacing:.04em;color:var(--twlps-accent);opacity:1} .twlps-main .twlps-skin-service-index .twlps-heading{font-size:clamp(36.0px,4.8vw,78.0px)!important;line-height:1.14!important} .twlps-main .twlps-skin-service-index.twlps-cards3>.twlps-grid-shell,.twlps-main .twlps-skin-service-index.twlps-cards4>.twlps-grid-shell{gap:22px} .twlps-main .twlps-skin-service-index.twlps-cards3 .twlps-area,.twlps-main .twlps-skin-service-index.twlps-cards4 .twlps-area{background:#fff;border:0!important;border-top:4px solid var(--twlps-accent)!important;box-shadow:0 12px 32px #0000000c;padding:28px;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-skin-service-index.twlps-cards3 .twlps-area-copy .twlps-heading,.twlps-main .twlps-skin-service-index.twlps-cards4 .twlps-area-copy .twlps-heading{font-size:clamp(24.0px,2.3vw,36.0px)!important;line-height:1.35!important} .twlps-main .twlps-skin-chapter-clean .twlps-shell{align-items:flex-end} .twlps-main .twlps-skin-chapter-clean .twlps-content{max-width:1180px} .twlps-main .twlps-skin-chapter-clean .twlps-heading{font-size:clamp(58.0px,8vw,122.0px)!important;letter-spacing:-.05em!important;line-height:1!important} .twlps-main .twlps-skin-chapter-clean .twlps-eyebrow{font-size:clamp(16.0px,1.3vw,24.0px);letter-spacing:.08em;opacity:.9} @media(max-width:767px){ .twlps-main .twlps-skin-stat-overlay>.twlps-grid-shell{padding-bottom:118px} .twlps-main .twlps-skin-stat-overlay .twlps-section-intro .twlps-button{bottom:32px;width:auto;max-width:calc(100% - 48px)} .twlps-main .twlps-skin-ribbon-split .twlps-area{min-height:360px;padding:38px 24px} .twlps-main .twlps-skin-ribbon-split .twlps-area::after{height:120px} .twlps-main .twlps-skin-team-panels .twlps-area::after{top:260px;width:56px;height:56px} .twlps-main .twlps-skin-solid-brand .twlps-body{font-size:calc(var(--twlps-mobile-body-font,15px) * 1.25)} .twlps-main .twlps-skin-panel-float>.twlps-section-intro{padding-bottom:48px} .twlps-main .twlps-skin-point-card .twlps-content{padding:28px 22px} } /* v0.5.15: requested 14px body type in all bundled presets (editable per section). */ .twlps-main .twlps-skin-solid-brand .twlps-body{font-size:var(--twlps-body-font,15px)} .twlps-main .twlps-skin-stat-overlay .twlps-area-copy .twlps-body{font-size:var(--twlps-area-body-font,var(--twlps-body-font,15px))!important} @media(max-width:767px){.twlps-main .twlps-skin-solid-brand .twlps-body{font-size:var(--twlps-mobile-body-font,15px)}} /* v0.5.15: CTA stays at the bottom of the photograph, below the metrics grid. */ .twlps-main .twlps-skin-stat-overlay>.twlps-section-cta{position:absolute;z-index:4;bottom:25px;left:0;right:0;display:flex;justify-content:center} .twlps-main .twlps-skin-stat-overlay>.twlps-section-cta .twlps-button{min-width:200px;background:#2e3238e0;color:#fff!important;border-color:transparent;border-radius:7px} @media(max-width:767px){.twlps-main .twlps-skin-stat-overlay>.twlps-section-cta{bottom:26px;padding-inline:20px}} /* v0.5.17 | Site-starter art direction. Applied only to newly generated site designs. Existing LP sections without twlps-theme-* / twlps-role-* are unaffected. */ .twlps-main .twlps-section[class*="twlps-theme-"] .twlps-body{font-size:var(--twlps-body-font,15px);line-height:1.9} .twlps-main .twlps-section[class*="twlps-theme-"] .twlps-area .twlps-body{font-size:var(--twlps-area-body-font,15px)!important} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-hero .twlps-bg-image{opacity:.32} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-about .twlps-media img{object-fit:cover;aspect-ratio:5/4;width:100%;max-height:440px} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-about .twlps-shell{gap:7%} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-gallery .twlps-section-intro{max-width:1200px} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-gallery .twlps-full-gallery-image img{transition:transform .6s ease} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-gallery .twlps-full-gallery-item:hover img{transform:scale(1.035)} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-chapter .twlps-shell{max-width:1240px} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-chapter .twlps-heading{font-weight:800!important} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-message .twlps-shell{max-width:1200px} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-services .twlps-area-copy .twlps-body{line-height:1.9} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-cta .twlps-button{min-width:220px} /* Corporate: deep blue typography, strong horizontal rhythm. */ .twlps-main .twlps-theme-corporate.twlps-role-hero .twlps-content{max-width:780px;padding-left:clamp(20px,3vw,64px);border-left:5px solid var(--twlps-accent)} .twlps-main .twlps-theme-corporate.twlps-role-services .twlps-area{box-shadow:0 20px 42px #0b294012} .twlps-main .twlps-theme-corporate.twlps-role-services .twlps-area-media{aspect-ratio:16/10} .twlps-main .twlps-theme-corporate.twlps-role-chapter .twlps-heading{letter-spacing:-.055em!important} .twlps-main .twlps-theme-corporate.twlps-role-cta .twlps-content{max-width:830px} /* Editorial: asymmetry, photographed work, restrained typography. */ .twlps-main .twlps-theme-editorial.twlps-role-hero .twlps-shell{justify-content:flex-start} .twlps-main .twlps-theme-editorial.twlps-role-hero .twlps-content{max-width:1010px} .twlps-main .twlps-theme-editorial.twlps-role-hero .twlps-heading{letter-spacing:-.065em!important;font-weight:600!important} .twlps-main .twlps-theme-editorial.twlps-role-gallery .twlps-full-gallery-item:nth-child(2n){transform:translateY(18px)} .twlps-main .twlps-theme-editorial.twlps-role-about .twlps-heading{font-family:var(--twlps-family-serif)!important} /* Card stagger is controlled exclusively by cardOverlap; no automatic editorial offset. */ /* Technology: precision lines on dark navy and pale cyan. */ .twlps-main .twlps-theme-tech.twlps-role-hero .twlps-bg-image{opacity:.25;filter:saturate(.6)} .twlps-main .twlps-theme-tech.twlps-role-hero .twlps-content{max-width:940px} .twlps-main .twlps-theme-tech.twlps-role-services .twlps-area{background:#FFFFFF;border:1px solid #b8dcd9!important;box-shadow:0 12px 32px #07333b12} .twlps-main .twlps-theme-tech.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px);box-shadow:20px 20px 0 #2BA59822} .twlps-main .twlps-theme-tech.twlps-role-process .twlps-area{border-top-color:var(--twlps-accent)!important} /* Professional trust: warm paper surface, gold rules. */ .twlps-main .twlps-theme-trust.twlps-role-hero .twlps-content{border-top:2px solid var(--twlps-accent);padding-top:34px;max-width:790px} .twlps-main .twlps-theme-trust.twlps-role-hero .twlps-heading{font-family:var(--twlps-family-serif)!important;font-weight:600!important} .twlps-main .twlps-theme-trust.twlps-role-services .twlps-area{border-top:3px solid var(--twlps-accent)!important} .twlps-main .twlps-theme-trust.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px)} /* Portfolio: make photography central, serif accent caption. */ .twlps-main .twlps-theme-portfolio.twlps-role-hero .twlps-content{max-width:950px} .twlps-main .twlps-theme-portfolio.twlps-role-hero .twlps-heading{font-weight:500!important} .twlps-main .twlps-theme-portfolio.twlps-role-gallery .twlps-full-gallery-item{border-radius:var(--twlps-image-radius,0px);overflow:hidden} .twlps-main .twlps-theme-portfolio.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:none;border-bottom:2px solid var(--twlps-accent)!important} /* Minimal: visible rhythm from typography and hairlines. */ .twlps-main .twlps-theme-minimal.twlps-role-hero .twlps-content{max-width:1100px} .twlps-main .twlps-theme-minimal.twlps-role-hero .twlps-heading{font-size:clamp(56.0px,8vw,110.0px)!important;letter-spacing:-.065em!important} .twlps-main .twlps-theme-minimal.twlps-role-services .twlps-area{box-shadow:none;border-radius:var(--twlps-card-radius,0px);border-top:1px solid #202020!important;background:transparent} .twlps-main .twlps-theme-minimal.twlps-role-gallery .twlps-full-gallery-item{border-radius:var(--twlps-image-radius,0px)} /* Legal: discreet framing and quiet cream background. */ .twlps-main .twlps-theme-legal.twlps-role-hero .twlps-content{max-width:770px;border-left:1px solid #d8bc7e;padding-left:35px} .twlps-main .twlps-theme-legal.twlps-role-hero .twlps-heading{font-family:var(--twlps-family-serif)!important;font-weight:600!important} .twlps-main .twlps-theme-legal.twlps-role-services .twlps-area{border-top:2px solid var(--twlps-accent)!important;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-theme-legal.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px)} /* Restaurant: editorial food styling with large breathing room. */ .twlps-main .twlps-theme-restaurant.twlps-role-hero .twlps-content{max-width:760px} .twlps-main .twlps-theme-restaurant.twlps-role-hero .twlps-heading{font-family:var(--twlps-family-serif)!important;font-weight:500!important} .twlps-main .twlps-theme-restaurant.twlps-role-gallery .twlps-full-gallery-image{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-restaurant.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:0 14px 38px #48200b1b} /* Real estate: angular architecture and a subtle blueprint grid. */ .twlps-main .twlps-theme-realestate.twlps-role-hero .twlps-content{border-bottom:3px solid var(--twlps-accent);padding-bottom:18px} .twlps-main .twlps-theme-realestate.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px);box-shadow:16px 16px 0 #dbe3e5} .twlps-main .twlps-theme-realestate.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);border-top:4px solid var(--twlps-accent)!important} /* Chemical: measured grids and technical icon-free precision. */ .twlps-main .twlps-theme-chemical.twlps-role-hero .twlps-bg-image{opacity:.2} .twlps-main .twlps-theme-chemical.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);border:1px solid #a8cbd3!important} .twlps-main .twlps-theme-chemical.twlps-role-process .twlps-area{border-top:4px solid #36a4af!important} /* Shop: warm neutral palette and product image priority. */ .twlps-main .twlps-theme-shop.twlps-role-hero .twlps-heading{font-weight:600!important} .twlps-main .twlps-theme-shop.twlps-role-gallery .twlps-full-gallery-image{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-shop.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:0 14px 30px #553c3015} /* Beauty: soft outlines and round imagery. */ .twlps-main .twlps-theme-beauty.twlps-role-hero .twlps-heading{font-family:var(--twlps-family-serif)!important;font-weight:500!important} .twlps-main .twlps-theme-beauty.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-beauty.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);border:1px solid #e7cbd5!important} .twlps-main .twlps-theme-beauty.twlps-role-gallery .twlps-full-gallery-image{border-radius:var(--twlps-image-radius,0px)} /* Medical: clear hierarchical reading and restrained highlights. */ .twlps-main .twlps-theme-medical.twlps-role-hero .twlps-content{max-width:850px;border-left:4px solid #90d2c8;padding-left:30px} .twlps-main .twlps-theme-medical.twlps-role-services .twlps-area{border-top:3px solid #5da99e!important;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-theme-medical.twlps-role-point .twlps-content{border:1px solid #d7e8e4} /* Education: playful but disciplined card shapes. */ .twlps-main .twlps-theme-education.twlps-role-hero .twlps-content{max-width:860px} .twlps-main .twlps-theme-education.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:8px 10px 0 #e6a34d25} .twlps-main .twlps-theme-education.twlps-role-process .twlps-area{border-top:5px solid #e6a34d!important} /* Construction: exposed edges and a worksite-oriented layout. */ .twlps-main .twlps-theme-construction.twlps-role-hero .twlps-bg-image{opacity:.37;filter:saturate(.72)} .twlps-main .twlps-theme-construction.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-construction.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);border-top:5px solid var(--twlps-accent)!important;box-shadow:0 10px 20px #202c1912} /* Hotel: luxe pale paper, calm photography and centered hero. */ .twlps-main .twlps-theme-hotel.twlps-role-hero .twlps-content{max-width:780px;text-align:center} .twlps-main .twlps-theme-hotel.twlps-role-hero .twlps-heading{font-family:var(--twlps-family-serif)!important;font-weight:500!important} .twlps-main .twlps-theme-hotel.twlps-role-gallery .twlps-full-gallery-image{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-hotel.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:0 12px 40px #4b342012} /* Recruitment: photos and generous approachable cards. */ .twlps-main .twlps-theme-recruit.twlps-role-hero .twlps-heading{font-weight:800!important} .twlps-main .twlps-theme-recruit.twlps-role-team .twlps-area-media{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-recruit.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:0 15px 30px #24405a17} /* Manufacturing: precise steel-blue and technical lines. */ .twlps-main .twlps-theme-manufacturing.twlps-role-hero .twlps-bg-image{opacity:.27;filter:saturate(.52)} .twlps-main .twlps-theme-manufacturing.twlps-role-services .twlps-area{border:1px solid #bed0db!important;border-top:5px solid var(--twlps-accent)!important;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-theme-manufacturing.twlps-role-about .twlps-media img{border-radius:var(--twlps-image-radius,0px)} /* Six palettes + four art styles continue to receive individual finishing touches. */ .twlps-main .twlps-theme-palette-black.twlps-role-services .twlps-area,.twlps-main .twlps-theme-atelier-ink.twlps-role-services .twlps-area{background:#28292c;color:#fff;border:1px solid #ffffff28!important} .twlps-main .twlps-theme-palette-yellow.twlps-role-services .twlps-area{border:4px solid #292721!important;border-radius:var(--twlps-card-radius,0px);box-shadow:8px 8px 0 #292721} .twlps-main .twlps-theme-palette-orange.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-theme-palette-white.twlps-role-services .twlps-area{background:#fff;box-shadow:none;border-top:1px solid #292721!important;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-theme-palette-ocean.twlps-role-hero .twlps-bg-image{opacity:.25;filter:saturate(.65)} .twlps-main .twlps-theme-palette-green.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);border:1px solid #c5dac2!important} .twlps-main .twlps-theme-studio-violet.twlps-role-hero .twlps-bg-image{opacity:.23} .twlps-main .twlps-theme-industrial-steel.twlps-role-services .twlps-area{border:1px solid #b8d2db!important;border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-theme-cafe-terra.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px)} @media(max-width:767px){ .twlps-main .twlps-theme-editorial.twlps-role-services .twlps-area:nth-child(2),.twlps-main .twlps-theme-editorial.twlps-role-gallery .twlps-full-gallery-item:nth-child(2n){transform:none} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-hero .twlps-content{padding-left:0;border-left:0} .twlps-main .twlps-theme-corporate.twlps-role-hero .twlps-content{border-left:0;border-top:4px solid var(--twlps-accent);padding-top:24px} .twlps-main .twlps-theme-hotel.twlps-role-hero .twlps-content{text-align:center} .twlps-main .twlps-theme-minimal.twlps-role-hero .twlps-heading{font-size:var(--twlps-mobile-font)!important} } @media(prefers-reduced-motion:reduce){.twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-gallery .twlps-full-gallery-image img{transition:none}} /* 0.5.18: centered section-boundary ornaments. Each seam crosses both neighbouring sections. */ .twlps-main .twlps-overlap-on>.twlps-divider-bottom{top:calc(100% - var(--twlps-divider-height) / 2)} .twlps-main .twlps-overlap-on>.twlps-divider-top{bottom:calc(100% - var(--twlps-divider-height) / 2)} .twlps-main .twlps-divider-rule{position:absolute;left:0;right:0;width:100%;height:0;display:block;z-index:8;border-top-width:var(--twlps-rule-width,6px);border-top-color:var(--twlps-rule-color,var(--twlps-accent));pointer-events:none;box-sizing:border-box} .twlps-main .twlps-divider-rule-bottom{top:calc(100% - var(--twlps-rule-width,6px) / 2)} .twlps-main .twlps-divider-rule-top{top:calc(0px - var(--twlps-rule-width,6px) / 2)} .twlps-main .twlps-section>.twlps-divider-bottom,.twlps-main .twlps-section>.twlps-divider-top{z-index:7} /* Text and images stay in front of the decorative mask on content sections. */ .twlps-main .twlps-section>.twlps-shell,.twlps-main .twlps-section>.twlps-grid-shell,.twlps-main .twlps-section>.twlps-section-intro{z-index:2} @media(max-width:767px){ .twlps-main .twlps-overlap-on>.twlps-divider-bottom{top:calc(100% - min(var(--twlps-divider-height),45px) / 2)} .twlps-main .twlps-overlap-on>.twlps-divider-top{bottom:calc(100% - min(var(--twlps-divider-height),45px) / 2)} .twlps-main .twlps-divider-rule{border-top-width:var(--twlps-rule-width,6px)} } /* Control stacking for overlapping dividers: earlier bottom edge sits over the next section; an explicit top ornament is raised above the preceding section. Keep navigation above all. */ .twlps-main .twlps-section{z-index:var(--twlps-stack,0)} .twlps-page .twlps-global-header{z-index:3000} /* Page-level finishing accents; these remain scoped to new named starter sections. */ .twlps-main .twlps-theme-corporate.twlps-role-services .twlps-area, .twlps-main .twlps-theme-realestate.twlps-role-services .twlps-area{border-top:4px solid var(--twlps-accent)!important} .twlps-main .twlps-theme-tech.twlps-role-hero .twlps-content, .twlps-main .twlps-theme-chemical.twlps-role-hero .twlps-content, .twlps-main .twlps-theme-industrial-steel.twlps-role-hero .twlps-content{border-left:3px solid var(--twlps-accent);padding-left:clamp(18px,2.5vw,38px)} .twlps-main .twlps-theme-editorial.twlps-role-about .twlps-heading, .twlps-main .twlps-theme-atelier-ink.twlps-role-about .twlps-heading, .twlps-main .twlps-theme-studio-violet.twlps-role-message .twlps-heading{letter-spacing:-.055em!important;max-width:14ch} .twlps-main .twlps-theme-legal.twlps-role-point .twlps-content, .twlps-main .twlps-theme-trust.twlps-role-point .twlps-content, .twlps-main .twlps-theme-medical.twlps-role-point .twlps-content{border-radius:var(--twlps-card-radius,0px);box-shadow:0 18px 50px #0000000a} .twlps-main .twlps-theme-palette-yellow.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:7px 7px 0 var(--twlps-accent)} .twlps-main .twlps-theme-palette-black.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:0 14px 35px #00000035} .twlps-main .twlps-theme-palette-orange.twlps-role-services .twlps-area, .twlps-main .twlps-theme-cafe-terra.twlps-role-services .twlps-area{border-radius:var(--twlps-card-radius,0px);box-shadow:0 16px 36px #5e301519} .twlps-main .twlps-theme-palette-ocean.twlps-role-about .twlps-media img{box-shadow:18px 18px 0 #40b7d322} .twlps-main .twlps-theme-palette-green.twlps-role-services .twlps-area, .twlps-main .twlps-theme-construction.twlps-role-services .twlps-area{border-bottom:4px solid var(--twlps-accent)!important} .twlps-main .twlps-theme-manufacturing.twlps-role-services .twlps-area, .twlps-main .twlps-theme-industrial-steel.twlps-role-services .twlps-area{border:1px solid #718da144!important;border-top:4px solid var(--twlps-accent)!important} .twlps-main .twlps-theme-restaurant.twlps-role-gallery .twlps-full-gallery-image, .twlps-main .twlps-theme-hotel.twlps-role-gallery .twlps-full-gallery-image, .twlps-main .twlps-theme-beauty.twlps-role-gallery .twlps-full-gallery-image{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-theme-education.twlps-role-process .twlps-area, .twlps-main .twlps-theme-recruit.twlps-role-process .twlps-area{box-shadow:0 14px 30px #00000010} .twlps-main .twlps-theme-palette-white.twlps-role-hero .twlps-heading, .twlps-main .twlps-theme-minimal.twlps-role-hero .twlps-heading{letter-spacing:-.065em!important} /* 0.5.20 | compact section seams and collision-free member cards */ .twlps-main .twlps-skin-team-panels .twlps-area::after{content:none!important} /* The plus belongs to the PERSON PHOTO, not the entire service card. */ .twlps-main .twlps-skin-team-panels:not(.twlps-role-services) .twlps-area-media{ position:relative;overflow:visible;border-radius:var(--twlps-image-radius,0px); } .twlps-main .twlps-skin-team-panels:not(.twlps-role-services) .twlps-area-media img{ border-radius:var(--twlps-image-radius,0px);overflow:hidden; } .twlps-main .twlps-skin-team-panels:not(.twlps-role-services) .twlps-area-media::after{ content:"+";position:absolute;right:16px;bottom:-20px;width:46px;height:46px; border-radius:50%;display:grid;place-items:center;z-index:3;background:#fff;color:#242629; font-size:27.0px;line-height:1;font-weight:400;box-shadow:0 5px 18px #00000025;pointer-events:none; } .twlps-main .twlps-skin-team-panels:not(.twlps-role-services) .twlps-area-copy{ padding-top:30px;padding-right:68px;position:relative;z-index:2; } /* Generic business cards have no decorative plus icon. */ .twlps-main .twlps-role-services .twlps-area::after, .twlps-main .twlps-role-services .twlps-area-media::after{content:none!important} /* Leave a bit more breathing room around boundary ornaments on long-copy site designs. */ .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-services>.twlps-section-intro{padding-bottom:20px} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-process>.twlps-grid-shell{padding-top:18px} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-services .twlps-area{min-height:0} .twlps-main .twlps-section[class*="twlps-theme-"].twlps-role-services .twlps-area-copy{ overflow-wrap:anywhere;min-width:0; } @media(max-width:767px){ .twlps-main .twlps-skin-team-panels:not(.twlps-role-services) .twlps-area-media::after{ width:44px;height:44px;right:14px;bottom:-18px; } .twlps-main .twlps-skin-team-panels:not(.twlps-role-services) .twlps-area-copy{padding-right:52px} } /* 0.5.21 | Five individually art-directed recommended page kits. These rules apply only to NEW generated kit sections with a kit-specific designId. */ .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-body, .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-area-copy .twlps-body{ font-size:var(--twlps-body-font,15px)!important;line-height:1.9; } .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-area{border-radius:var(--twlps-card-radius,0px)} .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-area-media img{border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-section-intro{max-width:1240px} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-services>.twlps-grid-shell{gap:24px;padding-top:30px} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-process>.twlps-grid-shell{gap:22px;padding-top:26px} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-about .twlps-media img{aspect-ratio:5/4;width:100%;max-height:490px;object-fit:cover} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-chapter .twlps-heading{font-weight:820!important;letter-spacing:-.055em!important} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-message .twlps-heading{max-width:15ch} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-message.twlps-center .twlps-shell{text-align:left;align-items:stretch} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-message.twlps-center .twlps-content{max-width:900px} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-gallery .twlps-full-gallery-image img{transition:transform .5s ease} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-gallery .twlps-full-gallery-item:hover img{transform:scale(1.025)} .twlps-main .twlps-theme-kit-b2b.twlps-role-hero .twlps-content{max-width:900px;border-left:4px solid var(--twlps-accent);padding-left:clamp(22px,3vw,48px)} .twlps-main .twlps-theme-kit-b2b.twlps-role-services .twlps-area{box-shadow:0 12px 32px #103b5620} .twlps-main .twlps-theme-kit-b2b.twlps-role-services .twlps-area-media{aspect-ratio:16/11} .twlps-main .twlps-theme-kit-b2b.twlps-role-point .twlps-content{border-left:5px solid var(--twlps-accent)} .twlps-main .twlps-theme-kit-recruitment.twlps-role-hero .twlps-heading{max-width:14ch} .twlps-main .twlps-theme-kit-recruitment.twlps-role-hero .twlps-bg-image{opacity:.25} .twlps-main .twlps-theme-kit-recruitment.twlps-role-team .twlps-area-media{aspect-ratio:4/5} .twlps-main .twlps-theme-kit-recruitment.twlps-role-services .twlps-area{background:#FFFFFF;color:#352926} .twlps-main .twlps-theme-kit-recruitment.twlps-role-services .twlps-area-copy{text-align:left} .twlps-main .twlps-theme-kit-recruitment.twlps-role-services .twlps-area-media{aspect-ratio:5/4} .twlps-main .twlps-theme-kit-professional.twlps-role-hero .twlps-bg-image{opacity:0} .twlps-main .twlps-theme-kit-professional.twlps-role-hero .twlps-content{border-top:2px solid var(--twlps-accent);padding-top:36px;max-width:850px} .twlps-main .twlps-theme-kit-professional.twlps-role-about .twlps-heading{font-family:var(--twlps-family-serif)!important} .twlps-main .twlps-theme-kit-professional.twlps-role-services .twlps-area{box-shadow:none;border:1px solid #ddd8c8!important;border-top:3px solid var(--twlps-accent)!important} .twlps-main .twlps-theme-kit-shop.twlps-role-hero .twlps-heading{font-family:var(--twlps-family-serif)!important;max-width:12ch} .twlps-main .twlps-theme-kit-shop.twlps-role-message .twlps-heading{font-family:var(--twlps-family-serif)!important} .twlps-main .twlps-theme-kit-shop.twlps-role-services .twlps-area{box-shadow:0 14px 35px #633c261a} .twlps-main .twlps-theme-kit-shop.twlps-role-services .twlps-area-media{aspect-ratio:1/1} .twlps-main .twlps-theme-kit-shop.twlps-role-gallery .twlps-full-gallery-item:nth-child(2n){transform:translateY(12px)} .twlps-main .twlps-theme-kit-story.twlps-role-hero .twlps-heading{max-width:13ch;font-weight:530!important;letter-spacing:-.055em!important} .twlps-main .twlps-theme-kit-story.twlps-role-about .twlps-heading{font-family:var(--twlps-family-serif)!important} .twlps-main .twlps-theme-kit-story.twlps-role-services .twlps-area{box-shadow:0 14px 34px #31134017} .twlps-main .twlps-theme-kit-story.twlps-role-gallery .twlps-full-gallery-item:nth-child(2n){transform:translateY(12px)} @media(max-width:767px){ .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-body, .twlps-main .twlps-section[class*="twlps-theme-kit-"] .twlps-area-copy .twlps-body{font-size:var(--twlps-mobile-body-font,15px)!important} .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-services>.twlps-grid-shell, .twlps-main .twlps-section[class*="twlps-theme-kit-"].twlps-role-process>.twlps-grid-shell{padding-top:20px} .twlps-main .twlps-theme-kit-shop.twlps-role-gallery .twlps-full-gallery-item:nth-child(2n), .twlps-main .twlps-theme-kit-story.twlps-role-gallery .twlps-full-gallery-item:nth-child(2n){transform:none} } /* v0.5.23: boundary remains at the section seam; no artificial spacer when overlapping. */ .twlps-main .twlps-section.twlps-overlap-on{margin-bottom:0!important} .twlps-main .twlps-section.twlps-overlap-on>.twlps-divider-bottom{top:calc(100% - var(--twlps-divider-height,0px) / 2)} .twlps-main .twlps-section.twlps-overlap-on>.twlps-divider-rule-bottom{top:calc(100% - var(--twlps-rule-width,6px) / 2)} /* A purposeful graphic treatment: large disks, open rings, a fine grid and diagonal bands. */ .twlps-main .twlps-skin-orbital-grid{ --twlps-pattern: radial-gradient(circle 16px at 13% 18%,color-mix(in srgb,var(--twlps-accent) 70%,transparent) 98%,transparent 100%), radial-gradient(circle 44px at 72% 19%,color-mix(in srgb,var(--twlps-accent) 27%,transparent) 98%,transparent 100%), radial-gradient(circle 75px at 88% 78%,transparent 89%,color-mix(in srgb,var(--twlps-accent) 55%,transparent) 90% 96%,transparent 98%), radial-gradient(circle 31px at 31% 80%,color-mix(in srgb,var(--twlps-accent) 22%,transparent) 98%,transparent 100%), linear-gradient(to right,color-mix(in srgb,var(--twlps-fg) 11%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in srgb,var(--twlps-fg) 11%,transparent) 1px,transparent 1px) } .twlps-main .twlps-skin-orbital-grid::before{background-size:auto,auto,auto,auto,38px 38px,38px 38px!important;opacity:1} .twlps-main .twlps-skin-bubble-grid{ --twlps-pattern: radial-gradient(circle 178px at 5% 20%,color-mix(in srgb,var(--twlps-accent) 37%,transparent) 0 85%,transparent 86%), radial-gradient(circle 110px at 89% 10%,transparent 62%,color-mix(in srgb,var(--twlps-accent) 75%,transparent) 63% 67%,transparent 68%), radial-gradient(circle 115px at 95% 78%,color-mix(in srgb,var(--twlps-accent) 40%,transparent) 0 88%,transparent 89%), radial-gradient(circle 75px at 35% 91%,transparent 60%,color-mix(in srgb,var(--twlps-accent) 46%,transparent) 61% 67%,transparent 68%), radial-gradient(circle 36px at 58% 21%,color-mix(in srgb,var(--twlps-accent) 62%,transparent) 98%,transparent 100%), radial-gradient(circle 19px at 20% 74%,color-mix(in srgb,var(--twlps-accent) 68%,transparent) 98%,transparent 100%), linear-gradient(to right,color-mix(in srgb,var(--twlps-fg) 7%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in srgb,var(--twlps-fg) 7%,transparent) 1px,transparent 1px) } .twlps-main .twlps-skin-bubble-grid::before{background-size:auto,auto,auto,auto,auto,auto,42px 42px,42px 42px!important;opacity:1} .twlps-main .twlps-skin-slash-band{ --twlps-pattern: linear-gradient(133deg,transparent 0 16%,color-mix(in srgb,var(--twlps-accent) 50%,transparent) 16% 26%,transparent 26% 51%,color-mix(in srgb,var(--twlps-accent) 26%,transparent) 51% 61%,transparent 61% 100%), linear-gradient(to right,color-mix(in srgb,var(--twlps-fg) 6%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in srgb,var(--twlps-fg) 6%,transparent) 1px,transparent 1px) } .twlps-main .twlps-skin-slash-band::before{background-size:auto,42px 42px,42px 42px!important} @media(max-width:767px){ .twlps-main .twlps-skin-bubble-grid::before{background-position:-85px -65px,60px -50px,70px 250px,-30px 260px,0 0,0 0,0 0,0 0} .twlps-main .twlps-section.twlps-overlap-on>.twlps-divider-bottom{top:calc(100% - min(var(--twlps-divider-height),45px) / 2)} } /* v0.5.24 | purpose-built benefits, pricing and FAQ sections */ .twlps-main .twlps-benefits-inner,.twlps-main .twlps-pricing-inner,.twlps-main .twlps-faq-inner{width:100%;max-width:1440px;margin:0 auto;padding:var(--twlps-effective-pad);position:relative;z-index:2;min-width:0;font-family:var(--twlps-body-family)} .twlps-main .twlps-special-intro{max-width:960px;margin:0 auto clamp(30px,4vw,56px);text-align:center} .twlps-main .twlps-special-intro .twlps-heading{margin:0 0 .55em!important} .twlps-main .twlps-special-intro .twlps-body{font-size:var(--twlps-body-font,15px)!important;line-height:1.9;max-width:760px;margin:0 auto;color:inherit} .twlps-main .twlps-benefits-grid,.twlps-main .twlps-pricing-grid{display:grid;grid-template-columns:repeat(var(--twlps-special-cols,3),minmax(0,1fr));gap:clamp(14px,2.2vw,32px);align-items:stretch;min-width:0} .twlps-main .twlps-benefit{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;background:#f4f7ff;color:#27354e;border:1px solid #dce5f2;border-radius:var(--twlps-card-radius,0px);overflow:hidden;box-shadow:0 12px 32px #10244015;text-align:center;padding:0 26px 30px} .twlps-main .twlps-benefit-label{font:800 clamp(20px,2vw,30px)/1.42 var(--twlps-heading-family);letter-spacing:.015em;margin:0 -26px 24px;padding:19px 16px;background:#303d62;color:white!important;border:0!important;box-shadow:none!important} .twlps-main .twlps-benefit-eyebrow{font-size:clamp(15px,1.2vw,17.0px);font-weight:700;color:#596575;margin:0 0 4px} .twlps-main .twlps-benefit-metric{font:800 clamp(48px,5vw,84px)/1.15 var(--twlps-heading-family);letter-spacing:-.045em;margin:0 0 12px;color:#F26A19} .twlps-main .twlps-benefit-metric span{font-size:clamp(15px,1.8vw,27.0px);letter-spacing:0;margin-left:4px} .twlps-main .twlps-benefit-body{font-size:var(--twlps-body-font,15px);line-height:1.95;margin:0;text-wrap:pretty;color:#364156} .twlps-main .twlps-benefit-image{width:calc(100% + 52px);max-width:none;aspect-ratio:16/8.5;object-fit:cover;margin:0 -26px 20px;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-benefit-style-number .twlps-benefit{background:transparent;color:inherit;border-top:4px solid var(--twlps-accent);box-shadow:none} .twlps-main .twlps-benefit-style-number .twlps-benefit-label{background:transparent;color:inherit!important;padding-bottom:8px;border-bottom:1px solid currentColor!important} .twlps-main .twlps-benefit-style-number .twlps-benefit-body{color:inherit} .twlps-main .twlps-benefit-style-badge .twlps-benefit{padding-top:28px} .twlps-main .twlps-benefit-style-badge .twlps-benefit-label{align-self:center;display:inline-block;margin:0 0 24px;padding:12px 26px;border-radius:999px;background:var(--twlps-accent);color:var(--twlps-bg)!important;font-size:clamp(17.0px,1.8vw,25.0px)} .twlps-main .twlps-benefit-style-plain .twlps-benefit{background:transparent;color:inherit;border:0;border-top:3px solid var(--twlps-accent);padding-top:28px;box-shadow:none;text-align:left} .twlps-main .twlps-benefit-style-plain .twlps-benefit-label{background:transparent;color:inherit!important;margin:0 0 18px;padding:0;text-align:left} .twlps-main .twlps-benefit-style-plain .twlps-benefit-body{color:inherit} .twlps-main .twlps-plan{position:relative;display:flex;flex-direction:column;min-width:0;overflow:visible;margin-top:22px;border:1px solid #d3deeb;background:#fff;color:#263750;border-radius:var(--twlps-card-radius,0px);box-shadow:0 10px 28px #1434520e} .twlps-main .twlps-plan-featured{border:3px solid #087fb9;box-shadow:0 16px 40px #1266a72a;z-index:1} .twlps-main .twlps-plan-badge{position:absolute;top:-32px;left:50%;transform:translateX(-50%);background:#f4691c;color:#fff;padding:9px 24px;font-size:15px;font-weight:800;white-space:nowrap;z-index:2} .twlps-main .twlps-plan-top{background:#235f9f;color:#fff;text-align:center;padding:26px 22px 24px;min-height:285px;display:flex;flex-direction:column;justify-content:start;gap:10px} .twlps-main .twlps-plan-featured .twlps-plan-top{background:#0789be} .twlps-main .twlps-plan-top h3{font:800 clamp(20px,1.8vw,28px)/1.35 var(--twlps-heading-family);margin:0;padding:0 0 14px;color:inherit!important;border-bottom:1px solid #ffffff42} .twlps-main .twlps-plan-price{font:800 clamp(27px,2.6vw,46px)/1.22 var(--twlps-heading-family);margin:7px 0 0;overflow-wrap:anywhere} .twlps-main .twlps-plan-period{font-size:var(--twlps-body-font,15px);line-height:1.55;margin:0;color:#e7f4ff} .twlps-main .twlps-plan-summary{font-size:var(--twlps-body-font,15px);line-height:1.75;margin:5px 0 0} .twlps-main .twlps-plan-top .twlps-buttons{margin-top:auto;justify-content:center} .twlps-main .twlps-plan-top .twlps-button{min-height:45px;padding:8px 14px;width:100%;background:#f57413;color:#fff!important;border-color:#f57413;font-size:var(--twlps-body-font,15px);border-radius:var(--twlps-button-radius,8px)} .twlps-main .twlps-plan-rows{margin:0;padding:0 22px;flex:1} .twlps-main .twlps-plan-row{display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid #dde4ed;font-size:var(--twlps-body-font,15px);line-height:1.65} .twlps-main .twlps-plan-row:last-child{border-bottom:0} .twlps-main .twlps-plan-row dt{font-weight:500;color:#667184;overflow-wrap:anywhere} .twlps-main .twlps-plan-row dd{font-weight:750;overflow-wrap:anywhere;margin:0} .twlps-main .twlps-pricing-note{margin:26px auto 0;font-size:var(--twlps-body-font,15px);line-height:1.8;color:inherit;opacity:.8;max-width:1160px} .twlps-main .twlps-faq-inner{max-width:1260px} .twlps-main .twlps-faq-list{display:grid;gap:18px;margin:0 auto} .twlps-main .twlps-faq-item{background:#fff;color:#263750;border-radius:var(--twlps-card-radius,0px);border:1px solid #e2e9f3;overflow:hidden;box-shadow:0 4px 14px #142d5010} .twlps-main .twlps-faq-item summary{display:flex;align-items:center;gap:20px;cursor:pointer;padding:24px 32px;font:750 clamp(17px,1.6vw,24px)/1.5 var(--twlps-heading-family);list-style:none;color:inherit} .twlps-main .twlps-faq-item summary::-webkit-details-marker{display:none} .twlps-main .twlps-faq-item summary::marker{content:''} .twlps-main .twlps-faq-q,.twlps-main .twlps-faq-a{flex:0 0 32px;font:850 35.0px/1.1 var(--twlps-heading-family);color:var(--twlps-accent)} .twlps-main .twlps-faq-a{opacity:.47} .twlps-main .twlps-faq-question{flex:1;min-width:0;overflow-wrap:anywhere} .twlps-main .twlps-faq-toggle{position:relative;width:22px;height:22px;flex:0 0 22px} .twlps-main .twlps-faq-toggle:before,.twlps-main .twlps-faq-toggle:after{content:"";position:absolute;left:2px;right:2px;top:10px;height:2px;background:#496078} .twlps-main .twlps-faq-toggle:after{transform:rotate(90deg);transition:transform .2s ease} .twlps-main .twlps-faq-item[open] .twlps-faq-toggle:after{transform:rotate(0)} .twlps-main .twlps-faq-item summary:focus-visible{outline:3px solid var(--twlps-accent);outline-offset:-5px} .twlps-main .twlps-faq-answer{display:flex;align-items:flex-start;gap:20px;padding:0 32px 26px} .twlps-main .twlps-faq-answer-text{font-size:var(--twlps-body-font,15px);line-height:1.95;min-width:0;overflow-wrap:anywhere} .twlps-main .twlps-faq-style-lines .twlps-faq-item{background:transparent;color:inherit;border:0;border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--twlps-fg) 20%,transparent);box-shadow:none} .twlps-main .twlps-faq-style-lines .twlps-faq-item summary,.twlps-main .twlps-faq-style-lines .twlps-faq-answer{padding-left:0;padding-right:0} .twlps-main .twlps-faq-style-mark .twlps-faq-q{background:var(--twlps-accent);color:var(--twlps-bg);text-align:center;padding:8px 0;font-size:24.0px} @media(max-width:900px){.twlps-main .twlps-benefits-grid,.twlps-main .twlps-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.twlps-main .twlps-plan-top{min-height:300px}} @media(max-width:767px){ .twlps-main .twlps-benefits-inner,.twlps-main .twlps-pricing-inner,.twlps-main .twlps-faq-inner{padding:clamp(26px,7vw,50px) clamp(18px,5vw,28px)} .twlps-main .twlps-special-intro .twlps-heading{font-size:var(--twlps-mobile-font)!important} .twlps-main .twlps-special-intro .twlps-body,.twlps-main .twlps-benefit-body,.twlps-main .twlps-plan-period,.twlps-main .twlps-plan-summary,.twlps-main .twlps-plan-row,.twlps-main .twlps-pricing-note,.twlps-main .twlps-faq-answer-text{font-size:var(--twlps-mobile-body-font,15px)!important} .twlps-main .twlps-benefits-grid,.twlps-main .twlps-pricing-grid{grid-template-columns:1fr;gap:28px} .twlps-main .twlps-benefit{padding-left:22px;padding-right:22px} .twlps-main .twlps-benefit-label{margin-left:-22px;margin-right:-22px} .twlps-main .twlps-benefit-image{width:calc(100% + 44px);margin-left:-22px;margin-right:-22px} .twlps-main .twlps-plan-top{min-height:0;padding:22px 20px 25px} .twlps-main .twlps-plan-row{grid-template-columns:minmax(0,44%) minmax(0,56%);gap:8px} .twlps-main .twlps-faq-item summary{gap:12px;padding:20px 17px;font-size:17.0px} .twlps-main .twlps-faq-answer{gap:12px;padding:0 17px 22px} .twlps-main .twlps-faq-q,.twlps-main .twlps-faq-a{flex-basis:27px;font-size:28.0px} } @media(prefers-reduced-motion:reduce){.twlps-main .twlps-faq-toggle:after{transition:none}} .twlps-main .twlps-faq-always .twlps-faq-summary{display:flex;gap:20px;align-items:center;padding:24px 32px;font:750 clamp(17px,1.6vw,24px)/1.5 var(--twlps-heading-family)} .twlps-main .twlps-faq-style-lines .twlps-faq-always .twlps-faq-summary{padding-left:0;padding-right:0} @media(max-width:767px){.twlps-main .twlps-faq-always .twlps-faq-summary{gap:12px;padding:20px 17px;font-size:17.0px}} /* v0.5.25: separate, accessible content sections and safe overlaps. */ .twlps-main .twlps-extra-inner{width:100%;max-width:1440px;margin:0 auto;padding:var(--twlps-effective-pad);position:relative;z-index:2;font-family:var(--twlps-body-family);min-width:0} .twlps-main .twlps-extra-inner>.twlps-special-intro{max-width:980px;margin-bottom:36px} .twlps-main .twlps-extra-grid{display:grid;grid-template-columns:repeat(var(--twlps-extra-cols,3),minmax(0,1fr));gap:clamp(18px,2.3vw,32px);align-items:stretch} .twlps-main .twlps-extra-card{position:relative;min-width:0;display:flex;flex-direction:column;gap:12px;background:#ffffff;color:#22364a;padding:28px;border:1px solid #dfe6ed;box-shadow:0 10px 26px #182e4310;border-radius:var(--twlps-card-radius,0px);overflow:visible} .twlps-main .twlps-extra-style-band .twlps-extra-card{border-top:7px solid var(--twlps-accent)} .twlps-main .twlps-extra-style-outline .twlps-extra-card{background:transparent;color:inherit;border:2px solid color-mix(in srgb,var(--twlps-accent) 48%,transparent);box-shadow:none} .twlps-main .twlps-extra-style-contrast .twlps-extra-card{background:color-mix(in srgb,var(--twlps-bg) 84%,#142b45 16%);color:var(--twlps-fg);border-color:color-mix(in srgb,var(--twlps-accent) 24%,transparent)} .twlps-main .twlps-extra-image{width:100%;aspect-ratio:16/10;overflow:hidden;background:#f3f5f7;border-radius:var(--twlps-image-radius,0px)} .twlps-main .twlps-extra-image img{width:100%;height:100%;object-fit:cover;display:block} .twlps-main .twlps-logos .twlps-extra-image{aspect-ratio:16/8;background:#fff;display:grid;place-items:center;padding:18px} .twlps-main .twlps-logos .twlps-extra-image img{object-fit:contain} .twlps-main .twlps-logos .twlps-extra-card{text-align:center;justify-content:center} .twlps-main .twlps-logo-fallback{display:grid;place-items:center;min-height:96px;color:var(--twlps-accent);font-size:clamp(18.0px,2vw,30.0px);font-weight:800;overflow-wrap:anywhere} .twlps-main .twlps-extra-meta{font-size:15px;font-weight:750;letter-spacing:.09em;opacity:.75;margin:0} .twlps-main .twlps-extra-title{font-size:clamp(20.0px,2vw,30.0px)!important;line-height:1.3!important;margin:0!important;font-family:var(--twlps-heading-family);background:none!important;padding:0!important;color:inherit!important;border:0!important} .twlps-main .twlps-extra-title::before,.twlps-main .twlps-extra-title::after{content:none!important} .twlps-main .twlps-extra-metric{font-size:clamp(23.0px,3vw,42.0px);font-weight:800;color:var(--twlps-accent);margin:0} .twlps-main .twlps-extra-body{font-size:var(--twlps-body-font,15px);line-height:1.9;margin:0;overflow-wrap:anywhere} .twlps-main .twlps-extra-link{margin-top:auto;display:inline-flex;align-items:center;gap:10px;color:var(--twlps-accent);font-weight:750;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;padding-top:10px} .twlps-main .twlps-extra-index{width:54px;height:54px;display:grid;place-items:center;font:bold 24.0px/1 var(--twlps-heading-family);background:var(--twlps-accent);color:var(--twlps-bg);margin-top:-6px} .twlps-main .twlps-flowchart .twlps-extra-card:not(:last-child):after{content:'→';position:absolute;left:calc(100% + 3px);top:42%;width:24px;color:var(--twlps-accent);font:bold 25.0px/1 sans-serif;z-index:3;text-align:center} .twlps-main .twlps-testimonials .twlps-extra-body{font-size:var(--twlps-body-font,15px);line-height:2} .twlps-main .twlps-testimonials .twlps-extra-body:before{content:'“';display:block;font:700 64.0px/.8 Georgia,serif;color:var(--twlps-accent);opacity:.8} .twlps-main .twlps-extra-cta{justify-content:center;margin-top:28px} .twlps-main .twlps-comparison-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid #e1e7ee} .twlps-main .twlps-comparison-table{border-collapse:collapse;width:100%;min-width:600px;color:#25394d;background:#fff;font-size:var(--twlps-body-font,15px);table-layout:fixed} .twlps-main .twlps-comparison-table th,.twlps-main .twlps-comparison-table td{padding:18px 20px;border:1px solid #e0e7ec;text-align:left;vertical-align:middle;overflow-wrap:anywhere} .twlps-main .twlps-comparison-table thead th{background:var(--twlps-accent);color:#fff;font-weight:800;font-size:clamp(15px,1.4vw,20.0px)} .twlps-main .twlps-comparison-table thead th.is-recommended{background:#153b59} .twlps-main .twlps-comparison-table tbody th{background:#eef4f8;font-weight:750} .twlps-main .twlps-comparison-table tbody tr:nth-child(even) td{background:#f7f9fb} .twlps-main .twlps-comparison-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:20px} .twlps-main .twlps-cta-banner .twlps-bg-image{opacity:.24} .twlps-main .twlps-cta-banner .twlps-shell{justify-content:center;text-align:center} .twlps-main .twlps-cta-banner .twlps-content{max-width:960px} .twlps-main .twlps-cta-banner .twlps-buttons{justify-content:center} .twlps-main .twlps-counter-strip .twlps-shell{display:block} .twlps-main .twlps-counter-strip .twlps-content{max-width:100%;text-align:center} .twlps-main .twlps-counter-strip .twlps-counters{margin-top:16px} .twlps-main .twlps-counter-strip .twlps-counter-item{border-top:0;border-left:1px solid color-mix(in srgb,var(--twlps-fg) 30%,transparent);padding:12px 26px} .twlps-main .twlps-counter-strip .twlps-counter-item:first-child{border-left:0} /* Section overlap: margin affects flow, rather than translating content into other text. */ .twlps-main .twlps-section.twlps-custom-overlap{margin-top:calc(-1 * var(--twlps-section-overlap,0px))!important;z-index:var(--twlps-overlap-z,1)} /* Card overlap applies only to card-based blocks; the card's text stays within its own surface. */ .twlps-main .twlps-card-overlap-middle .twlps-benefit:nth-child(2), .twlps-main .twlps-card-overlap-middle .twlps-plan:nth-child(2), .twlps-main .twlps-card-overlap-middle .twlps-extra-card:nth-child(2), .twlps-main .twlps-card-overlap-middle.twlps-cards3 .twlps-area:nth-child(2){transform:translateY(calc(-1 * var(--twlps-card-shift,20px)));z-index:5} .twlps-main .twlps-card-overlap-steps .twlps-benefit:nth-child(2),.twlps-main .twlps-card-overlap-steps .twlps-plan:nth-child(2),.twlps-main .twlps-card-overlap-steps .twlps-extra-card:nth-child(2){transform:translateY(calc(var(--twlps-card-shift,20px) / 2))} .twlps-main .twlps-card-overlap-steps .twlps-benefit:nth-child(3),.twlps-main .twlps-card-overlap-steps .twlps-plan:nth-child(3),.twlps-main .twlps-card-overlap-steps .twlps-extra-card:nth-child(3){transform:translateY(var(--twlps-card-shift,20px))} .twlps-main .twlps-card-overlap-alternate .twlps-benefit:nth-child(even),.twlps-main .twlps-card-overlap-alternate .twlps-plan:nth-child(even),.twlps-main .twlps-card-overlap-alternate .twlps-extra-card:nth-child(even){transform:translateY(var(--twlps-card-shift,20px))} /* Floating heading plates: reserve padding, never cover body text. */ .twlps-main .twlps-title-plate .twlps-benefit,.twlps-main .twlps-title-plate .twlps-extra-card{padding-top:max(52px,var(--twlps-plate-lift,24px))} .twlps-main .twlps-title-plate .twlps-benefit-label,.twlps-main .twlps-title-plate .twlps-extra-title{position:relative;z-index:4;width:var(--twlps-plate-width,80%);max-width:100%;margin:calc(-1 * var(--twlps-plate-lift,24px)) auto 20px!important;padding:16px 20px!important;background:var(--twlps-plate-bg,#243451)!important;color:var(--twlps-plate-fg,#fff)!important;text-align:center;border:0!important;border-radius:0!important;box-shadow:0 12px 24px #0002} .twlps-main .twlps-title-plate .twlps-benefit-label{margin-top:calc(-1 * var(--twlps-plate-lift,24px) - 25px)!important} .twlps-main .twlps-title-plate .twlps-plan-top>h3{position:relative;z-index:4;width:var(--twlps-plate-width,80%);margin:calc(-1 * var(--twlps-plate-lift,24px)) auto 20px!important;padding:16px 20px!important;background:var(--twlps-plate-bg,#243451)!important;color:var(--twlps-plate-fg,#fff)!important;text-align:center} @media(max-width:900px){.twlps-main .twlps-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.twlps-main .twlps-flowchart .twlps-extra-card:after{display:none}} @media(max-width:767px){ .twlps-main .twlps-extra-inner{padding:clamp(24px,6vw,46px)} .twlps-main .twlps-extra-grid{grid-template-columns:1fr;gap:24px} .twlps-main .twlps-extra-card{padding:24px} .twlps-main .twlps-section.twlps-custom-overlap{margin-top:calc(-1 * clamp(-45px,calc(var(--twlps-section-overlap,0px) * .4),45px))!important} .twlps-main .twlps-card-overlap-middle .twlps-benefit:nth-child(2),.twlps-main .twlps-card-overlap-middle .twlps-plan:nth-child(2),.twlps-main .twlps-card-overlap-middle .twlps-extra-card:nth-child(2),.twlps-main .twlps-card-overlap-steps .twlps-benefit,.twlps-main .twlps-card-overlap-steps .twlps-plan,.twlps-main .twlps-card-overlap-steps .twlps-extra-card,.twlps-main .twlps-card-overlap-alternate .twlps-benefit,.twlps-main .twlps-card-overlap-alternate .twlps-plan,.twlps-main .twlps-card-overlap-alternate .twlps-extra-card{transform:none} .twlps-main .twlps-counter-strip .twlps-counter-item{border:0;border-top:1px solid color-mix(in srgb,var(--twlps-fg) 23%,transparent)} .twlps-main .twlps-counter-strip .twlps-counter-item:first-child{border:0} .twlps-main .twlps-comparison-table{font-size:15px} } /* v0.5.26 — design-system finishing pass. All declarations are LP-scoped; section tokens are calculated from the chosen background and accent at render time. Squared cards/images remain the default, and user-selected radii are retained. */ .twlps-main .twlps-special-intro .twlps-heading, .twlps-main .twlps-extra-inner .twlps-heading{ text-wrap:balance;overflow-wrap:anywhere;letter-spacing:-.035em!important; } .twlps-main .twlps-special-intro .twlps-eyebrow{ display:inline-flex;align-items:center;gap:12px;font-weight:800; font-size:15px;letter-spacing:.18em;opacity:1; } .twlps-main .twlps-special-intro .twlps-eyebrow:before, .twlps-main .twlps-special-intro .twlps-eyebrow:after{ content:"";width:clamp(16px,2.5vw,38px);height:2px;background:var(--twlps-accent); } .twlps-main .twlps-special-intro .twlps-body{ max-width:680px;line-height:1.95;letter-spacing:.012em; } .twlps-main .twlps-benefits-grid, .twlps-main .twlps-pricing-grid{gap:clamp(16px,2.1vw,30px);padding-top:8px;padding-bottom:18px} .twlps-main .twlps-benefit, .twlps-main .twlps-plan, .twlps-main .twlps-faq-item, .twlps-main .twlps-extra-card{ background:var(--twlps-panel-bg,#fff);color:var(--twlps-panel-ink,#263750); border-color:var(--twlps-panel-line,#dae1e8); box-shadow:var(--twlps-panel-shadow,0 16px 32px #10253d13); border-radius:var(--twlps-card-radius,0px); } .twlps-main .twlps-benefit{padding:0 clamp(20px,2vw,30px) 34px;gap:0;overflow:hidden} .twlps-main .twlps-benefit-label{ background:color-mix(in srgb,var(--twlps-bg) 24%,#19283e 76%); color:#fff!important;padding:18px 16px;margin-bottom:28px; font-size:clamp(18.0px,1.75vw,26.0px);letter-spacing:.025em; } .twlps-main .twlps-benefit-eyebrow{font-size:15px;letter-spacing:.04em;color:inherit;opacity:.68;margin-bottom:10px} .twlps-main .twlps-benefit-metric{ color:var(--twlps-accent);font-size:clamp(44.0px,4.4vw,76.0px); line-height:1.1;overflow-wrap:anywhere; } .twlps-main .twlps-benefit-body{color:inherit;opacity:.92;max-width:41ch;margin-inline:auto;font-size:var(--twlps-body-font,15px);line-height:1.9} .twlps-main .twlps-benefit-image{aspect-ratio:16/9;object-fit:cover;max-height:280px} .twlps-main .twlps-benefit-style-number .twlps-benefit{background:transparent;border:0;border-top:4px solid var(--twlps-accent);box-shadow:none} .twlps-main .twlps-benefit-style-number .twlps-benefit-label{color:inherit!important;border-color:var(--twlps-panel-line)!important} .twlps-main .twlps-benefit-style-badge .twlps-benefit-label{ color:var(--twlps-accent-ink,#fff)!important;background:var(--twlps-accent); border-radius:999px;max-width:100%;font-size:clamp(16.0px,1.5vw,21.0px); } .twlps-main .twlps-benefit-style-plain .twlps-benefit{background:transparent;border:0;border-top:3px solid var(--twlps-accent);box-shadow:none} .twlps-main .twlps-benefit-style-plain .twlps-benefit-label{color:inherit!important} .twlps-main .twlps-benefit-style-plain .twlps-benefit-body{margin-inline:0} /* A true horizontal plate extends beyond the card without covering body copy. */ .twlps-main .twlps-title-plate .twlps-benefits-grid{padding-top:calc(var(--twlps-plate-lift,24px) + 20px)} .twlps-main .twlps-title-plate .twlps-benefit{overflow:visible;padding-top:22px} .twlps-main .twlps-title-plate .twlps-benefit-label{ flex:none;width:var(--twlps-plate-width,80%);max-width:calc(100% + 36px); margin:calc(-1 * (var(--twlps-plate-lift,24px) + 22px)) auto 25px!important; padding:15px 16px!important;min-height:62px; display:flex;justify-content:center;align-items:center; box-shadow:0 12px 24px #09172828; background:var(--twlps-plate-bg,#243451)!important; color:var(--twlps-plate-fg,#fff)!important; } .twlps-main .twlps-title-plate .twlps-benefit-image{max-width:100%} .twlps-main .twlps-card-overlap-middle .twlps-benefit:nth-child(2){box-shadow:0 23px 55px #132b4340} /* Pricing: brand-aware headings instead of hard-coded blue/orange. */ .twlps-main .twlps-plan{margin-top:32px;box-shadow:var(--twlps-panel-shadow);overflow:visible} .twlps-main .twlps-plan-featured{ border:2px solid var(--twlps-accent);box-shadow:0 24px 52px #09182b32;z-index:2; } .twlps-main .twlps-plan-top{ background:color-mix(in srgb,var(--twlps-accent) 26%,#182D48 74%); color:#fff;padding:30px clamp(15px,1.8vw,26px) 26px;min-height:314px;gap:10px; } .twlps-main .twlps-plan-featured .twlps-plan-top{background:var(--twlps-accent);color:var(--twlps-accent-ink,#fff)} .twlps-main .twlps-plan-top h3{font-size:clamp(18.0px,1.7vw,26.0px);font-weight:750;letter-spacing:.03em;border-color:currentColor;overflow-wrap:anywhere} .twlps-main .twlps-plan-price{font-size:clamp(27.0px,2.5vw,43.0px);letter-spacing:-.035em;margin:2px 0 0} .twlps-main .twlps-plan-period{color:inherit;opacity:.8} .twlps-main .twlps-plan-summary{line-height:1.8;min-height:2.3em;color:inherit} .twlps-main .twlps-plan-top .twlps-button, .twlps-main .twlps-plan-featured .twlps-plan-top .twlps-button{ background:#fff;border-color:#fff;color:#19283e!important; font-size:var(--twlps-body-font,15px);font-weight:800; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } .twlps-main .twlps-plan-top .twlps-button:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 20px #0002} .twlps-main .twlps-plan-badge{ top:-35px;padding:10px 22px;min-height:36px;background:var(--twlps-accent); color:var(--twlps-accent-ink,#fff);font-size:15px;letter-spacing:.06em; box-shadow:0 6px 14px #0002; } .twlps-main .twlps-plan-rows{padding:8px clamp(15px,1.65vw,26px) 14px} .twlps-main .twlps-plan-row{grid-template-columns:minmax(0,46%) minmax(0,54%);gap:12px;padding:15px 0;border-color:var(--twlps-panel-line);font-size:var(--twlps-body-font,15px)} .twlps-main .twlps-plan-row dt{color:inherit;opacity:.68} .twlps-main .twlps-plan-row dd{color:inherit;font-weight:750} .twlps-main .twlps-pricing-note{max-width:900px;margin:22px auto 0;font-size:15px;line-height:1.8;opacity:.8} .twlps-main .twlps-title-plate .twlps-pricing-grid{padding-top:calc(var(--twlps-plate-lift,24px) + 18px)} .twlps-main .twlps-title-plate .twlps-plan-top>h3{ width:var(--twlps-plate-width,80%);max-width:100%;min-height:58px; background:var(--twlps-plate-bg,#243451)!important;color:var(--twlps-plate-fg,#fff)!important; margin:calc(-1 * var(--twlps-plate-lift,24px)) auto 10px!important;padding:13px 16px!important; display:flex;align-items:center;justify-content:center; } /* FAQ: typography and quieter panel rhythm; open/closed states stay keyboard-accessible. */ .twlps-main .twlps-faq-inner{max-width:1240px} .twlps-main .twlps-faq-list{gap:14px} .twlps-main .twlps-faq-item{border:1px solid var(--twlps-panel-line);box-shadow:0 5px 17px #10253d0e;transition:border-color .2s ease,box-shadow .2s ease} .twlps-main .twlps-faq-item[open]{border-color:color-mix(in srgb,var(--twlps-accent) 45%,var(--twlps-panel-line));box-shadow:0 12px 30px #10253d16} .twlps-main .twlps-faq-item summary{font-size:clamp(16.0px,1.32vw,21.0px);gap:18px;padding:22px 28px} .twlps-main .twlps-faq-q{font-size:31.0px;color:var(--twlps-accent)} .twlps-main .twlps-faq-a{color:var(--twlps-accent);opacity:.65} .twlps-main .twlps-faq-answer{padding:0 28px 26px;gap:18px} .twlps-main .twlps-faq-answer-text{color:inherit;opacity:.9;line-height:1.9} .twlps-main .twlps-faq-toggle:before,.twlps-main .twlps-faq-toggle:after{background:var(--twlps-accent)} .twlps-main .twlps-faq-style-lines .twlps-faq-item{box-shadow:none!important;border:0;border-bottom:1px solid var(--twlps-panel-line)} .twlps-main .twlps-faq-style-mark .twlps-faq-q{color:var(--twlps-accent-ink,#fff)} /* Newly introduced cards: consistent hierarchy and edge treatment. */ .twlps-main .twlps-extra-grid{gap:clamp(18px,2.2vw,30px);padding-bottom:12px} .twlps-main .twlps-extra-card{padding:clamp(22px,2.1vw,32px);gap:16px;box-shadow:var(--twlps-panel-shadow)} .twlps-main .twlps-extra-style-contrast .twlps-extra-card{background:color-mix(in srgb,var(--twlps-panel-bg) 87%,var(--twlps-accent) 13%);color:var(--twlps-panel-ink)} .twlps-main .twlps-extra-meta{color:inherit;opacity:.62;font-weight:750;letter-spacing:.12em} .twlps-main .twlps-extra-title{font-size:clamp(20.0px,1.9vw,29.0px)!important;letter-spacing:-.02em!important;line-height:1.32!important} .twlps-main .twlps-extra-metric{color:var(--twlps-accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em} .twlps-main .twlps-extra-body{font-size:var(--twlps-body-font,15px);max-width:55ch} .twlps-main .twlps-extra-link{color:var(--twlps-panel-ink);border-color:var(--twlps-accent);font-size:15px;padding-bottom:5px} .twlps-main .twlps-extra-index{color:var(--twlps-accent-ink,#fff)} .twlps-main .twlps-flowchart .twlps-extra-grid{column-gap:clamp(24px,3.2vw,50px)} .twlps-main .twlps-flowchart .twlps-extra-card:not(:last-child):after{left:calc(100% + 7px);top:50%;transform:translateY(-50%)} .twlps-main .twlps-comparison-scroll{border-color:var(--twlps-panel-line);box-shadow:var(--twlps-panel-shadow)} .twlps-main .twlps-comparison-table thead th{background:var(--twlps-accent);color:var(--twlps-accent-ink,#fff)} .twlps-main .twlps-comparison-table thead th.is-recommended{background:color-mix(in srgb,var(--twlps-accent) 32%,#182D48 68%);color:#fff} .twlps-main .twlps-comparison-table tbody th{background:color-mix(in srgb,var(--twlps-bg) 82%,#fff 18%);color:var(--twlps-fg)} .twlps-main .twlps-comparison-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--twlps-bg) 24%,#fff 76%)} /* Bubbles with three depths: edge-cropped gradients, translucent disks, fine rings. No JS or repaint-on-scroll; very slow motion only if motion preference permits. */ .twlps-main .twlps-skin-bubble-grid{ --twlps-pattern: radial-gradient(circle 210px at -4% 18%,color-mix(in srgb,var(--twlps-accent) 42%,transparent) 0 84%,transparent 86%), radial-gradient(circle 118px at 90% 10%,transparent 65%,color-mix(in srgb,var(--twlps-accent) 63%,transparent) 66% 69%,transparent 70%), radial-gradient(circle 148px at 104% 77%,color-mix(in srgb,var(--twlps-accent) 32%,transparent) 0 92%,transparent 94%), radial-gradient(circle 73px at 35% 95%,transparent 73%,color-mix(in srgb,var(--twlps-accent) 47%,transparent) 74% 80%,transparent 82%), radial-gradient(circle 34px at 62% 19%,color-mix(in srgb,var(--twlps-accent) 65%,transparent) 98%,transparent 100%), radial-gradient(circle 22px at 16% 76%,color-mix(in srgb,var(--twlps-accent) 65%,transparent) 98%,transparent 100%), linear-gradient(to right,color-mix(in srgb,var(--twlps-fg) 7%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in srgb,var(--twlps-fg) 7%,transparent) 1px,transparent 1px); } .twlps-main .twlps-skin-bubble-grid::before{background-size:auto,auto,auto,auto,auto,auto,43px 43px,43px 43px!important;opacity:1} .twlps-main .twlps-skin-bubble-grid::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(circle 290px at 16% 115%,color-mix(in srgb,var(--twlps-accent) 19%,transparent),transparent 78%),radial-gradient(circle 310px at 107% -6%,color-mix(in srgb,var(--twlps-accent) 23%,transparent),transparent 79%); opacity:.9; } @media(prefers-reduced-motion:no-preference){ .twlps-main .twlps-skin-bubble-grid::before{animation:twlps-bubble-drift 32s ease-in-out infinite alternate} .twlps-main .twlps-skin-bubble-grid::after{animation:twlps-bubble-drift 38s ease-in-out infinite alternate-reverse} } @keyframes twlps-bubble-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-10px,0)}} @media(max-width:900px){ .twlps-main .twlps-benefits-grid,.twlps-main .twlps-pricing-grid{column-gap:18px} .twlps-main .twlps-plan-top{min-height:290px} } @media(max-width:767px){ .twlps-main .twlps-special-intro{margin-bottom:34px} .twlps-main .twlps-special-intro .twlps-heading{font-size:var(--twlps-mobile-font,32.0px)!important} .twlps-main .twlps-benefits-grid,.twlps-main .twlps-pricing-grid{padding-top:0;padding-bottom:10px;gap:22px} .twlps-main .twlps-title-plate .twlps-benefits-grid{padding-top:calc(var(--twlps-plate-lift,24px) + 18px);gap:30px} .twlps-main .twlps-benefit{padding-inline:20px;padding-bottom:28px} .twlps-main .twlps-benefit-label{margin-left:-20px;margin-right:-20px} .twlps-main .twlps-benefit-body,.twlps-main .twlps-extra-body{font-size:var(--twlps-mobile-body-font,15px)} .twlps-main .twlps-benefit-metric{font-size:clamp(44.0px,12vw,67.0px)} .twlps-main .twlps-plan{margin-top:26px} .twlps-main .twlps-plan-top{min-height:0;padding:26px 18px 22px} .twlps-main .twlps-plan-top h3{font-size:21.0px} .twlps-main .twlps-plan-row{padding:14px 0;gap:10px} .twlps-main .twlps-faq-item summary{padding:18px 17px;gap:12px;font-size:16.0px} .twlps-main .twlps-faq-answer{padding:0 17px 22px;gap:12px} .twlps-main .twlps-faq-q,.twlps-main .twlps-faq-a{font-size:28.0px;flex-basis:28px} .twlps-main .twlps-extra-grid{gap:22px} .twlps-main .twlps-extra-card{padding:23px} .twlps-main .twlps-skin-bubble-grid::before{background-position:-115px -30px,30px -40px,70px 280px,0 160px,0 0,0 0,0 0,0 0} } @media(prefers-reduced-motion:reduce){.twlps-main .twlps-plan-top .twlps-button{transition:none}} /* v0.5.27: one page-wide content-only scale; section backgrounds and dividers are never zoomed. CSS zoom participates in layout, unlike transform: scale(), so cards do not visually collide. Each section has one direct content root per layout; do not recursively zoom descendants. */ .twlps-main{--twlps-content-scale:1} .twlps-main .twlps-section > :is(.twlps-shell,.twlps-grid-shell,.twlps-section-intro,.twlps-section-cta,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){ zoom:var(--twlps-content-scale,1); } .twlps-main .twlps-button-placeholder{display:none;position:relative} .twlps-main.twlps-preview .twlps-button-placeholder{display:inline-flex;opacity:1;filter:none;cursor:not-allowed;pointer-events:none} .twlps-main.twlps-preview .twlps-button-placeholder::after{content:"リンク未設定";position:absolute;top:-11px;right:-10px;z-index:4;padding:4px 7px;border-radius:999px;background:rgba(20,27,36,.86);color:#fff;font-size:15px;font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18)} /* Shared typographic measure: large reading blocks stay readable in wide sections. */ .twlps-main .twlps-section-intro .twlps-body, .twlps-main .twlps-special-intro .twlps-body{max-width:70ch} .twlps-main .twlps-section:not(.twlps-align-center):not(.twlps-align-right)>.twlps-section-intro .twlps-body{margin-left:0} .twlps-main .twlps-section .twlps-button:focus-visible{outline:3px solid var(--twlps-fg);outline-offset:4px} .twlps-main .twlps-section :is(.twlps-area,.twlps-extra-card,.twlps-benefit,.twlps-plan){min-width:0} .twlps-main .twlps-section .twlps-body{overflow-wrap:break-word} /* Six representative visual directions share rhythm, while retaining individual palette and skins. */ .twlps-main .twlps-section:is(.twlps-theme-corporate,.twlps-theme-palette-black,.twlps-theme-palette-white,.twlps-theme-palette-ocean,.twlps-theme-palette-green,.twlps-theme-palette-orange):not(.twlps-role-hero):not(.twlps-role-cta) .twlps-section-intro{max-width:1160px} .twlps-main .twlps-section:is(.twlps-theme-corporate,.twlps-theme-palette-black,.twlps-theme-palette-white,.twlps-theme-palette-ocean,.twlps-theme-palette-green,.twlps-theme-palette-orange) .twlps-eyebrow{letter-spacing:.14em;font-weight:800} .twlps-main .twlps-section:is(.twlps-theme-corporate,.twlps-theme-palette-black,.twlps-theme-palette-white,.twlps-theme-palette-ocean,.twlps-theme-palette-green,.twlps-theme-palette-orange).twlps-role-hero .twlps-body{max-width:59ch;line-height:1.95} .twlps-main .twlps-section:is(.twlps-theme-corporate,.twlps-theme-palette-black,.twlps-theme-palette-white,.twlps-theme-palette-ocean,.twlps-theme-palette-green,.twlps-theme-palette-orange).twlps-role-cta .twlps-content{max-width:900px} .twlps-main .twlps-section:is(.twlps-theme-corporate,.twlps-theme-palette-black,.twlps-theme-palette-white,.twlps-theme-palette-ocean,.twlps-theme-palette-green,.twlps-theme-palette-orange) .twlps-button{border-radius:var(--twlps-button-radius,8px);line-height:1.5} .twlps-main .twlps-theme-palette-white.twlps-role-hero .twlps-content{border-top:1px solid var(--twlps-accent);padding-top:clamp(22px,3vw,44px)} .twlps-main .twlps-theme-palette-black.twlps-role-hero .twlps-content{max-width:1000px} .twlps-main .twlps-theme-palette-ocean.twlps-role-hero .twlps-content{border-left:4px solid var(--twlps-accent);padding-left:clamp(22px,3vw,44px)} .twlps-main .twlps-theme-palette-green.twlps-role-hero .twlps-content{max-width:900px} .twlps-main .twlps-theme-palette-orange.twlps-role-hero .twlps-content{max-width:920px} @media(max-width:767px){ .twlps-main .twlps-theme-palette-ocean.twlps-role-hero .twlps-content{border-left:0;border-top:4px solid var(--twlps-accent);padding-left:0;padding-top:22px} } /* v0.5.28 — Independent page-wide design controls. Changes do not touch section backgrounds/dividers. */ .twlps-main .twlps-section{--twlps-effective-pad:calc(var(--twlps-pad) * var(--twlps-space-factor,1));} .twlps-main .twlps-section>.twlps-shell, .twlps-main .twlps-section>.twlps-grid-shell, .twlps-main .twlps-section>.twlps-section-intro, .twlps-main .twlps-section>.twlps-section-cta, .twlps-main .twlps-section>.twlps-benefits-inner, .twlps-main .twlps-section>.twlps-pricing-inner, .twlps-main .twlps-section>.twlps-extra-inner{max-width:min(100%,calc(1440px * var(--twlps-width-factor,1)))} .twlps-main .twlps-section>.twlps-faq-inner{max-width:min(100%,calc(1240px * var(--twlps-width-factor,1)))} .twlps-main .twlps-section:not(.twlps-split-bleed) > :is(.twlps-shell,.twlps-grid-shell,.twlps-section-intro,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){padding-inline:calc(var(--twlps-effective-pad) * (2 - var(--twlps-width-factor,1)))} .twlps-main .twlps-section:not(.twlps-split-bleed) > :is(.twlps-shell,.twlps-grid-shell,.twlps-section-intro,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){box-sizing:border-box} .twlps-main .twlps-benefits-grid,.twlps-main .twlps-pricing-grid,.twlps-main .twlps-extra-grid{column-gap:clamp(8px,calc(26px * var(--twlps-space-factor,1)),54px);row-gap:clamp(12px,calc(28px * var(--twlps-space-factor,1)),62px)} .twlps-main .twlps-cards3 .twlps-grid-shell,.twlps-main .twlps-cards4 .twlps-grid-shell{gap:clamp(8px,calc(22px * var(--twlps-space-factor,1)),44px)} .twlps-main .twlps-faq-list{gap:calc(14px * var(--twlps-space-factor,1))} .twlps-main .twlps-section .twlps-buttons{gap:calc(12px * var(--twlps-space-factor,1))} .twlps-main .twlps-section .twlps-benefit-body{font-size:var(--twlps-benefit-font,var(--twlps-body-font,15px));text-align:var(--twlps-benefit-align,inherit)} .twlps-main .twlps-section[class*="twlps-skin-"]::before{opacity:calc(var(--twlps-pattern-opacity,1) * var(--twlps-decor-factor,1))!important;filter:saturate(var(--twlps-decor-factor,1)) contrast(var(--twlps-decor-factor,1))} .twlps-main .twlps-skin-bubble-grid::after{opacity:calc(.9 * var(--twlps-decor-factor,1))!important;filter:saturate(var(--twlps-decor-factor,1))} .twlps-main[data-twlps-radius="custom"] .twlps-section :is(.twlps-area,.twlps-benefit,.twlps-plan,.twlps-faq-item,.twlps-extra-card,.twlps-button,.twlps-full-gallery-image,.twlps-extra-image,.twlps-media img,.twlps-area-media img,.twlps-benefit-image,.twlps-extra-image img){border-radius:var(--twlps-global-radius,0px)!important} .twlps-main[data-twlps-shadow="none"] .twlps-section :is(.twlps-area,.twlps-benefit,.twlps-plan,.twlps-faq-item,.twlps-extra-card){box-shadow:none!important} .twlps-main[data-twlps-shadow="weak"] .twlps-section :is(.twlps-area,.twlps-benefit,.twlps-plan,.twlps-faq-item,.twlps-extra-card){box-shadow:0 5px 15px #10253d14!important} .twlps-main[data-twlps-shadow="medium"] .twlps-section :is(.twlps-area,.twlps-benefit,.twlps-plan,.twlps-faq-item,.twlps-extra-card){box-shadow:0 16px 35px #10253d30!important} .twlps-main[data-twlps-shadow="strong"] .twlps-section :is(.twlps-area,.twlps-benefit,.twlps-plan,.twlps-faq-item,.twlps-extra-card){box-shadow:0 25px 56px #10253d48!important} @media(max-width:767px){ .twlps-main .twlps-section:not(.twlps-split-bleed)>:is(.twlps-shell,.twlps-grid-shell,.twlps-section-intro,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){padding-left:clamp(14px,calc(20px * var(--twlps-space-factor,1)),36px);padding-right:clamp(14px,calc(20px * var(--twlps-space-factor,1)),36px)} .twlps-main .twlps-section .twlps-benefit-body{font-size:var(--twlps-benefit-font,var(--twlps-mobile-body-font,15px))!important} .twlps-main .twlps-section :is(.twlps-benefits-grid,.twlps-pricing-grid,.twlps-extra-grid){row-gap:calc(28px * var(--twlps-space-factor,1))!important} } /* v0.5.29 | Keep multi-column card copy independent of the section's large headline. The old service-index rule could force 36px on a narrow 3-column card, causing Japanese words to split awkwardly. This rule comes after all legacy skins. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy .twlps-heading { font-size:var(--twlps-area-heading-font,clamp(17.0px,1.42vw,22.0px))!important; line-height:1.4!important; letter-spacing:-.025em!important; overflow-wrap:break-word!important; word-break:normal!important; line-break:strict; text-wrap:pretty; text-align:var(--twlps-area-heading-align,inherit)!important; } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy .twlps-body { text-align:var(--twlps-area-body-align,inherit)!important; font-size:var(--twlps-area-body-font,var(--twlps-body-font,15px))!important; overflow-wrap:break-word; word-break:normal; line-break:strict; } @media(max-width:767px){ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy .twlps-heading{ font-size:min(var(--twlps-area-heading-font,22.0px),27.0px)!important; } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy .twlps-body { font-size:var(--twlps-area-body-font,var(--twlps-mobile-body-font,15px))!important; } } /* Four columns need a slightly smaller heading measure than three columns. */ .twlps-main .twlps-cards4 .twlps-area-copy .twlps-heading{font-size:var(--twlps-area-heading-font,clamp(16.0px,1.26vw,20.0px))!important} /* v0.5.30 — Card overlap does not alter section geometry. */ .twlps-main .twlps-card-overlap-middle:is(.twlps-cards3,.twlps-cards4) .twlps-area:nth-child(2){ transform:translateY(calc(-1 * var(--twlps-card-shift,20px)));z-index:5; } .twlps-main .twlps-card-overlap-steps:is(.twlps-cards3,.twlps-cards4) .twlps-area:nth-child(2){transform:translateY(calc(var(--twlps-card-shift,20px) / 2))} .twlps-main .twlps-card-overlap-steps:is(.twlps-cards3,.twlps-cards4) .twlps-area:nth-child(3){transform:translateY(var(--twlps-card-shift,20px))} .twlps-main .twlps-card-overlap-steps.twlps-cards4 .twlps-area:nth-child(4){transform:translateY(calc(var(--twlps-card-shift,20px) * 1.5))} .twlps-main .twlps-card-overlap-alternate:is(.twlps-cards3,.twlps-cards4) .twlps-area:nth-child(even){transform:translateY(var(--twlps-card-shift,20px))} /* The plate follows the card heading, not the entire section. */ .twlps-main .twlps-title-plate:is(.twlps-cards3,.twlps-cards4) .twlps-area{overflow:visible} .twlps-main .twlps-title-plate:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy>.twlps-heading{ position:relative;z-index:4;max-width:100%;width:var(--twlps-plate-width,80%); box-sizing:border-box;margin:calc(-1 * var(--twlps-plate-lift,24px)) auto 20px!important; padding:13px 14px!important;background:var(--twlps-plate-bg,#243451)!important; color:var(--twlps-plate-fg,#fff)!important;text-align:center!important; box-shadow:0 10px 22px #0002;border:0!important;border-radius:0!important; } .twlps-main .twlps-title-plate:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy{padding-top:calc(clamp(15px,2vw,28px) + var(--twlps-plate-lift,24px))} @media(max-width:767px){ .twlps-main :is(.twlps-cards3,.twlps-cards4).twlps-card-overlap-middle .twlps-area, .twlps-main :is(.twlps-cards3,.twlps-cards4).twlps-card-overlap-steps .twlps-area, .twlps-main :is(.twlps-cards3,.twlps-cards4).twlps-card-overlap-alternate .twlps-area{transform:none} } /* Keep stacked mobile cards in the normal flow; the card desktop offsets never move the entire section or overlap the next mobile card. */ @media(max-width:767px){ .twlps-main .twlps-section.twlps-card-overlap-middle:is(.twlps-cards3,.twlps-cards4) .twlps-area, .twlps-main .twlps-section.twlps-card-overlap-steps:is(.twlps-cards3,.twlps-cards4) .twlps-area, .twlps-main .twlps-section.twlps-card-overlap-alternate:is(.twlps-cards3,.twlps-cards4) .twlps-area{transform:none!important} } /* v0.5.31 — Card placement and card copy use independent controls. An old preset/skin must not stagger a card when the user selects 「段差なし」. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-overlap-flat .twlps-area{transform:none!important} /* Keep all card images the same height within a row. Individual photo cropping is controlled by image position, never by allowing image height to vary. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-media{flex:0 0 auto;align-self:stretch} .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy{min-width:0} .twlps-main .twlps-section.twlps-card-copy-aligned:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy>.twlps-heading{box-sizing:border-box} /* v0.5.32 — Fix card text alignment following the section's alignment. Older saved cardAlign only positions the card surface; it never forces copy. The new twlps-card-text-* class applies to each card, while each area may explicitly override headingAlign/bodyAlign via CSS custom properties. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-text-left .twlps-area-copy{text-align:left} .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-text-center .twlps-area-copy{text-align:center} .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-text-right .twlps-area-copy{text-align:right} .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-text-left .twlps-area-copy .twlps-buttons{justify-content:flex-start} .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-text-center .twlps-area-copy .twlps-buttons{justify-content:center} .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4).twlps-card-text-right .twlps-area-copy .twlps-buttons{justify-content:flex-end} /* v0.5.33 — Position the COPY BOX, not only the glyphs within a full-width box. Card surface position (cardAlign) and typography (cardTextAlign) are separate. The optional per-area settings override common width/position without moving images. CSS variables ensure existing LPs without new fields get a centered 88%-width content box when their text alignment is centered. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy { box-sizing:border-box; width:var(--twlps-area-copy-width,var(--twlps-card-copy-width,88%))!important; max-width:100%; align-self:var(--twlps-area-copy-position,var(--twlps-card-copy-position,center))!important; flex:0 0 auto; } @media(max-width:767px){ /* Avoid excessively narrow copy when cards stack on a phone. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy { width:max(88%,var(--twlps-area-copy-width,var(--twlps-card-copy-width,88%)))!important; } } /* v0.5.34 — Keep card paragraphs in their own physical block. A right-aligned SECTION INTRO never pushes the default card body to the right. Existing title/copy block controls remain independent from paragraph controls. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-area-copy { display:flex;flex-direction:column;align-items:stretch; } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-card-body-block { display:block;box-sizing:border-box;min-width:0;max-width:100%; width:var(--twlps-area-body-width,var(--twlps-card-body-width,100%)); align-self:var(--twlps-area-body-position,var(--twlps-card-body-position,center)); } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-card-body-block>.twlps-body { display:block;width:100%;max-width:none;margin-left:0!important;margin-right:0!important; text-align:var(--twlps-area-body-align,left)!important; } /* v0.5.35 — A single, explicit box model for column-card copy and section lead. Place the paragraph BOX relative to the heading box; no theme-specific text alignment can silently override the independently selected position. */ .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4)>.twlps-section-intro .twlps-intro-body-block { box-sizing:border-box;display:block;min-width:0;max-width:min(70ch,100%); width:min(var(--twlps-intro-body-width,100%),70ch); margin-block:0; } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4)>.twlps-section-intro .twlps-intro-body-block { margin-left:var(--twlps-intro-margin-left,0)!important; margin-right:var(--twlps-intro-margin-right,0)!important; } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4)>.twlps-section-intro .twlps-intro-body-block>.twlps-body { display:block;width:100%;max-width:100%!important;min-width:0; margin:0!important;text-align:var(--twlps-intro-body-align,left)!important; overflow-wrap:break-word; } .twlps-main .twlps-section:is(.twlps-cards3,.twlps-cards4) .twlps-card-body-block>.twlps-body { text-align:var(--twlps-area-body-align,left)!important; } /* v0.5.36: Global animation override. Respect OS reduced-motion; keep content visible when OFF. */ .twlps-main[data-twlps-motion="off"] .twlps-section>.twlps-shell,.twlps-main[data-twlps-motion="off"] .twlps-section>.twlps-section-intro,.twlps-main[data-twlps-motion="off"] .twlps-section>.twlps-grid-shell{animation:none!important;transition:none!important;opacity:1!important;transform:none!important} .twlps-main[data-twlps-motion="off"] .twlps-section::before,.twlps-main[data-twlps-motion="off"] .twlps-section::after{animation:none!important} .twlps-main[data-twlps-motion="subtle"] .twlps-skin-bubble-grid::before,.twlps-main[data-twlps-motion="subtle"] .twlps-skin-bubble-grid::after{animation-duration:65s!important} @media(prefers-reduced-motion:reduce){.twlps-main .twlps-section::before,.twlps-main .twlps-section::after{animation:none!important}} /* v0.5.37: optional mobile inner space, with original styles when set to auto. */ @media(max-width:767px){ .twlps-main .twlps-section:not(.twlps-split-bleed) > .twlps-shell, .twlps-main .twlps-section:not(.twlps-split-bleed) > .twlps-grid-shell{ padding:var(--twlps-mobile-padding,clamp(18px,6vw,40px)); } } /* v0.5.38: standalone footer; scoped to independent shell. */ .twlps-page .twlps-global-footer{background:var(--twlps-footer-bg,#132940);color:var(--twlps-footer-fg,#fff);padding:48px 24px 18px;font-size:15px} .twlps-page .twlps-global-footer a{color:inherit;text-decoration:none} .twlps-page .twlps-footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px} .twlps-page .twlps-footer-brand{display:inline-block;font-size:22.0px;font-weight:800;margin-bottom:12px} .twlps-page .twlps-footer-about p{margin:6px 0;line-height:1.9;white-space:normal} .twlps-page .twlps-footer-menu{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0 0 20px;padding:0} .twlps-page .twlps-footer-cta{display:inline-block;border:1px solid currentColor;padding:11px 20px;font-weight:700} .twlps-page .twlps-footer-bottom{max-width:1200px;margin:38px auto 0;padding-top:18px;border-top:1px solid currentColor;opacity:.74;font-size:15px} @media(max-width:767px){.twlps-page .twlps-footer-inner{grid-template-columns:minmax(0,1fr);gap:20px}.twlps-page .twlps-global-footer{padding:32px 18px 16px}} /* v0.5.42: two-column edge-to-edge image sizing and responsive crop. Do not resize the text column or any section background. */ @media(min-width:768px){ .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns>.twlps-grid-shell{ grid-template-columns:minmax(0,var(--twlps-split-first,50%)) minmax(0,var(--twlps-split-second,50%)); } } .twlps-main .twlps-section.twlps-split-bleed .twlps-area-image.twlps-image-cover{ overflow:hidden; } .twlps-main .twlps-section.twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media{ overflow:hidden; } .twlps-main .twlps-section.twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{ object-fit:cover;object-position:var(--twlps-image-pos,50% 50%); transform:translate(var(--twlps-image-x,0px),var(--twlps-image-y,0px)) scale(var(--twlps-image-scale,1)); transform-origin:var(--twlps-image-pos,50% 50%); } @media(max-width:767px){ .twlps-main .twlps-section.twlps-split-bleed .twlps-area-image.twlps-image-cover{ height:var(--twlps-split-mobile-height,300px);min-height:var(--twlps-split-mobile-height,300px); } .twlps-main .twlps-section.twlps-split-bleed .twlps-area-image.twlps-image-cover .twlps-area-media img{ object-position:var(--twlps-mobile-image-pos,var(--twlps-image-pos,50% 50%)); transform-origin:var(--twlps-mobile-image-pos,var(--twlps-image-pos,50% 50%)); } } /* v0.5.43: per-area half-fill. The media is sized to the actual grid item instead of a percentage of an image wrapper with its own min-height. Scope to opted-in 2-column areas; existing designs retain their layout. */ .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell:has(> .twlps-area-fill-half){align-items:stretch} .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half{ position:relative;align-self:stretch;min-height:var(--twlps-height);overflow:hidden; padding:0!important;box-sizing:border-box; } .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half > .twlps-area-media{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; min-height:0!important;max-height:none!important;margin:0!important;padding:0!important; overflow:hidden!important;z-index:0; } .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half > .twlps-area-media > img{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; max-width:none!important;max-height:none!important;margin:0!important; object-fit:cover!important;object-position:var(--twlps-image-pos,50% 50%); } .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half.twlps-area-both > .twlps-area-copy{ position:relative;z-index:1;padding:var(--twlps-effective-pad); } /* Move only typography, not image, area, buttons or neighboring sections. */ .twlps-main .twlps-section.twlps-has-columns .twlps-area-copy > .twlps-heading{ translate:var(--twlps-heading-move-x,0px) var(--twlps-heading-move-y,0px); } .twlps-main .twlps-section.twlps-has-columns .twlps-area-copy > .twlps-body, .twlps-main .twlps-section.twlps-has-columns .twlps-card-body-block > .twlps-body{ translate:var(--twlps-body-move-x,0px) var(--twlps-body-move-y,0px); } @media(max-width:767px){ .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half{ height:var(--twlps-split-mobile-height,300px);min-height:var(--twlps-split-mobile-height,300px); } .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half > .twlps-area-media > img{ object-position:var(--twlps-mobile-image-pos,var(--twlps-image-pos,50% 50%)); } } /* On phones, text-overlay areas may grow to fit their copy. */ @media(max-width:767px){ .twlps-main .twlps-section.twlps-has-columns .twlps-grid-shell > .twlps-area.twlps-area-fill-half.twlps-area-both{ height:auto;min-height:var(--twlps-split-mobile-height,300px); } } /* v0.5.44 — Main heading/paragraph movement for every section family. Keep the offsets separate from per-area/card movement and from section dividers. */ .twlps-main .twlps-section > .twlps-shell .twlps-content > .twlps-heading, .twlps-main .twlps-section > .twlps-section-intro > .twlps-heading, .twlps-main .twlps-section .twlps-special-intro > .twlps-heading { translate:var(--twlps-section-heading-x,0px) var(--twlps-section-heading-y,0px); } .twlps-main .twlps-section > .twlps-shell .twlps-content > .twlps-body, .twlps-main .twlps-section > .twlps-section-intro > .twlps-intro-body-block, .twlps-main .twlps-section .twlps-special-intro > .twlps-body { translate:var(--twlps-section-body-x,0px) var(--twlps-section-body-y,0px); } /* Section boundary is a decorative overlay. When the photo must remain visible, lower the ornament behind the actual content and suppress the inherited mask. */ .twlps-main .twlps-section.twlps-image-before-divider > .twlps-divider, .twlps-main .twlps-section.twlps-image-before-divider > .twlps-divider-rule {z-index:0!important;} .twlps-main .twlps-section.twlps-image-before-divider > .twlps-divider-mask{display:none!important;} .twlps-main .twlps-section.twlps-image-before-divider > :is(.twlps-grid-shell,.twlps-shell,.twlps-section-intro){z-index:2;} /* v0.5.46: An undecorated skin. Layout and explicit section backgrounds remain. */ .twlps-main .twlps-section.twlps-skin-none::before, .twlps-main .twlps-section.twlps-skin-none::after{content:none!important;display:none!important;background:none!important;animation:none!important;box-shadow:none!important;} .twlps-main .twlps-section.twlps-skin-none{--twlps-pattern:none;outline:none;} /* True full-bleed split mode: overrides any max-width, theme gap or inherited padding. Keep text-side padding for readability; image side has no padding. */ .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns{width:100%;max-width:none;} .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell{ width:100%!important;max-width:none!important;margin:0!important; padding:0!important;column-gap:0!important;row-gap:0!important; grid-template-columns:minmax(0,var(--twlps-split-first,50%)) minmax(0,var(--twlps-split-second,50%)); } .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell > .twlps-area{ margin:0;min-width:0;max-width:none;box-sizing:border-box; } .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell > .twlps-area-image.twlps-image-cover{padding:0!important;} .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell > .twlps-area-image.twlps-image-cover > .twlps-area-media{ inset:0;left:0;right:0;width:100%;height:100%;margin:0; } .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell > .twlps-area-image.twlps-image-cover > .twlps-area-media img{ inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover; } @media(max-width:767px){ .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell{grid-template-columns:minmax(0,1fr)!important;} .twlps-main .twlps-section.twlps-split-bleed.twlps-has-columns > .twlps-grid-shell > .twlps-area-image.twlps-image-cover{height:var(--twlps-split-mobile-height,300px);min-height:var(--twlps-split-mobile-height,300px);} } /* v0.5.47: independent boundary positioning. These apply only to the SVG/rule, never to the section/grid/card. Initial values reproduce the previous rendering. */ .twlps-main .twlps-section > .twlps-divider, .twlps-main .twlps-section > .twlps-divider-rule, .twlps-main .twlps-section > .twlps-divider-mask { left:var(--twlps-divider-left,0%)!important; right:var(--twlps-divider-right,0%)!important; width:calc(100% - var(--twlps-divider-left,0%) - var(--twlps-divider-right,0%))!important; } .twlps-main .twlps-section > .twlps-divider-bottom { transform:translateY(var(--twlps-divider-offset,0px)); } .twlps-main .twlps-section > .twlps-divider-top { transform:translateY(var(--twlps-divider-offset,0px)) rotate(180deg); } .twlps-main .twlps-section > .twlps-divider-rule-bottom, .twlps-main .twlps-section > .twlps-divider-rule-top { transform:translateY(var(--twlps-divider-offset,0px)); } /* The inherited mask follows its preceding section's left/right trims. */ .twlps-main .twlps-section > .twlps-divider-mask {transform:translateY(var(--twlps-divider-offset,0px));} @media(max-width:767px){ /* Preserve the manually selected height when the user edits an edge, while untouched legacy edges continue to use the existing mobile cap. */ .twlps-main .twlps-section > .twlps-divider {height:min(var(--twlps-divider-height),var(--twlps-divider-mobile-cap,45px));} .twlps-main .twlps-section.twlps-overlap-on > .twlps-divider-bottom {top:calc(100% - min(var(--twlps-divider-height),var(--twlps-divider-mobile-cap,45px)) / 2);} .twlps-main .twlps-section.twlps-overlap-on > .twlps-divider-top {bottom:calc(100% - min(var(--twlps-divider-height),var(--twlps-divider-mobile-cap,45px)) / 2);} } /* v0.5.51: Button controls scoped to their own section. */ .twlps-main .twlps-section .twlps-button{ box-sizing:border-box;position:relative; left:var(--twlps-btn-move-x,0px);top:var(--twlps-btn-move-y,0px); width:var(--twlps-btn-width-css,auto);min-height:var(--twlps-btn-height-css,48px); max-width:100%;text-align:center;white-space:normal;overflow-wrap:anywhere; } .twlps-main .twlps-btn-style-solid .twlps-button{background:var(--twlps-accent)!important;border-color:var(--twlps-accent)!important;color:var(--twlps-accent-ink,#fff)!important;box-shadow:none!important;text-decoration:none!important;} .twlps-main .twlps-btn-style-outline .twlps-button{background:transparent!important;color:var(--twlps-fg)!important;border:2px solid var(--twlps-accent)!important;box-shadow:none!important;text-decoration:none!important;} .twlps-main .twlps-btn-style-ghost .twlps-button{background:color-mix(in srgb,var(--twlps-accent) 22%,transparent)!important;color:var(--twlps-fg)!important;border-color:color-mix(in srgb,var(--twlps-accent) 55%,transparent)!important;box-shadow:none!important;} .twlps-main .twlps-btn-style-gradient .twlps-button{background:linear-gradient(115deg,var(--twlps-accent),color-mix(in srgb,var(--twlps-accent) 65%,var(--twlps-fg)))!important;border-color:transparent!important;color:var(--twlps-accent-ink,#fff)!important;} .twlps-main .twlps-btn-style-shadow .twlps-button{box-shadow:6px 6px 0 color-mix(in srgb,var(--twlps-fg) 35%,transparent)!important;} .twlps-main .twlps-btn-style-pill .twlps-button{border-radius:999px!important;padding-inline:32px;} .twlps-main .twlps-btn-style-underline .twlps-button{background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:var(--twlps-fg)!important;text-decoration:underline!important;text-underline-offset:.2em;} .twlps-main .twlps-btn-style-cta .twlps-button{font-size:clamp(16.0px,1.3vw,21.0px);font-weight:800;letter-spacing:.04em;padding:18px 40px;min-height:var(--twlps-btn-height-css,68px);min-width:min(100%,280px);border-radius:var(--twlps-button-radius,8px);} @media(max-width:767px){.twlps-main .twlps-section .twlps-button{width:var(--twlps-btn-width-css,100%);max-width:100%}.twlps-main .twlps-btn-style-cta .twlps-button{min-width:min(100%,260px)}} /* v0.5.53: Independent, builder-editable header/footer sections. */ .twlps-main .twlps-builder-header,.twlps-main .twlps-builder-footer{box-sizing:border-box;position:relative;z-index:5;background:var(--twlps-shell-bg);color:var(--twlps-shell-fg);font-family:inherit;width:100%;max-width:none;} .twlps-main .twlps-builder-header *,.twlps-main .twlps-builder-footer *{box-sizing:border-box} .twlps-main .twlps-builder-header a,.twlps-main .twlps-builder-footer a{color:inherit;text-decoration:none} .twlps-main .twlps-shell-inner{max-width:1280px;width:100%;padding:22px clamp(20px,4vw,68px);margin:auto;display:flex;align-items:center;gap:30px} .twlps-main .twlps-shell-brand{font-size:clamp(18.0px,2vw,26.0px);font-weight:800;letter-spacing:.06em;white-space:nowrap;display:inline-flex;align-items:center;flex-shrink:0} .twlps-main .twlps-shell-brand img,.twlps-main .twlps-shell-footer-brand img{max-width:190px;max-height:62px;object-fit:contain} .twlps-main .twlps-shell-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,2vw,30px);margin-left:auto} .twlps-main .twlps-shell-nav a{font-size:15px;font-weight:650;letter-spacing:.06em;white-space:nowrap} .twlps-main .twlps-shell-nav a:hover,.twlps-main .twlps-shell-footer-links a:hover{color:var(--twlps-shell-accent)} .twlps-main .twlps-shell-cta{white-space:nowrap;display:inline-flex;padding:13px 22px;background:var(--twlps-shell-accent);color:#152536!important;font-weight:700;font-size:15px;align-items:center;justify-content:center} .twlps-main .twlps-shell-toggle{display:none;border:0;background:transparent;color:inherit;cursor:pointer;flex-direction:column;gap:5px;padding:10px;margin-left:auto} .twlps-main .twlps-shell-toggle span{display:block;width:25px;height:2px;background:currentColor} .twlps-main .twlps-shell-two .twlps-shell-inner{flex-wrap:wrap;justify-content:center;row-gap:12px}.twlps-main .twlps-shell-two .twlps-shell-brand{width:100%;justify-content:center}.twlps-main .twlps-shell-two .twlps-shell-nav{margin:0} .twlps-main .twlps-builder-header.twlps-shell-three{background:color-mix(in srgb,var(--twlps-shell-bg) 40%,transparent);backdrop-filter:blur(12px);margin-bottom:-80px;z-index:70}.twlps-main .twlps-shell-three .twlps-shell-inner{min-height:80px} .twlps-main .twlps-shell-four .twlps-shell-inner{min-height:100px}.twlps-main .twlps-shell-four .twlps-shell-cta{padding:17px 32px} .twlps-main .twlps-shell-five .twlps-shell-inner{max-width:none}.twlps-main .twlps-shell-five .twlps-shell-nav a{font-size:15px;letter-spacing:.12em}.twlps-main .twlps-shell-five .twlps-shell-cta{background:transparent!important;color:inherit!important;border:1px solid currentColor} .twlps-main .twlps-shell-sticky{position:sticky;top:0;z-index:80} .twlps-main .twlps-builder-footer .twlps-shell-inner{align-items:flex-start;padding-top:54px;padding-bottom:42px} .twlps-main .twlps-shell-footer-brand{max-width:420px;flex:1 1 260px}.twlps-main .twlps-shell-footer-brand>a{font-size:25.0px;font-weight:800;letter-spacing:.04em} .twlps-main .twlps-shell-footer-brand p{font-size:15px;line-height:1.9;opacity:.8;margin-top:22px} .twlps-main .twlps-shell-footer-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px 28px;max-width:520px}.twlps-main .twlps-shell-footer-links a{font-size:15px} .twlps-main .twlps-shell-bottom{max-width:1280px;margin:auto;padding:18px clamp(20px,4vw,68px);border-top:1px solid color-mix(in srgb,var(--twlps-shell-fg) 20%,transparent);font-size:15px;opacity:.7} .twlps-main .twlps-builder-footer.twlps-shell-two .twlps-shell-inner{display:grid;grid-template-columns:1fr 1fr}.twlps-main .twlps-builder-footer.twlps-shell-three .twlps-shell-footer-links{display:grid;grid-template-columns:repeat(3,max-content)} .twlps-main .twlps-builder-footer.twlps-shell-four .twlps-shell-inner{flex-direction:column;align-items:stretch}.twlps-main .twlps-builder-footer.twlps-shell-four .twlps-shell-cta{order:-1;min-height:80px;font-size:20.0px} .twlps-main .twlps-builder-footer.twlps-shell-five .twlps-shell-inner{max-width:none;justify-content:space-between}.twlps-main .twlps-builder-footer.twlps-shell-five .twlps-shell-footer-brand>a{font-size:clamp(24.0px,4vw,52.0px)} @media(max-width:800px){.twlps-main .twlps-builder-header .twlps-shell-inner{padding:12px 18px;gap:12px;min-height:62px;justify-content:space-between;flex-wrap:wrap}.twlps-main .twlps-builder-header .twlps-shell-brand{font-size:19.0px;width:auto;max-width:65%;justify-content:flex-start}.twlps-main .twlps-builder-header .twlps-shell-cta{display:none}.twlps-main .twlps-builder-header.twlps-shell-three{margin-bottom:-62px}.twlps-main .twlps-mobile-hamburger .twlps-shell-toggle{display:flex}.twlps-main .twlps-mobile-hamburger .twlps-shell-nav{display:none;order:3;width:100%;margin:0;padding:14px 2px;flex-direction:column;align-items:stretch;gap:0;background:var(--twlps-shell-bg);color:var(--twlps-shell-fg)}.twlps-main .twlps-mobile-hamburger .twlps-shell-nav.twlps-shell-nav-open{display:flex}.twlps-main .twlps-mobile-hamburger .twlps-shell-nav a{padding:15px 10px;border-bottom:1px solid color-mix(in srgb,var(--twlps-shell-fg) 14%,transparent)}.twlps-main .twlps-mobile-scroll .twlps-shell-nav{order:3;width:100%;max-width:100%;margin:0;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;justify-content:flex-start;padding:10px 0 5px;gap:22px;scrollbar-width:thin}.twlps-main .twlps-mobile-scroll .twlps-shell-nav a{scroll-snap-align:start;flex:0 0 auto}.twlps-main .twlps-builder-footer .twlps-shell-inner,.twlps-main .twlps-builder-footer.twlps-shell-two .twlps-shell-inner{display:flex;flex-direction:column;gap:24px;padding:38px 20px}.twlps-main .twlps-builder-footer .twlps-shell-footer-links,.twlps-main .twlps-builder-footer.twlps-shell-three .twlps-shell-footer-links{margin:0;display:flex;flex-wrap:wrap;gap:15px 25px}.twlps-main .twlps-builder-footer .twlps-shell-cta{order:0}.twlps-main .twlps-shell-bottom{padding:15px 20px}} /* 0.5.54: The standalone header/footer are adjustable-height sections. A too-small configured minimum must never clip real content or opened mobile navigation. */ .twlps-main .twlps-builder-header .twlps-shell-inner{min-height:var(--twlps-shell-height,88px);} .twlps-main .twlps-builder-footer{min-height:var(--twlps-shell-height,320px);display:flex;flex-direction:column;justify-content:space-between;} .twlps-main .twlps-builder-footer > .twlps-shell-inner{flex:1 0 auto;} .twlps-main .twlps-builder-header.twlps-shell-three{margin-bottom:calc(-1 * var(--twlps-shell-height,88px));} .twlps-main .twlps-shell-three .twlps-shell-inner,.twlps-main .twlps-shell-four .twlps-shell-inner{min-height:var(--twlps-shell-height,88px);} @media(max-width:800px){ .twlps-main .twlps-builder-header .twlps-shell-inner{min-height:var(--twlps-shell-mobile-height,0px);} .twlps-main .twlps-builder-header.twlps-shell-three{margin-bottom:calc(-1 * max(62px,var(--twlps-shell-mobile-height,0px)));} .twlps-main .twlps-builder-footer{min-height:var(--twlps-shell-height,320px);} .twlps-main .twlps-builder-footer .twlps-shell-inner{min-height:var(--twlps-shell-mobile-height,0px);} } /* v0.5.55: builder shell stacking & photo dimming. Scoped to independent LP page. */ /* The base .twlps-builder-header had a more specific position:relative, defeating sticky. */ .twlps-main > .twlps-builder-header.twlps-shell-sticky{ position:sticky!important;top:0!important;z-index:2147480000!important; isolation:isolate; } /* Overlay stays in normal flow with a negative bottom margin: absolute positioning would override sticky, causing it to scroll away and disappear behind the hero. */ .twlps-main > .twlps-builder-header.twlps-shell-three{ position:relative;z-index:2147480000; color:#fff; background:color-mix(in srgb,#091824 66%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .twlps-main > .twlps-builder-header.twlps-shell-three.twlps-shell-sticky{ position:sticky!important; background:color-mix(in srgb,#091824 70%,transparent); } .twlps-main > .twlps-builder-header.twlps-shell-three .twlps-shell-nav{color:inherit} .twlps-main > .twlps-builder-header.twlps-shell-three .twlps-shell-inner{position:relative;z-index:1} .twlps-main > .twlps-section.twlps-photo-opacity-custom .twlps-bg-image{ opacity:var(--twlps-photo-opacity,.28)!important; } @media(max-width:800px){ .twlps-main > .twlps-builder-header.twlps-shell-sticky{top:0!important} .twlps-main > .twlps-builder-header.twlps-shell-three .twlps-shell-nav.twlps-shell-nav-open{ background:#091824;color:#fff; } } body.twlps-page.admin-bar .twlps-main > .twlps-builder-header.twlps-shell-sticky{top:32px!important} @media(max-width:782px){body.twlps-page.admin-bar .twlps-main > .twlps-builder-header.twlps-shell-sticky{top:46px!important}} /* v0.5.59: THE THOR / generic theme integration compatibility. */ body.twlps-theme-mode .twlps-main.twlps-theme-content, body.twlps-the-thor .twlps-main.twlps-theme-content{ width:100%!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important; background:#fff;clear:both;display:block;overflow:visible; } body.twlps-theme-mode .twlps-main.twlps-theme-content:before, body.twlps-theme-mode .twlps-main.twlps-theme-content:after{content:none!important;display:none!important} body.twlps-the-thor .twlps-main.twlps-theme-content .twlps-section{ max-width:none; } body.twlps-the-thor .twlps-main.twlps-theme-content .twlps-heading{ font-family:inherit; } /* Avoid common theme content wrappers and heading decorations leaking into LP Studio. */ body.twlps-theme-mode .twlps-main.twlps-theme-content ul, body.twlps-theme-mode .twlps-main.twlps-theme-content ol{box-sizing:border-box} body.twlps-theme-mode .twlps-main.twlps-theme-content img{box-shadow:none} /* v0.5.71: GUI button colors keep each variation's intended decoration. Custom typography variables are emitted only when the user changes them; leaving them unset preserves variation defaults such as the larger CTA type. */ .twlps-main .twlps-section .twlps-button{ font-size:var(--twlps-btn-font-size); font-weight:var(--twlps-btn-font-weight); } /* Default / solid / shadow / pill / CTA: use the selected custom colors directly. */ .twlps-main .twlps-section.twlps-btn-custom-colors .twlps-button{ background:var(--twlps-btn-bg)!important; color:var(--twlps-btn-text)!important; border-color:var(--twlps-btn-border)!important; } .twlps-main .twlps-section.twlps-btn-custom-colors .twlps-button:hover, .twlps-main .twlps-section.twlps-btn-custom-colors .twlps-button:focus-visible{ background:var(--twlps-btn-hover-bg)!important; color:var(--twlps-btn-hover-text)!important; border-color:var(--twlps-btn-hover-bg)!important; opacity:1; } /* Outline intentionally stays transparent until hover. */ .twlps-main .twlps-section.twlps-btn-style-outline.twlps-btn-custom-colors .twlps-button{ background:transparent!important; color:var(--twlps-btn-text)!important; border-color:var(--twlps-btn-border)!important; } .twlps-main .twlps-section.twlps-btn-style-outline.twlps-btn-custom-colors .twlps-button:hover, .twlps-main .twlps-section.twlps-btn-style-outline.twlps-btn-custom-colors .twlps-button:focus-visible{ background:var(--twlps-btn-hover-bg)!important; color:var(--twlps-btn-hover-text)!important; border-color:var(--twlps-btn-hover-bg)!important; } /* Ghost keeps the translucent treatment while using the chosen colors. */ .twlps-main .twlps-section.twlps-btn-style-ghost.twlps-btn-custom-colors .twlps-button{ background:color-mix(in srgb,var(--twlps-btn-bg) 22%,transparent)!important; color:var(--twlps-btn-text)!important; border-color:color-mix(in srgb,var(--twlps-btn-border) 55%,transparent)!important; } .twlps-main .twlps-section.twlps-btn-style-ghost.twlps-btn-custom-colors .twlps-button:hover, .twlps-main .twlps-section.twlps-btn-style-ghost.twlps-btn-custom-colors .twlps-button:focus-visible{ background:var(--twlps-btn-hover-bg)!important; color:var(--twlps-btn-hover-text)!important; border-color:var(--twlps-btn-hover-bg)!important; } /* Gradient uses the normal and hover colors as its two stops. */ .twlps-main .twlps-section.twlps-btn-style-gradient.twlps-btn-custom-colors .twlps-button{ background:linear-gradient(115deg,var(--twlps-btn-bg),var(--twlps-btn-hover-bg))!important; color:var(--twlps-btn-text)!important; border-color:transparent!important; } .twlps-main .twlps-section.twlps-btn-style-gradient.twlps-btn-custom-colors .twlps-button:hover, .twlps-main .twlps-section.twlps-btn-style-gradient.twlps-btn-custom-colors .twlps-button:focus-visible{ background:linear-gradient(115deg,var(--twlps-btn-hover-bg),var(--twlps-btn-bg))!important; color:var(--twlps-btn-hover-text)!important; border-color:transparent!important; } /* Text-link style intentionally has no fill or border. */ .twlps-main .twlps-section.twlps-btn-style-underline.twlps-btn-custom-colors .twlps-button{ background:transparent!important; color:var(--twlps-btn-text)!important; border-color:transparent!important; box-shadow:none!important; } .twlps-main .twlps-section.twlps-btn-style-underline.twlps-btn-custom-colors .twlps-button:hover, .twlps-main .twlps-section.twlps-btn-style-underline.twlps-btn-custom-colors .twlps-button:focus-visible{ background:transparent!important; color:var(--twlps-btn-hover-text)!important; border-color:transparent!important; } /* v0.5.72 — motion/decor consistency across every section family and THE THOR theme mode. Older reveal rules targeted only normal shell/grid sections and body.twlps-page. These rules make FAQ, pricing, benefits, extra-content sections and theme-linked pages behave the same. */ @media(prefers-reduced-motion:no-preference){ body.twlps-motion-ready .twlps-main .twlps-section.twlps-motion-fade-up:not(.twlps-in-view) > :is(.twlps-shell,.twlps-section-intro,.twlps-grid-shell,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){opacity:0;transform:translate3d(0,24px,0)} body.twlps-motion-ready .twlps-main .twlps-section.twlps-motion-fade-left:not(.twlps-in-view) > :is(.twlps-shell,.twlps-section-intro,.twlps-grid-shell,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){opacity:0;transform:translate3d(-24px,0,0)} body.twlps-motion-ready .twlps-main .twlps-section.twlps-motion-fade-right:not(.twlps-in-view) > :is(.twlps-shell,.twlps-section-intro,.twlps-grid-shell,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){opacity:0;transform:translate3d(24px,0,0)} body.twlps-motion-ready .twlps-main .twlps-section.twlps-motion-zoom:not(.twlps-in-view) > :is(.twlps-shell,.twlps-section-intro,.twlps-grid-shell,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){opacity:0;transform:scale(.97)} body.twlps-motion-ready .twlps-main .twlps-section:is(.twlps-motion-fade-up,.twlps-motion-fade-left,.twlps-motion-fade-right,.twlps-motion-zoom) > :is(.twlps-shell,.twlps-section-intro,.twlps-grid-shell,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){transition:opacity var(--twlps-motion-duration,750ms) ease var(--twlps-motion-delay,0ms),transform var(--twlps-motion-duration,750ms) cubic-bezier(.2,.7,.2,1) var(--twlps-motion-delay,0ms)} } /* Global animation OFF must also cover special section families. */ .twlps-main[data-twlps-motion="off"] .twlps-section > :is(.twlps-shell,.twlps-section-intro,.twlps-grid-shell,.twlps-benefits-inner,.twlps-pricing-inner,.twlps-faq-inner,.twlps-extra-inner){animation:none!important;transition:none!important;opacity:1!important;transform:none!important} /* FAQ accordion answer gets a small, consistent opening motion. Native
controls visibility; this only animates the visible answer. */ @media(prefers-reduced-motion:no-preference){ .twlps-main .twlps-faq-item[open] .twlps-faq-answer{animation:twlps-faq-answer-in .22s ease both} } @keyframes twlps-faq-answer-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.twlps-main .twlps-faq-item[open] .twlps-faq-answer{animation:none!important}} /* v0.5.74 — consistent typography positioning for card/special section intros. */ .twlps-main .twlps-section > .twlps-section-intro > .twlps-eyebrow, .twlps-main .twlps-section .twlps-special-intro > .twlps-eyebrow { translate:var(--twlps-section-eyebrow-x,0px) var(--twlps-section-eyebrow-y,0px); } .twlps-main .twlps-section > .twlps-section-intro > .twlps-heading, .twlps-main .twlps-section .twlps-special-intro > .twlps-heading { translate:var(--twlps-section-heading-x,0px) var(--twlps-section-heading-y,0px); } .twlps-main .twlps-section > .twlps-section-intro > .twlps-intro-body-block, .twlps-main .twlps-section .twlps-special-intro > .twlps-body { translate:var(--twlps-section-body-x,0px) var(--twlps-section-body-y,0px); } .twlps-main .twlps-extra-card-buttons{margin-top:auto;padding-top:16px} .twlps-main .twlps-extra-card-buttons .twlps-button{margin-inline:auto} /* v0.5.74 — the same position controls also work on one-column/legacy copy. */ .twlps-main .twlps-section > .twlps-shell .twlps-content > .twlps-eyebrow{ translate:var(--twlps-section-eyebrow-x,0px) var(--twlps-section-eyebrow-y,0px); } .twlps-main .twlps-section > .twlps-shell .twlps-content > .twlps-heading{ translate:var(--twlps-section-heading-x,0px) var(--twlps-section-heading-y,0px); } .twlps-main .twlps-section > .twlps-shell .twlps-content > .twlps-body{ translate:var(--twlps-section-body-x,0px) var(--twlps-section-body-y,0px); } /* LP Studio Sales v0.1.0 typography extensions */ .twlps-main{ --twlps-family-rounded:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif; --twlps-family-modern:"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif; } .twlps-main .twlps-section .twlps-heading{line-height:var(--twlps-heading-line,1.22)!important;letter-spacing:var(--twlps-heading-track,-.03em)!important} .twlps-main .twlps-section .twlps-body{line-height:var(--twlps-body-line,1.9)!important;letter-spacing:var(--twlps-body-track,0em)!important} /* Optional WordPress news section. Natural height; inherits the page palette. */ .twlps-main .twlps-news{min-height:0!important;height:auto}.twlps-news .twlps-news-inner{width:100%;max-width:1280px;margin:0 auto;padding:var(--twlps-effective-pad,var(--twlps-pad,60px));position:relative;z-index:1;min-width:0}.twlps-news-intro{margin-bottom:28px}.twlps-news .twlps-news-intro .twlps-body{max-width:760px}.twlps-news-items{display:grid;gap:0}.twlps-news-item{min-width:0;border-top:1px solid color-mix(in srgb,var(--twlps-fg) 22%,transparent)}.twlps-news-item:last-child{border-bottom:1px solid color-mix(in srgb,var(--twlps-fg) 22%,transparent)}.twlps-news-link{display:flex;align-items:center;gap:24px;padding:22px 0;color:inherit!important;text-decoration:none!important;min-width:0}.twlps-news-image{flex:0 0 150px;overflow:hidden;aspect-ratio:16/10}.twlps-news-image img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .3s}.twlps-news-copy{min-width:0}.twlps-news-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:15px;line-height:1.7}.twlps-news-category{padding:2px 10px;border:1px solid color-mix(in srgb,var(--twlps-fg) 25%,transparent);font-size:15px}.twlps-news .twlps-news-title{font-family:var(--twlps-heading-family);font-size:20.0px;line-height:1.7;letter-spacing:0;margin:10px 0 0;overflow-wrap:anywhere;font-weight:600}.twlps-news-link:hover .twlps-news-title{text-decoration:underline;text-underline-offset:5px}.twlps-news-link:hover img{scale:1.035}.twlps-news-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}.twlps-news .twlps-buttons{margin-top:28px}.twlps-news-empty{font-size:16.0px;line-height:1.8;padding:20px 0;border-top:1px solid color-mix(in srgb,var(--twlps-fg) 22%,transparent)}.twlps-news-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.twlps-news-cards .twlps-news-item{border:0}.twlps-news-cards .twlps-news-link{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:16px;height:100%}.twlps-news-cards .twlps-news-image{flex:0 0 auto;width:100%;aspect-ratio:16/10}.twlps-news-cards .twlps-news-title{font-size:18.0px}@media(max-width:767px){.twlps-news .twlps-news-inner{padding:var(--twlps-mobile-padding,28px)}.twlps-news-link{gap:16px;padding:20px 0}.twlps-news-image{flex-basis:96px}.twlps-news .twlps-news-title{font-size:17.0px;line-height:1.7}.twlps-news-meta{font-size:15px;gap:5px 10px}.twlps-news-category{font-size:15px}.twlps-news-cards{grid-template-columns:1fr;gap:28px}}@media(prefers-reduced-motion:reduce){.twlps-news-image img{transition:none}.twlps-news-link:hover img{scale:1}} /* Fixed content columns on the original full-width surface. */ .twlps-concept>.twlps-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,72px);align-items:center;max-width:1160px;margin-inline:auto;width:100%}.twlps-concept .twlps-content{width:auto;max-width:620px}.twlps-concept .twlps-media{width:auto;max-width:none}.twlps-concept .twlps-media img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}.twlps-concept:not(:has(.twlps-media))>.twlps-shell{display:block}.twlps-concept:not(:has(.twlps-media)) .twlps-content{max-width:760px}.twlps-concept,.twlps-pricing-table,.twlps-news{height:auto;min-height:0}.twlps-pricing-table .twlps-comparison-table{font-size:var(--twlps-body-font,18.0px);line-height:1.8}.twlps-pricing-table .twlps-comparison-table th,.twlps-pricing-table .twlps-comparison-table td{padding:20px 24px}.twlps-pricing-table .twlps-pricing-note{font-size:15px;line-height:1.9}.twlps-news-title{font-size:clamp(18.0px,1.8vw,22.0px)!important;line-height:1.7}.twlps-news-intro .twlps-body{font-size:var(--twlps-body-font,18.0px)}@media(max-width:760px){.twlps-concept>.twlps-shell{grid-template-columns:1fr;gap:28px}.twlps-pricing-table .twlps-comparison-table{font-size:17.0px}.twlps-pricing-table .twlps-comparison-table th,.twlps-pricing-table .twlps-comparison-table td{padding:16px 18px}} /* Optional hero media: static remains the default for all existing pages. */ .twlps-main .twlps-hero-motion{overflow:hidden;position:relative;min-width:0}.twlps-main .twlps-hero-motion-background{position:absolute;inset:0}.twlps-main .twlps-hero-motion-inline{flex:1 1 50%;width:100%;min-height:300px;aspect-ratio:4/3}.twlps-main .twlps-hero-motion video,.twlps-main .twlps-hero-slides{display:block;width:100%;height:100%;object-fit:cover}.twlps-main .twlps-hero-slides{position:absolute;inset:0}.twlps-main .twlps-hero-slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}.twlps-main .twlps-hero-slide.is-current{opacity:1}.twlps-main .twlps-hero-controls{position:absolute;bottom:18px;right:18px;z-index:40;display:flex;gap:12px;align-items:center;background:#000d;color:#fff;padding:8px 12px;pointer-events:auto;font-size:15px}.twlps-main .twlps-hero-controls button{font:inherit;color:#fff;background:transparent;border:1px solid #fff8;min-height:36px;padding:5px 10px;cursor:pointer}.twlps-main .twlps-hero-controls button:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(prefers-reduced-motion:reduce){.twlps-main .twlps-hero-slide{transition:none}} .twlps-main .twlps-hero-video-toggle{position:absolute;bottom:20px;right:20px;z-index:50;background:#000e;color:#fff;border:1px solid #fff9;padding:10px 18px;font-size:15px;cursor:pointer}.twlps-main .twlps-hero-controls.is-background-controls{z-index:50} /* Legible shell text and a 15px floor at the selected content scale. */ .twlps-main .twlps-shell-nav a,.twlps-main .twlps-shell-footer-links a{font-size:var(--twlps-shell-nav-font,16.0px)!important;line-height:1.7} .twlps-main .twlps-shell-footer-brand p{font-size:var(--twlps-shell-body-font,18.0px)!important;line-height:1.85} .twlps-main .twlps-shell-bottom{font-size:var(--twlps-shell-note-font,15px)!important;line-height:1.8} .twlps-main .twlps-shell-cta{font-size:var(--twlps-shell-cta-font,16.0px)!important;min-height:44px} .twlps-main .twlps-section .twlps-eyebrow,.twlps-main .twlps-pricing-note,.twlps-main .twlps-plan-summary,.twlps-main .twlps-plan-period,.twlps-main .twlps-news-meta,.twlps-main .twlps-news-date,.twlps-main .twlps-news-category,.twlps-main .twlps-counter-label,.twlps-main .twlps-full-gallery figcaption{font-size:max(calc(15px / var(--twlps-content-scale,1)),15px)!important;line-height:1.8} .twlps-main .twlps-body{font-size:max(calc(15px / var(--twlps-content-scale,1)),var(--twlps-body-font,18.0px))!important;line-height:var(--twlps-body-line,1.85)} .twlps-main .twlps-area-body{font-size:max(calc(15px / var(--twlps-content-scale,1)),var(--twlps-area-body-font,18.0px))!important} .twlps-main .twlps-button{font-size:max(calc(15px / var(--twlps-content-scale,1)),var(--twlps-btn-font-size,16.0px))!important;min-height:44px} @media(max-width:767px){.twlps-main .twlps-body{font-size:max(calc(15px / var(--twlps-content-scale,1)),var(--twlps-mobile-body-font,18.0px))!important}}