@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display: none; }



@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&family=Geist:wght@400..600&display=swap");

:root {
  
  --ss-paper: #fafafa;          
  --ss-white: #ffffff;          
  --ss-wash: #f7fbf9;           
  --ss-hover: #f1f5f3;          

  
  --ss-obsidian: #171717;       
  --ss-charcoal: #4d4d4d;       
  --ss-stone: #666666;          

  
  --ss-hairline: #ebebeb;       
  --ss-ash: #c9c9c9;            
  --ss-line-teal: #edf2f0;      
  --ss-line-number: #b9cbc5;    

  
  --ss-spring: #14c9a0;         
  --ss-spring-hover: #2ad8b0;   
  --ss-sea: #0e8a72;            
  --ss-deep: #0f3d3a;           
  --ss-deep-hover: #0b2d2b;     
  --ss-mint: #e8f8f3;           
  --ss-mint-line: #cdeee4;      

  
  --ss-on-deep: #d5e7e2;        
  --ss-on-deep-muted: #b7d3cc;  
  --ss-on-deep-faint: #8fb3aa;  
  --ss-on-deep-rule: rgba(255, 255, 255, .1);
  --ss-on-deep-ghost: rgba(255, 255, 255, .25);   

  
  --ss-font: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --ss-font-heading: 'DM Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --ss-font-code: var(--ss-font);   

  --ss-t-micro: 12px;           
  --ss-t-caption: 13px;         
  --ss-t-small: 14px;           
  --ss-t-body: 16px;            
  --ss-t-lead: 18px;            
  --ss-t-h-md: clamp(28px, 3vw, 40px);      
  --ss-t-h-lg: clamp(34px, 4.6vw, 56px);    
  --ss-t-h-hero: clamp(44px, 6.6vw, 92px);  
  --ss-t-h-endcap: clamp(40px, 5.6vw, 76px);
  --ss-t-price: clamp(40px, 4.4vw, 56px);

  --ss-w-regular: 400;
  --ss-w-heading: 450;          
  --ss-w-section: 550;          
  --ss-w-hero: 600;             
  --ss-w-medium: 500;           
  --ss-w-strong: 600;           

  --ss-track-hero: -0.03em;
  --ss-track-heading: -0.045em;  
  --ss-track-body: -0.01em;

  
  --ss-r: 6px;                  
  
  --ss-ide-key: #7a3fc4;
  --ss-ide-fn: #1f5fbf;
  --ss-ide-str: #1a7f4b;
  --ss-ide-num: #c4281c;
  --ss-ide-prop: #0b7285;
  --ss-ide-punc: #5f736d;

  --ss-r-sm: 7px;               
  --ss-r-row: 10px;             
  --ss-r-tile: 9px;             
  --ss-r-panel: 16px;           
  --ss-r-code: 8px;            
  --ss-r-float: 14px;           
  --ss-r-pill: 9999px;

  
  --ss-ring: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px #fafafa;   
  --ss-ring-line: 0 0 0 1px #ebebeb;                           
  --ss-ring-pick: 0 0 0 1.5px var(--ss-spring);   
  --ss-ring-sea: 0 0 0 1px #0e8a72;                            
  --ss-lift: 0 0 0 1px #ebebeb, 0 24px 48px -32px rgba(15, 61, 58, .3);   
  --ss-lift-editor: 0 0 0 1px #ebebeb, 0 30px 60px -36px rgba(15, 61, 58, .4);
  --ss-float: 0 0 0 1px #ebebeb, 0 20px 44px -18px rgba(15, 61, 58, .35); 
  --ss-focus: 0 0 0 1px #0e8a72, 0 0 0 4px #e8f8f3;            

  
  --ss-max: 1280px;
  --ss-pad: 48px;               
  --ss-section: 112px;          
  --ss-gap: 16px;               

  
  --ss-fast: 150ms;
  --ss-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ss-bob: 7s;                 
}

@media (max-width: 860px) {
  :root { --ss-pad: 16px; --ss-section: 80px; }
}

:root{--ss-ring-pick: 0 0 0 1.5px var(--ss-spring);}


*, *::before, *::after { box-sizing: border-box; }
body.ss {
  margin: 0; background: var(--ss-paper); color: var(--ss-obsidian);
  font: var(--ss-w-regular) var(--ss-t-body)/1.5 var(--ss-font);
  font-feature-settings: "calt" 0, "rlig", "ss11"; -webkit-font-smoothing: antialiased;
}
:where(.ss) a { color: inherit; }   
.ss :focus-visible { outline: 2px solid var(--ss-sea); outline-offset: 2px; }
.ss .num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--ss-max); margin: 0 auto; padding-inline: var(--ss-pad); }
section.ss-section { padding-top: var(--ss-section); }



.eyebrow { display: block; margin: 0 0 14px; font: var(--ss-w-strong) var(--ss-t-small)/1.4 var(--ss-font); letter-spacing: -0.005em; color: var(--ss-sea); }
.on-deep .eyebrow, .ec-eyebrow { color: var(--ss-spring); margin-bottom: 18px; }

.label { display: block; margin: 0 0 8px; font: var(--ss-w-medium) var(--ss-t-caption)/1.4 var(--ss-font); letter-spacing: var(--ss-track-body); color: var(--ss-sea); }
:where(h1, h2, .h-hero, .h-lg, .h-md, .h-section, .h-sub, .ec-h) { font-family: var(--ss-font-heading); }

body, button, input, select, textarea, code, pre, kbd, samp, svg text { font-family: var(--ss-font); }

h1, .h-hero { letter-spacing: -0.03em !important; }
h2, .h-section, .h-sub, .h-md, .ec-h { letter-spacing: -0.02em !important; }
.h-hero { margin: 0; font-weight: var(--ss-w-hero); font-size: var(--ss-t-h-hero); line-height: 1; letter-spacing: var(--ss-track-hero); }
.h-lg { margin: 0; font-weight: var(--ss-w-section); font-size: var(--ss-t-h-lg); line-height: 1; letter-spacing: var(--ss-track-heading); }
.h-md { margin: 0; font-weight: var(--ss-w-section); font-size: var(--ss-t-h-md); line-height: 1.05; letter-spacing: -0.02em; }
.h-sm { margin: 0; font-weight: var(--ss-w-medium); font-size: var(--ss-t-body); line-height: 1.43; letter-spacing: var(--ss-track-body); }
.lead { margin: 20px 0 0; max-width: 560px; color: var(--ss-charcoal); font-size: var(--ss-t-lead); line-height: 1.5; }

.hl { background: var(--ss-sea); color: #fff; border-radius: .16em; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.tl { color: var(--ss-deep); text-decoration: underline; text-decoration-color: var(--ss-spring); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tl:hover { color: var(--ss-sea); }

.links-row { display: flex; flex-wrap: wrap; gap: 20px; margin: 32px 0 0; font-size: var(--ss-t-small); }
.links-row a { color: var(--ss-sea); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }


.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-bottom: 40px; }
.sec-head > p { margin: 0; max-width: 460px; justify-self: end; color: var(--ss-charcoal); }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--ss-r);
  font: var(--ss-w-regular) var(--ss-t-small)/1 var(--ss-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ss-fast) var(--ss-ease-out), box-shadow var(--ss-fast) var(--ss-ease-out), color var(--ss-fast) var(--ss-ease-out); }
.btn-solid { background: var(--ss-deep); color: #fff; }
.btn-solid:hover { background: var(--ss-deep-hover); }
.btn-go { --edge: 4px; border-radius: 12px; background: var(--ss-spring); color: var(--ss-deep); font-weight: 600; box-shadow: 0 var(--edge) 0 var(--ss-deep); transition: transform .14s var(--ss-ease-out), box-shadow .14s var(--ss-ease-out), background-color .14s var(--ss-ease-out); }
.btn-go:hover { background: var(--ss-spring-hover); transform: translateY(-2px); box-shadow: 0 calc(var(--edge) + 2px) 0 var(--ss-deep); }
.btn-go:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ss-deep); transition-duration: .05s; }
@media (prefers-reduced-motion: reduce) { .btn-go { transition: none; } }
.btn-ghost { background: transparent; color: var(--ss-charcoal); box-shadow: var(--ss-ring-line); }
.btn-ghost:hover { color: var(--ss-obsidian); box-shadow: 0 0 0 1px var(--ss-ash); }
.btn-spring { background: var(--ss-spring); color: var(--ss-deep); font-weight: var(--ss-w-medium); }
.btn-spring:hover { background: var(--ss-spring-hover); }
.btn-ghost-deep { background: transparent; color: #fff; box-shadow: 0 0 0 1px var(--ss-on-deep-ghost); }
.btn-ghost-deep:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.btn-white { background: #fff; color: var(--ss-deep); }
.btn-white:hover { background: var(--ss-hairline); }
.btn.pill { border-radius: var(--ss-r-pill); min-height: 32px; padding: 0 14px; }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: var(--ss-t-micro); font-weight: var(--ss-w-medium); }
.btn-mint { background: var(--ss-mint); color: var(--ss-sea); font-weight: var(--ss-w-medium); }



.tag { display: inline-flex; align-items: center; white-space: nowrap; font: var(--ss-w-medium) var(--ss-t-caption)/1.4 var(--ss-font); letter-spacing: var(--ss-track-body);
  color: var(--ss-sea); background: var(--ss-mint); border-radius: var(--ss-r-pill); padding: 2px 10px; }
.tag.xs { font-size: 11px; padding: 1px 8px; }
.tag.plain { background: none; padding: 0; color: var(--ss-stone); font-weight: var(--ss-w-regular); }
.tag.pop { background: var(--ss-spring); color: var(--ss-deep); }

.tag.watch { gap: 6px; background: none; padding: 0; }
.tag.watch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-spring); box-shadow: 0 0 0 3px var(--ss-mint); }
.ok-pill { display: inline-block; background: var(--ss-mint); color: var(--ss-sea); font: var(--ss-w-medium) var(--ss-t-micro)/1 var(--ss-font); border-radius: var(--ss-r-pill); padding: 5px 10px; }

.uses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 20px; }
.uses a, .uses span { font: var(--ss-w-medium) var(--ss-t-micro)/1 var(--ss-font); color: var(--ss-sea); background: var(--ss-mint); border-radius: var(--ss-r-pill); padding: 5px 10px; text-decoration: none; }
.uses a:hover { background: var(--ss-sea); color: #fff; }

.pb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--ss-r-pill); background: #fff; box-shadow: var(--ss-ring-line);
  font-size: var(--ss-t-caption); color: var(--ss-obsidian); text-decoration: none; transition: box-shadow var(--ss-fast) var(--ss-ease-out); }
.pb-pill:hover { box-shadow: var(--ss-ring-sea); color: var(--ss-deep); }

.chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--ss-r-pill); padding: 6px 16px 6px 6px; font: var(--ss-w-medium) var(--ss-t-small)/1 var(--ss-font); color: var(--ss-obsidian); box-shadow: var(--ss-float); white-space: nowrap; }
.chip .av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ss-spring); color: var(--ss-deep); }
.chip .ts { color: var(--ss-sea); font-variant-numeric: tabular-nums; }



