/* Feature previews. The coastal layout below uses a vertical feature rail. */
.lp-ptabs#lp-feature-tabs{display:flex;flex-wrap:wrap;overflow:visible;justify-content:flex-start}
.lp-ptabs#lp-feature-tabs button{display:inline-flex;align-items:center;gap:6px;flex:none}
.lp-feature-panel{height:800px;background:#fff}
@media(max-width:640px){.lp-feature-panel{height:560px}}
/* Fixed, cached captures of the real sample routes fill the native desktop preview. */
.lp-feature-panel{position:relative}
.lp-feature-panel>.lp-sample{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;visibility:hidden;pointer-events:none}
.lp-feature-panel>.lp-sample.is-on.is-ready{visibility:visible}

/* Selected layout A: all eight features remain visible beside a scaled desktop preview. */
body.e-coastal .e-product{margin-top:-130px;scroll-margin-top:110px}
body.e-coastal .e-stage-frame>.lp-stage{display:grid;grid-template-columns:292px minmax(0,1fr);gap:20px;align-items:stretch;padding:20px;background:#f8fafb}
body.e-coastal .lp-preview-viewport{align-self:start;min-width:0;overflow:hidden;border-radius:10px;background:transparent;box-shadow:none}
body.e-coastal .lp-preview-viewport>.lp-win{margin:0;transform-origin:top left;border-top:0;border-radius:0 0 10px 10px}
/* The window bar renders outside the scaled window at page text size. macOS traffic lights sit in the left corner;
   the address is a raised field (--raise-grad + --elev-1) centred on the whole strip, as Safari does. Vertical padding
   and a 1.4 line height keep descenders whole; the ellipsis is horizontal only. */
body.e-coastal .lp-preview-viewport>.lp-win-top{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;height:56px;padding:0 14px;border:1px solid #e3e5e9;border-radius:10px 10px 0 0;background:#f6f7f9}
body.e-coastal .lp-win-top>.lp-urlbar{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:min(460px,70%);min-width:0;height:auto;padding:7px 16px;border:0;border-radius:9px;background:var(--raise-grad);box-shadow:var(--elev-1);font:500 15px/1.4 CoastalInter,Inter,system-ui,sans-serif;color:#4d525b}
body.e-coastal .lp-lights{display:none}
body.e-coastal .lp-urlglobe{flex:none;width:18px;height:18px;color:#2f6bff}
body.e-coastal .lp-urltext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.e-coastal .lp-feature-panel{height:800px}
body.e-coastal .lp-feature-panel>.lp-sample{height:100%;border-radius:0;box-shadow:none}
/* Described cards (design-review/feature-rail-20261022/c.html, chosen 2026-10-22). Every feature shows its description.
   Cards hug their content and the rail spreads them with equal gaps from the preview's top edge to its bottom edge.
   Selected = a raised card (--raise-grad + --elev-2) with a blue icon tile (--primary-grad + --elev-primary).
   Unselected icon tiles sit in the --elev-inset well. The meter (--elev-inset track, --primary-grad fill) runs while the
   rail advances on its own; the first click or key stops it, hover and focus pause it, reduced motion turns it off. */
body.e-coastal #lp-feature-tabs{position:relative;display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;min-width:0;max-width:none;overflow:visible;justify-content:space-between;margin:0;padding:0;gap:2px;border:0;border-radius:0;background:transparent}
body.e-coastal #lp-feature-tabs button{position:relative;display:flex;flex:none;align-items:flex-start;gap:12px;width:100%;height:auto;min-height:0;margin:0;padding:10px 14px 12px 12px;border:0;border-radius:12px;background:none;color:#2c3a46;font:inherit;text-align:left;white-space:normal;cursor:pointer;transition:background-color .18s,box-shadow .25s}
body.e-coastal #lp-feature-tabs .lp-tab-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-top:1px;border-radius:10px;background:#eff1f4;box-shadow:var(--elev-inset);color:#5b6672;transition:background .2s,box-shadow .2s,color .2s}
body.e-coastal #lp-feature-tabs .lp-tab-tx{display:flex;flex-direction:column;min-width:0}
body.e-coastal #lp-feature-tabs .lp-tab-lb{font-size:14px;line-height:1.3;font-weight:600}
body.e-coastal #lp-feature-tabs .lp-tab-ds{margin-top:2px;font-size:12.5px;line-height:1.4;font-weight:400;color:#5d7182}
body.e-coastal #lp-feature-tabs button:hover:not([aria-selected=true]){background:#f0f2f5;color:#2c3a46}
body.e-coastal #lp-feature-tabs button[aria-selected=true]{background:var(--raise-grad);box-shadow:var(--elev-2);color:rgb(15 17 20)}
body.e-coastal #lp-feature-tabs button[aria-selected=true] .lp-tab-ic{background:var(--primary-grad);box-shadow:var(--elev-primary);color:#fff}
body.e-coastal #lp-feature-tabs button[aria-selected=true] .lp-tab-lb{color:#2f6bff}
body.e-coastal #lp-feature-tabs .lp-tab-meter{position:absolute;left:58px;right:14px;bottom:6px;height:3px;border-radius:3px;background:#eff1f4;box-shadow:var(--elev-inset);opacity:0;overflow:hidden}
body.e-coastal #lp-feature-tabs .lp-tab-meter>i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--primary-grad);transform:scaleX(0);transform-origin:left}
body.e-coastal #lp-feature-tabs.is-auto button[aria-selected=true] .lp-tab-meter{opacity:1}
body.e-coastal #lp-feature-tabs.is-auto button[aria-selected=true] .lp-tab-meter>i{animation:lp-tab-fill 7s linear forwards}
body.e-coastal #lp-feature-tabs.is-auto:is(:hover,:focus-within) .lp-tab-meter>i{animation-play-state:paused}
@keyframes lp-tab-fill{to{transform:scaleX(1)}}
@media(max-width:1340px) and (min-width:981px){
 body.e-coastal #lp-feature-tabs button:not([aria-selected=true]){align-items:center}
 body.e-coastal #lp-feature-tabs button:not([aria-selected=true]) .lp-tab-ds{display:none}
}
body.e-coastal #lp-feature-tabs button:focus-visible{outline:2px solid #2f6bff;outline-offset:2px}
@media(max-width:1100px){
 body.e-coastal .e-blue-mat{padding:20px}
 body.e-coastal .e-stage-frame>.lp-stage{grid-template-columns:248px minmax(0,1fr);gap:16px;padding:16px}
}
@media(max-width:1100px) and (min-width:981px){
 body.e-coastal #lp-feature-tabs button{padding:6px 12px 8px 8px;gap:10px}
 body.e-coastal #lp-feature-tabs .lp-tab-ic{width:28px;height:28px;border-radius:8px}
 body.e-coastal #lp-feature-tabs .lp-tab-meter{left:46px;bottom:4px}
}
@media(max-width:980px){
 body.e-coastal .e-blue-mat{padding:12px}
 body.e-coastal .e-stage-frame>.lp-stage{display:grid;grid-template-columns:minmax(0,1fr);padding:12px;gap:16px}
 body.e-coastal #lp-feature-tabs{flex-direction:row;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 6px}
 body.e-coastal #lp-feature-tabs::-webkit-scrollbar{display:none}
 body.e-coastal #lp-feature-tabs button{width:auto;flex:none;align-items:center;gap:8px;height:44px;min-height:44px;padding:0 12px 0 6px;border-radius:10px;white-space:nowrap}
 body.e-coastal #lp-feature-tabs .lp-tab-ic{width:28px;height:28px;margin:0;border-radius:8px}
 body.e-coastal #lp-feature-tabs :is(.lp-tab-ds,.lp-tab-meter){display:none}
 body.e-coastal .lp-preview-viewport .lp-app{height:800px}
 body.e-coastal .lp-preview-viewport>.lp-win-top{height:48px;padding:0 10px}
 body.e-coastal .lp-win-top>.lp-urlbar{padding:6px 10px;font-size:14px}}
@media(prefers-reduced-motion:reduce){body.e-coastal #lp-feature-tabs :is(button,.lp-tab-ic,.lp-tab-meter>i){transition:none;animation:none}}

@media(max-width:700px){
 body.e-coastal .e-product{margin-top:-160px}
 body.e-coastal .lp-win-top>.lp-urlbar{width:100%}
 body.e-coastal .lp-feature-panel>.lp-sample{pointer-events:auto}
}