/* ===== 姿 (Sugata) — Design Tokens & LP styles ===== */
:root{
  --color-bg:          #FAF8F5;
  --color-bg-sub:      #EFEAE3;
  --color-text:        #1C1A17;
  --color-text-sub:    #6B6259;
  --color-accent:      #8B5E3C;
  --color-accent-dark: #5C3D26;
  --color-border:      #D9D2C7;
  --color-surface:     #FFFFFF;

  --font-serif: "Noto Serif JP", serif;
  --font-sans:  "Noto Sans JP", "Inter", sans-serif;

  --space-1:8px;  --space-2:16px; --space-3:24px; --space-4:32px;
  --space-6:48px; --space-8:64px; --space-12:96px; --space-16:128px; --space-20:160px;

  --radius:5px;
  --shadow-hover:0 4px 12px rgba(28,26,23,.12);
  --shadow-soft:0 2px 10px rgba(28,26,23,.06);
  --transition:.2s ease;

  --max-content:720px;
  --max-wide:1140px;

  /* tweakable */
  --section-pad:120px;   /* §spacing */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-sans); font-size:17px; line-height:1.8;
  letter-spacing:0; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-serif); font-weight:600; margin:0; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
a{color:inherit;}
img{display:block; max-width:100%;}
::selection{background:rgba(139,94,60,.18);}

.wrap{max-width:var(--max-content); margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:var(--max-wide); margin:0 auto; padding:0 24px;}

section{padding-top:var(--section-pad); padding-bottom:var(--section-pad);}
.bg-sub{background:var(--color-bg-sub);}

.eyebrow{
  font-size:12.5px; letter-spacing:.22em; text-transform:none;
  color:var(--color-accent); font-weight:600; margin-bottom:var(--space-3);
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--color-accent); display:inline-block;}

h1{font-size:clamp(30px,8.4vw,46px); line-height:1.42; letter-spacing:.02em;}
h2{font-size:clamp(25px,6.2vw,32px); line-height:1.4; letter-spacing:.02em;}
h3{font-size:20px; line-height:1.5; letter-spacing:.01em;}
.lead{color:var(--color-text-sub); font-size:16px; line-height:1.85;}
.note{color:var(--color-text-sub); font-size:14px; line-height:1.7;}

/* ---- Buttons ---- */
.btn{
  -webkit-appearance:none; appearance:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:16px; letter-spacing:.04em; font-weight:500;
  background:var(--color-accent); color:var(--color-bg);
  padding:16px 32px; border-radius:var(--radius);
  transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; line-height:1;
}
.btn:hover{background:var(--color-accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-hover);}
.btn:active{transform:translateY(0);}
.btn .arr{transition:transform var(--transition);}
.btn:hover .arr{transform:translateX(3px);}

/* ---- Header ---- */
.hdr{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid transparent; transition:border-color var(--transition), background var(--transition);
}
.hdr.scrolled{border-color:var(--color-border);}
.hdr-in{max-width:var(--max-wide); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:baseline; gap:9px;}
.logo .kanji{font-family:var(--font-serif); font-size:26px; font-weight:600; letter-spacing:.04em;}
.logo .roman{font-size:11px; letter-spacing:.32em; color:var(--color-text-sub); text-transform:uppercase;}
.hdr .btn-sm{padding:10px 20px; min-height:0; font-size:13.5px;}
.hdr-cat{display:none;}