.pl { display: inline-block; width: var(--icon, 18px); height: var(--icon, 18px); flex: none; fill: currentColor; }
.ptile { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ss-r-tile); background: var(--ss-mint); color: var(--ss-sea); flex: none; --icon: 17px; }
.ptile.xs { width: 22px; height: 22px; border-radius: 6px; --icon: 12px; }
.ptile.lg { width: 48px; height: 48px; border-radius: 13px; background: var(--ss-deep); color: #fff; --icon: 22px; }
.ptile.on { background: var(--ss-deep); color: #fff; }
.ptile .mono { font: var(--ss-w-medium) 14px/1 var(--ss-font); }   

.tile { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 20px; color: #fff; background: var(--c); --icon: 36px;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.tile.md { width: 56px; height: 56px; border-radius: 15px; --icon: 24px; }
.tile.sm { width: 48px; height: 48px; border-radius: 12px; --icon: 22px; box-shadow: 0 10px 24px -10px rgba(15, 61, 58, .35); }
.tile.t-spring { --c: var(--ss-spring); color: var(--ss-deep); }
.tile.t-sea { --c: var(--ss-sea); }
.tile.t-deep { --c: var(--ss-deep); }
.tile.t-mint { --c: var(--ss-mint); color: var(--ss-sea); box-shadow: 0 0 0 1px var(--ss-mint-line), 0 10px 24px -10px rgba(15, 61, 58, .25); }
.on-deep .tile { box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); }
.bob { animation: ss-bob var(--ss-bob) ease-in-out var(--d, 0s) infinite; }
@keyframes ss-bob { 50% { translate: 0 -7px; } }


.card { background: #fff; border-radius: var(--ss-r); box-shadow: var(--ss-ring); padding: 24px; }
.card.inv { background: var(--ss-deep); color: #fff; box-shadow: none; }
.card.build { display: flex; flex-direction: column; min-height: 200px; }
.card.build h3 { margin-bottom: 8px; }
.card.build p { margin: 0; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.5; }
.card-f { background: #fff; border-radius: var(--ss-r-float); box-shadow: var(--ss-float); }
.g2, .g3, .g4 { display: grid; gap: var(--ss-gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


.nav { position: sticky; top: 0; z-index: 10; background: rgba(250, 250, 250, .85); backdrop-filter: saturate(1.2) blur(20px); -webkit-backdrop-filter: saturate(1.2) blur(20px); }
.nav-in { height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--ss-font-heading); font-weight: var(--ss-w-strong, 600); font-size: 18px; letter-spacing: -0.025em; color: var(--ss-obsidian); }
.brand svg { display: block; flex: none; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { font-size: var(--ss-t-small); color: var(--ss-charcoal); text-decoration: none; padding: 8px 0; }
.nav-links a:hover { color: var(--ss-obsidian); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }


.steps { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.st-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ss-mint); color: var(--ss-sea); font: var(--ss-w-medium) var(--ss-t-caption)/1 var(--ss-font); flex: none; font-variant-numeric: tabular-nums; }
.steps li:last-child .st-n { background: var(--ss-sea); color: #fff; }
.steps h3 { margin: 3px 0 4px; }
.steps p { margin: 0; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.5; }


.ed { width: 100%; background: #fff; border-radius: var(--ss-r-code); box-shadow: var(--ss-lift-editor); overflow: hidden; text-align: left; }
.ed-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--ss-line-teal); }
.ed-tabs { display: flex; gap: 2px; }
.ed-tabs button { border: 0; background: transparent; font: var(--ss-w-medium) var(--ss-t-micro)/1 var(--ss-font); color: var(--ss-stone); padding: 7px 11px; border-radius: var(--ss-r-sm); cursor: pointer; }
.ed-tabs button:hover { color: var(--ss-obsidian); }
.ed-tabs button[aria-selected="true"] { background: var(--ss-mint); color: var(--ss-sea); }
.ed-copy { min-height: 28px; padding: 0 10px; font: var(--ss-w-medium) var(--ss-t-micro)/1 var(--ss-font); background: var(--ss-deep); color: #fff; }
.ed-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 300px; }
.ed-req { padding: 14px 0; min-width: 0; overflow-x: auto; }
.ed-code { margin: 0; font: var(--ss-w-regular) 12.5px/1.75 var(--ss-font-code); color: var(--ss-obsidian); white-space: pre; }
.ed-code code { font: inherit; }
.ed-code .ln { display: block; padding-right: 16px; }
.ed-code .ln i { display: inline-block; width: 34px; padding-right: 12px; text-align: right; font-style: normal; color: var(--ss-line-number); user-select: none; }
.cs { color: var(--ss-ide-str); }                                    
.ck { color: var(--ss-ide-key); font-weight: inherit; }   
.ed-res { border-left: 1px solid var(--ss-line-teal); background: var(--ss-wash); padding: 12px 16px; min-width: 0; }
.ed-rh { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ss-stone); margin-bottom: 8px; }
.json { margin: 0; font: var(--ss-w-regular) 12.5px/1.6 var(--ss-font-code); color: var(--ss-obsidian); white-space: pre; overflow-x: auto; font-variant-numeric: tabular-nums; }
.json .k { color: var(--ss-ide-prop); }
.json .n { color: var(--ss-ide-num); }
.json .s { color: var(--ss-ide-str); }
.ed-code .ck2 { color: var(--ss-ide-key); }
.ed-code .tf { color: var(--ss-ide-fn); }
.ed-code .tp { color: var(--ss-ide-prop); }
.ed-code .tu { color: var(--ss-ide-punc); }


.dev-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ss-hairline); border-bottom: 1px solid var(--ss-hairline); }
.dev-f2 { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 24px 0; text-decoration: none; color: var(--ss-obsidian); }
.dev-f2 + .dev-f2 { padding-left: 24px; border-left: 1px solid var(--ss-hairline); }
.dev-f2t { display: flex; align-items: center; gap: 8px; font-weight: var(--ss-w-medium); }
.dev-f2t span { color: var(--ss-sea); transition: transform var(--ss-fast) var(--ss-ease-out); }
.dev-f2d { font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.dev-f2:hover .dev-f2t { color: var(--ss-sea); }
.dev-f2:hover .dev-f2t span { transform: translateX(3px); }


.pb { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.pb > * { min-width: 0; }
.pb-group-h { display: flex; align-items: center; gap: 8px; padding: 8px 4px; font: var(--ss-w-medium) var(--ss-t-caption)/1 var(--ss-font); color: var(--ss-stone); }
.pb-group-h span:first-child { flex: 1; }
.pb-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.pb-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ss-r-row); background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--ss-obsidian); }
.pb-item:hover { background: var(--ss-hover); }
.pb-item[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 1px var(--ss-hairline), 0 8px 20px -14px rgba(15, 61, 58, .4); }
.pb-item[aria-selected="true"] .ptile { background: var(--ss-deep); color: #fff; }
.pb-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pb-name b { font-weight: var(--ss-w-medium); font-size: var(--ss-t-small); }
.pb-name small { font-size: var(--ss-t-micro); color: var(--ss-stone); font-variant-numeric: tabular-nums; }
.pb-panel { background: #fff; border-radius: var(--ss-r-panel); box-shadow: var(--ss-lift); padding: 28px 32px; }
.pb-ph { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ss-hairline); }
.pb-ph > div { flex: 1; min-width: 0; }
.pb-ph h3 a { color: inherit; text-decoration: none; }
.pb-ph h3 a:hover { color: var(--ss-sea); }
.pb-ph p { margin: 6px 0 0; color: var(--ss-stone); font-size: var(--ss-t-small); font-variant-numeric: tabular-nums; }
.pb-learn { font-size: var(--ss-t-small); color: var(--ss-sea); text-decoration: none; white-space: nowrap; }
.pb-learn:hover { text-decoration: underline; text-underline-offset: 3px; }
.pb-eps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; padding: 20px 0; }
.pb-ep { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--ss-r-row); text-decoration: none; color: var(--ss-obsidian); }
.pb-ep:hover { background: var(--ss-mint); }
.pb-ep:hover b { color: var(--ss-deep); }
.pb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-spring); margin-top: 7px; flex: none; }
.pb-ep.is-planned .pb-dot { background: var(--ss-ash); }
.pb-ep.is-planned b { color: var(--ss-stone); }
.pb-ept { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pb-ept b { font-weight: var(--ss-w-medium); font-size: var(--ss-t-small); }
.pb-ept code { font: var(--ss-w-regular) var(--ss-t-micro)/1.4 var(--ss-font-code); color: var(--ss-stone); overflow-wrap: anywhere; }
.pb-more { margin: 0; padding-top: 20px; border-top: 1px solid var(--ss-hairline); font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.pb-more a { color: var(--ss-sea); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }


.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--ss-r-pill); background: rgba(15, 61, 58, .04); box-shadow: 0 0 0 1px rgba(15, 61, 58, .12); }
.seg button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--ss-r-pill); background: transparent; font: var(--ss-w-medium) var(--ss-t-small)/1 var(--ss-font); color: var(--ss-charcoal); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ss-obsidian); box-shadow: 0 0 0 1px rgba(15, 61, 58, .06), 0 2px 6px rgba(15, 61, 58, .1); }
.seg-save { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: var(--ss-r-pill); background: var(--ss-mint); color: var(--ss-sea); font-size: var(--ss-t-micro); font-weight: var(--ss-w-medium); line-height: 1.3; }
@media (max-width: 640px) { .seg button { padding: 0 14px; white-space: nowrap; font-size: var(--ss-t-caption); } }
@media (max-width: 420px) { .seg { gap: 0; padding: 4px; } .seg button { padding: 0 10px; } .seg-save { margin-left: 2px; padding: 2px 5px; } }
.pack { display: flex; flex-direction: column; gap: 4px; min-height: 280px; }
.pack .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.price { font-weight: var(--ss-w-heading); font-size: var(--ss-t-price); line-height: 1; letter-spacing: var(--ss-track-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price small { font-size: var(--ss-t-small); letter-spacing: 0; color: var(--ss-charcoal); margin-left: 4px; }
.pack .meta { font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.pack .rate { font-size: var(--ss-t-caption); line-height: 1.5; color: var(--ss-charcoal); margin-top: 8px; }
.pack .btn { margin-top: auto; width: 100%; }
.card.inv .price small, .card.inv .meta, .card.inv .rate { color: var(--ss-ash); }

.card.card.pack { position: relative; padding: 28px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(15, 61, 58, .14); }
.card.card.pack.is-pop { background: color-mix(in srgb, var(--ss-mint) 45%, #fff); box-shadow: 0 0 0 2px var(--ss-spring); }
.pack.is-pop .top .tag.pop { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.pack .top { margin-bottom: 12px; }
.pack.pack .price { font-variant-numeric: normal; font-family: var(--ss-font-heading); font-size: 40px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: var(--ss-obsidian); }
.pack.pack .price small { font-family: var(--ss-font); font-size: var(--ss-t-small); font-weight: 400; letter-spacing: 0; color: var(--ss-charcoal); }
.pack.pack .meta { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--ss-charcoal); }
.pack.pack .rate { margin-top: 2px; margin-bottom: 20px; font-size: var(--ss-t-small); font-weight: 500; color: var(--ss-sea); }
.pack .btn { min-height: 48px; border-radius: var(--ss-r-pill); font-weight: 600; }
.pack .btn-ghost { color: var(--ss-obsidian); box-shadow: 0 0 0 1px rgba(15, 61, 58, .2); }
.pack.is-pop .btn, .pack.is-pop .btn:hover { background: var(--ss-spring); color: var(--ss-deep); box-shadow: none; transform: none; }
.pack.is-pop .btn:hover { background: var(--ss-spring-hover); }
.pack-list { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.4; }
.pack-list li { position: relative; padding-left: 24px; }
.pack-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 12px; height: 6px; border-left: 2px solid var(--ss-sea); border-bottom: 2px solid var(--ss-sea); transform: rotate(-45deg); }


.faq { border-top: 1px solid var(--ss-hairline); }
.faq details { border-bottom: 1px solid var(--ss-hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: var(--ss-t-lead); letter-spacing: -0.02em; font-weight: var(--ss-w-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; color: var(--ss-sea); flex: none; transition: transform 200ms var(--ss-ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--ss-charcoal); max-width: 640px; }


.endcap { background: var(--ss-deep); color: var(--ss-on-deep); padding: 0 0 32px; position: relative; overflow: hidden; }
.ec-cta { position: relative; text-align: center; padding: 120px 0 112px; border-bottom: 1px solid var(--ss-on-deep-rule); }
.ec-tiles { position: absolute; inset: 0; pointer-events: none; }
.ec-tiles .tile { position: absolute; left: var(--x); top: var(--y); rotate: var(--r); }
.ec-h { position: relative; margin: 0 auto; max-width: 760px; color: #fff; font-weight: var(--ss-w-section); font-size: var(--ss-t-h-endcap); line-height: 1; letter-spacing: var(--ss-track-hero); }
.ec-sub { position: relative; margin: 20px 0 0; font-size: var(--ss-t-lead); color: var(--ss-on-deep-muted); }
.ec-btns { position: relative; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.foot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 64px; }
.foot h4 { margin: 0 0 12px; font: var(--ss-w-medium) var(--ss-t-caption)/1.4 var(--ss-font); color: #fff; }
.foot a { display: block; padding: 4px 0; font-size: var(--ss-t-small); color: var(--ss-on-deep-muted); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot a.brand { display: flex; color: #fff; padding: 0; font-size: 18px; }
.foot p { margin: 12px 0 0; font-size: var(--ss-t-small); color: var(--ss-on-deep-muted); }
.base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--ss-on-deep-rule); display: flex; gap: 24px; flex-wrap: wrap; font: var(--ss-w-regular) var(--ss-t-caption)/1.5 var(--ss-font); color: var(--ss-on-deep-faint); }
.base a { color: var(--ss-on-deep-faint); text-decoration: none; }
.base a:hover { color: #fff; }


@media (max-width: 1100px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .dev-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-f2:nth-child(3) { padding-left: 0; border-left: 0; }
  .dev-f2:nth-child(n+3) { border-top: 1px solid var(--ss-hairline); }
}
@media (max-width: 960px) {
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pb-list { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 12px; }
  .pb-item { flex: none; width: auto; padding-right: 14px; }
}
@media (max-width: 860px) {
  .nav-links, .nav-right .btn-ghost { display: none; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head > p { justify-self: start; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot > :first-child { grid-column: 1 / -1; }
  .ec-cta { padding: 88px 0 80px; }
  .ec-tiles .tile:nth-child(n+5) { display: none; }
}
@media (max-width: 700px) {
  .ed-body { grid-template-columns: minmax(0, 1fr); }
  .ed-res { border-left: 0; border-top: 1px solid var(--ss-line-teal); }
}
@media (max-width: 640px) {
  .pb-panel { padding: 20px; }
  .pb-eps { grid-template-columns: 1fr; }
  .pb-ph { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .dev-strip { grid-template-columns: minmax(0, 1fr); }
  .dev-f2, .dev-f2 + .dev-f2 { padding-left: 0; border-left: 0; }
  .dev-f2 + .dev-f2 { border-top: 1px solid var(--ss-hairline); }
}
@media (prefers-reduced-motion: reduce) {
  .bob { animation: none; }
  .ss * { transition: none !important; }
}


.h-section { margin: 0; font-weight: var(--ss-w-section); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.h-sub { margin: 0; font-weight: var(--ss-w-section); font-size: clamp(22px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; }
.sec-head.stacked, .sec-head.center { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 28px; }
.sec-head.center { justify-items: center; text-align: center; }
.sec-head .eyebrow { margin-bottom: 10px; }
.sec-head.minor { margin-bottom: 20px; }
.sec-head.minor .eyebrow { margin-bottom: 6px; }


.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-size: var(--ss-t-caption); color: var(--ss-stone); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ss-ash); }
.crumbs a { color: var(--ss-charcoal); text-decoration: none; }
.crumbs a:hover { color: var(--ss-sea); }


.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--ss-r-pill); background: #fff; box-shadow: var(--ss-ring); font: var(--ss-w-medium) var(--ss-t-small)/1 var(--ss-font); color: var(--ss-charcoal); cursor: pointer; transition: background var(--ss-fast) var(--ss-ease-out), color var(--ss-fast) var(--ss-ease-out); }
.fchip:hover { color: var(--ss-obsidian); }
.fchip[aria-pressed="true"] { background: var(--ss-deep); color: #fff; box-shadow: none; }
@media (max-width: 900px) { .fchips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .fchips.scroll .fchip { flex: none; } }


.pick { display: grid; gap: 3px; width: 100%; padding: 14px 18px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--ss-ring); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: box-shadow var(--ss-fast) var(--ss-ease-out); }
.pick:hover { box-shadow: var(--ss-ring-sea); }
.pick[aria-pressed="true"], .pick.is-on { box-shadow: var(--ss-ring-pick), var(--ss-lift); background: var(--ss-wash); }
.pick.is-planned { background: var(--ss-hover); box-shadow: none; }
.pick.is-planned[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--ss-ash); }
.pick[hidden] { display: none; }
.pick-n { display: flex; align-items: center; gap: 10px; font-weight: var(--ss-w-medium); color: var(--ss-obsidian); }
.pick-p { font: inherit; font-size: var(--ss-t-small); color: var(--ss-stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.xp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.xp .fchips { margin-bottom: 16px; }
.xp-list { display: grid; gap: 8px; }
.xp-side { position: sticky; top: 88px; display: grid; gap: 14px; }
.xp-sel { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.xp-sel h3 { margin: 0 0 4px; font-weight: var(--ss-w-medium); font-size: 22px; letter-spacing: -0.02em; color: var(--ss-obsidian); }
.xp-sel code { font: inherit; font-size: var(--ss-t-small); color: var(--ss-sea); }
.xp .ed-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.xp .ed-res { border-left: 0; border-top: 1px solid var(--ss-hairline); }
.xp .ed-body[hidden], .xp .ed-copy[hidden], .xp-note[hidden] { display: none; }
.xp-note { margin: 0; padding: 28px 22px; color: var(--ss-charcoal); }
@media (max-width: 900px) { .xp { grid-template-columns: minmax(0, 1fr); } .xp-side { position: static; } }


.orbit-hero { position: relative; overflow: hidden; }
.orbit-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(var(--ss-paper) 0, transparent 14%, transparent 86%, var(--ss-paper)); }
.orbit-hero > .wrap { position: relative; z-index: 2; }
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.orbit-ring { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1); border-radius: 50%; border: 1px dashed rgba(14, 138, 114, .22); animation: ss-spin var(--t, 120s) linear infinite; }
.orbit-ring.rev { animation-direction: reverse; }
.orbit-ring.faint .tile { opacity: .8; }
.orb { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.orb .tile { position: absolute; margin: -24px 0 0 -24px; animation: ss-spin var(--t, 120s) linear infinite reverse; }
.orbit-ring.rev .orb .tile { animation-direction: normal; }
@keyframes ss-spin { to { rotate: 360deg; } }
@media (max-width: 1100px) { .orbit-ring:not(:first-child) { display: none; } }
@media (max-width: 640px) { .orbit { display: none; } }
@media (prefers-reduced-motion: reduce) { .orbit-ring, .orb .tile { animation: none; } .pick, .fchip { transition: none; } }


.fo-row { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--ss-r-float); background: #fff; box-shadow: var(--ss-ring-line); }
.fo-row h3 { margin: 0; padding: 24px 24px 6px; color: var(--ss-obsidian); font-family: var(--ss-font-heading); font-size: 20px; font-weight: var(--ss-w-section); line-height: 1.25; letter-spacing: -.012em; }
.fo-row p { margin: 0; padding: 0 24px 20px; color: var(--ss-charcoal); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.fo-art { display: block; width: 100%; height: auto; margin-top: auto; }
.fo-art text { font-family: var(--ss-font); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fo-art g[class^="fa-"], .fo-art .fa-nudge { transform-box: fill-box; transform-origin: center; }
  .fa-tilt, .fa-left, .fa-right { transition: transform .35s var(--ss-ease-out); }
  .fo-row:hover .fa-tilt { transform: rotate(2deg) translateY(-4px); }
  .fo-row:hover .fa-left { transform: rotate(3deg) translateY(-3px); }
  .fo-row:hover .fa-right { transform: rotate(-2deg) translateY(-3px); }
  .fo-row:hover .fa-pop { animation: fa-pop .4s var(--ss-ease-out) calc(.1s + var(--i, 0) * 130ms) both; }
  .fo-row:hover .fa-bob { animation: fa-bob .5s var(--ss-ease-out) calc(var(--i, 0) * 90ms) both; }
  .fo-row:hover .fa-draw { stroke-dasharray: 1; animation: fa-draw .4s var(--ss-ease-out) .3s both; }
  .fo-row:hover .fa-march { stroke-dasharray: 4 5; animation: fa-march .6s linear infinite; }
  .fo-row:hover .fa-nudge { animation: fa-nudge .6s ease-in-out infinite alternate; }
  @keyframes fa-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.18); } }
  @keyframes fa-bob { 0%, 100% { transform: none; } 45% { transform: translateY(-5px); } }
  @keyframes fa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes fa-march { to { stroke-dashoffset: -18; } }
  @keyframes fa-nudge { to { transform: translateX(3px); } }
}


.rl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rl-art { display: flex; justify-content: center; }
.rl-art .fo-art { max-width: 420px; margin-top: 0; }
@media (max-width: 900px) {
  .rl-grid { grid-template-columns: minmax(0, 1fr); }
}




.skip { position: absolute; left: 16px; top: -48px; z-index: 20; background: var(--ss-deep); color: #fff; padding: 10px 14px; border-radius: var(--ss-r); text-decoration: none; }
.skip:focus { top: 12px; }
.nav-links a[aria-current="page"] { color: var(--ss-obsidian); font-weight: var(--ss-w-medium); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-size: var(--ss-t-caption); color: var(--ss-stone); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ss-ash); }
.crumbs a { color: var(--ss-charcoal); text-decoration: none; }
.crumbs a:hover { color: var(--ss-sea); }


.p-hero { padding-top: 72px; }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.p-hero h1 { margin: 0; font-weight: var(--ss-w-medium); font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: var(--ss-track-hero); }
.p-hero .lead { max-width: 540px; }
.p-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.p-note { margin: 16px 0 0; font-size: var(--ss-t-caption); color: var(--ss-stone); }


.sample { padding: 8px; }
.sample-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 12px; border-bottom: 1px solid var(--ss-hairline); }
.sample-h b { font-weight: var(--ss-w-medium); font-size: var(--ss-t-small); }
.feed { list-style: none; margin: 0; padding: 6px 0 0; }
.feed li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--ss-r-row); }
.feed li + li { margin-top: 2px; }
.feed li.on { background: var(--ss-mint); }
.feed .od-field { flex: 1; }
.feed .t { font-size: var(--ss-t-small); line-height: 1.45; color: var(--ss-obsidian); }
.feed .m { font-size: var(--ss-t-micro); color: var(--ss-stone); font-variant-numeric: tabular-nums; }
.feed .m b { font-weight: var(--ss-w-medium); color: var(--ss-sea); }


.p-sec { padding-top: var(--ss-section); }
.p-sec.tight { padding-top: 72px; }


.f-card { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.f-card .ptile { margin-bottom: 8px; }
.f-card p { margin: 0; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.5; }
.f-card .uses { padding-top: 16px; }


.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }


.t-frame { background: #fff; border-radius: var(--ss-r-panel); box-shadow: var(--ss-lift); overflow-x: auto; }
.t { width: 100%; border-collapse: collapse; font-size: var(--ss-t-small); }
.t caption { text-align: left; padding: 20px 24px 0; font-size: var(--ss-t-caption); color: var(--ss-stone); }
.t th, .t td { padding: 14px 20px; border-bottom: 1px solid var(--ss-hairline); text-align: left; vertical-align: middle; }
.t thead th { font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-stone); white-space: nowrap; }
.t tbody tr:last-child > * { border-bottom: 0; }
.t tbody th { font-weight: var(--ss-w-medium); white-space: nowrap; }
.t .c { text-align: center; }
.t .pf { display: inline-flex; align-items: center; gap: 10px; }
.yes { --od-icon-size: 18px; color: var(--ss-sea); }
.no { color: var(--ss-ash); }
.t .ours { background: var(--ss-wash); }
.t thead .ours { color: var(--ss-deep); }
.cmp { min-width: 680px; }
.cmp tbody th { width: 28%; color: var(--ss-charcoal); font-weight: var(--ss-w-regular); white-space: normal; }
.cmp td { width: 36%; }
.cmp td b { font-weight: var(--ss-w-medium); }
.t-foot { margin: 16px 0 0; font-size: var(--ss-t-caption); color: var(--ss-stone); }


.ph { color: var(--ss-sea); background: var(--ss-mint); border-radius: 4px; padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ph-cell { color: var(--ss-stone); font-size: var(--ss-t-caption); }


.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ss-hairline); border-bottom: 1px solid var(--ss-hairline); }
.facts .od-stat { padding: 22px 24px 22px 0; }
.facts .od-stat + .od-stat { padding-left: 24px; border-left: 1px solid var(--ss-hairline); }
.facts .v { font-weight: var(--ss-w-heading); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts .k { font-size: var(--ss-t-small); color: var(--ss-charcoal); }


.glance { padding: 28px; }
.glance .od-stat { padding: 16px 0; border-top: 1px solid var(--ss-hairline); }
.glance .od-stat:first-of-type { border-top: 0; padding-top: 4px; }
.glance .v { font-weight: var(--ss-w-heading); font-size: 30px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.glance .k { font-size: var(--ss-t-small); color: var(--ss-charcoal); }


.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.reason { display: flex; gap: 16px; padding: 24px 0; border-top: 1px solid var(--ss-hairline); }
.reason p { margin: 4px 0 0; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.5; }


.callout { display: flex; gap: 14px; align-items: flex-start; background: var(--ss-mint); border-radius: 12px; padding: 18px 20px; margin: 28px 0; color: var(--ss-deep); font-size: var(--ss-t-body); line-height: 1.55; }
.callout .od-icon { --od-icon-size: 20px; color: var(--ss-sea); margin-top: 2px; }
.callout p { margin: 0; }


.post-head { padding-top: 64px; max-width: 820px; }
.post-head h1 { margin: 0; font-weight: var(--ss-w-medium); font-size: clamp(38px, 4.8vw, 60px); line-height: 1.04; letter-spacing: var(--ss-track-hero); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 0; font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.post-meta .by { display: inline-flex; align-items: center; gap: 10px; color: var(--ss-obsidian); font-weight: var(--ss-w-medium); }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ss-ash); }
.post-wrap { display: grid; grid-template-columns: minmax(0, 720px) 220px; justify-content: space-between; gap: 64px; padding-top: 48px; margin-top: 40px; border-top: 1px solid var(--ss-hairline); }
.prose { font-size: 17px; line-height: 1.7; color: #2b2b2b; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 48px 0 12px; font-weight: var(--ss-w-heading); font-size: 28px; line-height: 1.15; letter-spacing: -0.04em; color: var(--ss-obsidian); scroll-margin-top: 88px; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--ss-deep); text-decoration: underline; text-decoration-color: var(--ss-spring); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ss-sea); }
.prose code { font-family: var(--ss-font-code); font-size: .92em; background: var(--ss-mint); color: var(--ss-deep); border-radius: 4px; padding: 1px 5px; }
.prose .ed { margin: 28px 0; }
.prose .ed-body { min-height: 0; }
.toc { position: sticky; top: 96px; align-self: start; }
.toc p { margin: 0 0 12px; font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-stone); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: var(--ss-t-small); color: var(--ss-charcoal); text-decoration: none; line-height: 1.4; }
.toc a:hover { background: var(--ss-hover); color: var(--ss-obsidian); }
.toc a[aria-current="true"] { background: var(--ss-mint); color: var(--ss-sea); font-weight: var(--ss-w-medium); }
.share { display: flex; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ss-hairline); }


.rel { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ss-obsidian); transition: box-shadow var(--ss-fast) var(--ss-ease-out); }
.rel:hover { box-shadow: var(--ss-ring-sea); }
.rel p { margin: 0; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.5; }
.rel .more { margin-top: auto; padding-top: 12px; font-size: var(--ss-t-small); color: var(--ss-sea); }


.l-hero { padding-top: 88px; text-align: center; }
.l-hero .ptile.lg { margin: 0 auto 24px; width: 64px; height: 64px; border-radius: 17px; --icon: 30px; }
.l-hero h1 { margin: 0 auto; max-width: 860px; font-weight: var(--ss-w-medium); font-size: clamp(44px, 6vw, 80px); line-height: 1; letter-spacing: var(--ss-track-hero); }
.l-hero .lead { margin: 24px auto 0; }
.l-hero .p-cta { justify-content: center; }
.l-hero .facts { margin-top: 64px; text-align: left; }
.grp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ss-gap); }
.grp h3 { margin: 0 0 4px; }
.grp > p { margin: 0 0 12px; font-size: var(--ss-t-caption); color: var(--ss-stone); font-variant-numeric: tabular-nums; }
.grp .pb-ep { padding: 8px 12px; }
.grp .pb-ep .tag { margin-left: auto; }
.price-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ss-gap); }
.price-strip .card { display: flex; flex-direction: column; gap: 4px; }
.price-strip .price { font-size: 40px; }
.price-strip .meta { font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.price-strip .card.inv .meta { color: var(--ss-on-deep-muted); }


.hub { padding: 72px 0 0; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ss-gap); margin-top: 40px; }
.hub-card { display: flex; flex-direction: column; gap: 6px; min-height: 180px; text-decoration: none; color: var(--ss-obsidian); position: relative; transition: box-shadow var(--ss-fast) var(--ss-ease-out); }
.hub-card:hover { box-shadow: var(--ss-ring-sea); }
.hub-card p { margin: 0; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.5; max-width: 440px; }
.hub-card .ex { margin-top: auto; padding-top: 16px; font-size: var(--ss-t-caption); color: var(--ss-stone); }
.hub-card .go { position: absolute; top: 24px; right: 24px; color: var(--ss-sea); }


@media (max-width: 1100px) {
  .grp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-wrap { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1000px) {
  .p-hero-grid, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .facts, .price-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .od-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts .od-stat:nth-child(n+3) { border-top: 1px solid var(--ss-hairline); }
}
@media (max-width: 760px) {
  .p-hero { padding-top: 40px; }
  .l-hero { padding-top: 48px; }
  .reasons, .grp-grid, .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .t th, .t td { padding: 12px 14px; }
}
@media (max-width: 480px) {
  .facts, .price-strip { grid-template-columns: minmax(0, 1fr); }
  .facts .od-stat, .facts .od-stat + .od-stat { padding-left: 0; border-left: 0; }
  .facts .od-stat + .od-stat { border-top: 1px solid var(--ss-hairline); }
}


.od-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.ct { padding-top: 72px; }
.ct-head { max-width: 640px; }
.ct-head h1 { margin: 0; }
.ct-head .lead { margin: 16px 0 0; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 56px; align-items: start; margin-top: 48px; }
.ct-card { padding: 32px; border-radius: var(--ss-r-panel); box-shadow: var(--ss-lift); }
.ct-form { display: grid; gap: 22px; }
.ct-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-topics legend, .ct-field label { display: block; padding: 0; margin: 0 0 8px; font-size: var(--ss-t-small); font-weight: var(--ss-w-medium); color: var(--ss-obsidian); }
.ct-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-opt { position: relative; cursor: pointer; }
.ct-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-opt span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--ss-r-pill); background: #fff; box-shadow: var(--ss-ring-line); font-size: var(--ss-t-small); color: var(--ss-charcoal); transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; }
.ct-opt:hover span { color: var(--ss-obsidian); box-shadow: var(--ss-ring-sea); }
.ct-opt input:checked + span { background: var(--ss-mint); color: var(--ss-sea); font-weight: var(--ss-w-medium); box-shadow: inset 0 0 0 1px var(--ss-spring); }
.ct-opt input:focus-visible + span { outline: 2px solid var(--ss-spring); outline-offset: 2px; }
.ct-note { display: flex; gap: 10px; align-items: flex-start; margin: -6px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--ss-mint); font-size: var(--ss-t-small); line-height: 1.5; color: var(--ss-deep); }
.ct-note .od-icon { --od-icon-size: 18px; color: var(--ss-sea); margin-top: 1px; }
.ct-note a { color: var(--ss-deep); text-decoration: underline; text-decoration-color: var(--ss-spring); text-underline-offset: 3px; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ct-field { min-width: 0; }
.ct-field input, .ct-field textarea { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: var(--ss-ring-line); font: var(--ss-w-regular) var(--ss-t-body)/1.5 var(--ss-font); color: var(--ss-obsidian); transition: box-shadow 140ms ease; }
.ct-field textarea { resize: vertical; min-height: 148px; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--ss-stone); }
.ct-field input:hover, .ct-field textarea:hover { box-shadow: var(--ss-ring-sea); }
.ct-field input:focus, .ct-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ss-sea), 0 0 0 4px var(--ss-mint); }
.ct-field.bad input, .ct-field.bad textarea { box-shadow: inset 0 0 0 1.5px var(--ss-sea); background: var(--ss-wash); }
.ct-err { margin: 6px 0 0; font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 4px; }
.ct-actions .btn .od-icon { --od-icon-size: 16px; margin-left: 2px; }
.ct-mailto { font-size: var(--ss-t-small); }
.ct-done { display: grid; justify-items: start; gap: 12px; padding: 24px 0 8px; outline: none; }
.ct-done[hidden] { display: none; }
.ct-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: var(--ss-mint); color: var(--ss-sea); }
.ct-done-ic .od-icon { --od-icon-size: 24px; }
.ct-done h2 { margin: 8px 0 0; }
.ct-done p { margin: 0; max-width: 440px; color: var(--ss-charcoal); line-height: 1.55; }
.ct-done b { color: var(--ss-deep); font-weight: var(--ss-w-medium); }
.ct-again { margin-top: 8px; }
.ct-side { display: grid; gap: 0; }
.ct-way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 22px 0; border-top: 1px solid var(--ss-hairline); }
.ct-way:first-child { border-top: 0; padding-top: 8px; }
.ct-way .ptile .od-icon { --od-icon-size: 17px; }
.ct-way h3 { margin: 2px 0 4px; }
.ct-way p { margin: 0; font-size: var(--ss-t-small); line-height: 1.55; color: var(--ss-charcoal); overflow-wrap: anywhere; }
.ct-copy { gap: 6px; }
.ct-copy .od-icon { --od-icon-size: 14px; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-on .reveal { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
  .ct { padding-top: 48px; }
  .ct-card { padding: 22px; }
  .ct-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}



.docs { max-width: 1400px; margin: 0 auto; padding: 0 var(--ss-pad); display: grid; grid-template-columns: 264px minmax(0, 1fr) 208px; gap: 56px; align-items: start; }

body:has(.docs) header.nav .wrap { max-width: 1400px; }
.docs-bar { display: none; }
.dn { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; padding: 28px 0 0; border-right: 1px solid var(--ss-hairline); margin-right: -28px; padding-right: 20px; }
.dn-search { position: relative; margin-bottom: 16px; }
.dn-search .od-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); --od-icon-size: 15px; color: var(--ss-sea); pointer-events: none; }
.dn-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 0; border-radius: 10px; background: #fff; box-shadow: var(--ss-ring); font: var(--ss-w-regular) var(--ss-t-small)/1 var(--ss-font); color: var(--ss-obsidian); }
.dn-search input::placeholder { color: var(--ss-stone); }
.dn-search input:focus { outline: 2px solid var(--ss-spring); outline-offset: 1px; }
.dn-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-bottom: 40px; margin-right: -12px; padding-right: 12px; scrollbar-width: thin; }
.dn ul { list-style: none; margin: 0; padding: 0; }
.dn summary { list-style: none; cursor: pointer; }
.dn summary::-webkit-details-marker { display: none; }
.dn-group { margin-bottom: 14px; }
.dn-group > summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: var(--ss-t-caption); font-weight: var(--ss-w-strong); color: var(--ss-obsidian); border-radius: 8px; }
.dn-group > summary:hover { background: var(--ss-hover); }
.dn-chev { margin-left: auto; color: var(--ss-sea); transition: transform 160ms var(--ss-ease, ease); }
details[open] > summary > .dn-chev { transform: rotate(90deg); }
.dn-gc { margin-left: auto; font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.dn-gc + .dn-chev { margin-left: 4px; }
.dn-links a, .dn-plat li a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: var(--ss-t-small); line-height: 1.35; color: var(--ss-charcoal); text-decoration: none; }
.dn-links a:hover, .dn-plat li a:hover { background: var(--ss-hover); color: var(--ss-obsidian); }
.dn-links a[aria-current="page"] { background: var(--ss-mint); color: var(--ss-sea); font-weight: var(--ss-w-medium); }
.dn-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 10px 8px; font-size: var(--ss-t-caption); font-weight: var(--ss-w-strong); color: var(--ss-obsidian); }
.dn-h span { font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.dn-sub { display: flex; align-items: center; margin: 0; padding: 6px 10px 4px; font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.dn-plat > summary { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; font-size: var(--ss-t-small); color: var(--ss-obsidian); }
.dn-plat > summary:hover { background: var(--ss-hover); }
.dn-plat[open] > summary { color: var(--ss-sea); font-weight: var(--ss-w-medium); }
.dn-plat[open] > summary .ptile { background: var(--ss-deep); color: #fff; }
.dn-pn { flex: 1; min-width: 0; }
.dn-n { font-size: var(--ss-t-micro); color: var(--ss-sea); }
.dn-plat ul { margin: 2px 0 8px 21px; padding-left: 10px; border-left: 1px solid var(--ss-line-teal); }
.dn-plat li a { padding: 5px 10px; font-size: var(--ss-t-caption); }
.dn-plat li a.is-planned { color: var(--ss-stone); }
.dn-tag { margin-left: auto; flex: none; font-size: var(--ss-t-micro); font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.dn-empty { margin: 8px 10px; font-size: var(--ss-t-small); color: var(--ss-charcoal); }


.dc { min-width: 0; max-width: 760px; padding: 28px 0 24px; }
.dc-head h1 { margin: 0; }
.dc-head .lead { margin: 16px 0 0; max-width: 600px; }
.dc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 8px; background: #fff; border-radius: var(--ss-r); box-shadow: var(--ss-ring); }
.dc-facts > div { padding: 16px 20px; min-width: 0; }
.dc-facts > div + div { border-left: 1px solid var(--ss-hairline); }
.dc-facts dt { font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-sea); margin-bottom: 4px; }
.dc-facts dd { margin: 0; font-size: var(--ss-t-small); color: var(--ss-obsidian); overflow-wrap: anywhere; }
.dc-facts code, .dc-t code { font: inherit; font-weight: var(--ss-w-medium); color: var(--ss-deep); }
.dc .prose h2 { display: flex; align-items: center; gap: 12px; }
.dc-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--ss-mint); color: var(--ss-sea); font-size: 15px; font-weight: var(--ss-w-strong); letter-spacing: 0; }
.dc .ed-code code { background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.dc .ed pre { margin: 0; }
.dc .callout p { margin: 0; }
.dc-facts { margin-bottom: 44px; }
.ed-solo .ed-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.dc .t-frame { box-shadow: var(--ss-ring); margin: 24px 0; }
.dc-t th, .dc-t td { font-size: var(--ss-t-small); }
.dc-t tbody th { width: 34%; }
.nx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.nx { display: grid; align-content: start; gap: 6px; padding: 20px; text-decoration: none; color: inherit; transition: box-shadow 160ms ease, transform 160ms ease; }
.nx:hover { box-shadow: 0 0 0 1px var(--ss-spring); }
.prose a.nx { text-decoration: none; color: inherit; }
.nx-t { display: flex; align-items: center; justify-content: space-between; font-size: var(--ss-t-body); font-weight: var(--ss-w-strong); color: var(--ss-obsidian); line-height: 1.3; }
.nx-t .od-icon { --od-icon-size: 16px; color: var(--ss-sea); transition: transform 160ms ease; }
.nx:hover .nx-t .od-icon { transform: translateX(3px); }
.nx-d { font-size: var(--ss-t-small); line-height: 1.5; color: var(--ss-charcoal); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ss-hairline); }
.pager a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: inherit; }
.pager a:hover { background: var(--ss-hover); }
.pager span { font-size: var(--ss-t-caption); color: var(--ss-sea); }
.pager b { display: flex; align-items: center; gap: 8px; font-weight: var(--ss-w-medium); color: var(--ss-obsidian); }
.pager .od-icon { --od-icon-size: 16px; color: var(--ss-sea); }
.pager .nx-r { text-align: right; }
.pager .nx-r b { justify-content: flex-end; }

