/* Ferry marketing site: shared visual system ("Now Boarding" poster style).
   Fonts are self-hosted (SIL Open Font License): Big Shoulders Display and Jost, latin subset. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display-v24-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/jost-v20-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- tokens ---------- */
:root{
  --paper:#F5EBD6; --paper-2:#ECDDBE; --card:#FCF5E5;
  --ink:#14233F; --ink-2:#445069; --line:#14233F;
  --red:#C8401F; --on-red:#FFF7E8;
  --gold:#EDA92F; --on-gold:#14233F;
  --teal:#1E6C74; --on-teal:#F5EBD6;
  --navy:#14233F; --on-navy:#F5EBD6; --on-navy-2:#C4C9D6;
  --sun:#EDA92F; --ray:rgba(237,169,47,.17); --sky-low:#F6D9A4;
  --sea-1:#3F8F92; --sea-2:#1E6C74; --sea-3:#14233F;
  --haze:#D5822A;
  --f-hull:#14233F; --f-cabin:#FFFAEC; --f-cabin2:#F1E2C1; --f-win:#14233F; --f-trim:#14233F; --smoke:#D8C7A2; --foam:#FFFAEC;
  --ph-frame:#14233F; --shadow:rgba(20,35,63,.22);
  --gut:clamp(20px,4vw,48px);
  --display:"Big Shoulders Display","Big Shoulders","League Gothic",Impact,"Arial Narrow",sans-serif;
  --body:"Jost","Avenir Next","Century Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0B162D; --paper-2:#11203F; --card:#13254A;
  --ink:#F3E8D0; --ink-2:#B4BBCD; --line:#F3E8D0;
  --red:#EB6240; --on-red:#0B162D;
  --gold:#F2B94A; --on-gold:#0B162D;
  --teal:#33949B; --on-teal:#0B162D;
  --navy:#13254A; --on-navy:#F3E8D0; --on-navy-2:#B4BBCD;
  --sun:#F6EBCF; --ray:rgba(246,235,207,.05); --sky-low:#1A2F5A;
  --sea-1:#1B4A63; --sea-2:#123A52; --sea-3:#0A2238;
  --haze:#31497A;
  --f-hull:#27406F; --f-cabin:#F3E8D0; --f-cabin2:#D9CBAA; --f-win:#F2B94A; --f-trim:#0B162D; --smoke:#22365F; --foam:#CFE3E6;
  --ph-frame:#050C1B; --shadow:rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --paper:#0B162D; --paper-2:#11203F; --card:#13254A;
  --ink:#F3E8D0; --ink-2:#B4BBCD; --line:#F3E8D0;
  --red:#EB6240; --on-red:#0B162D;
  --gold:#F2B94A; --on-gold:#0B162D;
  --teal:#33949B; --on-teal:#0B162D;
  --navy:#13254A; --on-navy:#F3E8D0; --on-navy-2:#B4BBCD;
  --sun:#F6EBCF; --ray:rgba(246,235,207,.05); --sky-low:#1A2F5A;
  --sea-1:#1B4A63; --sea-2:#123A52; --sea-3:#0A2238;
  --haze:#31497A;
  --f-hull:#27406F; --f-cabin:#F3E8D0; --f-cabin2:#D9CBAA; --f-win:#F2B94A; --f-trim:#0B162D; --smoke:#22365F; --foam:#CFE3E6;
  --ph-frame:#050C1B; --shadow:rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.display{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.9}
.eyebrow{font:600 13px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:var(--ink)}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--red);transform:rotate(45deg);flex:none}
h2.display{font-size:clamp(44px,6.6vw,92px);margin-top:16px}
.lede{font-size:clamp(18px,1.5vw,21px);color:var(--ink-2);max-width:38em;margin-top:18px}
section{padding:clamp(72px,9vw,128px) 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;font:600 18px/1 var(--body);text-decoration:none;border-radius:6px;border:2.5px solid var(--line);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap}
.btn-primary{background:var(--red);color:var(--on-red);box-shadow:5px 5px 0 var(--line)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--line)}
.btn-primary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}