/* ---- Hero ---- */
.hero{padding-top:56px;}
.hero .badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.04em; white-space:nowrap;
  color:var(--color-text-sub); border:1px solid var(--color-border); background:var(--color-surface);
  padding:7px 14px; border-radius:999px; margin-bottom:var(--space-3);
}
.hero .badge .dot{width:6px; height:6px; border-radius:50%; background:var(--color-accent);}
.hero h1 .l2{color:var(--color-text-sub);} /* "退化" line — quieter */
.hero .sub{margin-top:var(--space-3); max-width:34em;}
.hero .cta-row{margin-top:var(--space-6); display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.hero .micro{font-size:13px; color:var(--color-text-sub);}
.hero .micro .micro-rel{display:block; margin-bottom:5px; font-size:12.5px; letter-spacing:.04em; color:var(--color-text); font-weight:600;}

/* phone mock — real app screenshot inside a device frame */
.phone{
  width:268px; max-width:100%; position:relative;
  background:linear-gradient(150deg,#2a251e,#141109 55%,#221d16);
  border-radius:44px; padding:8px;
  box-shadow:0 30px 70px -26px rgba(28,26,23,.5), 0 8px 22px -10px rgba(28,26,23,.28);
}
.phone img{width:100%; height:auto; display:block; border-radius:37px;}
.phone.phone-sm{width:248px;}
.feat-shot{width:100%; display:flex; justify-content:center; align-self:center;}
.phone-screen{
  width:100%; height:100%; background:var(--color-bg); border-radius:30px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
.phone-island{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:74px; height:20px; background:#15130F; border-radius:999px; z-index:3;}
.app-status{display:flex; justify-content:space-between; align-items:center; padding:11px 18px 4px; font-size:11px; color:var(--color-text-sub); font-variant-numeric:tabular-nums;}
.app-top{padding:10px 18px 6px;}
.app-top .d{font-size:11px; letter-spacing:.16em; color:var(--color-text-sub);}
.app-top .t{font-family:var(--font-serif); font-size:16px; margin-top:2px;}
.app-stage{flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:4px 0;}
.app-stage::after{content:""; position:absolute; left:50%; bottom:18%; transform:translateX(-50%); width:120px; height:14px; background:radial-gradient(ellipse,rgba(28,26,23,.12),transparent 70%); border-radius:50%;}
.app-stage img{height:62%; width:auto; image-rendering:pixelated; position:relative; z-index:1;}
.app-card{margin:0 14px 14px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:12px 14px;}
.app-card .ttl{font-size:11px; letter-spacing:.14em; color:var(--color-text-sub); margin-bottom:8px;}
.app-task{display:flex; align-items:center; gap:10px; font-size:13px; padding:5px 0;}
.app-task .chk{width:18px; height:18px; border-radius:5px; border:1.5px solid var(--color-border); flex:none; display:flex; align-items:center; justify-content:center;}
.app-task .chk.on{background:var(--color-accent); border-color:var(--color-accent);}
.app-task .chk.on::after{content:""; width:5px; height:9px; border:solid var(--color-bg); border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-1px);}
.app-task.done span{color:var(--color-text-sub); text-decoration:line-through;}
.app-tap{margin-top:6px; text-align:center; font-size:11px; color:var(--color-bg); background:var(--color-accent); border-radius:7px; padding:9px;}

/* ---- generic block ---- */
.block-head{margin-bottom:var(--space-6);}
.center{text-align:center;}
.center .eyebrow{justify-content:center;}
.center .eyebrow::before{display:none;}

/* §2 pain list */
.pain-list{display:flex; flex-direction:column; gap:2px; margin-top:var(--space-4);}
.pain-item{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--color-border); align-items:flex-start;}
.pain-item:first-child{border-top:1px solid var(--color-border);}
.pain-item .mk{font-family:var(--font-serif); color:var(--color-accent); font-size:15px; flex:none; width:24px; opacity:.7;}
.pain-item p{font-size:16px;}
.pain-close{margin-top:var(--space-6); font-family:var(--font-serif); font-size:clamp(20px,5vw,24px); line-height:1.5;}
.pain-close b{color:var(--color-accent); font-weight:600;}

/* broken streak mini ui */
.streak{margin-top:var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:20px; max-width:340px;}
.streak .cap{font-size:11px; letter-spacing:.14em; color:var(--color-text-sub); margin-bottom:14px;}
.streak-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:7px;}
.streak-grid i{aspect-ratio:1; border-radius:4px; background:var(--color-bg-sub); border:1px solid var(--color-border);}
.streak-grid i.on{background:var(--color-accent); border-color:var(--color-accent); opacity:.85;}
.streak-grid i.miss{background:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--color-border) 3px,var(--color-border) 4px);}
.streak .lbl{display:flex; justify-content:space-between; margin-top:14px; font-size:12px; color:var(--color-text-sub);}

/* ---- solution feature rows (§3,§4) ---- */
.feat{display:flex; flex-direction:column; gap:var(--space-6); align-items:flex-start;}
.feat .mini-phone{width:230px; align-self:center;}

