/* Rich black typography, focused blue actions and angled product cards. */
.public-page {
  color:var(--ink); background:#fff;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
.public-page > main { flex:1 0 auto; min-width:0; }
.public-page > .site-header,.public-page > .site-footer { flex-shrink:0; margin-block:0; }
.public-page h1,.public-page h2,.public-page h3 { color:var(--ink); font-weight:600; text-wrap:balance; }
.container { width:min(1120px,calc(100% - 80px)); }

.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  width:min(1200px,100%); margin:auto; padding:24px 40px;
}
.site-header .brand img { width:96px; height:36px; }
.site-header nav,.header-actions { display:flex; align-items:center; gap:28px; font-size:14px; }
.site-header nav { color:var(--text-secondary); }
.login-link { color:var(--ink); font-weight:550; }
.site-header nav a:hover,.login-link:hover { color:var(--action); }
.header-actions { gap:22px; }
.button.subtle { background:#fff; border-color:#dce0e7; color:var(--ink); font-weight:550; }
.button.subtle:hover { background:#f7f8fa; border-color:#b9c1cc; }

.hero {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center;
  gap:64px; padding-top:76px; padding-bottom:88px;
}
.hero h1 {
  margin:0 0 22px; font-size:clamp(42px,4.2vw,58px); font-weight:600;
  line-height:1.14; letter-spacing:-.045em;
}
.hero h1 span { color:inherit; font-weight:inherit; }
.hero-description { max-width:460px; font-size:17px; line-height:1.75; color:var(--text-secondary); }
.shorten-form {
  display:flex; align-items:center; gap:7px; margin-top:28px; padding:6px;
  border:1px solid #dce4ef; border-radius:11px; background:#fff; box-shadow:0 3px 12px #20344d04;
}
.shorten-form .button { gap:9px; padding:12px 17px; font-size:14px; font-weight:550; border-radius:7px; }
.shorten-form .button .icon { width:17px; height:17px; }
.url-input { display:flex; flex:1; align-items:center; gap:10px; min-width:0; padding-left:11px; color:#8b99ac; }
.url-input input { height:44px; border:0; border-radius:5px; padding:8px 0; font-size:14px; background:transparent; }
.url-input input::placeholder { color:var(--text-muted); }
.url-input input:focus-visible { outline-offset:1px; }
.pointer-input .url-input input:focus { outline:none; box-shadow:none; }
.form-hint { margin-top:12px; font-size:12px; line-height:1.6; color:var(--text-muted); }

.hero-visual { min-width:0; margin:10px 0 0; padding:14px 12px 0; }
.link-example {
  position:relative; z-index:1; overflow:hidden; border:1px solid #dde3ec; border-radius:14px;
  background:#fff; box-shadow:0 18px 42px -14px #20242e26,0 3px 10px #20242e05;
  transform:rotate(-2.5deg); transform-origin:center;
}
.example-top { display:flex; align-items:center; gap:10px; padding:23px 23px 0; font-size:13px; color:var(--ink); font-weight:500; }
.example-icon {
  display:inline-flex; align-items:center; justify-content:center; width:33px; height:33px;
  flex-shrink:0; border-radius:8px; color:var(--action); background:#eef4ff;
}
.example-icon .icon { width:18px; height:18px; }
.example-top .badge { margin-left:auto; font-size:12px; }
.example-address { padding:24px 23px 0; color:var(--ink); font-size:30px; font-weight:600; letter-spacing:-.035em; overflow-wrap:anywhere; }
.example-address span { color:var(--action); margin:0 3px; }
.example-destination { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 23px 25px; font-size:12px; color:var(--text-muted); }
.example-destination span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.example-destination .icon { width:14px; height:14px; color:#a0adbf; }
.example-bottom {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:15px 23px; border-top:1px solid #eef1f6; background:#fcfdff; color:var(--text-muted); font-size:12px;
}
.example-bottom>span { display:inline-flex; align-items:center; gap:6px; }
.example-bottom .icon { width:14px; height:14px; }
.destination-example {
  position:relative; z-index:2; display:flex; align-items:center; gap:11px;
  width:calc(100% - 30px); margin:17px 0 0 auto; padding:17px;
  border:1px solid #e0e5ed; border-radius:11px; background:#fff;
  box-shadow:0 10px 28px -10px #20242e22; transform:rotate(2deg);
}
.destination-example>.icon { color:var(--ink); width:18px; height:18px; }
.destination-example>div { min-width:0; }
.destination-example strong { display:block; color:var(--ink); font-size:13px; font-weight:550; line-height:1.5; }
.destination-example div span { display:block; margin-top:3px; color:var(--text-secondary); font-size:12px; line-height:1.5; }
.destination-check { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; flex-shrink:0; width:25px; height:25px; border-radius:50%; background:#edf7f1; color:#26835b; }
.destination-check .icon { width:15px; height:15px; }
.hero-visual figcaption { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:24px; font-size:12px; line-height:1.6; color:var(--text-muted); }

.features { border-top:1px solid #ecf0f5; padding-top:55px; padding-bottom:62px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 30px; margin-bottom:34px; }
.section-heading h2,.plan-description h2 { font-size:29px; line-height:1.25; letter-spacing:-.035em; }
.section-heading p { font-size:14px; color:var(--text-muted); }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px 64px; }
.feature-heading { display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.feature-heading .icon { color:#556174; width:19px; height:19px; }
.feature-heading h3,.step-heading h3 { font-size:17px; font-weight:600; line-height:1.4; letter-spacing:-.015em; }
.feature-grid p { padding-left:31px; font-size:16px; line-height:1.75; color:var(--text-secondary); }

.how-section { border-top:1px solid #ecf0f5; padding-top:49px; padding-bottom:58px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; list-style:none; margin:0; padding:0; }
.step-heading { display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.step-heading>span {
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  flex-shrink:0; border:1px solid #e7ecf3; border-radius:50%; color:#8c9cb1; font-size:12px;
}
.steps p { padding-left:38px; font-size:16px; line-height:1.7; color:var(--text-secondary); }

.plans-section {
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px;
  padding:37px 40px; margin-bottom:55px; background:#f8fafd; border:1px solid #eef2f7; border-radius:14px;
}
.plan-description p { max-width:390px; margin-top:15px; font-size:16px; line-height:1.75; color:var(--text-secondary); }
.plan-description .text-link { margin-top:22px; color:var(--action); font-weight:500; }
.public-plan-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.public-plan-heading h3 { font-size:18px; font-weight:600; }
.public-plan .price { color:var(--ink); font-size:31px; font-weight:550; letter-spacing:-.025em; }
.plan-inclusions { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin:20px 0 0; padding:0; list-style:none; }
.plan-inclusions li { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--text-secondary); }
.plan-inclusions .icon { width:15px; height:15px; color:#819ab9; }
.pro-teaser { margin-top:22px; padding-top:17px; border-top:1px solid #e7edf5; font-size:12px; line-height:1.7; color:var(--text-muted); }
.site-footer {
  display:flex; align-items:center; justify-content:space-between; gap:25px;
  width:min(1120px,calc(100% - 80px)); margin:auto; padding:25px 0;
  border-top:1px solid #ecf0f5; color:var(--text-muted); font-size:12px;
}
.site-footer .brand img { width:67px; height:25px; }
.site-footer>span:nth-child(2) { margin-right:auto; }

@media(max-width:1100px) {
  .hero { gap:35px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
  .hero h1 { font-size:48px; }
  .example-top { flex-wrap:wrap; padding:19px 19px 0; gap:8px; }
  .example-address { padding-left:19px; padding-right:19px; }
  .example-destination,.example-bottom { padding-left:19px; padding-right:19px; }
  .plans-section { gap:40px; padding:30px; }
  .plan-inclusions { grid-template-columns:1fr; gap:9px; }
}
@media(max-width:900px) {
  .site-header nav { gap:20px; }
  .hero { grid-template-columns:1fr; gap:38px; max-width:650px; padding-top:54px; padding-bottom:57px; }
  .hero-copy { text-align:center; }
  .hero-description { margin-inline:auto; }
  .hero h1 { font-size:48px; }
  .hero-visual { width:100%; max-width:475px; margin:0 auto; }
  .example-top { padding:20px 22px 0; }
  .example-address { padding:19px 22px 0; font-size:28px; }
  .example-destination { padding:8px 22px 21px; }
  .example-bottom { padding:13px 22px; }
  .hero-visual figcaption span:last-child { display:none; }
  .hero-visual figcaption { justify-content:center; margin-top:24px; }
  .feature-grid { column-gap:35px; }
  .steps { gap:25px; }
}
@media(max-width:700px) {
  .container { width:calc(100% - 40px); }
  .site-header { padding:20px; gap:20px; }
  .site-header nav { display:none; }
  .site-header .brand img { width:86px; height:32px; }
  .header-actions { gap:18px; }
  .hero { padding-top:39px; padding-bottom:41px; gap:30px; }
  .hero h1 { font-size:clamp(36px,8vw,44px); letter-spacing:-.04em; margin-bottom:18px; }
  .hero-description { max-width:390px; font-size:16px; line-height:1.7; }
  .shorten-form { margin-top:24px; }
  .shorten-form .button { padding:12px 13px; }
  .shorten-form .button .icon { display:none; }
  .url-input { gap:8px; padding-left:8px; }
  .url-input>.icon { width:18px; height:18px; }
  .form-hint { max-width:350px; margin:11px auto 0; }
  .hero-visual { max-width:410px; }
  .link-example { transform:rotate(-2deg); }
  .destination-example { transform:rotate(1.5deg); width:calc(100% - 20px); padding:14px; }
  .features,.how-section { padding-top:35px; padding-bottom:37px; }
  .section-heading { display:block; margin-bottom:26px; }
  .section-heading h2,.plan-description h2 { font-size:25px; text-align:left; }
  .section-heading p { margin-top:10px; line-height:1.7; }
  .feature-grid { grid-template-columns:1fr; gap:26px; }
  .feature-heading { margin-bottom:8px; }
  .steps { grid-template-columns:1fr; gap:23px; }
  .step-heading { margin-bottom:7px; }
  .plans-section { grid-template-columns:1fr; gap:26px; padding:26px; margin-bottom:34px; }
  .public-plan { padding-top:24px; border-top:1px solid #e6ecf4; }
  .plan-inclusions { grid-template-columns:1fr 1fr; gap:12px; }
  .site-footer { width:calc(100% - 40px); flex-wrap:wrap; gap:14px 20px; }
  .site-footer>span:nth-child(2) { flex-basis:calc(100% - 90px); font-size:12px; }
}
@media(max-width:390px) {
  .container { width:calc(100% - 32px); }
  .site-header { padding-inline:16px; }
  .header-actions { gap:14px; }
  .button.subtle { padding:9px 11px; }
  .shorten-form { flex-wrap:wrap; padding:7px; }
  .shorten-form .button { width:100%; }
  .url-input { flex-basis:100%; }
  .plan-inclusions { grid-template-columns:1fr; }
}

.site-mobile-nav{display:none}
@media(max-width:900px){.site-header{position:relative}.site-mobile-nav{display:block;margin-left:auto}.site-mobile-nav summary{font-size:13px;cursor:pointer;list-style:none;padding:8px;color:#5e6878}.site-mobile-nav summary::-webkit-details-marker{display:none}.site-mobile-nav[open]>nav{display:grid!important;position:absolute;top:calc(100% - 8px);right:20px;z-index:20;background:#fff;border:1px solid #e0e5ed;box-shadow:0 12px 35px #20305018;border-radius:12px;padding:12px;gap:0;min-width:200px}.site-mobile-nav nav a{padding:10px;font-size:14px}.site-header .header-actions{margin-left:8px;flex:none}}
@media(max-width:420px){.site-mobile-nav summary{font-size:12px;padding:5px}.site-header .header-actions .button{font-size:11px;padding:8px 10px}.site-header .header-actions .button .icon{display:none}.site-header .header-actions{gap:7px}.site-header .brand img{width:90px}}