/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 30px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.brand svg{width:38px;height:38px}
.nav-links{display:none;gap:28px;margin-left:auto;font-weight:500;font-size:16px}
.nav-links a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--red)}
.nav-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.theme{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.theme svg{width:20px;height:20px}
.theme .moon{display:none}
.nav .btn{min-height:42px;padding:0 16px;font-size:15px;box-shadow:3px 3px 0 var(--line)}
@media(min-width:900px){.nav-links{display:flex}.nav-end{margin-left:0}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:0;
  --sea-h:150px;--ph-h:460px;--sun-d:380px;--sun-x:50%;
  background:linear-gradient(var(--paper) 35%,var(--sky-low))}
.hero-copy{position:relative;z-index:8;padding:104px var(--gut) 0;max-width:1240px;margin:0 auto}
.hero h1{font-size:clamp(44px,14.4vw,84px);margin-top:18px}
.hero h1 span{display:block}
.hero h1 .l1{color:var(--red)}
.hero .sub{font-size:19px;line-height:1.5;max-width:31em;margin-top:20px;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:26px;align-items:center}
.cta-note{margin-top:16px;font-size:15px;color:var(--ink-2);font-weight:500}
@media(max-width:899px){.rays{animation:none}}
@media(max-width:559px){.eyebrow{letter-spacing:.17em}.get .btn{width:100%;max-width:340px}.hero .btn-ghost{display:none}.hero .btn-primary{width:100%}.scene{margin-top:28px}}
.scene{position:relative;height:calc(var(--ph-h) + var(--sea-h) - 10px);margin-top:36px}
.scene>*{position:absolute}
.rays{z-index:0;left:var(--sun-x);bottom:var(--sea-h);width:2200px;height:2200px;margin:0 0 -1100px -1100px;will-change:transform;border-radius:50%;
  background:repeating-conic-gradient(from -5deg,var(--ray) 0 10deg,transparent 10deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);
  animation:spin 240s linear infinite}
.sun{z-index:1;left:var(--sun-x);bottom:var(--sea-h);width:var(--sun-d);height:var(--sun-d);margin:0 0 calc(var(--sun-d)/-2) calc(var(--sun-d)/-2);border-radius:50%;background:var(--sun);box-shadow:0 0 0 22px color-mix(in srgb,var(--sun) 26%,transparent),0 0 0 50px color-mix(in srgb,var(--sun) 12%,transparent)}
.skyline{z-index:2;left:var(--sun-x);bottom:calc(var(--sea-h) - 3px);width:calc(var(--sun-d)*1.2);margin-left:calc(var(--sun-d)*-.6);color:var(--haze)}
.phone{z-index:3;left:var(--sun-x);bottom:calc(var(--sea-h) - 28px);width:calc(var(--ph-h)*.492);height:var(--ph-h);margin-left:calc(var(--ph-h)*-.246);font-size:calc(var(--ph-h)/42)}
.wave{left:-140px;right:-140px;bottom:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 0Q32 17 64 0V16H0Z'/%3E%3C/svg%3E") 0 0/64px 16px repeat-x,linear-gradient(#000,#000) 0 15px/100% calc(100% - 15px) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 0Q32 17 64 0V16H0Z'/%3E%3C/svg%3E") 0 0/64px 16px repeat-x,linear-gradient(#000,#000) 0 15px/100% calc(100% - 15px) no-repeat}
.ticks{z-index:6;left:0;right:0;bottom:0;height:var(--sea-h);width:100%;color:var(--foam);opacity:.55}
.w1{z-index:4;height:var(--sea-h);background:var(--sea-1);animation:drift 11s linear infinite}
.w2{z-index:6;height:calc(var(--sea-h)*.6);background:var(--sea-2);animation:drift 8s linear infinite reverse}
.w3{z-index:7;height:calc(var(--sea-h)*.27);background:var(--sea-3);animation:drift 6s linear infinite}
.ferry-slot{z-index:5;left:-56px;bottom:calc(var(--sea-h)*.6 - 15px);width:270px}
.ferry{width:100%;height:auto;overflow:visible;animation:bob 5s ease-in-out infinite;transform-origin:50% 95%}
.ferry .smoke rect{animation:puff 5s ease-in-out infinite}
.ferry .smoke rect:nth-child(2){animation-delay:-1.6s}
.ferry .smoke rect:nth-child(3){animation-delay:-3.2s}
.f-hull{fill:var(--f-hull)}.f-red{fill:var(--red)}.f-cabin{fill:var(--f-cabin)}.f-cabin2{fill:var(--f-cabin2)}.f-trim{fill:var(--f-trim)}.f-win{stroke:var(--f-win);fill:none}.f-rail{stroke:var(--f-trim);fill:none;stroke-width:2.5}.f-smoke{fill:var(--smoke)}.f-foam{fill:var(--foam)}.f-gold{fill:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(64px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-4px) rotate(.5deg)}}
@keyframes puff{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(14px);opacity:.6}}

@media(min-width:560px){.hero{--ph-h:520px;--sea-h:170px;--sun-d:440px}.ferry-slot{width:340px;left:0}}
@media(min-width:900px){
  .hero{height:clamp(640px,100svh,940px);
    --sea-h:clamp(160px,25svh,236px);--ph-h:clamp(400px,63svh,600px);--sun-d:clamp(420px,66svh,640px);
    --half:min(620px,calc(50vw - var(--gut)));--sun-x:calc(50% + var(--half) - clamp(150px,13vw,215px))}
  .hero-copy{padding-top:clamp(88px,11.5svh,116px)}
  .hero-copy>*{max-width:min(64%,760px)}
  .hero h1{font-size:clamp(56px,min(7.4vw,12svh),120px);margin-top:clamp(12px,1.8svh,18px)}
  .hero .sub{font-size:clamp(17px,min(1.4vw,2.3svh),20px);max-width:31em;margin-top:clamp(12px,2svh,20px)}
  .cta-row{margin-top:clamp(16px,2.6svh,26px)}
  .cta-note{margin-top:clamp(10px,1.5svh,14px)}
  .scene{position:absolute;inset:0;height:auto;margin:0}
  .ferry-slot{left:41vw;width:clamp(280px,min(32vw,52svh),500px)}
}