/* notification mock */
.mock{background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft); width:100%; max-width:330px;}
.mock-head{padding:14px 16px; border-bottom:1px solid var(--color-border); font-size:11px; letter-spacing:.14em; color:var(--color-text-sub); display:flex; justify-content:space-between; white-space:nowrap;}
.mock-body{padding:16px;}
.notif{display:flex; gap:12px; align-items:flex-start; background:var(--color-bg); border:1px solid var(--color-border); border-radius:10px; padding:13px;}
.notif .ic{width:34px; height:34px; border-radius:8px; background:var(--color-accent); color:var(--color-bg); flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:17px;}
.notif .nm{font-size:13px;}
.notif .nm b{font-weight:600;}
.notif .nt{font-size:11px; color:var(--color-text-sub);}
.notif-time{font-size:10px; color:var(--color-text-sub); margin-left:auto;}
.menu-list{display:flex; flex-direction:column; gap:8px;}
.menu-row{display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-bg); font-size:14px;}
.menu-row .rep{margin-left:auto; font-size:12px; color:var(--color-text-sub); font-variant-numeric:tabular-nums; white-space:nowrap;}
.menu-row .bt{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--color-border); flex:none;}

/* ---- §5 interactive ---- */
.morph{background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:28px 24px 26px; margin-top:var(--space-6); box-shadow:var(--shadow-soft);}
.morph-stage{position:relative; height:300px; display:flex; align-items:flex-end; justify-content:center;}
.morph-stage::after{content:""; position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:150px; height:16px; background:radial-gradient(ellipse,rgba(28,26,23,.13),transparent 70%); border-radius:50%;}
.morph-stage .layer{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); transform-origin:bottom center; height:280px; width:auto; image-rendering:auto; transition:opacity .15s linear;}
.morph-state{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.morph-state .tag{font-family:var(--font-serif); font-size:15px; transition:color .15s, opacity .15s;}
.morph-state .tag.muted{color:var(--color-text-sub); opacity:.5;}
.morph-state .tag.active{color:var(--color-accent);}
.slider-wrap{margin-top:18px;}
.slider-wrap .sl-label{display:flex; justify-content:space-between; font-size:12px; color:var(--color-text-sub); margin-bottom:10px; letter-spacing:.02em;}
.sl-ticks{display:flex; justify-content:space-between; margin-top:12px;}
.sl-ticks span{font-size:11.5px; color:var(--color-text-sub); letter-spacing:.03em; transition:color .15s ease;}
.sl-ticks span.on{color:var(--color-accent); font-weight:600;}
input[type=range].sl{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:var(--color-border); outline:none; cursor:pointer;
}
input[type=range].sl::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--color-accent); border:3px solid var(--color-bg); box-shadow:0 1px 5px rgba(28,26,23,.25); cursor:grab;}
input[type=range].sl::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--color-accent); border:3px solid var(--color-bg); cursor:grab;}
.morph-read{text-align:center; margin-top:16px; min-height:44px;}
.morph-read .big{font-family:var(--font-serif); font-size:18px;}
.morph-read .sm{font-size:13px; color:var(--color-text-sub); margin-top:3px;}
.recover{margin-top:var(--space-4); text-align:center; font-size:14px; color:var(--color-text-sub);}
.recover b{color:var(--color-accent); font-weight:500;}

/* body-select chips (§5) */
.bselect{display:flex; gap:10px; margin-top:var(--space-4); justify-content:center; flex-wrap:wrap;}
.bselect .chip{border:1px solid var(--color-border); background:var(--color-surface); border-radius:999px; padding:9px 16px; font-size:13px; color:var(--color-text-sub); display:flex; align-items:center; gap:7px;}
.bselect .chip.sel{border-color:var(--color-accent); color:var(--color-accent);}
.bselect .chip .d{width:7px;height:7px;border-radius:50%;border:1px solid currentColor;}
.bselect .chip.sel .d{background:var(--color-accent);border-color:var(--color-accent);}

/* ---- §6 final cta ---- */
.final{text-align:center;}
.final h2{margin-bottom:var(--space-3);}
.benefits{display:flex; flex-direction:column; gap:12px; max-width:440px; margin:var(--space-6) auto var(--space-2); text-align:left;}
.benefit{display:flex; gap:14px; align-items:flex-start; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:16px 18px;}
.benefit .n{font-family:var(--font-serif); color:var(--color-accent); font-size:18px; flex:none; line-height:1.3;}
.benefit .bt{font-weight:600; font-size:15px; margin-bottom:2px;}
.benefit .bd{font-size:13.5px; color:var(--color-text-sub); line-height:1.7;}