.dc-toc { padding-top: 28px; top: 64px; }
.dc-toc > p { padding-left: 10px; }


.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-on .reveal, .js .reveal.rv-on { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .docs { grid-template-columns: 248px minmax(0, 1fr); gap: 48px; }
  .dc-toc { display: none; }
}
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 64px; z-index: 20; padding: 10px var(--ss-pad); background: rgba(250,250,250,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ss-hairline); font-size: var(--ss-t-small); color: var(--ss-charcoal); }
  .dn-toggle .od-icon { --od-icon-size: 16px; color: var(--ss-sea); }
  .dn { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); height: auto; margin: 0; padding: 20px 16px 0; background: var(--ss-paper, #fafafa); border-right: 0; box-shadow: 0 0 0 1px var(--ss-hairline), 0 24px 60px rgba(15,61,58,.18); transform: translateX(-110%); visibility: hidden; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
  .dn.is-open { transform: none; visibility: visible; }
  .dc { padding-top: 24px; }
  .dc-facts { grid-template-columns: minmax(0, 1fr); }
  .dc-facts > div + div { border-left: 0; border-top: 1px solid var(--ss-hairline); }
}
@media (max-width: 560px) {
  .nx-grid, .pager { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .dn { transition: none; }
}



.th { position: relative; z-index: 2; padding: 72px 0 24px; overflow-x: clip; }
.th-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.th-float { position: absolute; inset: 0 0 auto; height: 400px; pointer-events: none; }
.th-float > * { position: absolute; left: var(--x); top: var(--y); rotate: var(--r); }
.th-piece { white-space: nowrap; font-size: var(--ss-t-caption); }
.th-piece .ts { margin-right: -2px; }
.th-prof { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; box-shadow: var(--ss-float); text-align: left; }
.th-prof .av { width: 32px; height: 32px; border-radius: 50%; background: var(--ss-spring); flex: none; }
.th-prof b { font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-obsidian); }
.th-prof small { font-size: var(--ss-t-micro); color: var(--ss-sea); }
.th-file .av { background: var(--ss-mint); color: var(--ss-sea); }
.th-file .av .od-icon { --od-icon-size: 15px; }
.th-copy { position: relative; max-width: 820px; display: grid; justify-items: center; }
.th-crumbs { justify-content: center; margin-bottom: 18px; }
.th-crumbs a { color: var(--ss-sea); }
.th-crumbs [aria-current] { color: var(--ss-deep); }
.th-copy h1 { margin: 0; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: var(--ss-track-hero); font-weight: var(--ss-w-medium); }
.th-copy .lead { margin: 18px 0 0; max-width: 600px; text-wrap: balance; }
.th-h { margin: 0; font-weight: var(--ss-w-medium); font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; text-wrap: balance; letter-spacing: var(--ss-track-hero); }
.th-h .hl { padding: 0 .14em; }
.th-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.th-ctas .od-icon { --od-icon-size: 16px; }
.th-pick { margin-top: 56px; width: 100%; max-width: 820px; }
.th-pick-h { margin: 0 0 16px; font-size: var(--ss-t-small); color: var(--ss-sea); font-weight: var(--ss-w-medium); }
.th-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.th-logo { display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--ss-ring-line); font: inherit; font-size: var(--ss-t-small); color: var(--ss-obsidian); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.th-logo:hover, .th-logo:focus-visible { transform: translateY(-2px); box-shadow: var(--ss-ring-sea), var(--ss-lift); outline: none; }
.th-logo[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ss-spring); background: var(--ss-wash); }
.th-logo:hover .ptile, .th-logo:focus-visible .ptile, .th-logo[aria-pressed="true"] .ptile { background: var(--ss-deep); color: #fff; }
.th-logo .ptile { transition: background 160ms ease, color 160ms ease; }


.tl-sec { padding-top: var(--ss-section); }
.tl-head { margin-bottom: 40px; }
.tl-card.is-pick { box-shadow: var(--ss-ring-pick), var(--ss-lift); }
.tl-card.is-pick .ptile { background: var(--ss-deep); color: #fff; }
.tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tl-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 22px; border-radius: 16px; text-decoration: none; color: inherit; transition: box-shadow 160ms ease, transform 160ms ease; }
.tl-card:hover { box-shadow: 0 0 0 1px var(--ss-sea), 0 18px 36px -28px rgba(15, 61, 58, .5); }
.tl-card:focus-visible { outline: 2px solid var(--ss-spring); outline-offset: 2px; }
.tl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tl-cat { font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.tl-name { display: block; font-size: var(--ss-t-body); font-weight: var(--ss-w-strong); line-height: 1.3; color: var(--ss-obsidian); }
.tl-desc { display: block; font-size: var(--ss-t-small); line-height: 1.5; color: var(--ss-charcoal); }
.tl-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--ss-t-caption); font-weight: var(--ss-w-medium); color: var(--ss-sea); }
.tl-go .od-icon { --od-icon-size: 14px; transition: transform 160ms ease; }
.tl-card:hover .tl-go .od-icon { transform: translateX(3px); }