/* phone (em-scaled) */
.phone{background:var(--ph-frame);border-radius:5.2em;padding:.72em;box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 30%,transparent),1.2em 1.6em 0 var(--shadow)}
.screen>*{flex:none}
.screen{position:relative;height:100%;border-radius:4.5em;overflow:hidden;background:linear-gradient(170deg,#1B315F,#0C1730 70%);color:#F5EBD6;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.3em 1.4em 0;font-family:var(--body)}
.screen::before{content:"";position:absolute;top:1em;left:50%;width:6.6em;height:1.9em;margin-left:-3.3em;border-radius:1em;background:#050C1B}
.sbar{width:100%;display:flex;justify-content:space-between;font-size:1.05em;font-weight:600;padding:0 .9em;opacity:.9}
.sbar i{display:block;width:1.7em;height:.8em;border:1.5px solid currentColor;border-radius:.25em;position:relative;margin-top:.25em}
.sbar i::after{content:"";position:absolute;inset:1.5px;right:28%;background:currentColor;border-radius:1px}
.line-chip{margin-top:2.4em;display:inline-flex;align-items:center;gap:.5em;font-size:1em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#F2B94A;border:1.5px solid rgba(242,185,74,.5);padding:.5em .9em;border-radius:9em}
.line-chip b{width:.55em;height:.55em;border-radius:50%;background:#F2B94A}
.avatar{margin-top:.62em;border-radius:50%;background:#F2B94A;color:#14233F;display:grid;place-items:center;font:900 2.5em/1 var(--display);width:2.1em;height:2.1em}
.caller{margin-top:.55em;font-size:2.2em;font-weight:600;line-height:1.1}
.calling{margin-top:.5em;font-size:1.05em;opacity:.75}
.num{margin-top:.22em;font:900 2.5em/1 var(--display);letter-spacing:.02em;color:#F2B94A;white-space:nowrap}
.loc{margin-top:.5em;font-size:1em;opacity:.75}
.rec{margin-top:1em;font-size:.95em;display:inline-flex;gap:.5em;align-items:center;background:rgba(245,235,214,.1);padding:.5em .9em;border-radius:9em}
.rec b{width:.6em;height:.6em;border-radius:50%;background:#EB6240}
.answer{margin-top:auto;margin-bottom:3.7em;display:flex;gap:5.2em;font-size:.95em}
.answer div{display:grid;justify-items:center;gap:.6em}
.answer span{width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;position:relative}
.answer svg{width:2em;height:2em;fill:#fff}
.dec{background:#D8452A}.dec svg{transform:rotate(135deg)}
.acc{background:#2E9C6B}
.acc::before,.acc::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #2E9C6B;animation:ring 2.2s ease-out infinite}
.acc::after{animation-delay:1.1s}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}

/* strip under hero */
.strip{background:var(--sea-3);color:#F5EBD6;padding:20px 0 26px}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font:700 clamp(18px,2.2vw,26px)/1.1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.strip li{display:flex;align-items:center;gap:26px}
.strip li+li::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.strip .lead{color:#F2B94A}

/* ---------- how ---------- */
.steps{display:grid;gap:0;margin-top:clamp(36px,5vw,64px);border-top:3px solid var(--line)}
.step{padding:28px 0 34px;border-bottom:3px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start}
.step .n{font:900 clamp(88px,11vw,150px)/.8 var(--display);color:transparent;-webkit-text-stroke:3px var(--red);grid-row:span 2;min-width:.62em}
.step h3{font:900 clamp(30px,3vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;padding-top:6px}
.step p{color:var(--ink-2);max-width:26em}
.stamp{display:none}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);border-bottom:3px solid var(--line)}
  .step{border-bottom:0;padding:34px 34px 42px;grid-template-columns:1fr;gap:14px;align-content:start}
  .step+.step{border-left:3px solid var(--line)}
  .step:first-child{padding-left:0}
  .step .n{grid-row:auto}
  .step{position:relative}
  .stamp{display:grid;place-items:center;position:absolute;top:34px;right:34px;width:76px;height:76px;border-radius:50%;border:2.5px solid var(--line);font:900 34px/1 var(--display)}
  .stamp svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .st1{background:var(--teal);color:var(--on-teal)}.st2{background:var(--gold);color:var(--on-gold)}.st3{background:var(--red);color:var(--on-red)}
}

/* ---------- features ---------- */
.features{background:var(--paper-2)}
.bento{display:grid;gap:18px;margin-top:clamp(36px,5vw,64px);grid-template-columns:1fr}
.panel{border-radius:10px;padding:clamp(24px,3vw,36px);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:280px;background:var(--card);border:2.5px solid var(--line)}
.panel h3{font:900 clamp(30px,3.2vw,44px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:11em}
.panel p{max-width:27em;opacity:.92}
.panel .art{margin-top:auto;padding-top:18px}
.p-navy{background:var(--navy);color:var(--on-navy)}
.p-gold{background:var(--gold);color:var(--on-gold)}
.p-teal{background:var(--teal);color:var(--on-teal)}
.p-red{background:var(--red);color:var(--on-red)}
@media(min-width:760px){.bento{grid-template-columns:repeat(12,1fr)}.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 6}.s6{grid-column:span 6}.s4:nth-of-type(5){grid-column:span 12}}
@media(min-width:1040px){.s4,.s4:nth-of-type(5){grid-column:span 4}}

.sumcard{background:#F5EBD6;color:#14233F;border-radius:8px;padding:16px 18px;font-size:15px;line-height:1.35;max-width:380px;box-shadow:6px 6px 0 rgba(0,0,0,.28)}
.sumcard .k{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#C8401F;margin-bottom:10px;display:flex;justify-content:space-between}
.sumcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.sumcard dt{color:#5A6480}.sumcard dd{margin:0;font-weight:600}
.talk{display:grid;gap:8px;font-size:14.5px;max-width:380px;margin-bottom:14px}
.talk p{padding:9px 13px;border-radius:14px 14px 14px 4px;background:rgba(245,235,214,.12);max-width:92%;opacity:1}
.talk p:nth-child(2){justify-self:end;border-radius:14px 14px 4px 14px;background:rgba(242,185,74,.22)}
.talk small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.plus1{font:900 clamp(120px,15vw,210px)/.74 var(--display);letter-spacing:-.01em;margin-top:auto;padding-top:14px}
.codes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.codes li{font:600 14px/1 var(--body);padding:8px 11px;border:2px solid currentColor;border-radius:99px}
.vm{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--paper)}
.vm .play{width:36px;height:36px;border-radius:50%;background:var(--red);flex:none;display:grid;place-items:center}
.vm .play::after{content:"";border-left:11px solid var(--on-red);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.bars{display:flex;align-items:center;gap:3px;height:30px;flex:1}
.bars i{flex:1;background:var(--ink);border-radius:2px;opacity:.75}
.vm time{font-weight:600;font-size:14px}
.hours{display:grid;gap:7px;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.hours li{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px}
.hours span{height:12px;border-radius:99px;background:color-mix(in srgb,currentColor 18%,transparent);position:relative;overflow:hidden}
.hours span::after{content:"";position:absolute;top:0;bottom:0;left:37%;right:25%;background:var(--gold);border-radius:99px}
.hours .off span::after{display:none}
.devs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font:600 13px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.devs svg{width:100%;height:54px;margin-bottom:8px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.find{border:2px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;font-size:15px}
.find .q{display:flex;gap:10px;align-items:center;padding:11px 14px;border-bottom:2px solid var(--line);font-weight:600}
.find .q svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5}
.find .r{padding:11px 14px}
.find mark{background:var(--gold);color:var(--on-gold);padding:0 3px;border-radius:3px}
.find small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.lines{display:grid;gap:8px}
.lines li{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--paper);font-weight:600;font-size:15.5px}
.lines b{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font:900 20px/1 var(--display);background:var(--red);color:var(--on-red);flex:none}
.lines li:nth-child(2) b{background:var(--teal);color:var(--on-teal)}
.lines li:nth-child(3) b{background:var(--gold);color:var(--on-gold)}
.lines span{margin-left:auto;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- who ---------- */
.tags{display:grid;gap:22px;margin-top:clamp(36px,5vw,64px)}
.tag{position:relative;background:var(--card);border:2.5px solid var(--line);border-radius:10px;padding:26px 26px 28px 78px;box-shadow:6px 6px 0 var(--line)}
.tag::before{content:"";position:absolute;left:24px;top:28px;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line);background:var(--paper);box-shadow:inset 0 0 0 5px var(--card)}
.tag::after{content:"";position:absolute;left:-34px;top:41px;width:72px;height:2.5px;background:var(--red);transform:rotate(-14deg);transform-origin:right}
.tag h3{font:900 clamp(26px,2.6vw,34px)/1 var(--display);text-transform:uppercase}
.tag p{margin-top:10px;color:var(--ink-2)}
.tag .to{font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
@media(min-width:760px){.tags{grid-template-columns:1fr 1fr;gap:28px 36px}}

/* ---------- story ---------- */
.story{background:var(--navy);color:var(--on-navy);position:relative;padding-top:clamp(96px,11vw,150px)}
.story::before{content:"";position:absolute;left:0;right:0;top:-1px;height:17px;background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='17'%3E%3Cpath d='M0 0H64V1Q32 18 0 1Z'/%3E%3C/svg%3E") 0 0/64px 17px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='17'%3E%3Cpath d='M0 0H64V1Q32 18 0 1Z'/%3E%3C/svg%3E") 0 0/64px 17px repeat-x}
.story .eyebrow{color:var(--gold)}
.story .eyebrow::before{background:var(--gold)}
.story-grid{display:grid;gap:40px}
.story h2{font-size:clamp(56px,9vw,132px)}
.story h2 em{font-style:normal;color:var(--gold)}
.story-body p{font-size:clamp(18px,1.6vw,21.5px);line-height:1.6;color:var(--on-navy);max-width:33em}
.story-body p+p{margin-top:1.1em}
.story-body .close{font:900 clamp(30px,3.4vw,46px)/1 var(--display);text-transform:uppercase;color:var(--gold);margin-top:1.1em;letter-spacing:.01em}
.trunk{width:min(100%,330px);margin-top:36px}
@media(min-width:960px){.story-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}.story-body{padding-top:44px}}

/* ---------- pricing ---------- */
.price-head{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:end;justify-content:space-between}
.toggle{display:inline-flex;border:2.5px solid var(--line);border-radius:8px;padding:4px;background:var(--card);position:relative}
.toggle label{position:relative;padding:11px 18px;font-weight:600;font-size:16px;border-radius:5px;cursor:pointer;display:flex;gap:8px;align-items:center;white-space:nowrap}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle label:has(input:checked){background:var(--ink);color:var(--paper)}
.toggle label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.toggle em{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--gold);color:var(--on-gold);padding:4px 7px;border-radius:99px}
.pricing:has(#bill-mo:checked) .yr{display:none}
.pricing:not(:has(#bill-mo:checked)) .mo{display:none}
.tickets{display:grid;gap:26px;margin-top:clamp(32px,4vw,52px)}
@media(min-width:900px){.tickets{grid-template-columns:repeat(3,1fr);gap:28px}}
.ticket{--perf:290px;background:var(--card);border:2.5px solid var(--line);border-radius:12px;display:flex;flex-direction:column;position:relative;
  -webkit-mask:radial-gradient(circle 13px at 0 var(--perf),transparent 12.5px,#000 13px),radial-gradient(circle 13px at 100% var(--perf),transparent 12.5px,#000 13px);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle 13px at 0 var(--perf),transparent 12.5px,#000 13px),radial-gradient(circle 13px at 100% var(--perf),transparent 12.5px,#000 13px);mask-composite:intersect;
  filter:none}
.t-top{height:var(--perf);padding:0 26px;display:flex;flex-direction:column}
.t-head{display:flex;justify-content:space-between;align-items:center;margin:0 -26px;padding:11px 26px;font:700 15px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;background:var(--tc);color:var(--tk);border-radius:9px 9px 0 0}
.t1{--tc:var(--teal);--tk:var(--on-teal)}.t2{--tc:var(--red);--tk:var(--on-red)}.t3{--tc:var(--navy);--tk:var(--on-navy)}
.ticket h3{font:900 44px/1 var(--display);text-transform:uppercase;margin-top:20px}
.t-for{color:var(--ink-2);font-size:16px;margin-top:2px}
.price{display:flex;align-items:baseline;gap:6px;margin-top:auto;font:900 84px/.9 var(--display);letter-spacing:-.01em}
.price small{font:600 18px/1 var(--body);color:var(--ink-2);letter-spacing:0}
.bill{font-size:15px;color:var(--ink-2);padding:8px 0 20px;min-height:52px}
.bill em{font-style:normal;font-weight:600;color:var(--red)}
.t-bot{border-top:2.5px dashed var(--line);padding:24px 26px 26px;display:flex;flex-direction:column;gap:20px;flex:1}
.t-bot ul{display:grid;gap:9px;font-size:16.5px}
.t-bot li{display:flex;gap:10px;align-items:baseline}
.t-bot li::before{content:"";width:8px;height:8px;background:var(--tc);transform:rotate(45deg) translateY(-2px);flex:none}
.t3 .t-bot li::before{background:var(--ink)}
.t-bot .btn{margin-top:auto;width:100%}
.fine{margin-top:34px;display:grid;gap:10px;font-size:15.5px;color:var(--ink-2);max-width:60em}

/* ---------- faq ---------- */
section.faq{background:var(--paper-2)}
.faq-grid{display:grid;gap:36px}
@media(min-width:960px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:72px}.faq-grid>div:first-child{position:sticky;top:40px;align-self:start}}
.faq details{border-top:2.5px solid var(--line)}
.faq details:last-of-type{border-bottom:2.5px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 2px;font-weight:600;font-size:clamp(18px,1.6vw,21px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:900 34px/1 var(--display);color:var(--red);transition:transform .25s ease;flex:none;width:24px;text-align:center}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 44px 22px 2px;color:var(--ink-2);max-width:40em}
.faq .more{margin-top:22px;font-size:16px}

/* ---------- final ---------- */
.final{background:var(--red);color:var(--on-red);text-align:center;position:relative;overflow:hidden;padding-bottom:0}
.final .eyebrow{justify-content:center;color:var(--on-red);margin-bottom:22px}.final .eyebrow::before{background:var(--on-red)}
.final h2{font-size:clamp(84px,17vw,250px);line-height:.82;letter-spacing:.005em;margin-top:0}
.final p{font-size:clamp(18px,1.7vw,22px);max-width:30em;margin:22px auto 0;font-weight:500}
.get{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.final .btn{border-color:var(--navy);background:var(--on-red);color:#14233F;box-shadow:5px 5px 0 var(--navy)}
:root[data-theme="dark"] .final .btn{background:var(--on-red);color:#F3E8D0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .final .btn{color:#F3E8D0}}
.final .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--navy)}
.final .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.final small{display:block;margin-top:18px;font-size:15px;opacity:.92}
.final .sea{position:relative;height:150px;margin-top:56px;--sea-h:110px}
.final .sea>*{position:absolute}
.final .ferry-slot{left:auto;right:8%;width:min(52vw,300px);bottom:44px;animation:none;z-index:1}
.final .w2{height:64px;z-index:2;background:var(--sea-2)}
.final .w3{height:30px;z-index:3;background:var(--sea-3)}
.final .f-red{fill:var(--gold)}

/* ---------- footer ---------- */
footer{background:var(--sea-3);color:#F5EBD6;padding:44px 0 40px;font-size:15.5px}
.foot{display:grid;gap:24px}
footer .brand{color:#F5EBD6}
footer nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:500}
footer nav a{text-decoration:none;border-bottom:1.5px solid rgba(245,235,214,.4);padding-bottom:2px}
footer nav a:hover{border-color:#F2B94A;color:#F2B94A}
.legal{color:#9BA3B7;font-size:14px}
@media(min-width:860px){.foot{grid-template-columns:auto 1fr;align-items:center}.foot nav{justify-content:flex-end}.legal{grid-column:1/-1}}

/* dark-mode specifics */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sunic{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}:root:not([data-theme="light"]) .hero{background:radial-gradient(1px 1px at 12% 18%,#F3E8D0 50%,transparent 51%),radial-gradient(1.5px 1.5px at 31% 9%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 47% 24%,#F3E8D0 50%,transparent 51%),radial-gradient(1.5px 1.5px at 64% 12%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 83% 20%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 92% 7%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 22% 38%,#F3E8D0 50%,transparent 51%),linear-gradient(var(--paper) 35%,var(--sky-low))}}
:root[data-theme="dark"] .theme .sunic{display:none}:root[data-theme="dark"] .theme .moon{display:block}
:root[data-theme="dark"] .hero{background:radial-gradient(1px 1px at 12% 18%,#F3E8D0 50%,transparent 51%),radial-gradient(1.5px 1.5px at 31% 9%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 47% 24%,#F3E8D0 50%,transparent 51%),radial-gradient(1.5px 1.5px at 64% 12%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 83% 20%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 92% 7%,#F3E8D0 50%,transparent 51%),radial-gradient(1px 1px at 22% 38%,#F3E8D0 50%,transparent 51%),linear-gradient(var(--paper) 35%,var(--sky-low))}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- brand mark (one file: /assets/ferry-mark.svg) ---------- */
.brand img{width:38px;height:38px;flex:none}

/* ---------- hero: where to get Ferry ---------- */
.plat{margin-top:8px;font-size:15px;color:var(--ink-2);font-weight:500}
.plat b{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--ink);margin-right:10px}
.plat a{color:var(--ink);font-weight:600;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.plat a:hover{color:var(--red)}

/* ---------- download section ---------- */
.get-main{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.get-main .btn{min-height:62px;padding:0 28px;font-size:19px}
.btn .t{display:grid;text-align:left;gap:3px;line-height:1.05}
.btn .t small{display:block;margin:0;font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.btn.soon{cursor:default;box-shadow:none;border-style:dashed;background:transparent;color:var(--on-red);border-color:var(--on-red)}
.final .btn.soon,.final .btn.soon:hover{background:transparent;color:var(--on-red);border-color:currentColor;box-shadow:none;transform:none}
.final .get-main .btn.soon,.final .get-main .btn.soon:hover{color:var(--on-red)!important;background:transparent!important}
@media(max-width:559px){.final .eyebrow{font-size:12px;letter-spacing:.12em}}
.get-more{margin-top:26px}
.get-more p{font:600 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.get-more ul{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.get-more a,.get-more span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid currentColor;border-radius:6px;font-weight:600;font-size:16px;text-decoration:none}
.get-more span{border-style:dashed;font-weight:500}
.get-more a:hover{background:var(--on-red);color:var(--red)}
.get-more em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.get-more svg,.get-main svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(max-width:559px){.get-main .btn{width:100%;max-width:360px}}

/* ---------- inner pages (legal, support, 404) ---------- */
.nav.solid{position:relative;background:var(--paper);border-bottom:3px solid var(--line)}
.nav.solid + .tide{height:16px;background:var(--sea-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 0H64V2Q32 18 0 2Z'/%3E%3C/svg%3E") 0 0/64px 16px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 0H64V2Q32 18 0 2Z'/%3E%3C/svg%3E") 0 0/64px 16px repeat-x}
.narrow{max-width:860px}
.doc{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(64px,8vw,104px);font-size:17.5px;line-height:1.6}
.doc h1{font:900 clamp(52px,9vw,96px)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em}
.doc .meta{margin-top:14px;color:var(--ink-2);font-weight:500}
.doc h2{font:900 clamp(30px,3.6vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:56px 0 0;padding-top:18px;border-top:3px solid var(--line)}
.doc h3{font:600 20px/1.3 var(--body);margin:28px 0 0}
.doc p,.doc ul,.doc ol{margin:14px 0 0}
.doc ul,.doc ol{padding-left:1.3em}
.doc ul{list-style:none;padding-left:0}
.doc ul>li{position:relative;padding-left:22px}
.doc ul>li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--red);transform:rotate(45deg)}
.doc ol>li::marker{font-weight:600;color:var(--red)}
.doc li+li{margin-top:8px}
.doc a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.doc a:hover{color:var(--red)}
.doc strong{font-weight:600}
.callout{margin-top:24px;background:var(--card);border:2.5px solid var(--line);border-radius:10px;padding:20px 22px;box-shadow:6px 6px 0 var(--line)}
.callout>:first-child{margin-top:0}
.cards{display:grid;gap:22px;margin-top:28px}
.cards .callout{margin-top:0}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}.cards>:only-child{grid-column:1/-1}}
.alert{margin-top:24px;background:var(--red);color:var(--on-red);border:2.5px solid var(--line);border-radius:10px;padding:20px 22px;box-shadow:6px 6px 0 var(--line)}
.alert>:first-child{margin-top:0}
.alert a{color:inherit;text-decoration-color:currentColor}
.caps{text-transform:uppercase;font-size:.9em;letter-spacing:.02em}
.toc{margin-top:28px;border:2.5px solid var(--line);border-radius:10px;padding:18px 22px;background:var(--card)}
.toc ol{margin:0;columns:2 240px;column-gap:32px}
.toc li{break-inside:avoid}
.tablewrap{overflow-x:auto;margin-top:20px;border:2.5px solid var(--line);border-radius:10px;background:var(--card)}
.doc table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.45}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1.5px solid color-mix(in srgb,var(--line) 30%,transparent)}
.doc tr:last-child td{border-bottom:0}
.doc th{font:600 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;background:var(--paper-2)}
.doc .faq details p,.doc .faq details ul{margin-top:0;padding-bottom:20px}

/* footer platform links */
.foot-get{line-height:1.7;font-size:15px;color:#C4C9D6}
.foot-get b{margin-right:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:#F2B94A}
.foot-get a{color:#F5EBD6;text-decoration:none;border-bottom:1.5px solid rgba(245,235,214,.4)}
.foot-get a:hover{color:#F2B94A;border-color:#F2B94A}
@media(min-width:860px){.foot-get{grid-column:1/-1}}

/* 404 */
.lost{min-height:62vh;display:grid;align-content:center;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.lost h1{font:900 clamp(72px,14vw,180px)/.85 var(--display);text-transform:uppercase;color:var(--red)}
.lost p{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:32em;margin-top:18px}
.lost .cta-row{margin-top:28px}

/* ---------- calling-first (handset motif, bigger ringing phone) ---------- */
.eyebrow::before{width:14px;height:14px;transform:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.8l3.1-.7 2.2 5-2.4 1.9a11.5 11.5 0 0 0 5.5 5.5l1.9-2.4 5 2.2-.7 3.1c-.3 1.3-1.5 2.2-2.8 2.1C10.4 19 5 13.6 4.5 5.6c-.1-1.3.8-2.5 2.1-2.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.8l3.1-.7 2.2 5-2.4 1.9a11.5 11.5 0 0 0 5.5 5.5l1.9-2.4 5 2.2-.7 3.1c-.3 1.3-1.5 2.2-2.8 2.1C10.4 19 5 13.6 4.5 5.6c-.1-1.3.8-2.5 2.1-2.8z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:559px){.hero h1{font-size:clamp(38px,12.2vw,84px)}.hero .eyebrow{font-size:12px;letter-spacing:.1em}}
.btn .ic{width:20px;height:20px;fill:currentColor;flex:none}
.hero{--ph-h:500px}
@media(min-width:560px){.hero{--ph-h:560px}}
@media(min-width:900px){.hero{--ph-h:clamp(430px,69svh,640px)}}
.phone::before,.phone::after{content:"";position:absolute;inset:-4% -8%;border-radius:6.4em;border:.32em solid var(--red);opacity:0;z-index:-1;animation:halo 2.6s ease-out infinite;pointer-events:none}
.phone::after{animation-delay:1.3s}
@keyframes halo{0%{transform:scale(.92);opacity:.55}100%{transform:scale(1.18);opacity:0}}

.callsec{background:var(--navy);color:var(--on-navy);padding-top:clamp(56px,7vw,96px)}
.callsec .eyebrow{color:var(--gold)}.callsec .eyebrow::before{background:var(--gold)}
.calling-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px}
.callwave{width:min(100%,320px);height:60px;fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ccards{display:grid;gap:18px;margin-top:clamp(32px,4vw,52px)}
@media(min-width:700px){.ccards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.ccards{grid-template-columns:repeat(4,1fr)}}
.ccard{background:var(--paper);color:var(--ink);border:2.5px solid var(--on-navy);border-radius:12px;padding:18px 18px 24px;display:flex;flex-direction:column;gap:10px}
.ccard h3{font:900 clamp(26px,2.3vw,32px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:8px}
.ccard p{color:var(--ink-2);font-size:16.5px}
.cv{height:196px;border-radius:9px;background:linear-gradient(170deg,#1B315F,#0C1730 75%);color:#F5EBD6;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;font-size:14px}
.cv svg{width:18px;height:18px;fill:currentColor}
.ringbar{display:flex;align-items:center;gap:10px;background:rgba(245,235,214,.12);border-radius:14px;padding:10px 12px}
.ringbar.ghost{opacity:.45;transform:scale(.94)}
.ringbar .av{width:34px;height:34px;border-radius:50%;background:#F2B94A;color:#14233F;display:grid;place-items:center;font:900 16px/1 var(--display);flex:none}
.ringbar .who{flex:1;font-weight:600;line-height:1.15;min-width:0}
.ringbar small{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#F2B94A}
.rb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.rb-dec{background:#D8452A}.rb-dec svg{transform:rotate(135deg)}
.rb-acc{background:#2E9C6B}
.rb-acc::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #2E9C6B;animation:ring 2.2s ease-out infinite}
.rb svg{width:16px;height:16px;fill:#fff}
.cv-dial{align-items:center;gap:8px}
.dial-num{font:900 22px/1 var(--display);letter-spacing:.03em;color:#F2B94A}
.keys{display:grid;grid-template-columns:repeat(3,30px);gap:5px 14px}
.keys i{font:600 14px/30px var(--body);font-style:normal;text-align:center;width:30px;height:30px;border-radius:50%;background:rgba(245,235,214,.12)}
.dial-go{width:34px;height:34px;border-radius:50%;background:#2E9C6B;display:grid;place-items:center}
.dial-go svg{fill:#fff;width:16px;height:16px}
.ic-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.ic-top span{display:flex;align-items:center;gap:6px}.ic-top b{width:8px;height:8px;border-radius:50%;background:#2E9C6B}
.ic-top time{font-variant-numeric:tabular-nums;font-weight:600}
.ic-name{font:900 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.ic-wave{display:flex;align-items:center;gap:4px;height:30px}
.ic-wave i{flex:1;background:#F2B94A;border-radius:2px;opacity:.85}
.ctrls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.ctrls span{display:grid;justify-items:center;gap:4px}
.ctrls svg{width:36px;height:36px;padding:9px;border-radius:50%;background:rgba(245,235,214,.12);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctrls .end svg{background:#D8452A;fill:#fff;stroke:none;transform:rotate(135deg)}
.cv-log ul{display:grid;gap:8px}
.cv-log li{display:flex;align-items:center;gap:10px;background:rgba(245,235,214,.08);border-radius:10px;padding:8px 10px}
.cv-log .dir{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none;background:rgba(46,156,107,.25);color:#7FD3AC}
.cv-log .dir.out{background:rgba(242,185,74,.22);color:#F2B94A}
.cv-log .dir.miss{background:rgba(216,69,42,.28);color:#FF9C85}
.cv-log .nm{flex:1;font-weight:600;line-height:1.15;min-width:0}
.cv-log small{display:block;font-size:11.5px;font-weight:500;opacity:.75}
.cv-log em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:#F2B94A;color:#14233F;padding:4px 7px;border-radius:99px}
.cv-log em.vmx{background:rgba(245,235,214,.16);color:#F5EBD6}
.ringbar .who,.ringbar small,.cv-log .nm,.cv-log small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ringbar{padding:9px 10px;gap:8px}
.ringbar small{font-size:10px;letter-spacing:.06em}
.cv-log li{gap:8px;padding:7px 9px}
.cv-log em{font-size:9.5px;padding:4px 6px;letter-spacing:.06em;flex:none}

/* features: texting panel */
@media(min-width:760px){.s12{grid-column:1/-1}.texting{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}.texting .art{margin-top:0;padding-top:0;flex:0 1 420px}}
.panel.texting{min-height:0}
.sms{display:grid;gap:8px;font-size:15px}
.sms p{padding:9px 13px;border-radius:14px 14px 14px 4px;background:rgba(245,235,214,.12);max-width:88%;opacity:1}
.sms .me{justify-self:end;border-radius:14px 14px 4px 14px;background:#F2B94A;color:#14233F}
.sms small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:2px}

/* pricing: call minutes lead */
.t-bot li.mins{font-size:19px;font-weight:500}
.t-bot li.mins b{font-weight:600}
.t-bot li.mins small{display:block;font-size:14.5px;color:var(--ink-2);margin-top:2px}

/* Google "Continue with Google" button slot (rendered by GIS in onetap.js) */
.gsi-slot{min-height:44px;width:300px;max-width:100%;display:flex;align-items:center;color-scheme:light}
.gsi-slot:not(.ready){visibility:hidden}
@media(max-width:559px){.gsi-slot{width:100%;justify-content:center}}

/* contrast fixes (surfaced once the scroll-reveal opacity states were removed) */
.panel p{opacity:1}
.final small{opacity:1}
.get-more em{opacity:1}
.sumcard .k{color:#A8341A}
.ringbar.ghost{opacity:1;background:rgba(245,235,214,.06)}
.ringbar.ghost .av{background:#5C6B8A;color:#F5EBD6}
.ringbar.ghost .who{color:#C4C9D6}