/* ---- form ---- */
.form{max-width:420px; margin:var(--space-6) auto 0;}
.form-row{display:flex; gap:10px;}
.form input[type=email]{
  flex:1; font-family:var(--font-sans); font-size:16px; color:var(--color-text);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:14px 16px; transition:border-color var(--transition); min-height:52px; width:100%;
}
.form input[type=email]::placeholder{color:var(--color-text-sub);}
.form input[type=email]:focus{outline:none; border-color:var(--color-accent);}
.form .btn{flex:none;}
/* メール入力欄と同じ見た目の単一行テキスト入力 */
.req{
  display:block; width:100%; box-sizing:border-box;
  font-family:var(--font-sans); font-size:16px; color:var(--color-text);
  background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:14px 16px; transition:border-color var(--transition); min-height:52px;
}
.req::placeholder{color:var(--color-text-sub);}
.req:focus{outline:none; border-color:var(--color-accent);}
.form .consent{margin-top:14px; font-size:12.5px; color:var(--color-text-sub); line-height:1.7;}
.form .consent a{color:var(--color-accent); text-underline-offset:2px;}
.form .freq{margin-top:6px;}
.form-err{color:var(--color-accent-dark); font-size:13px; margin-top:8px; min-height:0;}

/* thanks state */
.thanks{max-width:440px; margin:var(--space-6) auto 0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:30px 26px; text-align:center; animation:fade .4s ease;}
@keyframes fade{from{transform:translateY(8px);} to{transform:none;}}
.thanks .ok{width:48px; height:48px; border-radius:50%; background:var(--color-accent); margin:0 auto 16px; display:flex; align-items:center; justify-content:center;}
.thanks .ok::after{content:""; width:11px; height:20px; border:solid var(--color-bg); border-width:0 3px 3px 0; transform:rotate(45deg) translateY(-2px);}
.thanks h3{margin-bottom:8px;}
.thanks p{font-size:14px; color:var(--color-text-sub);}

/* 登録後の任意「要望」入力（thanks カード内・アコーディオン的に出現） */
.followup{margin-top:22px; padding-top:22px; border-top:1px solid var(--color-border); text-align:left; animation:fade .4s ease;}
.followup-label{display:block; font-size:13.5px; font-weight:600; color:var(--color-text); margin-bottom:10px;}
.followup .btn-followup{margin-top:12px; width:100%;}
.followup-done{font-size:14px; color:var(--color-text-sub); margin-top:18px; padding-top:18px; border-top:1px solid var(--color-border); text-align:left;}

/* ---- sticky mobile cta ---- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--color-border);
  transform:translateY(120%); transition:transform .3s ease; pointer-events:none;
}
.sticky-cta.show{transform:none; pointer-events:auto;}
.sticky-cta .btn{width:100%;}

/* ---- footer ---- */
.ftr{background:var(--color-bg-sub); border-top:1px solid var(--color-border); padding:56px 0 80px;}
.ftr .logo .kanji{font-size:22px;}
.ftr-links{display:flex; flex-wrap:wrap; gap:18px 24px; margin-top:var(--space-3); font-size:13px;}
.ftr-links a{color:var(--color-text-sub); text-decoration:none; text-underline-offset:2px;}
.ftr-links a:hover{color:var(--color-accent); text-decoration:underline;}
.ftr .org{margin-top:var(--space-4); font-size:12px; color:var(--color-text-sub); line-height:1.8;}
.ftr .cr{margin-top:var(--space-3); font-size:12px; color:var(--color-text-sub);}