.tl-band { margin-top: var(--ss-section); padding: 96px 0; background: var(--ss-hover); }
.tl-api { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); gap: 20px; align-items: center; }
.tl-api-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ss-deep); color: #fff; }
.tl-api-arrow .od-icon { --od-icon-size: 18px; }
.tl-mock { padding: 20px; border-radius: 16px; display: grid; gap: 14px; }
.tl-mock-h { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--ss-t-small); font-weight: var(--ss-w-strong); }
.tl-mock-in { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; box-shadow: var(--ss-ring-line); font-size: var(--ss-t-caption); color: var(--ss-charcoal); }
.tl-mock-in span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-mock-in .btn { pointer-events: none; white-space: nowrap; }
.tl-mock-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tl-mock-out li { display: flex; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: var(--ss-t-small); color: var(--ss-obsidian); }
.tl-mock-out li.on { background: var(--ss-mint); }
.tl-mock-out .ts { color: var(--ss-sea); font-weight: var(--ss-w-medium); }
.tl-mock-f { margin: 0; padding-top: 12px; border-top: 1px solid var(--ss-hairline); font-size: var(--ss-t-caption); color: var(--ss-charcoal); }
.tl-mock-f b { color: var(--ss-deep); font-weight: var(--ss-w-medium); }
.tl-api .ed { min-width: 0; }
.tl-api .ed-body { min-height: 0; }
.tl-api-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }


.tl-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.tl-faq-side { position: sticky; top: 96px; }
.tl-faq-side h2 { margin: 0; }
.tl-faq-side > p:last-child { margin: 16px 0 0; max-width: 300px; color: var(--ss-charcoal); font-size: var(--ss-t-small); }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-on .reveal { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .th-float { display: none; }
  .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-api { grid-template-columns: minmax(0, 1fr); }
  .tl-api-arrow { justify-self: center; rotate: 90deg; }
}
@media (max-width: 860px) {
  .tl-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tl-faq-side { position: static; }
  .tl-band { padding: 64px 0; }
}
@media (max-width: 600px) {
  .th { padding-top: 48px; }
  .tl-grid { grid-template-columns: minmax(0, 1fr); }
  .th-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-pick { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}


.pr-band { position: relative; overflow: hidden; padding: 72px 0 170px; }
.pr-band-in { position: relative; }
.pr-tiles { position: absolute; inset: -24px 0 -120px; pointer-events: none; }
.pr-tiles .tile { position: absolute; left: var(--x); top: var(--y); rotate: var(--r); box-shadow: 0 18px 30px -16px rgba(15,61,58,.45); animation: tl-bob 7s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tl-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 640px) { .pr-tiles { display: none; } }
.pr-copy { position: relative; display: grid; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.pr-copy .crumbs { margin-bottom: 20px; }
.pr-h { margin: 0; font-weight: var(--ss-w-medium); font-size: clamp(38px, 4.8vw, 64px); line-height: 1.06; letter-spacing: var(--ss-track-hero); text-wrap: balance; }
.pr-h .hl { padding: 0 .14em; }
.pr-copy .lead { margin: 18px 0 0; max-width: 580px; text-wrap: balance; }
.pr-seg { position: relative; display: flex; width: max-content; margin: 32px auto 0; gap: 4px; padding: 5px; border-radius: var(--ss-r-pill); background: rgba(15,61,58,.04); box-shadow: 0 0 0 1px rgba(15,61,58,.12); }
.pr-seg button { min-height: 38px; padding: 0 18px; border: 0; border-radius: var(--ss-r-pill); background: transparent; font: var(--ss-w-medium) var(--ss-t-small)/1 var(--ss-font); color: var(--ss-charcoal); cursor: pointer; white-space: nowrap; transition: background 140ms ease, color 140ms ease; }
.pr-seg button[aria-pressed="true"] { background: #fff; color: var(--ss-obsidian); box-shadow: 0 0 0 1px rgba(15,61,58,.06), 0 2px 6px rgba(15,61,58,.1); }
.pr-packs { position: relative; margin-top: -120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pr-pack { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 28px; border-radius: 20px; text-align: left; box-shadow: 0 0 0 1px rgba(15,61,58,.14); transition: box-shadow 200ms ease, transform 200ms ease; }
.pr-pack.is-pop { background: color-mix(in srgb, var(--ss-mint) 45%, #fff); box-shadow: 0 0 0 2px var(--ss-spring); }
.pr-pack.is-fit { box-shadow: var(--ss-ring-pick), 0 18px 40px -24px rgba(15,61,58,.45); transform: translateY(-3px); }
.pr-pack.is-pop.is-fit { box-shadow: 0 0 0 2px var(--ss-spring), 0 18px 40px -24px rgba(15,61,58,.45); }
.pr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 26px; }
.pr-top h3 { margin: 0; }
.pr-pop { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 4px 10px; border-radius: var(--ss-r-pill); background: var(--ss-spring); color: var(--ss-deep); font-size: var(--ss-t-micro); font-weight: var(--ss-w-medium); }
.pr-price { margin: 0; font-family: var(--ss-font-heading); font-size: 40px; line-height: 1.1; letter-spacing: -.025em; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-price small { margin-left: 4px; font-family: var(--ss-font); font-size: var(--ss-t-small); letter-spacing: 0; color: var(--ss-charcoal); }
.pr-credits { margin: 10px 0 0; font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.pr-rate { margin: 4px 0 24px; font-size: var(--ss-t-caption); font-weight: 500; color: var(--ss-sea); }
.pr-pack .btn { margin-top: auto; width: 100%; min-height: 48px; justify-content: center; border-radius: var(--ss-r-pill); font-weight: 600; }
.pr-pack .btn-ghost { color: var(--ss-obsidian); box-shadow: 0 0 0 1px rgba(15,61,58,.2); }
.pr-under { margin: 24px 0 0; text-align: center; font-size: var(--ss-t-small); color: var(--ss-charcoal); }

.pr-sec { padding-top: var(--ss-section); }

.pr-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: 20px; background: #fff; box-shadow: var(--ss-ring); overflow: hidden; }
.pc-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 22px; }
.pc-list li + li { border-top: 1px solid var(--ss-hairline); }
.pc-list .ptile .od-icon { --od-icon-size: 18px; }
.pc-what { font-size: var(--ss-t-body); color: var(--ss-obsidian); }
.pc-cost { font-size: var(--ss-t-small); font-weight: var(--ss-w-medium); color: var(--ss-sea); text-align: right; max-width: 210px; }
.pc-free { margin-top: 16px; padding: 20px 22px; border-radius: 20px; background: var(--ss-mint); }
.pc-free-h { margin: 0 0 10px; font-size: var(--ss-t-small); font-weight: var(--ss-w-medium); color: var(--ss-deep); }
.pc-free ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pc-free li { display: flex; align-items: center; gap: 10px; font-size: var(--ss-t-small); color: var(--ss-obsidian); }
.pc-free li .od-icon { --od-icon-size: 16px; color: var(--ss-sea); flex: none; }

.pe { padding: 28px; border-radius: 20px; }
.pe h3 { margin: 0 0 20px; }
.pe-field + .pe-field { margin-top: 22px; }
.pe-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.pe-lab output { font-weight: var(--ss-w-medium); color: var(--ss-obsidian); font-variant-numeric: tabular-nums; }
.pe input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(var(--ss-sea), var(--ss-sea)) 0 / var(--p, 0%) 100% no-repeat, var(--ss-mint); outline: none; cursor: pointer; }
.pe input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ss-sea), 0 4px 10px rgba(15,61,58,.2); }
.pe input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ss-sea), 0 4px 10px rgba(15,61,58,.2); }
.pe input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ss-sea), 0 0 0 6px var(--ss-mint); }
.pe-out { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--ss-deep); color: #fff; }
.pe-total { margin: 0; font-size: var(--ss-t-small); color: #cfe5df; }
.pe-total b { font-size: 36px; font-weight: var(--ss-w-regular); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; margin-right: 4px; }
.pe-fit { margin: 8px 0 0; font-size: var(--ss-t-small); color: #fff; }
.pe-fit b { color: var(--ss-spring); font-weight: var(--ss-w-medium); }
.pe-note { margin: 14px 0 0; font-size: var(--ss-t-caption); color: var(--ss-charcoal); }

.pr-seg-row .pr-seg { margin: 0 auto 24px; }
.pr-tablewrap { overflow-x: auto; border-radius: 20px; background: #fff; box-shadow: var(--ss-ring); }
.pr-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--ss-t-small); }
.pr-table th, .pr-table td { padding: 18px 22px; text-align: left; }
.pr-table thead th { font-size: var(--ss-t-body); font-weight: var(--ss-w-medium); color: var(--ss-obsidian); }
.pr-table tbody th { font-weight: var(--ss-w-regular); color: var(--ss-charcoal); width: 22%; }
.pr-table tbody tr { border-top: 1px solid var(--ss-hairline); }
.pr-table td { color: var(--ss-obsidian); font-variant-numeric: tabular-nums; }
.pr-table .pop { background: var(--ss-wash); }
.pr-table thead .pop { color: var(--ss-deep); box-shadow: inset 0 3px 0 var(--ss-spring); }
.pr-foot { margin: 20px 0 0; text-align: center; font-size: var(--ss-t-small); color: var(--ss-charcoal); }

.pr-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.pr-faq-side { position: sticky; top: 96px; }
.pr-faq-side h2 { margin: 0; }
.pr-faq-side > p:last-child { margin: 16px 0 0; max-width: 300px; color: var(--ss-charcoal); font-size: var(--ss-t-small); }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-on .reveal { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .pr-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-split, .pr-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pr-faq-side { position: static; }
}
@media (max-width: 640px) {
          .pr-packs { grid-template-columns: minmax(0, 1fr); }
  .pr-pack { min-height: 0; }
  .pr-seg button { padding: 0 12px; font-size: var(--ss-t-caption); }
  .pc-list li { grid-template-columns: auto minmax(0, 1fr); }
  .pc-cost { grid-column: 2; text-align: left; max-width: none; margin-top: -8px; }
  .pe { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pr-pack { transition: none; }
  .pr-tiles .tile { animation: none; }
}


.pl-hero { position: relative; padding: 96px 0 24px; overflow-x: clip; }
.pl-hero-in { position: relative; }
.pl-tiles { position: absolute; inset: -40px 0 -40px; pointer-events: none; }
.pl-tiles .tile { position: absolute; left: var(--x); top: var(--y); rotate: var(--r); box-shadow: 0 18px 30px -16px rgba(15,61,58,.45); animation: pl-bob 7s ease-in-out infinite; animation-delay: var(--d); }
@keyframes pl-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.pl-copy { position: relative; display: grid; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.pl-copy .crumbs { margin-bottom: 20px; }
.pl-h { margin: 0; font-weight: var(--ss-w-medium); font-size: clamp(38px, 4.8vw, 64px); line-height: 1.06; letter-spacing: var(--ss-track-hero); text-wrap: balance; }
.pl-copy .lead { margin: 18px 0 0; max-width: 600px; text-wrap: balance; }
.pl-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.pl-ctas .od-icon { --od-icon-size: 16px; }

.pl-sec { padding-top: var(--ss-section); }

.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pc { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; transition: box-shadow 180ms ease, transform 180ms ease; }
.pc:hover { box-shadow: var(--ss-ring-sea), var(--ss-lift); transform: translateY(-2px); }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-top .ptile { width: 44px; height: 44px; border-radius: 12px; --icon: 22px; }
.pc-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pc-name h3 { margin: 0; }
.pc-n { font-size: var(--ss-t-caption); color: var(--ss-sea); font-weight: var(--ss-w-medium); }
.pc-tag { padding: 3px 9px; border-radius: var(--ss-r-pill); background: var(--ss-mint); color: var(--ss-sea); font-size: var(--ss-t-micro); font-weight: var(--ss-w-medium); }
.pc-eps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pc-eps li { position: relative; padding-left: 16px; font-size: var(--ss-t-small); color: var(--ss-charcoal); line-height: 1.4; }
.pc-eps li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: var(--ss-spring); }
.pc-plan { margin: 0; font-size: var(--ss-t-small); color: var(--ss-charcoal); }
.pc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: var(--ss-t-small); font-weight: var(--ss-w-medium); color: var(--ss-sea); text-decoration: none; }
.pc-more .od-icon { --od-icon-size: 14px; transition: transform 160ms ease; }
.pc-more:hover { color: var(--ss-deep); }
.pc-more:hover .od-icon { transform: translateX(2px); }
.pc.is-planned { background: var(--ss-hover); box-shadow: none; }
.pc.is-planned:hover { transform: none; box-shadow: none; }

.mx-wrap { overflow-x: auto; border-radius: 20px; background: #fff; box-shadow: var(--ss-ring); }
.mx { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--ss-t-small); }
.mx th, .mx td { padding: 12px 16px; }
.mx thead th { position: sticky; top: 0; background: #fff; font-weight: var(--ss-w-medium); color: var(--ss-obsidian); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--ss-hairline); }
.mx tbody tr + tr { border-top: 1px solid var(--ss-hairline); }
.mx tbody tr:hover { background: var(--ss-wash); }
.mx tbody th { text-align: left; font-weight: var(--ss-w-medium); color: var(--ss-obsidian); white-space: nowrap; }
.mx .pf { display: inline-flex; align-items: center; gap: 10px; }
.mx .c { text-align: center; }
.mx .yes { --od-icon-size: 18px; color: var(--ss-sea); }
.mx .no { color: var(--ss-ash); }

.pl-ed .ed-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.pl-ed .ed-tabs .ptile { width: 20px; height: 20px; border-radius: 6px; --icon: 12px; }

.pl-ask { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 56px 24px; border-radius: 28px; background: var(--ss-mint); }
.pl-ask h2 { margin: 0; }
.pl-ask p { margin: 0; max-width: 480px; color: var(--ss-charcoal); text-wrap: balance; }
.pl-ask .btn { margin-top: 6px; }
.pl-ask .od-icon { --od-icon-size: 16px; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-on .reveal { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-tiles { display: none; }
}
@media (max-width: 640px) {
  .pl-hero { padding-top: 56px; }
  .pc-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-ask { padding: 40px 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pl-tiles .tile { animation: none; }
  .pc { transition: none; }
}



.hb-hero { padding: 104px 0 110px; }
.hb-copy { display: grid; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.hb-copy .crumbs { margin-bottom: 28px; }
.hb-mark { position: static; width: 72px; height: 72px; border-radius: 20px; --icon: 34px; rotate: -6deg; margin-bottom: 22px; box-shadow: 0 18px 30px -16px rgba(15,61,58,.45); }
.hb-h { margin: 0; font-weight: var(--ss-w-medium); font-size: clamp(40px, 5vw, 68px); line-height: 1.04; letter-spacing: var(--ss-track-hero); }
.hb-copy .lead { margin: 18px 0 0; max-width: 580px; text-wrap: balance; }
.pl-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.pl-ctas .od-icon { --od-icon-size: 16px; }
.pl-sec { padding-top: var(--ss-section); }
.pl-sec.is-minor { padding-top: 88px; }

.hb-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hb-type { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 18px; background: var(--ss-hover); }
.hb-type .od-icon, .hb-type .no { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.hb-type .no { color: var(--ss-ash); }
.hb-type.is-on { background: #fff; box-shadow: var(--ss-ring); }
.hb-type.is-on .od-icon { --od-icon-size: 32px; padding: 7px; background: var(--ss-mint); color: var(--ss-sea); }
.hb-type div { display: grid; gap: 3px; }
.hb-type b { font-weight: var(--ss-w-medium); color: var(--ss-obsidian); }
.hb-type span:not(.no) { font-size: var(--ss-t-small); color: var(--ss-charcoal); }

.hb-others { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.hb-o { display: grid; justify-items: center; gap: 10px; padding: 20px 10px; border-radius: 18px; background: #fff; box-shadow: var(--ss-ring); color: var(--ss-obsidian); text-decoration: none; text-align: center; transition: box-shadow 160ms ease, transform 160ms ease; }
.hb-o:hover { box-shadow: var(--ss-ring-sea), var(--ss-lift); transform: translateY(-2px); }
.hb-o .ptile { width: 44px; height: 44px; border-radius: 12px; --icon: 22px; }
.hb-o b { font-weight: var(--ss-w-medium); font-size: var(--ss-t-small); }
.hb-all { display: flex; justify-content: center; margin: 28px 0 0; }
.hb-all .od-icon { --od-icon-size: 16px; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-on .reveal { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .hb-others { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hb-hero { padding-top: 56px; }
  .hb-types { grid-template-columns: minmax(0, 1fr); }
  .hb-others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hb-o { transition: none; }
}

a.th-logo{text-decoration:none}
.tl-mock{grid-template-columns:minmax(0,1fr);min-width:0}
.tl-api .ed-res .json{white-space:pre-wrap;overflow-wrap:anywhere}

.btn.pl-btn{min-height:52px;padding:0 24px;border-radius:12px;font-size:var(--ss-t-body)}
/* The mockup's table scrolls sideways on a phone, and its screen-reader spans are absolute: without a positioned wrap they escape the clip and widen the page. */
.mx-wrap{position:relative}
.pc-eps a{color:inherit;text-decoration:none}
.pc-eps a:hover{color:var(--ss-deep);text-decoration:underline;text-underline-offset:3px}
a.pf{color:inherit;text-decoration:none}
a.pf:hover{color:var(--ss-sea)}

.hb-h{text-wrap:balance}
.hb-note{margin:-12px 0 24px;max-width:760px;font-size:var(--ss-t-body);line-height:1.55;color:var(--ss-charcoal)}
.hb-free{margin:14px 0 0;font-size:var(--ss-t-small);color:var(--ss-charcoal)}
.hb-ex{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:40px;align-items:start}
.hb-steps{list-style:none;margin:0;padding:0;display:grid;gap:28px;counter-reset:hb-step}
.hb-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;counter-increment:hb-step}
.hb-steps li::before{content:counter(hb-step);grid-row:span 2;width:32px;height:32px;border-radius:10px;background:var(--ss-mint);color:var(--ss-sea);display:grid;place-items:center;font-weight:600;font-size:14px}
.hb-steps b{color:var(--ss-obsidian);font-weight:var(--ss-w-strong)}
.hb-steps span{font-size:var(--ss-t-small);line-height:1.5;color:var(--ss-charcoal)}
.hb-pr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:stretch}
.hb-cost{list-style:none;margin:0;padding:0;border-radius:20px;background:#fff;box-shadow:var(--ss-ring);overflow:hidden}
.hb-cost li{display:flex;justify-content:space-between;gap:16px;padding:21px 22px;font-size:var(--ss-t-small);color:var(--ss-charcoal)}
.hb-cost li+li{border-top:1px solid var(--ss-hairline)}
.hb-cost b{color:var(--ss-obsidian);white-space:nowrap}
.hb-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hb-pack h3{margin:0;font-size:var(--ss-t-body);font-weight:var(--ss-w-strong)}
.hb-pack p{margin:4px 0 0;font-size:var(--ss-t-small);color:var(--ss-charcoal)}
.hb-pack .hb-price{margin:14px 0 10px;font-family:var(--ss-font-heading);font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ss-obsidian)}
.hb-pack.is-pop{background:color-mix(in srgb,var(--ss-mint) 45%,#fff);box-shadow:0 0 0 2px var(--ss-spring)}
.hb-prnote{margin:18px 0 0;font-size:var(--ss-t-small);color:var(--ss-charcoal)}
.hb-prnote a{color:var(--ss-sea);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.hb-ex,.hb-pr{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.hb-packs{grid-template-columns:minmax(0,1fr)}}
.hb-more .nx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.hb-more .nx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hb-more .nx-grid{grid-template-columns:minmax(0,1fr)}.hb-hero{padding-bottom:48px}}

.v-dcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v-dc { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--ss-ring-line); padding-bottom: 24px; }
.v-art { display: flex; align-items: center; justify-content: center; height: 190px; margin-bottom: 22px; overflow: hidden; }
.v-art svg { display: block; width: 100%; height: 100%; max-width: 360px; }
.v-art text, .v-u text { font-family: var(--ss-font); }
.v-deep { background: var(--ss-deep); } .v-sea { background: var(--ss-sea); } .v-mint { background: var(--ss-mint); }
.v-dc h3 { margin: 0; padding: 0 24px; color: var(--ss-obsidian); font-family: var(--ss-font-heading); font-size: 20px; font-weight: 550; line-height: 1.25; letter-spacing: -.012em; }
.v-dc p { margin: 6px 0 0; padding: 0 24px; color: var(--ss-charcoal); font-size: 15px; line-height: 1.5; }
.v-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ss-mint); color: var(--ss-sea); }
.v-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.v-mini { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: var(--ss-ring-line); }
.v-mini div { display: grid; gap: 3px; min-width: 0; }
.v-mini b { color: var(--ss-obsidian); font-weight: 500; }
.v-mini span:not(.v-ic) { color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.45; }


.v-us { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v-u { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; padding: 24px; border-radius: 16px; overflow: hidden; --a: #fff; --c: #14c9a0; }
.v-u h3 { margin: 0; font-family: var(--ss-font-heading); font-size: 22px; font-weight: 550; line-height: 1.2; letter-spacing: -.015em; }
.v-u p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.v-u.v-deep, .v-u.v-sea { color: #fff; }
.v-u.v-deep h3, .v-u.v-sea h3 { color: #fff; }
.v-u.v-mint h3 { color: var(--ss-deep); }
.v-u.v-mint p { color: var(--ss-charcoal); }
.v-u-d svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.d-a, .d-b { transform-box: fill-box; transform-origin: center; transition: translate .35s var(--ss-ease-out), rotate .35s var(--ss-ease-out); }
.v-dc:hover .d-a, .v-u:hover .d-a { translate: 0 -5px; rotate: -1.5deg; }
.v-dc:hover .d-b, .v-u:hover .d-b { translate: 0 4px; rotate: 1.5deg; }
@media (prefers-reduced-motion: reduce) { .d-a, .d-b { transition: none; } .v-dc:hover .d-a, .v-u:hover .d-a, .v-dc:hover .d-b, .v-u:hover .d-b { translate: none; rotate: none; } }


.hb-cost { background: var(--ss-mint); box-shadow: none; border-radius: 16px; }
.hb-cost li + li { border-top-color: #cfe9e0; }
.hb-cost li:last-child b { color: var(--ss-sea); }
.hb-pack { position: relative; display: flex; flex-direction: column; padding: 24px 20px 20px; border-radius: 16px; }
.hb-pack .hb-price { margin: 14px 0 10px; font-size: 40px; font-weight: 600; letter-spacing: -.025em; }
.hb-pack.is-pop { background: #fff; box-shadow: 0 0 0 1.5px var(--ss-spring); }
.v-pop { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: 3px 10px; border-radius: 999px; background: var(--ss-spring); color: var(--ss-deep); font-size: 12px; font-weight: 500; white-space: nowrap; }
.v-pbtn { width: 100%; margin-top: auto; }
.hb-pack p:last-of-type { margin-bottom: 20px; }


.v-idx { columns: 3; column-gap: 16px; }
.v-grp { break-inside: avoid; margin-bottom: 16px; padding: 20px; border-radius: 14px; background: #fff; box-shadow: var(--ss-ring-line); }
.v-grp h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--ss-obsidian); font-family: var(--ss-font-heading); font-size: 17px; font-weight: 550; letter-spacing: -.01em; }
.v-grp ul { list-style: none; margin: 0; padding: 0; }
.v-grp li + li { border-top: 1px solid var(--ss-hairline); }
.v-grp a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--ss-obsidian); font-size: var(--ss-t-small); text-decoration: none; transition: color var(--ss-fast) var(--ss-ease-out); }
.v-grp a::after { content: "\2192"; color: var(--ss-sea); opacity: 0; translate: -4px 0; transition: opacity var(--ss-fast) var(--ss-ease-out), translate var(--ss-fast) var(--ss-ease-out); }
.v-grp a:hover { color: var(--ss-sea); }
.v-grp a:hover::after { opacity: 1; translate: 0 0; }
.v-grp a:focus-visible { outline: 2px solid var(--ss-sea); outline-offset: 2px; border-radius: 4px; }


.v-nx { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
.v-nx .v-ic { grid-row: span 2; }
.hb-more .nx-grid.v-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }


.hb-o .ptile { background: var(--c); color: #fff; }

@media (max-width: 1100px) {
  .v-us { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-idx { columns: 2; }
  .hb-more .nx-grid.v-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .v-dcs, .v-minis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v-us { grid-template-columns: minmax(0, 1fr); }
  .v-wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .v-idx { columns: 1; }
  .hb-more .nx-grid.v-four { grid-template-columns: minmax(0, 1fr); }
}

.v-dcs.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-dcs.is-two .v-art svg{max-width:420px}
.v-dcs.is-one{grid-template-columns:minmax(0,1fr)}
.v-dcs.is-one .v-dc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-items:center;padding-bottom:0}
.v-dcs.is-one .v-art{grid-row:span 2;margin-bottom:0;height:240px}
.v-dcs.is-one .v-dc h3{align-self:end}
.v-dcs.is-one .v-dc p{align-self:start;margin-top:6px}
.v-minis.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-minis.is-one{grid-template-columns:minmax(0,1fr)}
.v-u-d svg{max-height:220px}
@media (max-width:900px){.v-dcs.is-two,.v-minis.is-two{grid-template-columns:minmax(0,1fr)}.v-dcs.is-one .v-dc{grid-template-columns:minmax(0,1fr);padding-bottom:24px}.v-dcs.is-one .v-art{grid-row:auto;margin-bottom:22px;height:190px}}

@media (max-width:560px){.ec-tiles .tile:nth-child(2),.ec-tiles .tile:nth-child(4){display:none}}
.ec-note{position:relative;margin:24px auto 0;max-width:480px;font-size:var(--ss-t-small);line-height:1.5;color:var(--ss-on-deep-muted);text-wrap:balance}
.ec-note b{color:#fff;font-weight:var(--ss-w-medium)}

.apm{--apm-ink:var(--ss-obsidian,var(--obsidian,var(--ink)));--apm-mut:var(--ss-charcoal,var(--charcoal,var(--graphite)));--apm-line:var(--ss-hairline,var(--hairline,var(--line)));--apm-acc:var(--ss-line-teal,var(--mint,var(--tint)));--apm-hov:var(--ss-hover,var(--paper,var(--card)));--apm-bg:var(--ss-white,var(--white,white));--apm-shadow:var(--ss-lift,var(--lift,var(--ss-ring,var(--ring))));--apm-mint:var(--ss-mint,var(--mint,var(--tint)));--apm-sea:var(--ss-sea,var(--sea,var(--blue)));position:relative;display:inline-flex;align-items:center}
.site-header .apm{--apm-mut:var(--graphite)}
.apm::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.apm-b{font:inherit;color:var(--apm-mut);background:none;border:0;margin:0;padding:8px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
@media (min-width:861px){.links{align-items:center}}
.links>.apm>.apm-b,.nav-links>.apm>.apm-b{font-size:var(--t-small,14px);line-height:1.5}
.nav>.apm>.apm-b{font-size:16px;font-weight:500;line-height:1}
.apm:hover>.apm-b,.apm:focus-within>.apm-b,.apm.is-open>.apm-b{color:var(--apm-ink)}
.apm-c{flex:none}
.apm:hover>.apm-b .apm-c,.apm:focus-within>.apm-b .apm-c,.apm.is-open>.apm-b .apm-c{transform:rotate(180deg)}
.apm-p{visibility:hidden;opacity:0;pointer-events:none;position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:360px;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;padding:8px;background:var(--apm-bg);border-radius:var(--ss-r-panel,16px);box-shadow:var(--apm-shadow);text-align:left}
.apm:hover>.apm-p,.apm:focus-within>.apm-p,.apm.is-open>.apm-p{visibility:visible;opacity:1;pointer-events:auto}
.apm-p a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;border-radius:var(--ss-r-row,10px);color:var(--apm-ink);font-size:var(--ss-t-small,var(--t-small,15px));font-weight:500;line-height:1.3;text-decoration:none;white-space:normal}
.links .apm a,.nav-links .apm a,.nav .apm a{padding:0 8px}
.apm-p a:hover,.apm-r summary:hover{background:var(--apm-hov)}
.apm-all{color:var(--apm-mut);font-weight:500}
.apm .ptile{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--apm-mint);color:var(--apm-sea);flex:none}
.apm .ptile .pl{width:16px;height:16px;display:block;fill:currentColor}
.apm .ptile .mono{font:500 14px/1 var(--ss-font,var(--sans,var(--ui)))}
.apm-r summary{display:flex;align-items:center;min-height:44px;list-style:none;cursor:pointer;border-radius:var(--ss-r-row,10px);padding-right:4px}
.apm-r summary::-webkit-details-marker{display:none}
.apm-r summary a{flex:1;min-width:0}
.apm-r summary::after{content:"";flex:none;width:8px;height:8px;margin-right:10px;border:solid var(--apm-mut);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg)}
.apm-r[open] summary::after{transform:rotate(45deg)}
.apm-r ul{list-style:none;margin:2px 0 8px 21px;padding:0 0 0 10px;border-left:1px solid var(--apm-acc)}
.apm-r li a{font-weight:400;color:var(--apm-mut)}
.apm-r li a:hover{color:var(--apm-ink)}
.site-header{position:relative;z-index:45}
header.nav{z-index:45}
.apm-status{display:none}
.nav-signin{white-space:nowrap}
@media (min-width:861px){
  header.nav .links,header.nav .nav-links{flex:1}
  header.nav .nav-signin{margin-left:auto}
  .site-header .container{position:relative}
  .site-header .nav .nav-signin{position:absolute;right:calc(var(--head-cta-w,168px) + var(--gutter,24px) + 20px);top:50%;transform:translateY(-50%)}
  .site-header .head-cta .btn{min-width:var(--head-cta-w,168px);justify-content:center;text-align:center}
}
.ss-check{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ss-sum,.menu-sum{display:none}
@media (min-width:861px){
  .site-header .nav{display:flex;align-items:center;gap:36px}
  header.nav .nav-links{display:flex;align-items:center;gap:24px}
}
.apm.is-shut>.apm-p,.apm.is-shut:hover>.apm-p,.apm.is-shut:focus-within>.apm-p{visibility:hidden;opacity:0;pointer-events:none}
@media (max-width:860px){
  .apm{display:block;width:100%;position:static}
  .apm::after{display:none}
  .apm-b{width:100%;justify-content:space-between}
  .apm:hover>.apm-p{visibility:hidden;opacity:0;pointer-events:none;max-height:0}
  .apm-p{position:static;left:auto;top:auto;width:100%;max-height:0;overflow:hidden;padding:0;border-radius:0;box-shadow:none;visibility:hidden;opacity:0}
  .apm:focus-within>.apm-p,.apm.is-open>.apm-p{visibility:visible;opacity:1;pointer-events:auto;max-height:70vh;overflow:auto;padding:0 0 8px}
  .apm.is-shut>.apm-p,.apm.is-shut:focus-within>.apm-p,.apm.is-shut:hover>.apm-p{visibility:hidden;opacity:0;pointer-events:none;max-height:0;overflow:hidden}
  .menu-sum,.ss-sum{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--ss-hairline,var(--hairline,var(--line)));color:var(--ss-obsidian,var(--obsidian,var(--ink)));cursor:pointer}
  header.nav .ss-sum{border-radius:var(--ss-r,var(--r,6px));box-shadow:var(--ss-ring-line,var(--ring-line))}
  .site-header .container{display:flex;align-items:center;gap:8px}
  .site-header .brand{margin-right:auto}
  .site-header .head-cta{order:1}
  .site-header .menu-sum{order:2}
  .site-header .nav{display:none}
  .site-header .ss-check:checked~.nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;right:0;top:52px;z-index:40;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 72px);overflow:auto;padding:8px;background:var(--ss-white,var(--white,var(--paper,white)));border-radius:20px;box-shadow:var(--ss-lift,var(--lift))}
  .site-header .ss-check:checked~.nav>a{display:flex;align-items:center;min-height:44px;padding:0 8px}
  .site-header .ss-check:checked~.nav .apm-status{display:flex;align-items:center;min-height:44px;padding:0 8px}
  header.nav.ss-open .links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;z-index:30;max-height:calc(100dvh - 64px);overflow:auto;background:var(--paper,var(--ss-paper,white));padding:8px 16px 16px;border-top:1px solid var(--hairline,var(--ss-hairline,var(--line)))}
  header.nav.ss-open .links>a{display:flex;align-items:center;min-height:44px;padding:0}
  header.nav .nav-in{position:static}
  header.nav .ss-sum{order:2;margin-left:8px}
  header.nav .nav-right{order:1;margin-left:auto}
  header.nav .nav-links{display:none}
  header.nav .ss-check:checked~.nav-links{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:64px;z-index:30;max-height:calc(100dvh - 64px);overflow:auto;background:var(--ss-paper,var(--paper,white));padding:8px 16px 16px;border-top:1px solid var(--ss-hairline,var(--hairline,var(--line)))}
  header.nav .ss-check:checked~.nav-links>a{display:flex;align-items:center;min-height:44px}
}
.pr-seg button{display:inline-flex;align-items:center}@media (max-width:350px){.pr-seg{gap:2px}.pr-seg button{padding:0 8px}}.pr-packs{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:860px){.pr-packs{grid-template-columns:minmax(0,1fr)}}.pr-rate+.pr-rate{margin-top:-20px}.dc .crumbs,.dc .crumbs a{color:var(--ss-sea)}.dc .crumbs a:hover{text-decoration:underline}.dc-head+.prose{margin-top:32px}
.ep-hero{padding:72px 0 24px;text-align:center}
.ep-hero .crumbs{justify-content:center}
.ep-hero .hb-mark{display:inline-flex;margin-bottom:24px}
.ep-hero h1{margin:0 auto;max-width:900px;text-wrap:balance}
.ep-hero .lead{margin:20px auto 0;max-width:640px;text-wrap:balance}
.ep-url{display:inline-flex;justify-content:center;gap:10px;margin:24px 0 0;padding:10px 18px;border-radius:var(--ss-r);background:#fff;box-shadow:var(--ss-ring);font-size:var(--ss-t-small)}
.ep-url b{font-weight:var(--ss-w-strong);color:var(--ss-sea)}
.ep-url code{min-width:0;font-family:var(--ss-font-code);text-align:left}
.ep-body .dc{margin:0 auto;max-width:880px;padding-top:32px}
.ep-facts{margin:0 0 40px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ep-facts small{display:block;margin-top:4px;font-size:var(--ss-t-caption);color:var(--ss-stone)}
.ep-intro{margin-bottom:8px}
.ep-body .prose h2{margin-top:56px}
.ep-body .ed,.ep-body .t-frame{margin:16px 0}
.ep-body .faq,.ep-body .nx-grid{margin-top:16px}
@media (max-width:640px){.ep-hero{padding-top:48px}.ep-facts{grid-template-columns:minmax(0,1fr)}.ep-facts>div+div{border-left:0;border-top:1px solid var(--ss-hairline)}}

.lg{padding-top:72px;padding-bottom:96px}
.lg>*{max-width:800px;margin-inline:auto}
.lg-wide>*{max-width:none}
.lg>.crumbs{justify-content:center;max-width:none}
.lg-head{padding-bottom:48px;text-align:center}
.lg-head h1{margin:0 auto;max-width:900px;text-wrap:balance;overflow-wrap:anywhere}
.lg-head .lead{margin:20px auto 0;max-width:640px;text-wrap:balance}
.lg-sec{margin-top:64px}
.lg-sec-h{margin-bottom:20px}
.lg-sub{margin:8px 0 0;max-width:620px;color:var(--ss-charcoal)}
.lg-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.lg-mark{display:block;margin-bottom:10px}
.lg .prose h2{margin-top:56px}
.lg .prose h3{margin:32px 0 10px;font-weight:var(--ss-w-heading);font-size:20px;line-height:1.25;letter-spacing:-.02em;color:var(--ss-obsidian)}
.lg .ed-code code,.ep-body .ed-code code{background:none;padding:0;border-radius:0;font-size:inherit;color:inherit}
.lg .ed pre{margin:0}
.lg .callout p{margin:0}
.lg .t-frame,.dc .t-frame{box-shadow:var(--ss-ring);margin:24px 0}
.lg .dc-t td{vertical-align:top}
.lg-cmp table{min-width:640px}
.lg-cmp th:first-child,.lg-cmp td:first-child{position:sticky;left:0;background:#fff;font-weight:var(--ss-w-medium);color:var(--ss-obsidian)}
.lg-cmp td.ours{font-weight:var(--ss-w-medium);color:var(--ss-obsidian)}
.lg-cmp .yes{font-weight:var(--ss-w-medium);color:var(--ss-sea)}
.lg-cmp .no{color:var(--ss-stone)}
.faq .ans{padding-bottom:20px;max-width:640px;color:var(--ss-charcoal)}
.faq .ans>:last-child{margin-bottom:0}
.tile.plain{background:var(--ss-mint);color:var(--ss-sea);font-weight:var(--ss-w-medium)}
.small{font-size:var(--ss-t-small);color:var(--ss-charcoal)}
.textlink{font-weight:var(--ss-w-medium);color:var(--ss-deep);text-decoration:none}
.textlink:hover{color:var(--ss-sea);text-decoration:underline;text-underline-offset:3px}
.lg-nf{padding:48px 0;text-align:center}
.dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--ss-ash)}
.dot.ok{background:var(--ss-spring)}
.dot.warn{background:#1d4ed8}
.dot.bad{background:#c4281c}
.status-hero{display:flex;align-items:center;gap:14px;padding:24px 28px;border-radius:var(--ss-r-panel);background:#fff;box-shadow:var(--ss-ring);font-size:var(--ss-t-lead);font-weight:var(--ss-w-medium)}
.status-list{margin:12px 0 0;padding:0;list-style:none;border-radius:var(--ss-r-panel);background:#fff;box-shadow:var(--ss-ring)}
.status-list li{display:flex;align-items:center;gap:14px;margin:0;padding:14px 20px}
.status-list li+li{border-top:1px solid var(--ss-hairline)}
.status-list .grow{flex:1;font-weight:var(--ss-w-medium)}
.status-list .meta{font-size:var(--ss-t-small);color:var(--ss-stone);font-variant-numeric:tabular-nums}
.entry{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;padding:32px 0;border-top:1px solid var(--ss-hairline)}
.entry time{font-size:var(--ss-t-small);font-weight:var(--ss-w-medium);color:var(--ss-stone);font-variant-numeric:tabular-nums}
.entry h2{margin:0 0 12px;font-weight:var(--ss-w-section);font-size:22px;letter-spacing:-.02em}
@media (max-width:640px){
.lg{padding-top:48px;padding-bottom:64px}
.lg-head{padding-bottom:32px}
.entry{grid-template-columns:minmax(0,1fr);gap:8px}
.nx-grid{grid-template-columns:minmax(0,1fr)}
.ed-bar{gap:8px}
.ed-tabs{min-width:0;overflow-x:auto;scrollbar-width:none}
.ed-tabs button{flex:none}
.lg .dc-t:not(.p-t) td:not(:first-child),.ep-body .dc-t:not(.p-t) td:not(:first-child){min-width:220px}
.p-t thead{display:none}
.p-t tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:0 12px;padding:14px 16px;border-bottom:1px solid var(--ss-hairline)}
.p-t tbody tr:last-child{border-bottom:0}
.p-t td{padding:0;border:0}
.p-t td:nth-child(4){grid-column:1/-1;margin-top:8px}
.p-t td:nth-child(3):not(:empty)::before{content:"required: ";color:var(--ss-stone)}
.p-t code{overflow-wrap:anywhere}
}