/* ---- legal modal (popup) ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(28,26,23,.42); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:overlayIn .2s ease;
}
@media(min-width:600px){ .modal-overlay{align-items:center; padding:32px;} }
@keyframes overlayIn{from{opacity:0;} to{opacity:1;}}
.modal{
  background:var(--color-bg); width:100%; max-width:660px; max-height:90vh;
  border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -10px 50px -10px rgba(28,26,23,.4); animation:modalUp .3s cubic-bezier(.22,.61,.36,1);
}
@media(min-width:600px){ .modal{border-radius:16px; max-height:84vh; box-shadow:0 30px 80px -20px rgba(28,26,23,.5);} }
@keyframes modalUp{from{transform:translateY(28px); opacity:.5;} to{transform:none; opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 16px; border-bottom:1px solid var(--color-border); flex:none;}
.modal-tabs{display:flex; gap:2px;}
.modal-tabs button{
  font-family:var(--font-sans); font-size:13.5px; font-weight:500; color:var(--color-text-sub);
  background:none; border:none; cursor:pointer; padding:13px 14px; border-radius:8px;
  position:relative; transition:color var(--transition);
}
.modal-tabs button:hover{color:var(--color-text);}
.modal-tabs button.on{color:var(--color-accent);}
.modal-tabs button.on::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--color-accent); border-radius:2px;}
.modal-x{
  width:40px; height:40px; border-radius:50%; border:none; background:none; cursor:pointer;
  font-size:24px; line-height:1; color:var(--color-text-sub); flex:none;
  display:flex; align-items:center; justify-content:center; transition:background var(--transition), color var(--transition);
}
.modal-x:hover{background:var(--color-bg-sub); color:var(--color-text);}
.modal-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:30px 28px 40px; animation:fade .25s ease;}

.legal .eyebrow{margin-bottom:10px;}
.legal h2{font-size:24px; margin-bottom:16px; letter-spacing:.02em;}
.legal-intro{font-size:14.5px; color:var(--color-text-sub); line-height:1.9;}
.legal-secs{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:24px; counter-reset:none;}
.legal-secs h3{font-size:15.5px; margin-bottom:7px; letter-spacing:.01em;}
.legal-secs p{font-size:14px; color:var(--color-text-sub); line-height:1.9;}
.legal a{color:var(--color-accent); text-underline-offset:2px;}
.legal-date{margin-top:28px; padding-top:18px; border-top:1px solid var(--color-border); font-size:13px; color:var(--color-text-sub);}
.legal-meta{list-style:none; margin:4px 0 0; padding:0;}
.legal-meta li{display:flex; flex-direction:column; gap:5px; padding:18px 0; border-bottom:1px solid var(--color-border);}
.legal-meta li:first-child{border-top:1px solid var(--color-border);}
.legal-meta .k{font-size:11.5px; letter-spacing:.16em; color:var(--color-text-sub);}
.legal-meta .v{font-size:15px; color:var(--color-text); line-height:1.7;}
.legal-note{margin-top:24px; padding:15px 17px; background:var(--color-bg-sub); border-radius:10px; font-size:13px; color:var(--color-text-sub); line-height:1.85;}

/* reveal — opacity NEVER animated, so content is always visible even if the
   CSS timeline is frozen; only a subtle transform rise plays as enhancement. */
.reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  .reveal.in{animation:revealUp .6s cubic-bezier(.22,.61,.36,1) both;}
}
@keyframes revealUp{from{transform:translateY(14px);} to{transform:none;}}
@media (prefers-reduced-motion:reduce){.morph-stage .layer{transition:none;}}

/* ===== responsive: tablet / desktop ===== */
@media(min-width:768px){
  body{font-size:17px;}
  .hdr-cat{display:block; font-size:12px; color:var(--color-text-sub); letter-spacing:.04em;}
  .hero{padding-top:72px;}
  .hero-grid{display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:center;}
  .hero .cta-row{align-items:flex-start;}
  .phone{width:288px;}
  .feat{flex-direction:row; gap:64px; align-items:center;}
  .feat .feat-text{flex:1;}
  .feat.rev{flex-direction:row-reverse;}
  .feat .mini-phone{align-self:auto;}
  .feat .feat-shot{width:auto; align-self:auto; flex:none;}
  .pain-item p{font-size:17px;}
  .benefits{flex-direction:column;}
}
@media(min-width:1024px){
  .hero-grid{grid-template-columns:1fr 340px; gap:80px;}
  .phone{width:300px;}
}

/* hero layout variants (tweak: heroLayout) */
[data-hero="centered"] .hero-grid{grid-template-columns:1fr; text-align:center; justify-items:center;}
[data-hero="centered"] .hero .eyebrow,[data-hero="centered"] .hero .cta-row{justify-content:center; align-items:center;}
[data-hero="centered"] .hero .eyebrow::before{display:none;}
[data-hero="centered"] .hero .sub{margin-left:auto; margin-right:auto;}
[data-hero="centered"] .phone{margin-top:48px;}
[data-hero="centered"] .hero-phone{order:2;}

[data-hero="phone-left"] .hero-grid{grid-template-columns:300px 1fr;}
[data-hero="phone-left"] .hero-phone{order:-1;}
@media(max-width:767px){
  [data-hero] .hero-grid{display:flex; flex-direction:column;}
  [data-hero="phone-left"] .hero-phone,[data-hero="centered"] .hero-phone{order:0;}
  .hero-phone{margin-top:40px;}
}